# 01.javascript
一、JavaScript导读
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的 编程语言 。 虽然它是作为开发 Web 页面的 脚本语言 而出名，但是它也被用到了很多非 浏览器 环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如 函数 式编程）风格。 [1] JavaScript在1995年由 Netscape 公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。 因为Netscape与 Sun 合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。 但实际上它的语法风格与 Self 及 Scheme 较为接近。 [2] JavaScript的标准是 ECMAScript 。
1.2 javascript概述
1.数据可视化
数据可视化是当下大家所推崇的一种互动展示模式，而Javascript拥有ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js等多种可实现数据可视化效果的框架。
2.移动应用
PhoneGap将WebView带向了移动应用，同时也将JavaScript带向了移动应用。
3.服务端
因为V8的性能将JavaScript带到了一个新的高度，于是Node.js诞生了——前端、后台都可以用JavaScript，现在任何一个网页都离不开JavaScript。
4.全平台应用
一份代码构建移动、桌面、Web能够全平台应用，在Eletcron上运行Ionic，就意味着无限的可能性。
5.游戏
如果你对网页游戏仅仅停留在Flash的时代，认为只有Flash才能做出非常绚丽的游戏特效，那就错了。Javascript也可以做出华丽的特效！
6.VR
利用3D 游戏引擎，如Three.js，你也可以来创建一个 3D 世界。
7.硬件
Tessel可以直接在设备上运行JavaScript，连服务器都不需要，然后像做网络开发一样通过用IDE和库去开发它，上传新的固件只需一句tessel 推送指令。
8.操作系统
那么是否有可能仅使用 Node.js 创建一个操作系统呢？NodeOS了解一下，虽然它是用 Linux 内核来处理各种底层任务，比如硬件通讯什么的，但是除此之外，使用的都是 Node.js。
1.3 javascript的历史
- JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。
**图：布兰登·艾奇，JavaScript 创始人**
- 之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营销，蹭 Java 的热度。
- 同一时期，**微软**和 **Nombas**（一家名为 Nombas 的公司）也分别开发了 **JScript** 和 ScriptEase** 两种脚本语言，与 **JavaScript** 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。为了解决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了 ECMA-262** 标准（ECMAScript）。第二年，ISO/IEC（国际标准化组织及国际电工委员会）也采用了 ECMAScript 作为标准（即 ISO/IEC-16262）。
JavaScript与ECMAScript的关系：**
>
> 本质上都跟一门语言有关，一个是语言本身的名字，一个是语言的约束条件，后者是前者的规格，前者是后者的一种实现。
1.4 javascript能干什么
1.
1. 常见的网页效果【表单验证，轮播图......】
2. 实现应用级别的程序【http://naotu.baidu.com】
3. 实现统计效果【http://echarts.baidu.com/examples/】
4. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
5. 在线学编程【https://codecombat.163.com/play/】
6. js可以实现人工智能【面部识别】
7. ......
1.5 javscript的组成
| 组成部分 | 作用 |
| ---------- | ------------------------------------------------------------ |
| ECMAScript | 构成了JS的核心语法 |
| BOM | Browser Object Model【浏览器对象模型】，用来操作浏览器上的对象 |
| DOM | Document Object Model【文档对象模型】，用来操作网页中的元素 |
1. **`ECMAScript`**: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. **`BOM`** (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
- 比如： 弹出框、浏览器跳转、获取分辨率等
3. **`DOM`** (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
- 比如： 增加个 div，减少个 div，给div 换个位置等
> **`总结`**： **JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果**
## 二、javascript基本使用
### 2.1 JS 嵌入方式
在 HTML 中使用 JS 可以用以下几种方式实现：
- 行内式
- 内嵌式
- 外部引用 js 文件
行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。
```
<input type="button" value="Click Me!" onclick="alert('Hellow World')">
```
内嵌式，一般用于实现比较小的功能，代码不长的情况
```
<script> alert('Hello World'); </script>
外部JS文件，最常见的方式
```
<script src="my.js"></script>
```
2.2 JS 注释
```
// 单行注释
/* 多行注释 */
```
2.3 JS 输入输出语句
alter/prompt/confirm来源于window对象** alert(msg) // 浏览器弹出框 console.log(msg) // 浏览器控制台打印输出信息 prompt(info) // 浏览器弹出输入框，用户可以输入 confirm()
### 2.4 JS事件
- 标签的事件属性
### 2.5 查找 HTML DOM 元素
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作，改变 HTML 元素的内容。
- getElementById()
因为 id 元素是唯一的，就是为了在 js 中通过元素 id 来查找元素，document 是页面文档对象，getElementById 是 document 的方法，通过传递的参数（id字符串），是一个标签的id值。可以返回的该元素对象
```html
<div id="new">This is new Element</div>
<script>
// 页面文档从上往下加载，需要将 script 代码写在下边
var dom = document.getElementById('new');
// 显示id为new的对象中内容
console.log(dom);
// 可以打印我们返回的元素对象，更好的查看里边的属性和方法
console.dir(dom);
</script>
```
```html <button onclick = "alert('123')">点我</button> <button onclick = "a();">点我</button> a()====>函数 function a(){ } ``` ``` onclick // 鼠标点击左键 ondbclick // 鼠标双击 oncontextmenu // 鼠标点击右键 mousedown // 鼠标按键被按下 mouseup // 松开鼠标按键 onselect // 文本被选中 oncopy // 元素内容被复制 onmouseenter // 鼠标移动到事件监听的元素内（不区分子元素） onmouseover // 鼠标移动到有事件监听的元素或它的子元素内 onmouseleave // 鼠标离开元素外（不区分子元素） onmouseout // 鼠标离开元素，或它的子元素外 onfocus // 获得鼠标焦点(点击input输入框) onblur // 失去鼠标焦点（进入其他input输入框） onmousemove // 鼠标移动 onmouseup // 鼠标弹起 onmousedown // 鼠标按下 ```
## 三、ECMAScript
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 运算符
- 对象
### 3.1 变量
#### 3.1.1 定义
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。
#### 3.1.2 声明变量
Js 是一种弱类型或者说动态语言，不用提前声明变量的类型，变量的类型会自动判断。即使赋值之后，变量的类型根据重新赋值的数据类型同样进行改变。
~~~js
var age; // 声明一个名称为age的变量
age = 12; // 给age这个变量赋值为12
~~~
通常声明与赋值一起使用：
~~~js
var age = 12;
~~~
#### 3.1.3 初始化变量
~~~js
var age = 12
var name = 'Tom'
name = 'OO' // 再次给相同变量赋值则不用 var 进行初始化
var a = 10, b = 20, c = 30; // 可以同时声明多个变量
~~~
#### 3.1.4 输入存储变量
~~~js
var name = prompt('请输入你的名字')
alert(name)
~~~
#### 3.1.5 变量的命名规范
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for,while,this,name
- 区分大小写
- 变量名必须有意义
- 小驼峰命名法，如：`myName`
- 建议不要用$作为变量名
#### 3.1.6 查看变量
~~~js
alert(变量名) // 弹出框显示
console.log(变量名) // 控制台显示
document.write(变量名) // HTML 页面上显示
~~~
### 3.2 数据类型
#### 3.2.1 数字型[number]
~~~javascript
3 // 十进制
010 // 八进制
0xa // 十六进制
3.14 // 小数
NaN // 非数字 Not a Number
~~~
数字型范围：
~~~js
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 5e-324
~~~
#### 3.2.2 字符串型[string]
~~~javascript
var str1 = '这是个字符串';
~~~
字符串转义符：
~~~javascript
\n // 换行
\r // 回车
\\
\'
\"
\t
\b // 空格
\xnn // 16进制字符，如 \x41 代表 'A'
\unnn // 16进制 unicode 字符， 如 \u03a3 代表∑
~~~
字符串长度：
用 `变量.length` 可以得到字符串长度，如：
~~~js
var str1 = 'hello world' console.log(str1);
// 输出结果：11
~~~
字符串拼接：
~~~js
var str = str1 + str2; var str = '字符串' + 123; // 输出字符串123，字符串拼接其他类型会自动转换为字符串 var str = 'My age is' + age + 'years old'; // 字符串+变量拼接
~~~
>只要与字符串做加法运算都会被转换成字符串
字符串中的双引号和单引号：
~~~js
var str = "他是'程序猿'";
~~~
#### 3.2.3 布尔型
布尔型 Boolean 只有两个值，一个是 true， 一个是 false
~~~js
console.log(1 + true); // 在运算中，true代表1 console.log(1+ false); // false 代表0 console.log('t' + true); // 在字符串拼接，会直接以字符串形式拼接 ttrue
~~~
#### 3.2.4 null 空值
~~~js
console.log(null+ 'pp'); // 会拼接字符串 nullpp
console.log(null + true); // 会输出 1
~~~
null表示"没有对象"，即该处不应该有值。
- 作为函数的参数，表示该函数的参数不是对象。
- 作为对象原型链的终点。
#### 3.2.5 undefined 未定义
一个声明后没有被赋值的变量会有一个默认值 undefined
~~~js
console.log(undefined + 'pp'); // 会拼接字符串 undefinedpp
console.log(undefined + true); // 会输出 NaN
console.log(undefined + 1); // 会输出 NaN
~~~
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefined。
- 函数没有返回值时，默认返回undefined。
**undefined 和 null 的区别**
只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
- undefined和null在if语句中，都会被自动转为false
#### 3.2.6 其他类型
- 数组
- 对象
#### 3.2.7 数据类型转换
##### 3.2.7.1 typeof() 查看数据类型
~~~js
var num = 1;
console.log(typeof num);
console.log(typeof(num)); // 也可以使用参数的形式查看
~~~
> null 返回的是 object
##### 3.2.7.2 转换为字符串
~~~js
var num = 1;
alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null
alert(String(num)); // 可以转换 undefined 和 null
alert(num + '');
~~~
##### 3.2.7.3 转换为数字型
~~~js
// 转换为整型
parseInt(num);
parseInt('3.14'); // 取整为3
parseInt('90px'); // 去掉单位（只取int遇到字符串自动中断）
parseInt('rem120px') // 字符串转换后变为 NaN
parseInt(undefined) // undefined 转换后变为 NaN
parseInt(null) // 转换后为0
parseInt(true) // 布尔型转换后变为 1 或 0
// 转换为浮点型
parseFloat(num);
parseFloat(3); // 还是输出3，不会自带小数点，3.0也是一样
// 强制转换
Number(num);
// 隐式转换，可以用 - * / （加号正能用作正负值将字符串转为数字型，如果用在变量后边则变为拼接字符串）
console.log(+'100')
console.log('123' - 120);
console.log('t' - 120); // 输出 NaN
~~~
##### 3.2.7.4 转换为布尔型
代表空、否定的值都会被转换为 false，如：0，''，NaN，null，undefined
其余值都会被转换为 true
~~~js
Boolen('abc'); // 返回 True
Boolean(0); // 返回 False
~~~
### 3.3 运算符
表达式：任何能代表值的式子
~~~
var a = 10, b=20;
var c = a + b; // a + b 就是表达式
~~~
#### 3.3.1 算数运算符
~~~js
+ - * / %
~~~
浮点数运算精度问题，尽量避免用浮点数直接进行运算
~~~js
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001
var num = 0.1 + 0.2;
console.log(num == 0.3); // false
~~~
#### 3.3.2 递增递减运算符
~~~js
++i; // 前置递增（先自加后返回）
--i; // 前置递减
var i = 1;
console.log(++i + 10); // 11 （先自加，然后参与运算）
i++; // 后置递增（先返回值，后自增）
i--; // 后置递减
var i = 1;
console.log(i++ + 10); // 20 （先运算，后自加）
console.log(i); // 2
~~~
前置后置递增进阶：
~~~js
var e = 10;
var f = e++ + ++e;
consolo.log(f); // 22（e++ 返回 10，然后e自增为11，++e 返回12）
~~~
#### 3.3.3 比较运算符
比较运算符，是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为运算结果。
~~~js
// 普通比较运算符
<
>
>=
<=
== // 不会比较数据类型 (18 == '18' 为真)
=== // 会比较数据类型
!=
!== // 全不等（包括数据类型）
~~~
> - 比较运算符两侧表达式先转为布尔型再进行比较
> - '0' 用 Boolen() 做判断的时候是 true，但是用 == 比较运算符和布尔值比较的时候 '0' 是 false，但 '0' == 0 是真
> - undefined 和 null 在 Boolen() 做判断的时候是 flase，但是用 == 比较的时候他们不等于 false
> - NaN 和任何值都不相等，包括它本身，即 NaN == NaN 为假
#### 3.3.4 逻辑运算符
| 逻辑运算符 | 说明 |
| ---------- | ------ |
| && | 逻辑与 |
| \|\| | 逻辑或 |
| ! | 逻辑非 |
- 如果只是普通逻辑运算（两侧都是布尔型），返回的还是布尔型
- 与 undefined, null 做 && 运算返回 undefined, null
- !1 返回 false
#### 3.3.5 逻辑运算短路
逻辑与运算短路
~~~js
// 当表达式1和2为真时，返回表达式2
console.log(123 && 456); // 返回456
// 当表达式1为假时，直接返回表达式1
console.log(0 && 456); // 返回0
~~~
逻辑或运算短路
~~~js
// 当表达式1为真，则返回表达式1
// 当表达式1为假，则返回表达式2
var num = 1;
console.log(123 || num++);
console.log(num); // 1
~~~
#### 3.3.6 赋值运算符
~~~js
num += 2; // 相当于 num = num + 2
num -= 1;
num *= 1;
num /= 1;
~~~
#### 3.3.7 运算符优先级
| 运算符 | 结合性 | 优先级 |
| ---------------------------------- | -------- | ------ |
| .、[ ]、( ) | 从左到右 | 最高 |
| ++、--、-、！、new、typeof | 从右到左 | |
| *、/、% | 从左到右 | |
| +、- | 从左到右 | |
| ＜、＜=、＞、＞=、in、instanceof | 从左到右 | |
| ==、!=、===、!== | 从左到右 | |
| && | 从左到右 | |
| II | 从左到右 | |
| ?: | 从右到左 | |
| =、*=、/=、％=、+=、-=、&=、^=、!= | 从右到左 | |
| , | 从左到右 | 最低 |
~~~js
var s = 4 >= 6 || 'a' != 'b' && !(12 * 2 == 144) && true
console.log(s) // true
~~~
- 赋值运算符优先级最低，先不用看它
- 然后是逻辑运算符 || 和 &&，从左到右开始
- 4 >= 6 为 false，所以看右侧返回值
- 右侧的三个 && 返回的都是 true，最后表达式返回 true
> 如果最右侧表达式是数值的话，则返回数值
### 3.4 流程控制
#### 3.4.1 顺序结构
~~~js
A -> B -> C
~~~
#### 3.4.2 选择结构
##### 3.4.2.1 if 分支结构
**单分支结构**
~~~js
if (条件表达式) {
// 执行语句
}
// 其他代码
~~~
- 当条件表达式为真时，程序进入分支，执行完毕后，继续执行其他代码
- 当条件表达式为假时，程序直接跳过条件分支，执行其他代码
**双向分支**
~~~js
if (条件表达式) { // 执行语句 } else { // 执行语句 }
// 其他代码
~~~
- 当条件表达式为真时，程序进入分支，执行完毕后，继续执行其他代码
- 当条件表达式为假时，程序执行 else 代码块中的代码，执行完毕后再执行其他代码
**多分支结构**
~~~js
if (条件表达式1) { // 执行语句1 } else if (条件表达式2) { // 执行语句2 } else { // 执行语句3 }
// 其他代码
~~~
- 如果满足条件表达式1，则执行执行语句1，直接跳出
- 如果不满足，则判断条件表达式2，为真则执行语句2，不为真则去执行 else
> 多分支语句只是多选一，最后只有一个语句执行
例：判断分数
~~~js
var score = promot('请输入分数：') if (score >= 90) { alert('优') } else if (score >= 80) { alert('良') } else if (score >= 60) { alert('中') } else { alert('差') }
~~~
##### 3.4.2.2 三元运算符
如果条件表达式结果为真，则返回表达式1,的值，否则返回表达式2的值
~~~js
条件表达式 ? 表达式1 : 表达式2
~~~
~~~js
//输入一个 0~59 数字，如果小于10，则在数字前边补0
var time = prompt('请输入一个0~59的数字');
console.log(time<10 ? '0' + time : time);
~~~
##### 3.4.2.3 Switch
~~~js
switch(表达式){ case value1: // 执行语句1 break; case value2: // 执行语句2 break; default: // 如果无条件满足，最终执行语句 }
~~~
> 开发中表达式通常写为变量，变量值需要和 case 的 value 值全匹配，值和数据必须完全一致
**Switch 与 IF 区别**
1. switch...case 语句通常处理 case 为比较确定值的情况，if...else语句通常用于范围判断（大于、小于）
2. switch 语句进行条件判断直接跳转到case，效率更高，if 语句是顺序判断，效率低
### 3.5 循环结构
#### 3.5.1 for 循环
~~~js
for(初始化变量; 条件表达式; 操作表达式){
// 循环体
}
// 初始化变量： 用 var 声明的一个普通变量，通常用于计数器使用
// 条件表达式： 用来判断每一次循环是否继续执行，是终止的条件
// 操作表达式： 是每次循环最后执行的代码，经常用于计数器变量的更新（递增或递减）
~~~
例：输出一百句你好 ~~~js for(var i = 1; i<=100; i++){ console.log('你好'); } ~~~ 例：从0加到100 ~~~js var sum =0; for(var i = 1; i<=100; i++){ sum+=i; } ~~~
#### 3.5.2 嵌套循环
~~~js
for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){
for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){
// 循环代码
}
}
~~~
> 外层循环一次，内层循环执行全部
例：输出 5x5 的 *
~~~js
var str = ""; for (var i = 1; i <= 5; i++) { for (var j = 1; j <= 5; j++) { str = str + "*"; } str = str + "\n"; }
console.log(str);
~~~
#### 3.5.3 while 循环
~~~js
while(条件表达式){
// 循环体
}
~~~
例：用 while 实现从1加到100
~~~js
var num=1;
while(num<=100){
console.log(num);
num++;
}
~~~
> while 循环一般需要配一个计数器，然后再循环体内设置一个终止循环，否则会陷入死循环
#### 3.5.4 do while 循环
~~~js
do {
// 循环体
} while(条件表达式)
~~~
> 和 while 循环比，do while 循环至少需要执行一次，然后进行判断是否终止循环。
#### 3.5.5 continue 和 break
- break 关键字用于直接跳出循环
- continue 关键字用于立即跳出本次循环，进入下一次循环
#### 3.5.6 断点调试
在 Chrome 中 F12 进入调试模式，进入 Sources，在代码行数下断点，然后刷新则会进入到断点
### 3.6 数组
数组可以把一组相关的数据一起存放，并提供方便的访问方式。
#### 3.6.1 创建数组
~~~js
// 利用对象创建数组
var arr = new Array();
// 利用 [] 快捷创建数组
var arr = [];
var arr = [1, 2, 3, 'Pink', True];
~~~
#### 3.6.2 访问数组元素
数组可以通过索引来访问、设置、修改对应的数组元素，可以通过 “数组名[索引]“ 的方式来获取数组中的元素。
~~~js
var arr1 = ['张三', '李四', '王五', '淑芬'];
// 索引号： 0 1 2 3
console.log(arr1); // 输出整个数组所有元素
console.log(arr1[0]); // 使用 数组名[索引号] 获取数组数组内指定元素的值
~~~
#### 3.6.3 遍历数组
~~~js
arr= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
console.log(arr[i]);
}
~~~
3.6.4 数组长度属性 length
~~~js
arr= ['a', 'b', 'c', 'd'];
console.log(arr.length); // 输出4
~~~
利用 length 添加新的数组元素
~~~js
arr = ["a", "b", "c", "d"];
arr[arr.length] = 'e';
console.log(arr[arr.length - 1]);
// 输出结果
e
~~~
3.6.5冒泡排序
~~~js
var arr = [5, 4, 3, 2, 1]; for (var i = 0; i < arr.length - 1; i++) { // 外层循环 for (var j = 0; j <= arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);
~~~
### 3.7 函数
#### 3.7.1 声明函数
~~~js
// 声明函数
function 函数名(){
// 函数内部代码，又称为函数体
}
// 调用函数
函数名();
~~~
例：将1~100 累加封装成函数
~~~js
function sum(){ var sum = 0; for(var i=1; i<=100; i++){ sum = sum+i; } console.log(sum); } sum(); ~~~
### 3.8 作用域
全局变量：
- 变量在`<script>`标签之内，或者是一个单独js文件
- 如果在函数内部没有声明的变量也属于全局变量（即在函数内部可以使用外部的变量）
- 浏览器关闭才会销毁
局部变量：
- 变量声明在函数内部
- 函数的形参也可以看做是局部变量
- 函数执行完毕就会销毁
链式作用域：
- 函数内部可以调用父集中的变量
js var num = 10; function fn(){ var num = 20; function fun(){ console.log(num); // 链式作用域，找父集中的变量，如果没有再找上级 } }
