概述

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="https://juejin.cn/post/js/script.js"></script>  
        <script type="text/javascript">  
            alert("我是内部的JS代码");  
        </script>  
    </head>  
    <body>  


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

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

        <!-- 
            可以将JS代码编写到超链接的href中 
        -->  
        <a href="'第二个效果');">再点这里</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>


复制代码

效果截图：