` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
184 |
185 | ```html
186 |
187 |
188 |
189 |
` 元素开启相对定位，并设置偏移量，具体代码如下:
212 |
213 | ```css
214 | position: absolute;
215 | left: 0px;
216 | top: 0px;
217 | ```
--------------------------------------------------------------------------------
/ecmascript-5/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/01.png
--------------------------------------------------------------------------------
/ecmascript-5/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/02.png
--------------------------------------------------------------------------------
/ecmascript-5/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/03.png
--------------------------------------------------------------------------------
/ecmascript-5/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/04.png
--------------------------------------------------------------------------------
/ecmascript-5/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/05.png
--------------------------------------------------------------------------------
/ecmascript-5/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/06.png
--------------------------------------------------------------------------------
/ecmascript-5/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/07.png
--------------------------------------------------------------------------------
/ecmascript-5/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/08.png
--------------------------------------------------------------------------------
/ecmascript-5/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/09.png
--------------------------------------------------------------------------------
/ecmascript-5/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/10.png
--------------------------------------------------------------------------------
/ecmascript-5/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/11.png
--------------------------------------------------------------------------------
/ecmascript-5/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/12.png
--------------------------------------------------------------------------------
/ecmascript-5/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/13.png
--------------------------------------------------------------------------------
/ecmascript-5/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/14.png
--------------------------------------------------------------------------------
/ecmascript-5/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/15.png
--------------------------------------------------------------------------------
/ecmascript-5/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/16.png
--------------------------------------------------------------------------------
/ecmascript-5/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/17.png
--------------------------------------------------------------------------------
/ecmascript-5/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/18.png
--------------------------------------------------------------------------------
/ecmascript-5/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/19.png
--------------------------------------------------------------------------------
/ecmascript-5/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/20.png
--------------------------------------------------------------------------------
/ecmascript-5/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/21.png
--------------------------------------------------------------------------------
/ecmascript-5/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/22.png
--------------------------------------------------------------------------------
/ecmascript-5/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/23.png
--------------------------------------------------------------------------------
/ecmascript-5/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullstack-kingj/front-end-notes/ca32ed4756110b4639797456b277b5cc4c622012/ecmascript-5/24.png
--------------------------------------------------------------------------------
/ecmascript-5/array.md:
--------------------------------------------------------------------------------
1 | 数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。
2 |
JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。
3 |
JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指定的元素。
4 |
5 | ## 一维数组
### 定义数组
数组的最大作用就是用于存储多个值。定义数组分别两种形式:
6 |
7 | - 使用数组字面量方式:
8 |
9 | ```javascript
10 | var arr1 = [ ];
var arr2 = [ 1, "a", true ];
11 | ```
12 |
13 | - 使用数组关键字方式:
14 |
15 | ```javascript
16 | var arr1 = Array( );
var arr2 = Array( 1, "a", true );
17 | ```
18 |
19 | > **值得注意的是:** 在一个数组中的不同元素可以是不同数据类型。
### 索引数组
索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码:
20 |
21 | ```javascript
22 | var arr = [];
arr[0] = 1;
arr[1] = "a";
arr[2] = true;
23 | ```
24 |
25 | > **值得注意的是:** 索引数组的下标是从 0 开始的。
### 关联数组
关联数组就是存储元素的位置使用字符串来表示，一般称之为名称（name或key）。具体创建方式如下述代码:
26 |
27 | ```javascript
28 | var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;
29 | ```
30 |
31 | > **值得注意的是:** 关联数组的名称（name或key）是字符串，必需使用单引号或双引号将其包裹。
### 稀疏数组
稀疏数组就是包含 0 开始的不连续索引的数组。具体创建方式如下述代码:
32 |
33 | ```javascript
34 | var arr = Array( 10 );// 数组没有任何元素，数组的长度为 10
var arr = [];// 创建一个空数组
arr[100] = "a";// 向下标为 100 的位置添加一个元素 a
35 | ```
36 |
37 | > **值得注意的是:** 上述代码中的第一行，并不是创建一个数组包含一个元素 10，而是创建一个不包含任何元素的数组长度为 10。
38 |
39 | ### 数组的长度
每个数组都有一个length属性，表示数组的长度。
- 如果为非稀疏数组的话，length 属性的值表示当前数组包含元素的个数。
```javascript
40 | var arr1 = [ 1, "a", true ];
console.log( arr1.length );// 输出 3
41 | ```
42 |
43 | - 如果为稀疏数组的话，length 属性的值大于当前数组包含元素的个数。
44 |
45 | ```javascript
46 | var arr2 = [];
arr2[14] = "a";
console.log( arr2.length );// 输出 15
47 | ```
48 |
49 | ### 数组元素的读取
数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:
50 |
51 | ```javascript
52 | var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;
console.log( arr['str'] );// 输出字符串 a
53 | ```
54 |
55 | ### 数组元素的修改
不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。
```javascript
56 | var arr = [ 1, "a", true];
console.log( arr[1] );// 输出字符串 a
arr[1] = "b";
console.log( arr[1] );// 输出字符串 b
var arr = [];
arr['num'] = 1;
arr['str'] = "a";
console.log( arr['str'] );// 输出字符串 a
arr['str'] = "b";
console.log( arr['str'] );// 输出字符串 b
57 | ```
58 |
59 | ### 数组元素的删除
60 |
61 | 不仅可以根据需求修改数组中指定的元素值，也可以删除数组中指定的元素值。数组删除指定元素值使用 delete 关键字。
```javascript
62 | var arr = [ 1, "a", true];
delete arr[1];
console.log( arr[1] );// 输出字符串 undefined
63 | ```
64 |
65 | > **值得注意的是:** 上述代码使用 delete 关键字执行删除数组元素值的操作时，并不影响数组的长度。
```javascript
66 | var arr = [ 1, "a", true];
delete arr[1];
console.log( arr.length );// 输出 3
67 | ```
68 |
69 | ### 遍历数组元素
使用for语句是遍历数组元素最常见的方法:
70 |
71 | ```javascript
72 | var arr = [ 1, "a", true];
for( var i = 0; i < arr.length; i++ ){
console.log( arr[i] );
}
73 | ```
74 |
75 | 也可以从数组的最后向前（倒序）进行遍历:
76 |
77 | ```javascript
78 | var arr = [ 1, "a", true];
for( var i = arr.length-1; i >= 0; i-- ){
console.log( arr[i] );
}
79 | ```
80 |
81 | ### for in 语句
在 ECMAScript 5 中新增了 for in 语句，同样也可以用于遍历数组:
```javascript
82 | var arr = [ 1, "a", true];
for( var i in arr ){
console.log( i + " : " + arr[i] );
}
83 | ```
84 |
85 | > **值得注意的是:**
86 | >
87 | > - for 关键字后定义的变量 i 表示当前数组的下标。
88 | > - for in 语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。
for in 语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到:
89 |
90 | ```javascript
91 | var arr = [];
arr[100] = "a";
for( var i in arr ){
console.log( i + " : " + arr[i] );
}
92 | ```
93 |
94 | ## 二维数组
数组是可以嵌套的，这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript 这个特点，创建二维数组，即数组的数组。
95 |
96 | ### 定义二维数组
- 定义一个规整的二维数组:
97 |
98 | ```javascript
99 | var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ];
100 | ```
101 |
102 | - 定义一个不规整的二维数组:
103 |
104 | ```javascript
105 | var arr2 = [];
arr2[0] = [ 101 ];
arr2[1] = [ 201, 202 ];
arr2[2] = [ 301, 302, 303 ];
106 | ```
107 |
108 | ### 使用二维数组
- 读取二维数组中的具体元素:
109 |
110 | ```javascript
111 | var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ] ;
console.log( arr1[0][0] );// 值为11
arr1[1][2] = 230;// 把23更改为230
112 | ```
113 |
114 | - 二维数组的遍历需要使用循环嵌套来实现:
115 |
116 | ```javascript
117 | for( var i = 0; i < arr1.length; i++ ){
for( var j = 0; j < arr1[i].length; j++ ){
console.log( arr1[i][j] );
}
}
118 | ```
119 |
120 | ## 数组的常见方法
### 检测数组
如何确定当前是一个数组，JavaScript 提供如下几种方式:
121 |
122 |
1. typeof 无法检测数组对象：typeof [] 返回 object
2. instanceof ：[] instanceof Array 返回 true/false
3. Object.prototype.toString.call( [] )：返回 [ object Array ]
4. Array.prototype.isPrototypeOf( [] )：返回 true/false
5. ES5 中新方法： Array.isArray( [] ) : 返回 true/false
### 转换方法
JavaScript 提供了如下方法，用于数组的转换:
123 |
124 | | 方法 | 说明 |
125 | | --- | --- |
126 | | toString() | 把数组转换为字符串，并返回结果。|
127 | | valueOf() | 返回数组对象的原始值。 |
128 |
129 | ```javascript
130 | var colors = [ "red", "blue", "green" ];
console.log( colors.toString() );// red,blue,green
console.log( colors.valueOf() );// red,blue,green
131 | ```
132 |
133 | ### 进出栈方法
JavaScript 提供了如下方法，用于数组的进出栈操作:
134 |
135 | | 方法 | 说明 |
136 | | --- | --- |
137 | | push() | 向数组的末尾添加一个或更多元素，并返回新的长度。|
138 | | pop() | 删除数组的最后一个元素并返回删除的元素。|
139 | | shift() | 删除并返回数组的第一个元素。|
140 | | unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。|
141 |
142 | ```javascript
143 | var colors = [ "red", "blue", "green" ];
var count = colors.push( "black" );// 4
var item = colors.pop();// black
var count = colors.unshift( "pink" );// 4
var item = colors.shift();// pink
144 | ```
145 |
146 | ### 排序方法
JavaScript 提供了如下方法，用于数组的排序操作:
147 |
148 | | 方法 | 说明 |
149 | | --- | --- |
150 | | reverse() | 反转数组的元素顺序。|
151 | | sort() | 对数组的元素进行排序。|
152 |
153 | ```javascript
154 | var values = [ 0, 1, 5, 10, 20 ];
console.log( values.sort() );// 0,1,10,20,5
console.log( values.reverse() );// 20,10,5,1,0
155 | ```
156 |
157 | > **值得注意的是:** reverse( ) 和 sort( ) 方法的返回值是经过排序之后的数组。
### 连接方法
JavaScript 提供了如下方法，用于多个数组之间的连接操作:
158 |
159 | | 方法 | 说明 |
160 | | --- | --- |
161 | | concat() | 连接两个或更多的数组，并返回结果。|
162 |
163 | ```javascript
164 | var colors = [ "red", "blue", "green" ];
var colors2 = colors.concat( "yellow", [ "black", "pink" ] );
console.log( colors2 );
// red,blue,green,yellow,black,pink
165 | ```
166 |
167 | ### 操作方法
JavaScript 提供了如下方法，用于数组的删除、插入和替换操作:
168 |
169 | | 方法 | 说明 |
170 | | --- | --- |
171 | | slice() | 选取数组的的一部分，并返回一个新数组。|
172 | | splice() | 从数组中添加或删除元素。|
173 |
174 | ```javascript
175 | var colors = [ "red", "blue", "green", "yellow" ];
var colors2 = colors.slice( 1 );// blue,green,yellow
var colors3 = colors.slice( 1, 3 );// blue,green
var removed1 = colors.splice( 0, 1 );// red
colors.splice( 1, 0, "orange" );// red,orange,blue,green,yellow
var removed2 = colors.splice( 1, 1, "purple" );// blue
console.log( colors );// red,purple,green,yellow
176 | ```
177 |
178 | ### 位置方法
JavaScript 提供了如下方法，用于获取数组中指定元素的索引值:
179 |
180 | | 方法 | 说明 |
181 | | --- | --- |
182 | | indexOf() | 搜索数组中的元素，并返回它所在的位置。|
183 | | lastIndexOf() | 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。|
184 |
185 | ```javascript
186 | var numbers = [ 1, 2, 3, 4, 5 , 4, 3, 2, 1 ];
console.log( numbers.indexOf( 4 ) );// 3
console.log( numbers.lastIndexOf( 4 ) );// 5
187 | ```
--------------------------------------------------------------------------------
/ecmascript-5/basics-grammar.md:
--------------------------------------------------------------------------------
1 | ## 区分大小写
2 |
3 | JavaScript 是一种区分大小写的语言。这意味着 JavaScript 的关键字、变量名、函数名、以及任何其他的标识符必须使用一致的大小写形式。比如 atguigu、Atguigu 或 ATGUIGU 是不同的变量名。
4 |
5 | ```javascript
6 | var jinyunlong = "jinyunlong";// 定义jinyunlong变量
console.log(jinyunlong);// 打印jinyunlong变量
var Jinyunlong = "Jinyunlong";// 定义Jinyunlong变量
console.log(Jinyunlong);// 打印Jinyunlong变量
var JINYUNLONG = "JINYUNLONG";// 定义JINYUNLONG变量
console.log(JINYUNLONG);// 打印JINYUNLONG变量
7 | ```
8 |
9 | > **值得注意的是:** 在 JavaScript 中定义变量名和函数名时应该特别注意。
## 空格和换行
JavaScript 会忽略出现在代码中的空格、制表符和换行符。
10 |
由于可以自由地在代码中使用空格、制表符和换行符，所以采用整齐、一致的缩进来形成统一的编码风格，从而提高代码的可读性显得尤为重要。
11 |
JavaScript 还可以识别水平制表符、垂直制表符、换页符等，JavaScript 将以下字符识别为行结束符：换行符、回车符、行分隔符、段分隔符等。回车符加换行符在一起被解析为一个单行结束符。
12 |
13 | ## 可选的分号
JavaScript 的语句一般是以一个分号作为结尾。当然，JavaScript 也允许忽略这个分号。如果省略分号，则由解释器确定语句的结尾，如下述代码：
```javascript
14 | var sum = a + b// 即使没有分号也是有效的语句 —— 不推荐
var diff = a - b;// 有效的语句 —— 推荐
15 | ```
16 |
17 | > **值得注意的是:** 在 JavaScript 中，虽然语句结尾的分号不是必需的，但还是建议任何时候都不要省略。使用分号是一个非常好的编程习惯。
## 注释
在编写 JavaScript 代码时，经常利用注释为代码添加说明。注释的内容会被 JavaScript 解释器/引擎忽略，JavaScript 支持两种格式的注释:
18 |
19 | - 单行注释
20 |
21 | ```javascript
22 | // 这里是单行注释
23 | ```
24 |
25 | - 多行注释
26 |
27 | ```javascript
28 | /*
* 这里是多行注释
*/
29 | ```
> **值得注意的是:** 上述注释的第二行是以星号开始，但这并不是必需的。
## 语句
JavaScript代码将多行组合成一个代码块，每个代码块一般是以左花括号（{）开始，以右花括号（}）结束。例如下述代码:
```javascript
30 | if(test){
test = false;
alert(test);
}
31 | ```
32 |
33 | > **值得注意的是:** 一般在执行多行代码时才需要语句块，但最好是始终都使用花括号将代码块进行包裹。
## 关键字
JavaScript 定义了一组具有特定用途的关键字，这些关键字可用于表示语句的开始或结束、或者执行特定操作等。也就是说，定义变量名或、函数名或对象名时不能使用这些名称。
34 |
35 | ## 保留字
JavaScript 除了定义了一组关键字，还定义了一组同样不能作为变量名、函数名或对象名的保留字。保留字可能在将来被作为新的关键字出现的。
--------------------------------------------------------------------------------
/ecmascript-5/closer.md:
--------------------------------------------------------------------------------
1 | ## 作用域链
很多开发语言中都具有块级作用域，但 JavaScript 中并没有跨级作用域，这经常会导致理解上的困惑。如下示例:
2 |
3 | ```javascript
4 | if( true ){
var color = "blue";
}
console.log( color );// blue
5 | ```
6 |
7 | 上述代码在 if 语句中定义了变量 color。但该变量的作用域是全局域，原因是 JavaScript 中没有块级作用域。
虽然 JavaScript 没有块级作用域，但具有函数作用域。在某个函数内部定义的变量的作用域就是该函数作用域。
```javascript
8 | function fun(){
var javascript = "this is javascript";
}
console.log( javascript );// 输出报错
9 | ```
10 |
11 | 上述代码在函数 fun 内部定义了变量 JavaScript，该变量的作用域是 fun 函数作用域。所以在全局域访问该变量时会出错。
每一段 JavaScript 代码（全局代码或函数）都有一个与之关联的作用域链。这个作用域链是一个对象列表或链表，这组对象定义了这段代码“作用域中”的变量。如下示例:
```javascript
12 | var a = 1;
// 在全局域中只能访问变量 a
function f(){
// 在 f 函数作用域中可以访问变量 a 和 b
var b = 2;
}
13 | ```
14 |
15 | 上述代码的作用域链如下图所示:
16 |
17 | 
18 |
19 | ## 什么是闭包
JavaScript允许函数嵌套，并且内部函数可以访问定义在外部函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。但是，外部函数却不能够访问定义在内部函数中的变量和函数。
20 |
当内部函数以某一种方式被任何一个外部函数作用域访问时，一个闭包就产生了。
21 |
闭包就是词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。
22 |
23 | 如下代码就是一个最简单形式的闭包结构:
24 |
25 | ```javascript
26 | var b;
function f(){
var a = "a";
b = function(){
return a + "b";
}
return a;
}
//测试
alert(f()); // a
alert(b()); // ab
27 | ```
28 |
29 | 上述代码的作用域链如下图所示:
30 |
31 | 
32 |
33 | ## 闭包的特点
- 局部变量
在函数中定义有共享意义（如：缓存、计数器等）的局部变量。（注：定义成全局变量会对外造成污染）
- 内部函数
在函数（f）中声明有内嵌函数，内嵌函数（g）对函数（f）中的局部变量进行访问。
- 外部使用
函数（f）向外返回此内嵌函数（g），外部可以通过此内嵌函数持有并访问声明在函数（f）中的局部变量，而此变量在外部是通过其他途径无法访问的。
## 闭包的作用
- 提供可共享的局部变量。
- 保护共享的局部变量。提供专门的读写变量的函数。
- 避免全局污染。
## 闭包的应用
利用闭包保护共享的局部变量，提供专门的读写变量的函数。
```javascript
34 | var getValue, setValue;
(function(){
var secret = 0;
getValue = function(){
return secret;
};
setValue = function(v){
secret = v;
}
})();
35 | ```
--------------------------------------------------------------------------------
/ecmascript-5/data-type.md:
--------------------------------------------------------------------------------
1 | 在 JavaScript 代码中，能够表示并操作值的类型称之为**数据类型**。
2 |
数据类型可分为可变类型和不可变类型。可变类型的值是可修改的，对象和数据就属于可变类型；不可变类型的值是不可修改的，数字、布尔值、null 和 undefined 都属于不可变类型。
3 |
字符串可以看成由字符组成的数组，可能被误认为是可变的。但在 JavaScript 中，字符串的值是不可变的。
4 |
5 | 
6 |
7 | ## 原始类型
原始类型，又称为原始值，是直接代表 JavaScript 语言实现的最底层的数据。
8 |
原始类型分别为 boolean 类型、number 类型和 string 类型三种。当然，有些资料将undefined 和 null 也归为原始类型（这里表示为特殊类型）。
9 |
声明变量并初始化值为原始类型，一般称之为字面量方式定义变量，也可以称之为直接量方式定义变量。
## boolean 类型
布尔（boolean）类型是指真或假、开或关、是或否。这个类型只有两个值：true 和 false。
> **值得注意的是:**
10 | >
11 | > - 由于 JavaScript 是区分大小写的，布尔类型的 true 和 false 全部是小写。
12 | > - JavaScript 也可以将其他类型的数据，自动转换为布尔类型。
| 数据类型 | 转换为 true 的值 | 转换为 false 的值 |
13 | | --- | --- | --- |
14 | | boolean类型 | true | false |
15 | | string类型 | 任何非空字符串 | “”（空字符串）|
16 | | number类型 | 任何非零数字值（包括无穷大）| 0和NaN |
17 | | object类型 | 任何对象 | null |
18 | | undefined | | undefined |
19 |
20 | ## number 类型
number 类型是指数字，JavaScript 不区分整数类型和浮点类型。
- 整数类型: 包括负整数、0和正整数等。
21 | - 浮点类型: 表示小数，JavaScript 中的所有数字均用浮点类型表示。
22 |
23 | > **值得注意的是:** 八进制或十六进制的数值最终会被转换成十进制数值。
## 浮点类型
浮点类型，就是指该数值包含整数部分、小数点和小数部分。
```javascript
24 | var floatNum1 = 0.1;
var floatNum2 = .1;// 有效，但不推荐
25 | ```
26 |
27 | > **值得注意的是:**
28 | >
29 | > - JavaScript允许小数点前可以没有整数，但不推荐这种写法。
30 | > - 保存浮点类型需要的空间是保存整数类型的两倍。
31 | > - 如果小数点后面没有任何数字，那这个数值作为整数类型保存。
```javascript
32 | var floatNum3 = 1.;// 小数点后面没有数字 —— 解析为 1
var floatNum4 = 10.0;// 整数 —— 解析为 10
33 | ```
34 |
35 | ### 四舍五入误差
整数有无数个，但JavaScript通过浮点类型只能表示有限的个数（确切地说是 18 437 736 874 454 810 627个）。也就是说，当在JavaScript中使用浮点类型时，常常只是真实值的一个近似表示。如下述代码:
36 |
37 | ```javascript
38 | var x = .3 - .2;
var y = .2 - .1;
x == y;// 值为false，表示两值不相等
x == .1;// 值为false，.3-.2 不等于 .1
y = .1;// 值为true，.2-.1 等于 .1
39 | ```
40 |
41 | > **值得注意的是:** 建议使用大整数表示金额。例如使用分作为单位，而不是使用元作为单位。
42 |
43 | ### NaN
NaN（Not a Number），即非数值，是一个特殊的数值。
特点:
44 |
45 | - 任何涉及NaN的操作都会返回NaN。
- NaN与任何值都不相等，包括NaN本身。
> **值得注意的是:** 针对上述特点，JavaScript提供了isNaN( )函数。该函数用于判断计算结果是否为数值。
```javascript
46 | console.log(isNaN(10));// 输出false（10是一个数值）
console.log(isNaN("10"));// 输出false（可以被转换成数值 10）
console.log(isNaN("blue"));// 输出true（不能转换成数值）
console.log(isNaN(true));// 输出false（可以被转换成数值 1）
47 | ```
48 |
49 | ## string 类型
string 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列，被称之为字符串。字符串可以由双引号（"）或单引号（'）表示。
```javascript
50 | var firstString = "Nicholas";
var secondString = 'Zakas';
51 | ```
52 |
53 | string类型包含一些特殊的转义字符，用于表示非打印字符。
| 转义字符 | 含义 |
54 | | --- | --- |
55 | | \n | 换行符 |
56 | | \t | 制表符 |
57 | | \b | 退格符 |
58 | | \r | 回车符 |
59 | | \f | 换页符 |
60 | | \\ | 斜杠 |
61 | | \' | 单引号（'），在用单引号表示的字符串中使用。|
62 | | \" | 双引号（"），在用双引号表示的字符串中使用。|
63 |
64 | ## typeof 运算符
由于 JavaScript 是弱类型/松散类型的，因此需要有一种手段来检测给定变量的数据类型。typeof 运算符就是负责提供这方面信息，如下述代码:
65 |
66 | ```javascript
67 | var message = "this is message";
console.log(typeof message);// 输出 string
console.log(typeof(message));// 输出 string
68 | ```
69 |
70 | > **值得注意的是:** typeof 运算符加上圆括号，会像是函数，而不是运算符，并不建议这种写法。
71 |
72 | | 值 | 类型 |
73 | | --- | --- |
74 | | true或false | boolean |
75 | | 任意数字或NaN | number |
76 | | 任意字符串 | string |
77 | | null | object |
78 |
79 | ## 包装类型
80 |
81 | ### 包装类型概述
82 |
83 | 在 JavaScript 中，对应原始类型提供了包装类型。通过包装类型可以创建原始类型的对象（后面的课程学习）。
84 |
由于 JavaScript 是区分大小写的，从写法上来说，原始类型是全部小写，包装类型则是全部大写。
85 |
一般不建议使用包装类型定义对应的数据类型，但包装类型提供了操作相应值的方法。
86 |
> **值得注意的是:** 包装类型涉及到对象的概念，具体技术内容会在后面的课程学习。
87 |
88 | ### Boolean 类型
Boolean 类型是原始类型 boolean 类型对应的包装类型。
```javascript
89 | var bool = new Boolean(true);
90 | ```
91 |
92 | boolean 类型与 Bollean 类型的区别:
93 |
94 | - typeof 运算符对原始类型返回 "boolean"，而对包装类型为 "object"。
95 | - instanceof 运算符测试 Boolean 类型返回 true，而测试 boolean 类型返回 false。
96 |
97 | > **值得注意的是:** 不建议使用 Boolean 类型。
### Number 类型
98 |
99 | Number 类型是原始类型 number 类型对应的包装类型。
```javascript
100 | var num = new Number(10);
101 | ```
102 |
103 | number 类型与 Number 类型的区别:
104 |
105 | - typeof 运算符对原始类型返回 "number"，而对包装类型为 "object"。
106 | - instanceof 运算符测试 Number 类型返回 true，而测试 number 类型返回 false。
107 |
108 | > **值得注意的是:** 不建议使用 Number 类型。
109 |
110 | ### String 类型
String 类型是原始类型 string 类型对应的包装类型。
```javascript
111 | var str = new String("hello world");
112 | ```
113 |
114 | string 类型与 String 类型的区别:
115 |
116 | - typeof 运算符对原始类型返回 "string"，而对包装类型为 "object"。
117 | - instanceof 运算符测试 String 类型返回 true，而测试 string 类型返回 false。
118 |
119 | > **值得注意的是:** 不建议使用 String 类型。
120 |
121 | ### instanceof 运算符
122 |
123 | instanceof 运算符的左操作数是一个包装类型的变量，右操作数是对应的数据类型。如果左侧的变量是右侧的数据类型，则表达式返回 true；否则返回 false。例如下述代码:
124 |
125 | ```javascript
126 | var str = "this is message";
str instanceof String;// 计算结果为 true, str是String类型
str instanceof Object;// 计算结果为 true, 所有包装类型都是Object的实例
str instanceof Number;// 计算结果为 false
127 | ```
128 |
129 | > **值得注意的是:** 所有对象都是 Object 类型的实例对象，通过 instanceof 运算符判断一个对象是否为具体数据类型，也包含"父类"。（后面课程会学习）
130 |
131 | ## 特殊类型
132 |
133 | ### undefined
134 |
135 | JavaScript 中有两个表示空的数据类型，undefined 和 null，其中比较有用的是 undefined。undefined 类型只有一个值，就是 undefined。
136 |
137 | 下列情况会返回undefined:
138 |
139 | - 访问未修改的变量 undefined
140 | - 没有定义 return 表达式的函数隐式返回 undefined
141 | - return 表达式没有显式的返回任何内容
142 | - 访问不存在的属性
143 | - 任何被设置为 undefined 值的变量
144 |
145 | ### null
146 |
147 | null 类型是 JavaScript 中的一个特殊类型，用于表示一个不再指向任何内存空间地址的变量。
null 值多用于释放 JavaScript 中的资源（变量、数组和函数等）。
> **值得注意的是:** 使用 typeof 运算符计算 null 的话，返回的是 object。
```javascript
148 | var atguigu = null;
console.log(atguigu);// 输出 null
149 | ```
150 |
151 | ### undefined 与 null
- 共同点: 都是原始类型，保存在栈中。
152 | - 不同点
153 | - undefined: 表示变量声明但未被赋值，是所有未赋值变量的默认值。一般很少主动使用。
154 | - null: 表示一个没有指向任何内存地址的变量，将来可能指向某个具体内存地址。一般用于主动释放资源。
155 |
156 | ## 类型转换
157 |
158 | ### 隐式类型转换
159 |
160 | 由于 JavaScript 是弱类型/松散类型的，在任何情况下都可以强制转换。
161 |
162 | - 转换为字符串: 将一个值加上空字符串可以轻松转换为字符串类型。
163 |
164 | ```javascript
165 | '' + 10 === '10'; // true
166 | ```
167 |
168 | - 转换为数字: 使用一元的加号操作符，可以把字符串转换为数字。
169 |
170 | ```javascript
171 | +'10' === 10; // true
172 | ```
173 |
174 | - 转换为布尔值: 使用否操作符两次，可以把一个值转换为布尔型。
175 |
176 | ```javascript
177 | !!'foo'; // true
178 | ```
179 |
180 | ### 显式类型转换
181 |
182 | - 使用 JavaScript 的包装类型的构造函数进行类型转换。
183 |
184 | | 构造函数 | 描述 |
185 | | --- | --- |
186 | | Number() | 将字符串或布尔值转换为数字，如果包含非法字符，则返回NaN。|
187 | | String() | 将数字或布尔值转换为字符串。|
188 | | Boolean() | 将字符串或数字转换为布尔值。|
189 |
190 | - 使用数据类型的转换函数进行类型转换。
191 |
192 | | 构造函数 | 描述 |
193 | | --- | --- |
194 | | toString() | 将数字或布尔值转换为字符串。|
195 | | parseInt() | 将字符串或布尔值转换为整数类型。|
196 | | parseFloat() | 将字符串或布尔值转换为浮点类型。|
--------------------------------------------------------------------------------
/ecmascript-5/function-object.md:
--------------------------------------------------------------------------------
1 | ## 函数与 Function 对象
函数是这样的一段 JavaScript 代码，它只定义一次，但可能被执行或调用多次。
2 |
Function 类型是 JavaScript 提供的引用类型之一，通过 Function 类型创建 Function 对象。
3 |
在 JavaScript 中，函数也是以对象的形式存在的。每个函数都是一个 Function 对象。
4 |
函数名，本质就是一个变量名，是指向某个 Function 对象的引用。
## 构造函数
5 |
6 | 在 JavaScript 中，函数除了可以通过函数定义语句或字面量表达式两种方式定义之外，还可以通过 Function 类型进行定义:
7 |
8 | ```javascript
9 | var add = new Function(
"num1",
"num2",
"var sum = num1+num2; return sum;"
);
10 | ```
11 |
12 | > **值得注意的是:** 通过 Function 类型定义函数的效率远不如通过函数定义语句或字面量表达式两种方式定义。
目前，定义函数具有三种方式，这三种方式之间存在一定差别:
13 |
14 | | 定义方式 | 执行 | 效率 |
15 | | --- | --- | --- |
16 | | 函数定义语句 | 函数名被声明提前 | 不存在效率问题 |
17 | | 字面量表达式 | 函数体固定，无法动态执行 | 不存在效率问题 |
18 | | Function 类型定义 | 函数体是字符串，可以动态执行 | 效率低 |
19 |
20 | ## 函数的属性和方法
由于每个函数都是一个 Function 对象，Function 类型也提供了一些属性和方法:
21 |
22 | | 属性名 | 描述 |
23 | | --- | --- |
24 | | length | 表示函数希望接收的命名参数的个数。|
25 |
26 | | 方法名 | 描述 |
27 | | --- | --- |
28 | | call() | 在指定的函数内调用另一个函数，参数能够以列表形式传入。|
29 | | apply() | 在指定的函数内调用另一个函数，参数能够以数组形式传入。|
30 | | bind() | 用于基于现有函数创建一个新函数对象。同时为新函数对象提前绑定this值或设置参数值。|
--------------------------------------------------------------------------------
/ecmascript-5/function.md:
--------------------------------------------------------------------------------
1 | 函数是这样的一段 JavaScript 代码，它只定义一次，但可能被执行或调用多次。
2 |
简单来说，函数就是一组可重用的代码，你可以在你程序的任何地方调用他。
3 |
例如下述代码:
4 |
5 | ```javascript
6 | function fn(){
console.log("this is function");
}
7 | ```
8 |
9 | ## 函数定义
定义函数有两种方式:
10 |
11 | - 函数声明方式:
12 |
13 | ```javascript
14 | function fn(){
console.log("this is function");
}
15 | ```
16 |
17 | - 字面量方式:
18 |
19 | ```javascript
20 | var fun = fnction(){
console.log("this is function");
}
21 | ```
22 |
23 | ## 函数调用
定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会真正执行这些动作。
- 定义一个函数fn:
24 |
25 | ```javascript
26 | function fn(){
console.log("this is function");
}
27 | ```
28 |
29 | - 调用函数fn:
30 |
31 | ```javascript
32 | fn();// 输出字符串 this is function
33 | ```
34 |
35 | ## 函数参数
函数的参数就相当于在函数中使用的变量（虽然这个比方不是很准确）。JavaScript 中的函数定义并未制定函数参数的类型，函数调用时也未对传入的参数做任何的类型检查。
36 |
函数的参数可以分为以下两种:
37 |
- 形参: 出现在函数定义文法中的参数列表是函数的形式参数，简称形参 。简单来说，就是定义函数时使用的参数就是形参。
- 实参: 函数调用时实际传入的参数是函数的实际参数，简称实参。 简单来说，就是调用函数时使用的参数就是实参。
38 |
39 | > **值得注意的是:** 一般情况下，形参与实参的个数是相同的。但在 JavaScript 中并不强求这一点，在特殊情况下，函数的形参和实参的个数可以不相同。
40 |
41 | ```javascript
42 | function fn( one, two ){
console.log( one + two );
}
fn( 1, 2 );// 输出 3
43 | ```
44 |
45 | 上述代码中，定义函数 fn 时，one 和 two 就是函数的形参；调用函数 fn 时，1 和 2 就是函数的实参。
46 |
47 | ## return 语句
函数还可以包含一个返回语句（return）。当然，这并不是必需的。return 语句使函数可以作为一个值来使用。具体用法如下述代码:
48 |
49 | ```javascript
50 | function fn( msg ){
return "hello" + msg;
}
// 变量 fun 的值为 hello atguigu
var fun = fn("atguigu");
51 | ```
52 |
53 | > **值得注意的是:** return 默认情况下返回的是 undefined。
54 |
55 | ## 预定义函数
56 |
57 | JavaScript 预定义了一组函数，又称为全局函数，允许直接使用。
| 函数 | 描述 |
58 | | --- | --- |
59 | | eval( ) | 对一串字符串形式的JavaScript代码字符求值。|
60 | | uneval( ) | 创建的一个Object的源代码的字符串表示。|
61 | | isFinite( ) | 判断传入的值是否是有限的数值。|
62 | | isNaN( ) | 判断一个值是否不是数字值。|
63 | | parseInt( ) | 解析字符串参数，并返回指定的整数。|
64 | | parseFloat( ) | 解析字符串参数，并返回一个浮点数。|
65 | | decodeURI( ) | 对已编码的统一资源标识符(URI)进行解码，并返回其非编码形式。|
66 | | encodeURI( ) | 对统一资源标识符(URI)进行编码，并返回编码后的URI字符串。|
67 |
68 | ### eval() 函数
69 |
70 | eval() 函数用于执行以字符串（String）形式出现的 JavaScript 代码。此函数可以实现动态的执行 JavaScript 代码。具体用法如下述代码:
71 |
72 | ```javascript
73 | // 定义一个字符串，内容为JavaScript代码
var js = "console.log('this is javascript')";
// 通过 eval()函数执行上述内容
eval(js);// 输出 this is javascript
74 | ```
75 |
76 | ### 字符编码与解码
encodeURI() 函数可把字符串作为 URI 进行编码。对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的:
```
77 | , / ? : @ & = + $ #
78 | ```
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
79 |
80 | decodeURI() 函数和 encodeURI() 函数的具体用法如下述代码:
```javascript
81 | var uri = "http://www.atguigu.com/Web前端开发工程师";
var encode = encodeURI( uri );
// 输出 http://www.atguigu.com/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88
console.log( encode );
var decode = decodeURI( encode );
// 输出 http://www.atguigu.com/Web前端开发工程师
console.log( decode );
82 | ```
83 |
84 | 对以下在 URI 中具有特殊含义的 ASCII 标点符号，可以使用 encodeURIComponent() 函数和decodeURIComponent() 函数。
```javascript
85 | var uri = "http://www.atguigu.com/font-end-developer";
var encode = encodeURIComponent( uri );
// 输出 http%3A%2F%2F www.atguigu.com%2Ffont-end-developer
console.log( encode );
var decode = decodeURIComponent( encode );
// 输出 http://www.atguigu.com/font-end-developer
console.log( decode );
86 | ```
--------------------------------------------------------------------------------
/ecmascript-5/inherit.md:
--------------------------------------------------------------------------------
1 | ## 原型链
构造函数或构造器具有 prototype 属性，对象具有 `__proto__` 属性，这就是之前学习的原型。
2 |
如果构造函数或对象 A ，A 的原型指向构造函数或对象 B，B 的原型再指向构造函数或对象 C，以此类推，最终的构造函数或对象的原型指向 Object 的原型。由此形成一条链状结构，被称之为原型链。
3 |
按照上述的描述，在 B 中定义的属性或方法，可以直接在 A 中使用并不需要定义。这就是继承，它允许每个对象来访问其原型链上的任何属性或方法。
4 |
原型链是 ECMAScript 标准中指定的默认实现继承的方式。
5 |
6 | 原型链的示意结构图如下:
7 |
8 | 
9 |
10 | ### 原型链实现继承
```javascript
11 | function A(){
this.name = "a";
this.toString = function(){return this.name};
}
function B(){
this.name = "b";
}
function C(){
this.name = "c";
this.age = 18;
this.getAge = function(){return this.age};
}
B.prototype = new A();
C.prototype = new B();
12 | ```
13 |
14 | 上述代码实现的示意图如下:
15 |
16 | 
17 |
18 | ### 只继承于原型
出于对效率的考虑，尽可能地将属性和方法添加到原型上。可以采取以下方式:
19 |
- 不要为继承关系单独创建新对象。
- 尽量减少运行时的方法搜索。
根据上述方式进行更改后，代码如下:
```javascript
20 | function A(){}
A.prototype.name = "a";
A.prototype.toString = function(){return this.name};
function B(){}
B.prototype = A.prototype;
B.prototype.name = "b";
function C(){}
C.prototype = B.prototype;
C.prototype.name = "c";
C.prototype.age = 18;
C.prototype.getAge = function(){return this.age};
21 | ```
22 |
23 | ### 原型链的问题
原型链虽然很强大，用它可以实现 JavaScript 中的继承，但同时也存在着一些问题。
24 |
- 原型链实际上是在多个构造函数或对象之间共享属性和方法。
- 创建子类的对象时，不能向父级的构造函数传递任何参数。
综上所述，在实际开发中很少会单独使用原型链。
## 原型式继承
所谓原型式继承，就是定义一个函数，该函数中创建一个临时性的构造函数，将作为参数传入的对象作为这个构造函数的原型，最后返回这个构造函数的实例对象。
```javascript
25 | function object( o ){
function F(){}
F.prototype = o;
return new F();
}
26 | ```
27 |
28 | 根据原型式继承所总结的 object() 函数实现继承，如下代码示例:
29 |
30 | ```javascript
31 | var person = {
name : "Mary",
friends : ["Tom","King"]
}
var anotherPerson = object( person );
anotherPerson.friends.push("Rob");
console.log(anotherPerson.friends);// Tom, King, Rob
32 | ```
33 |
34 | 这种原型式继承要求必须具有一个对象可以作为另一个对象的基础。
上述的原型式继承，也可以利用 Object 的 create() 方法替代自定义的 object() 函数，从而实现规范化。
```javascript
35 | var person = {
name : "Mary",
friends : ["Tom","King"]
}
var anotherPerson = Object.create( person );
anotherPerson.friends.push("Rob");
console.log(anotherPerson.friends);// Tom, King, Rob
36 | ```
37 |
38 | > **值得注意的是:** 原型式继承具有与原型链同样的问题。
## 借助构造函数
无论是原型链还是原型式继承，都具有相同的问题。想要解决这样的问题的话，可以借助构造函数（也可以叫做伪造对象或经典继承）。
39 |
这种方式实现非常简单，就是在子对象的构造函数中调用父对象的构造函数。具体可以通过调用 apply() 和 call() 方法实现。
40 |
apply() 和 call() 方法都允许传递指定某个对象的 this。对于继承来讲，可以实现在子对象的构造函数中调用父对象的构造函数时，将子对象的 this 和父对象的 this 绑定在一起。
根据上述描述，借助构造函数实现继承，如下代码示例:
41 |
42 | ```javascript
43 | function SuperType(){
this.color = ["red","green","blue"];
}
function SubType(){
// 继承了SuperType
SuperType.call(this);
// 或 SuperType.apply(this,arguments);
}
var instance = new SubType();
instance.color;// red, green, blue
44 | ```
45 |
46 | ## 组合方式继承
组合继承，也叫做伪经典继承，指的是将原型链或原型式继承和借助构造函数的技术组合在一起，发挥二者长处的一种继承方式。
47 |
具体实现的思路就是:
48 |
49 | - 使用原型链或原型式继承实现对原型的属性和方法的继承。
- 通过借助构造函数实现对实例对象的属性的继承。
这样，既通过在原型上定义方法实现了函数的重用，又可以保证每个对象都有自己的专有属性。
根据上述描述，组合方式继承，如下代码示例:
50 |
51 | ```javascript
52 | function SuperType( name ){
this name = name;
}
SuperType.prototype.sayName = function(){
console.log(this.name);
}
funtion SubType( name, age ){
SuperType.call( this, name );// 继承属性
this.age = age;
}
SubType.prototype = SuperType.prototype;// 继承方法
53 | ```
--------------------------------------------------------------------------------
/ecmascript-5/javascript-introduce.md:
--------------------------------------------------------------------------------
1 | ## JavaScript 介绍
2 |
3 | ### 什么是 JavaScript
4 |
5 | JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
6 |
7 | 当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有 28.8kbps，验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 JavaScript，提供了数据验证的基本功能。
8 |
9 | JavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给HTML网页增加动态功能。然而现在 JavaScript 也可被用于网络服务器，如 Node.js。
10 |
11 | ### JavaScript发展历史
12 |
13 | - 在 1995 年由 Netscape (网景)公司推出 LiveScript。在此之前，没有所谓的前端技术。所有的处理都需要由服务器端进行操作。当时的目的是同时在客户端和服务器端使用。
14 | - 由 Netscape(网景)公司联合 SUN 公司完善 LiveScrip。此时， Netscape(网景)公司将 LiveScript 更名为 JavaScript。目的是利用 Java 语言的流行。
15 | - 微软在推出 IE3.0 时，使用了 JavaScript 的克隆版本，Jscript。
16 | - 在 1997 年，JavaScript 1.1 由欧洲计算机制造商协会定义。此举，只为 JavaScript 语言定制统一的语言版本。该全新版本的推出，更名为 ECMAScript。该版本由 Netscape、Sun、微软等共同定义。
17 |
18 | ### JavaScript 组成部分
19 |
20 | - ECMAScript
21 | - ECMAScript是一种脚本语言的标准，ECMA-262标准。
22 | - 该标准不仅限于JavaScript语言使用，例如ActionScript语言中的标准也为ECMA-262标准。
23 | - ECMAScript 描述了以下内容：语法、类型、语句、关键字、保留字、运算符和对象等。
24 | - BOM：全称： Browser Object Model，译为浏览器对象模型。
25 | - DOM：全称： Document Object Model，译为文档对象模型。
26 |
27 | ## ECMAScript 介绍
28 |
29 | ### 什么是 ECMAScript
30 |
31 | ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。
32 |
33 | ### ECMAScript 发展历史
34 |
35 | - 1995 年 12 月 SUN 公司与 Netscape 公司一起引入了 JavaScript。
36 | - 1996 年 03 月网景通讯公司发表了支持 JavaScript 的网景导航者2.0。
37 | - 1996 年 08 月由于 JavaScript 作为网页的客户面脚本语言非常成功，微软将之引入了Internet Explorer 3.0，取名 JScript。
38 | - 1996 年 11 月网景通讯公司将 JavaScript 提交给欧洲计算机制造商协会进行标准化。
39 | - 1997 年 06 月 ECMA-262 的第一个版本被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript。
40 |
41 | ## 如何使用 JavaScript
42 |
43 | 可以在HTML页面中的任何位置，使用 `` 标签来插入 JavaScript。
44 |
45 | > **值得注意的是:** 在 HTML 页面中的不同位置，插入 JavaScript。执行地效果各不相同（执行顺序是自上而下）。
46 |
47 | `
9 | ```
10 |
11 | * 定义容器元素`
`
12 |
13 | ```html
14 |
15 |
16 |
17 |
18 |
百度地图如何使用
19 |
28 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | ```
44 |
45 | ### JavaScript 逻辑
46 |
47 | * 创建百度地图对象
48 |
49 | ```javascript
50 | var map = new BMap.Map(容器元素id);
51 | ```
52 |
53 | * 初始化百度地图
54 |
55 | ```javascript
56 | map.centerAndZoom(中心点坐标,显示级别)
57 | ```
58 |
59 | 如下述示例代码：
60 |
61 | ```javascript
62 | /*
63 | 1. 通过Map()构造函数,创建百度地图对象
64 | var map = new BMap.Map(容器元素id属性值);
65 | */
66 | var map = new BMap.Map("allmap");
67 | /*
68 | 2. (必要)初始化百度地图 - 设置中心点和显示级别
69 | map.centerAndZoom(center,zoom)
70 | * center - 设置百度地图当前的中心点坐标
71 | * Point类型,zoom参数必须设置
72 | * String类型,zoom参数可有可无
73 | * 如果不设置zoom,自动匹配最佳显示级别
74 | * zoom - 设置百度地图当前的显示级别
75 | * 一般情况下,值范围为 3-19
76 | * 高清地图(移动端),值范围为 3-18
77 | */
78 | map.centerAndZoom("北京",12);
79 | ```
80 |
81 | ## 核心类
82 |
83 | ### Map类
84 |
85 | **构造器**
86 |
87 | | 构造函数 | 参数 | 说明 |
88 | | ------- | ---- | ---- |
89 | | Map(container) | container：页面容器元素id | 创建地图实例对象 |
90 |
91 | **配置方法**
92 |
93 | | 方法名称 | 参数 | 说明 |
94 | | ------- | ---- | ---- |
95 | | enableScrollWheelZoom() | | 开启鼠标滚轮放大或缩小地图的显示级别 |
96 | | disableScrollWheelZoom() | | 禁用鼠标滚轮功能 |
97 | | enableDragging() | | 启用鼠标拖拽功能 |
98 | | disableDragging() | | 禁用鼠标拖拽功能 |
99 |
100 | **地图状态方法**
101 |
102 | | 方法名称 | 参数 | 说明 |
103 | | ------- | ---- | ---- |
104 | | getCenter() | | 返回地图当前中心点(Point类型) |
105 | | getZoom() | | 返回地图当前缩放级别(Number类型) |
106 |
107 | **修改地图状态方法**
108 |
109 | | 方法名称 | 参数 | 说明 |
110 | | ------- | ---- | ---- |
111 | | centerAndZoom(center,zoom) | center：设置地图的中心点坐标；zoom：设置地图的显示级别 | 初始化地图中心点和级别 |
112 | | setCenter(center) | center：设置地图的中心点坐标 | 设置地图中心点(Point|String) |
113 | | setCurrentCity(city) | city：设置地图城市 | 设置地图城市 |
114 | | setZoom(zoom) | zoom：设置地图的显示级别 | 设置显示级别 |
115 |
116 | **控件方法**
117 |
118 | | 方法名称 | 参数 | 说明 |
119 | | ------- | ---- | ---- |
120 | | addControl(control) | | 将控件添加到地图 |
121 | | removeControl(control) | | 从地图中移除控件 |
122 |
123 | **覆盖物方法**
124 |
125 | | 方法名称 | 参数 | 说明 |
126 | | ------- | ---- | ---- |
127 | | addOverlay(overlay) | | 将覆盖物添加到地图中 |
128 | | removeOverlay(overlay) | | 从地图中移除覆盖物 |
129 | | openInfoWindow(InfoWindow, Point) | InfoWindow：设置信息窗口；Point：在指定点打开 | 设置信息窗口 |
130 |
131 | ## 控件类
132 |
133 | ### ScaleControl类
134 |
135 | 表示比例尺控件。
136 |
137 | **构造器**
138 |
139 | | 构造函数 | 参数 | 说明 |
140 | | ------- | ---- | ---- |
141 | | ScaleControl(ScaleControlOptions) | - | 创建地图比例尺对象 |
142 |
143 | ### ScaleControlOptions类
144 |
145 | 表示ScaleControl构造函数的可选参数。
146 |
147 | **选项**
148 |
149 | - anchor：设置当前控件显示的位置。
150 | - `BMAP_ANCHOR_TOP_LEFT`：左上角
151 | - `BMAP_ANCHOR_BOTTOM_LEFT`：左下角
152 | - `BMAP_ANCHOR_TOP_RIGHT`：右上角
153 | - `BMAP_ANCHOR_BOTTOM_RIGHT`：右下角
154 |
155 | ### NavigationControl类
156 |
157 | 表示地图的平移缩放控件。
158 |
159 | **构造器**
160 |
161 | | 构造函数 | 参数 | 说明 |
162 | | ------- | ---- | ---- |
163 | | NavigationControl(NavigationControlOptions) | - | 创建地图平移缩放对象 |
164 |
165 | ### MapTypeControl类
166 |
167 | 负责切换地图类型的控件。
168 |
169 | **构造器**
170 |
171 | | 构造函数 | 参数 | 说明 |
172 | | ------- | ---- | ---- |
173 | | MapTypeControl(MapTypeControlOptions) | - | 创建地图类型对象 |
174 |
175 | ### OverviewMapControl类
176 |
177 | 表示缩略地图控件。
178 |
179 | **构造器**
180 |
181 | | 构造函数 | 参数 | 说明 |
182 | | ------- | ---- | ---- |
183 | | OverviewMapControl(OverviewMapControlOptions) | - | 创建缩略地图对象 |
184 |
185 | ```html
186 |
187 |
188 |
189 |
190 |
百度地图的控件类
191 |
200 |
201 |
202 |
203 |
204 |
239 |
240 |
241 | ```
242 |
243 | ## 覆盖物类
244 |
245 | ### Marker类
246 |
247 | 表示地图上一个图像标注。
248 |
249 | **构造器**
250 |
251 | | 构造函数 | 参数 | 说明 |
252 | | ------- | ---- | ---- |
253 | | Marker(point) | - | 创建标注对象 |
254 |
255 | ### InfoWindow类
256 |
257 | 表示地图上包含信息的窗口。
258 |
259 | **构造器**
260 |
261 | | 构造函数 | 参数 | 说明 |
262 | | ------- | ---- | ---- |
263 | | InfoWindow(content) | content：设置当前点的地址信息内容 | 创建信息的窗口对象 |
264 |
265 | **方法**
266 |
267 | | 方法名称 | 参数 | 说明 |
268 | | ------- | ---- | ---- |
269 | | setWidth(width) | | 设置信息窗口的宽度 |
270 | | setHeight(height) | | 设置信息窗口的高度 |
271 | | setTitle(title) | | 设置信息窗口的标题 |
272 |
273 | ```html
274 |
275 |
276 |
277 |
278 |
279 |
为百度地图进行标注
280 |
289 |
290 |
291 |
292 |
293 |
306 |
307 |
308 | ```
309 |
310 | ## 服务类
311 |
312 | ### Geocoder类
313 |
314 | 用于获取用户的地址解析。
315 |
316 | **构造器**
317 |
318 | | 构造函数 | 参数 | 说明 |
319 | | ------- | ---- | ---- |
320 | | Geocoder() | content：设置当前点的地址信息内容 | 创建地址解析对象 |
321 |
322 | **方法**
323 |
324 | | 方法名称 | 参数 | 说明 |
325 | | ------- | ---- | ---- |
326 | | getPoint(address,callback,city) | address：要解析的地址内容；callback：回调函数（解析address地址成功的话,回调函数具有一个形参）；city：当前地址所在的城市名称 | 对指定的地址进行解析 |
327 |
328 | ```html
329 |
330 |
331 |
332 |
333 |
百度地图案例
334 |
343 |
344 |
345 |
346 |
347 |
378 |
379 |
380 | ```
--------------------------------------------------------------------------------
/html5/drag-and-drop.md:
--------------------------------------------------------------------------------
1 | 允许用户在一个元素上点击并按住鼠标按钮，拖动它到别的位置，然后松开鼠标按钮将元素放到那儿。
2 |
3 | 在拖动操作过程中，被拖动元素会以半透明形式展现，并跟随鼠标指针移动。放置元素的位置可能会在不同的应用内。
4 |
5 | ## 源元素事件
6 |
7 | **所谓源元素**就是被拖动的元素。
8 |
9 | | 事件名称 | 作用 | 触发次数 |
10 | | --- | --- | --- |
11 | | dragstart事件 | 开始拖动源元素时被触发 | 只被触发一次|
12 | | drag事件 | 拖动的过程中，实时被触发 | 被触发多次 |
13 | | dragend事件 | 结束拖动源元素时被触发 | 只被触发一次 |
14 |
15 | ```html
16 |
17 |
18 |
19 |
37 | ```
38 |
39 | ## 目标元素事件
40 |
41 | **所谓目标元素**就是投放到的元素。
42 |
43 | | 事件名称 | 作用 | 触发次数 |
44 | | --- | --- | --- |
45 | | dragenter事件 | 当源元素到达目标元素时被触发 | 只被触发一次|
46 | | dragover事件 | 当源元素到达目标元素时被触发 | 被触发多次。阻止默认行为，触发drop事件 |
47 | | drop事件 | 当源元素投放在目标元素时被触发 | 默认该事件不会被触发 |
48 | | dragleave事件 | 当源元素离开目标元素时被触发 | 只被触发一次 |
49 |
50 | ```html
51 |
52 |
53 |
54 |
55 |
81 | ```
82 |
83 | ## dataTransfer对象
84 |
85 | 该对象已被集成在 `event` 对象中，起到剪切板的功能。
86 |
87 | | 方法名称 | 作用 | 场景 |
88 | | --- | --- | --- |
89 | | setData(type,data) | 存储数据 | 在源元素事件中 |
90 | | getData(type) | 取出数据 | 在目标元素事件中 |
91 | | clearData() | 清除剪切板中所有数据 | |
92 |
93 | 参数：
94 |
95 | - type：指定当前存储数据的类型(标识)。
96 | - data：需要中转的数据内容。
97 |
98 | ```html
99 |
100 |
101 |
102 |
103 |
138 | ```
--------------------------------------------------------------------------------
/html5/html5-introduce.md:
--------------------------------------------------------------------------------
1 | ## HTML5 简介
2 |
3 | HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。
4 |
5 | HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。
6 |
7 | HTML5 是近十年来 Web 开发标准最巨大的飞跃。HTML5 并非仅仅用来表示 Web 内容，它将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。
8 |
9 | ### HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性:
10 |
11 | - 新的语义化元素： 比如 `
`，`