JavaScript入门基础

84 阅读4分钟

JavaScript入门基础

概述

JavaScript是世界上最流行的脚本语言,是一种运行在浏览器中的解释型的编程语言,能够实现跨平台、跨浏览器。虽然只是十多天时间的产物,并且有很多的缺陷和陷阱,但也造就了JavaScript的灵活和强大。随着Node.js的兴起,JavaScript已经从单纯实现前端互动,发展到可以全栈实现整个应用。尤其是在移动互联网蓬勃发展以及应用追求极致用户体验的今天,JavaScript更是必须要重视和掌握的。

变量的声明

使用var关键字进行变量的声明,声明的同时也可以进行赋值。变量的声明只能有一次,但赋值可以有多次。如果只声明变量,但是变量没有被赋值,此时变量的值为undefined。

JavaScript变量的类型取决于右侧的对象。

样例代码:

var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';

变量的作用域

JavaScript没有块级作用域

java:

if(true) {
    int a = 1;
}
System.out.println(a); // 编译错误,超出作用域

javascript:

if(true){
    var a = 1;
}
console.log(a); // 输出1 ,JavaScript没有块级作用域

基本数据类型

Number类型

Number类型包含整数和浮点数(浮点数数值必须包含一个小数点,且小数点后面至少有一位数字)两种值。

String类型

单引号或双引号扩起来的字符集合。

Boolean类型

该类型只有两个值,true和false。

Undefined类型

只有一个值,即undefined值。使用var声明了变量,但未给变量初始化值,那么这个变量的值就是undefined。

Null类型

Null类型被看做空对象指针,Null类型也是空的对象引用。

三大引用类型

Object类型

我们看到的大多数类型值都是Object类型的实例,创建Object实例的方式有两种。

第一种是使用new操作符后跟Object构造函数,如下所示

var person = new Object();

person.name = "Micheal";

person.age = 24;

第二种方式是使用对象字面量表示法,如下所示

var person = {

  name : "Micheal",

  age : 24

};

alert(person.name);

Array类型

数组的每一项可以用来保存任何类型的数据,也就是说,可以用数组的第一个位置来保存字符串,第二个位置保存数值,第三个位置保存对象…另外,数组的大小是可以动态调整的。

创建数组的基本方式有两种

第一种是使用Array构造函数,如下所示

var colors = new Array("red","blue","yellow");

第二种是使用数组字面量表示法,如下所示

var colors = ["red","blue","yellow"];

Function类型

每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。函数通常是使用函数声明语法定义的,如下所示

function sum(num1,num2){

  return num1 + num2;

};

这和使用函数表达式定义函数的方式相差无几。

var sum = function (num1,num2){
  return num1 + num2;
};

var result = sum(5,8); alert(result);

typeof 操作符

由于js中的变量是弱类型的,所以它提供了一种检测当前变量的数据类型的方法,也就是typeof关键字。

typeof 123   //Number

typeof 'abc'  //String

typeof true //Boolean

typeof undefined //Undefined

typeof null //Object

typeof { } //Object

typeof [ ] //Object

js编写的位置

1.将JS代码编写到script标签中:
<script > 写这里</script>
2.还可以将JS代码编写到外部的js文件中,然后通过script标签来引入外部的文件
3.可以将JS代码编写到标签的指定属性中(不推荐使用)

样例代码:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <!--可以将JS代码编写到script标签中-->  
        <!--<script type="text/javascript">  

            alert("hello");  

        </script>-->  

        <!--  
            还可以将JS代码编写到外部的js文件中,然后通过script标签来引入外部的文件  
            将JS代码编写到外部文件中,可以在不同的页面中引入相同的JS代码,  
                方便后期的维护,并且写在外部文件中可以使用浏览器的缓存,加快访问速度提高用户体验  

            如果使用script来引入外部文件,则它就不能在编写任何的JS代码了  ,  
                如果还需要编写则需要创建一个新的script标签  
        -->  

        <script type="text/javascript" src="js/script.js"></script>  
        <script type="text/javascript">  
            alert("我是内部的JS代码");  
        </script>  
    </head>  
    <body>  


        <!-- 
            将JS代码编写到标签的属性中,属于结构与行为耦合,不方便后期的维护,不推荐使用 
        -->  

        <!-- 
            可以将JS代码编写到标签的指定属性中 
        -->  
        <button onclick="alert('点完的效果');">点这里</button>  

        <!-- 
            可以将JS代码编写到超链接的href中 
        -->  
        <a href="javascript:alert('第二个效果');">再点这里</a>  
        <br /><br />  

    </body>  
</html>

效果动态图:
在这里插入图片描述

js的三种输出方式

/*  
 控制浏览器弹出一个提示框  
 */  
alert("Hello JavaScript");  

/*  
  控制浏览器在页面中输出一个内容  
  document.write()向body中写一个内容  
 */  
document.write("牛哄哄的柯南");  

/*  
  向控制台输出一个内容  
  */  
console.log("Keafmd");

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/*  
			 控制浏览器弹出一个提示框  
			 */  
			alert("Hello JavaScript");  
			
			/*  
			  控制浏览器在页面中输出一个内容  
			  document.write()向body中写一个内容  
			 */  
			document.write("牛哄哄的柯南");  
			
			/*  
			  向控制台输出一个内容  
			  */  
			console.log("Keafmd");
		</script>
	</body>
</html>

效果截图:

浏览器弹出一个提示框↓

在这里插入图片描述

浏览器在页面中输出一个内容↓

在这里插入图片描述

向控制台输出一个内容↓
控制台调出步骤:网页右键-检查-选择Console

在这里插入图片描述
写作不易,如果看完对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

在这里插入图片描述

加油!

共同努力!

Keafmd