一、什么是JavaScript语言？

JavaScript 是一门轻量级的脚本语言，是一种 对象模型 语言，也是一种嵌入式（embedded）语言；

JavaScript 的核心语法部分相当精简，也就是语言本身，只包括两个部分：
基本的语法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。
想要实现其他复杂的操作和效果，都要依靠宿主环境提供API，目前，已经嵌入 JavaScript 的宿主环境有多种，
最常见的环境就是 浏览器，另外还有服务器环境(操作系统)；

以浏览器为例，它提供的额外 API 可以分成三大类。

 

 

在接下来的课程中，会总体上的分为两个部分讲解：
1：JavaScript 核心语法
2：浏览器网页开发的API

 

 

 

 

 

 

JavaScript语言的历史:
http://javascript.ruanyifeng.com/introduction/history.html

1.1入门使用

script标签、外部引入

问题： script标签应该放置于页面的哪个位置呢？
答：理论上script标签可以放置于网页的任何位置，但是在实际项目开发中建议：
放在body最底下……

二、JavaScript基本语法

2.1 变量

变量是用来临时存储数值的容器，在使用过程中可以随时改变储存的值；

2.1.1 变量及变量值类型

变量的命名规则：
只能是 数字、字母、下划线、$，且数字不能开头；
使用var关键字声明变量；
如果不使用 var 则会污染全局变量，后面的作用域会详细讲解；

变量的数据类型：
1：回顾PHP
对象,null;数组，整形，资源，浮点，字符串，布尔；

2：JS中的数据类型
JavaScript 的数据类型，共有六种:
数值，字符串，布尔，null ,undefined,对象

2.1.2 检测值类型

typeof运算符可以返回一个值的数据类型；

 

 

2.1.3 null 和 undefined

为什么 null的类型也是object？
这是由于历史原因造成的。1995年JavaScript语言的第一版，当时，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），完全没考虑null，只把它当作object的一种特殊值，为了兼容以前的代码，后来就没法修改了。
这并不是说null就属于对象，本质上就是一个特殊值，表示“没有”

null与undefined都可以表示“没有”，含义非常相似；
相等运算符（==）甚至直接报告两者相等:

但是，JavaScript的值分成原始类型和合成类型两大类，Brendan Eich(JS作者)觉得表示”无”的值最好不是对象；
其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。
作者觉得，如果null自动转为0，很不容易发现错误。
于是又设计了一个undefined；
 

总结： 

1：宽松比较时，两者相等，都表示 空 、没有、无 等含义

2：undefined的出现情况：

 

3：获取一个不存在的对象时，值为null;例如：

 

4：null 的数据类型是Object ,undefined数据类型就是undefined;

5:null 是表示 ‘无’ 的对象，转为数值时是 0 ；

Undefined 是表示‘无’ 的原始值，转为数值时NaN；

2.2 运算符

2.2.1 算数运算符

2.2.2 比较运算符

<、>、 == 、=== 、>=、 <=、 != 、!==

2.2.3 逻辑运算符

取反运算符： !
且运算符： &&
或运算符： ||
三元运算符： ?:

其中，&& 和 || 运算的结果是：
决定整个表达式结果的子表达式的值；

 

2.3 流程结构

顺序结构：从上而下执行；

分支结构(选择结构)：

 

问题：if结构与switch结构到底有什么区别呢？
答：
if结构不仅可以判断固定值，还可以判断范围区间。
switch结构只能判断固定值情况。

循环结构

 

Continue :跳出当前循环，继续下次循环；

Break : 跳出整个循环

2.4 数组

2.4.1 数组的简单使用

数组是一组有序数据的集合，在内存中表现为一段连续的内存地址。
我们也可以简单的将数组理解为一个储物柜，标号从0开始；

 

JS数组的声明

多维数组

数组A中的元素值是一个数组，则数组A为多位数组；

获取数组元素
基本语法： 数组名[元素标号];

 

数组的遍历操作

数组遍历最常用的就是使用 for 循环，根据循环的语法，在循环之前，我们必须先得到数组的长度；

for…in 循环 遍历数组
for...in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。

 

2.4.2 数组对象的属性及方法

length属性： 返回数组的成员数量。

数组对象的常用方法

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组

join方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

concat方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

reverse方法用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组

slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。
它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。
如果省略第二个参数，则一直返回到原数组的最后一个成员。

splice方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，
返回值是被删除的元素。注意，该方法会改变原数组。
splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。
如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

forEach方法用于遍历数组的所有成员，执行某种操作
forEach方法的参数是一个函数，数组的所有成员会依次执行该函数，
它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。

三、JavaScript函数

 

3.1 概述

函数就是一段可以反复调用的代码块。
函数还能接受输入的参数，不同的参数会返回不同的值。

函数到底有什么用？

其实就是将很多重复的代码写到一个地方，在需要执行代码的地方，直接调用函数即可；
节省了我们代码的数量，使代码可以重用；
其次，也会使我们的程序代码，具有结构化，模块化；
如果程序要求发生变化，我们只需要修改一次函数即可；

3.2 基本使用

3.2.1 函数的声明及调用

 

计算 1+2+3+4+5+6+……+100；

 

3.2.2 函数的参数及返回值

在函数中，参数一共有两种形式：函数的形参、函数的实参
形参：在函数定义时所指定的参数，就称之为“形参”。
实参：在函数调用时所指定的参数，就称之为“实参”。

函数体内部的return语句，表示将数据返回给调用者；

 

函数中的arguments对象

 

3.2.3 自调用匿名函数

基本语法：（function(){}）();

为什么要有自调用匿名函数？
答：在之前的程序开发中，我们都是通过有名函数来实现程序封装的，但是有名函数有一个缺点，可能在运行时会出现命名冲突。
如果在编写程序时，我们采用自调用匿名函数，则不会产生命名冲突问题，
所以很多框架jquery.js、ext.js等等都是采用自调用匿名函数进行封装的。

3.3 作用域

3.3.1 定义

前面讲过，var 关键字就是在声明变量，如果不使用 var 则会污染全局变量；
为什么会污染全局变量呢？
这是因为JS中变量作用域的问题而导致的；
作用域指的是变量存在的范围；
Javascript有两种作用域：
一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；变量也被称为全局变量
另一种是函数作用域，变量只在函数内部存在。称为局部变量；

在函数内部，使用var声明的变量只能在函数内部使用，是局部变量，而在其他区块中声明，一律都是全局变量；

此时，仍然没有解释，为什么不适用var会污染全局变量呢？

在函数内部定义的变量，外部无法读取，称为 局部变量

 

3.3.2 变量提升

 

3.3.3 函数本身的作用域

函数本身也是一个值，也有自己的作用域。
它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。
总之，函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域

 

四、词法分析

4.1 JS代码的编译以执行

 

同样出现错误，为什么两段代码的执行结果是不一样的？

代码在运行时，共分为两个阶段：编译阶段、执行阶段
编译阶段：声明变量、声明函数（display）、语法检查（报错）等……
执行阶段：变量的赋值、函数的调用、代码的执行等都是发生在执行阶段
编译阶段出错无法进入执行阶段
因此，第二段代码中，没有任何输出；

4.2 script代码段

我们知道，script标签是HTML的基本标签，所有的JS代码都要写在script标签的内部。
在一个HTML页面中也可以同时拥有多个script标签。

在上述HTML代码的script标签后，加入另一个script标签，保留原来报错的代码

 

运行以上代码，我们发现，前面的script代码段，不管是编译阶段错误还是执行阶段错误，
均不影响下面script代码段的执行；
这又是为什么？
因为：
script代码段虽然在一个页面中，但是，
script代码段并不是一起执行的，而是分开解析与执行的。

1、JS解析引擎，从上而下读取第一个script代码段
2、放入内存
3、编译阶段：声明变量、声明函数（display）、语法检查（报错）
4、执行阶段：变量的赋值、函数的调用、代码的执行
5、在读取下一个script代码段
放入内存
编译阶段
执行阶段
…………

因此，前面script代码段中的JS不管有什么错误，都不会影响下面script代码段的编译执行；

代码段执行原理图

 

 

 

我是小咖

发个邀请：
如果你正好想学习php，可以与我一起交流，我的VX：feilueze333。下面资料免费赠送