├── examples
    ├── 第25章-新兴的API
    │   ├── test0.txt
    │   ├── test1.txt
    │   ├── test2.txt
    │   ├── test3.txt
    │   ├── test4.txt
    │   ├── genTestFile.js
    │   ├── file3.html
    │   ├── files.html
    │   └── files2.html
    ├── imgs
    │   ├── drawing.jpeg
    │   └── async-defer-script.png
    ├── 第20章-JSON
    │   └── testNodeJson.js
    ├── 第16章-HTML5脚本编程
    │   ├── post-message-iframe.html
    │   ├── post-message-parent.html
    │   └── drag.html
    ├── 第13章-事件
    │   ├── dom0-event.html
    │   ├── attachEvent.html
    │   ├── event-attrs.html
    │   ├── dom2-event2.html
    │   ├── dom2-event.html
    │   ├── event.html
    │   ├── event-fn.html
    │   └── addHandler.html
    ├── 第5章-引用类型
    │   ├── iframe父窗口.html
    │   └── iframe子窗口.html
    ├── 第14章-表单脚本
    │   ├── form.html
    │   ├── paste.html
    │   ├── input.html
    │   ├── auto-focus.html
    │   └── button-type.html
    ├── 第15章-canvas
    │   ├── canvas2.html
    │   ├── canvas3.html
    │   ├── canvas1.html
    │   ├── canvas5.html
    │   ├── canvas4.html
    │   └── time.html
    ├── 第21章-Ajax与Comet
    │   └── 测试activeXString.html
    └── 第十章-DOM
    │   └── 操作节点.html
├── package.json
├── 第2章-在html中使用JavaScript.md
├── 第20章-Json.md
├── .gitignore
├── gulpfile.js
├── 第17章-错误处理与调试.md
├── 第23章-离线应用与客户端存储.md
├── 第8章-BOM.md
├── LICENSE
├── 第16章-HTML5脚本编程.md
├── 第3章-基本概念.md
├── README.md
├── 第10-DOM.md
├── 第25章-新兴的API.md
├── 第4章-变量、作用域和内存问题.md
├── 第9章-客户端检测.md
├── 第22章-高级技巧.md
├── 第6章-面向对象的程序设计.md
├── 第15章-使用canvas绘图.md
├── 第7章-函数表达式.md
├── 第13章-事件.md
├── 第14章-表单脚本.md
├── 第21章-Ajax与Comet.md
└── 第5章-引用类型.md


/examples/第25章-新兴的API/test0.txt:
--------------------------------------------------------------------------------
1 | 3y4lriu9z98


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/test1.txt:
--------------------------------------------------------------------------------
1 | kzi2yl61ice


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/test2.txt:
--------------------------------------------------------------------------------
1 | ze4pjsnhhp8


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/test3.txt:
--------------------------------------------------------------------------------
1 | okpjjlka3hh


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/test4.txt:
--------------------------------------------------------------------------------
1 | ge3307kbrwm


--------------------------------------------------------------------------------
/examples/imgs/drawing.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qianlongo/professional-js/HEAD/examples/imgs/drawing.jpeg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "devDependencies": {
3 |     "browser-sync": "^2.18.12",
4 |     "gulp": "^3.9.1"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/imgs/async-defer-script.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qianlongo/professional-js/HEAD/examples/imgs/async-defer-script.png


--------------------------------------------------------------------------------
/第2章-在html中使用JavaScript.md:
--------------------------------------------------------------------------------
1 | ## 2.1.2 延迟脚本
2 | 主要理解script标签添加`async` `defer`与正常情况的差别
3 | 
4 | ![async-defer-script](./examples/imgs/async-defer-script.png)
5 | 


--------------------------------------------------------------------------------
/examples/第20章-JSON/testNodeJson.js:
--------------------------------------------------------------------------------
1 | let obj = {
2 |   name: 'qianlongo',
3 |   sex: 'boy'
4 | }
5 | 
6 | let str = '{"name":"qianlongo","sex":"boy"}'
7 | 
8 | console.log(JSON.parse(str));


--------------------------------------------------------------------------------
/第20章-Json.md:
--------------------------------------------------------------------------------
1 | 目标
2 | 
3 | 1. 理解JSON语法
4 | 2. 解析JSON
5 | 3. 序列化JSON
6 | 
7 | ## 前言
8 | 
9 | > 为了解决XML过于繁琐、冗长、这个问题，涌现了许多解决方案，JSON就是其中一种，JSON是JavaScript的一个严格的子集，通过一些模式来表示结构化的数据，需要理解的是它是一种数据格式，而不是一种编程语言。虽然具有相同的语法格式，但是JSON并不从属于JavaScript。很多编程语言都有针对JSON的解析器和序列化器。


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.obj
 2 | *.dll
 3 | *.pdb
 4 | *.suo
 5 | *.user
 6 | .darc
 7 | [Bb]in/
 8 | [Dd]ebug*/
 9 | [Rr]elease*/
10 | node_modules*/
11 | npm-debug.log
12 | packages*/
13 | **/.idea/*
14 | **/.sass-cache
15 | noPopup_nogit.html
16 | .darc
17 | .DS_Store


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | let gulp = require('gulp')
 2 | let browserSync = require('browser-sync').create()
 3 | 
 4 | // 静态服务器
 5 | gulp.task('browser-sync', function () {
 6 |   browserSync.init({
 7 |     server: {
 8 |       baseDir: "./examples"
 9 |     }
10 |   });
11 | });
12 | 
13 | gulp.task('default', ['browser-sync'])
14 | 


--------------------------------------------------------------------------------
/examples/第16章-HTML5脚本编程/post-message-iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <script>  
11 |   
12 |   </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/genTestFile.js:
--------------------------------------------------------------------------------
 1 | let fs = require('fs')
 2 | 
 3 | let prevFileName = 'test'
 4 | let genTestFiles = (num) => {
 5 |   for (let i = 0; i < num; i++) {
 6 |     let fileName = `${prevFileName}${i}.txt`
 7 |     fs.unlink(fileName, (err) => {
 8 |       fs.writeFileSync(fileName, Math.random().toString(36).substr(2))
 9 |     })
10 |   }
11 | }
12 | 
13 | genTestFiles(5)


--------------------------------------------------------------------------------
/第17章-错误处理与调试.md:
--------------------------------------------------------------------------------
 1 | **本章内容**
 2 | . 理解浏览器报告的错误
 3 | . 处理错误
 4 | . 调试JavaScript代码
 5 | 
 6 | 由于JavaScript本身是动态语言，而且多年来一直没有固定的开发工具，因此人们普遍认为它是一种难以调试的编程语言。脚本出错时，浏览器通常会给出类似于“object expected”（缺少对象）这样的消息，没有上下文信息，让人摸不着头脑。
 7 | 
 8 | ## 17.1 ~ 17.1.5
 9 | 
10 | > 介绍几款浏览器报告错误的方式以及如何调试。
11 | 
12 | ## 17.2 错误处理
13 | 
14 | > 错误处理在程序设计中的重要性是毋庸置疑的，任何有影响力的Web程序都需要一套完善的错误处理机制，当然，大多数的佼佼者确实做到了这一点，但通常只有服务端应用程序才能做到如此，实际上，服务端团队往往会在错误处理机制上投入较大的精力，
15 | 


--------------------------------------------------------------------------------
/examples/第13章-事件/dom0-event.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button class="btn"></button>
11 |   <script>
12 |     let btn = document.querySelector('.btn')
13 | 
14 |     btn.onclick = function () {
15 |       console.log(this.className)
16 |     }
17 |   </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/第23章-离线应用与客户端存储.md:
--------------------------------------------------------------------------------
 1 | ## 23.3 数据存储
 2 | 
 3 | > 随着 Web应用程序的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。属于某个特定用户的信息应该存在该用户的机器上，无论是登录信息还是偏好设置或者其他数据。
 4 | 
 5 | > 解决该问题的第一个方案是以cookie的形式出现的，cookie只是在客户端存储数据的其中一种选项。
 6 | 
 7 | ## Cookie
 8 | 
 9 | > HTTP Cookie 通常叫做cookie，最初是在客户端用于存储会话信息的。该标准要求服务器对任意的http请求发送 Set-Cookie HTTP头作为响应的一部分，其中包含会话信息，例如这种服务器响应的头可能如下。
10 | 
11 | **cookie以名值对存在，并且名称和值都必须是URL编码的，浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP头将信息发送回服务器。**
12 | 
13 | 1. 限制
14 | 
15 | cookie在性质上是绑定在特定域名下的，当设定了一个cookie之后，再给创建它的域名发送请求时，都会包含这个cookie，这个限制确保了存储在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。
16 | 


--------------------------------------------------------------------------------
/examples/第13章-事件/attachEvent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button>点击</button>
11 |   <script>
12 |     let $btn = document.querySelector('button')
13 |     const handle = function () {
14 |       console.log(this)
15 |     }
16 |     // 添加事件
17 |     $btn.attachEvent('onclick', handle)
18 |     // 移除事件
19 |     $btn.detachEvent('onclick', handle)
20 |   </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/examples/第16章-HTML5脚本编程/post-message-parent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>父窗口</title>
 8 | </head>
 9 | <body>
10 |   <p>该示例已移动到第5章</p>
11 |   <iframe src="http://child.haha.com/%E7%AC%AC16%E7%AB%A0-HTML5%E8%84%9A%E6%9C%AC%E7%BC%96%E7%A8%8B/post-message-iframe.html" frameborder="0" class="iframe"></iframe>
12 |   <script>
13 |     document.domain = 'haha.com'
14 |     let $iframe = document.querySelector('iframe')
15 |   </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/event-attrs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button>ahhaha</button>
11 |   <button class="btn">点击</button>
12 |   <script>
13 |     let $body = document.body
14 |     let $btn = document.querySelector('.btn')
15 | 
16 |     $btn.addEventListener('click', function (e) {
17 |       console.log(e)
18 |     }, false)
19 | 
20 |     $body.addEventListener('click', function (e) {
21 |       console.log(e)
22 |     }, false)
23 |   </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/第8章-BOM.md:
--------------------------------------------------------------------------------
 1 | 本章内容
 2 | 1. 理解window对象--BOM的核心
 3 | 2. 控制窗口、框架和弹出窗口
 4 | 3. 利用location对象的页面信息
 5 | 4. 使用navigator对象了解浏览器
 6 | 
 7 | ## 8.1 window对象
 8 | 
 9 | > BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，也是ECMAScript规范的Global对象，这意味着在网页中定义任何一个对象，变量或者函数，都以window作为Global对象，因此有权访问parseInt等方法
10 | 
11 | ## 8.1.1 全局作用域
12 | 
13 | > 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
14 | 
15 | ``` javascript
16 | 
17 | var age = 29
18 | 
19 | function sayAge () {
20 |   alert(this.age)
21 | }
22 | 
23 | alert(window.age)
24 | sayAge()
25 | window.sayAge()
26 | 
27 | ```
28 | 
29 | age和sayAge都被自动归在了window对象名下，所以可以通过window.age和window.sayAge访问
30 | 
31 | **非常重要**
32 | 
33 | 定义全局变量与在window对象上直接定义属性的差别是：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。


--------------------------------------------------------------------------------
/examples/第5章-引用类型/iframe父窗口.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>在iframe中判断是否为数组父窗口</title>
 8 | </head>
 9 | <body>
10 |   <iframe src="http://child.haha.com/第5章-引用类型/iframe子窗口.html" frameborder="0" id="child-iframe"></iframe>
11 |   <script>
12 |     let parent = ['parent']
13 |     let childWin = document.getElementById('child-iframe').contentWindow
14 |     console.log(`child, ${childWin.childArr}`)
15 |     setTimeout(() => {
16 |       childWin.postMessage('message from parent', 'http://child.haha.com/')
17 |     }, 2000)
18 |   </script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/examples/第14章-表单脚本/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>表单字段</title>
 9 | </head>
10 | 
11 | <body>
12 |   <form action="">
13 |     <input type="text" name="username">
14 |     <input type="text" name="username">
15 |     <input type="text" name="pwd">
16 |     <input type="radio" name="sex" value="boy">
17 |     <input type="radio" name="sex" value="girl">
18 |     <input type="submit">
19 |   </form>
20 |   <script>
21 |     let $form = document.forms[0]
22 |     let elements = $form.elements
23 |     // 测试表单控件提交，如果name相同那么会得到一个NodeList
24 |   </script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/dom2-event2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button class="btn">点击</button>
11 |   <script>
12 |     let btn = document.querySelector('.btn')
13 |     btn.onclick = () => {
14 |       console.log(4)
15 |     }
16 | 
17 |     btn.addEventListener('click', () => {
18 |       console.log(1)
19 |     }, false)
20 | 
21 |     btn.addEventListener('click', () => {
22 |       console.log(2)
23 |     }, true)
24 | 
25 |     btn.addEventListener('click', () => {
26 |       console.log(3)
27 |     }, false)
28 | 
29 |     
30 |   </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/examples/第5章-引用类型/iframe子窗口.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>在iframe中判断是否为数组子窗口</title>
 8 |   <style>
 9 |     .child{
10 |       width: 100px;
11 |       height: 100px;
12 |       border: solid 1px red;
13 |     }
14 |   </style>
15 | </head>
16 | <body>
17 |   <div class="child"></div>
18 |   <script>
19 |     let childArr  = ['child']
20 |     window.childArr = childArr
21 |     console.log(`childArr, ${childArr}, ${(childArr instanceof Array)}`)
22 |     window.addEventListener('message', (e) => {
23 |       let { origin, data, source } = e
24 |       console.log(origin, data, source)
25 |     }, false)
26 |   </script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/examples/第15章-canvas/canvas2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>canvas基本使用</title>
 9 | 	<style>
10 | 		#drawing{
11 | 			border: solid 1px green;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<canvas id="drawing" width="200" height="200"></canvas>
18 | 	<script>
19 | 		let $drawing = document.getElementById('drawing')
20 | 		let ctx = $drawing.getContext && $drawing.getContext('2d')
21 | 
22 | 		if (ctx) {
23 | 			// 绘制红色的矩形
24 | 			ctx.fillStyle = '#ff0000'
25 | 			ctx.fillRect(10, 10, 50, 50)
26 | 			// 绘制半透明的矩形
27 | 			ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
28 | 			ctx.fillRect(30, 30, 50, 50)
29 | 		}
30 | 	</script>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/examples/第15章-canvas/canvas3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>canvas基本使用</title>
 9 | 	<style>
10 | 		#drawing{
11 | 			border: solid 1px green;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<canvas id="drawing" width="200" height="200"></canvas>
18 | 	<script>
19 | 		let $drawing = document.getElementById('drawing')
20 | 		let ctx = $drawing.getContext && $drawing.getContext('2d')
21 | 
22 | 		if (ctx) {
23 | 			// 绘制红色的矩形
24 | 			ctx.fillStyle = '#ff0000'
25 | 			ctx.strokeRect(10, 10, 50, 50)
26 | 			// 绘制半透明的矩形
27 | 			ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
28 | 			ctx.strokeRect(30, 30, 50, 50)
29 | 		}
30 | 	</script>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/examples/第15章-canvas/canvas1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>canvas基本使用</title>
 9 | 	<style>
10 | 		#drawing{
11 | 			border: solid 1px green;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<canvas id="drawing" width="200" height="200"></canvas>
18 | 	<script>
19 | 		let $drawing = document.getElementById('drawing')
20 | 		let ctx = $drawing.getContext && $drawing.getContext('2d')
21 | 
22 | 		if (ctx) {
23 | 			ctx.fillRect(0, 0, 100, 100)
24 | 			let imgURL = drawing.toDataURL('image/png')
25 | 			let image = document.createElement('img')
26 | 			image.src = imgURL
27 | 			document.body.appendChild(image)
28 | 		}
29 | 	</script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/dom2-event.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button class="btn">按钮</button>
11 |   <script>
12 |     let btn = document.querySelector('.btn')
13 |     const handleClick = () => {
14 |       console.log('hello world 3')
15 |     }
16 | 
17 |     btn.addEventListener('click', function () {
18 |       console.log('hello world 1')
19 |     }, false)
20 | 
21 |     btn.addEventListener('click', function () {
22 |       console.log('hello world 2')
23 |     }, false)
24 | 
25 |     btn.addEventListener('click', handleClick, false)
26 |     btn.removeEventListener('click', handleClick, false) // 移除的时候需要和添加的时候参数保持一致
27 |   </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/event.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .box{
10 |       width: 100px;
11 |       height: 100px;
12 |       border: solid 1px red;
13 |     }
14 | 
15 |     body{
16 |       background-color: green;
17 |     }
18 |   </style>
19 | </head>
20 | <body>
21 |   <div class="box"></div>
22 |   <script>
23 |     let doc = document
24 |     let $box = doc.querySelector('.box')
25 |     let $body = doc.querySelector('body')
26 |     let $html = doc.querySelector('html')
27 |     let win = window
28 | 
29 |     ;[$box, $body, $html, doc, window].forEach((v, i) => {
30 |       v.addEventListener('click', () => {
31 |         console.log('----' + i)
32 |       }, true)
33 |     });
34 |   </script>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/event-fn.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .box{
10 |       width: 200px;
11 |       height: 200px;
12 |       border: solid 1px red;
13 |     }
14 |   </style>
15 | </head>
16 | <body>
17 |   <script>
18 |     let showMsg = function (val, e) {
19 |       console.log(val)
20 |       console.log(e)
21 |     }
22 |   </script>
23 |   <div class="box" onclick="console.log(this.innerHTML, event)">hello world</div>
24 | 
25 |   <script>
26 |     let $btn = document.querySelector('.box')
27 | 
28 |     const logEventType = (event) => {
29 |       console.log(event.type)
30 |     }
31 | 
32 |     $btn.onclick = logEventType
33 |     $btn.addEventListener('click', logEventType, false)
34 |     
35 | 
36 | 
37 |   </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/examples/第15章-canvas/canvas5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>canvas基本使用</title>
 9 | 	<style>
10 | 		#drawing{
11 | 			border: solid 1px green;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<canvas id="drawing" width="100" height="100"></canvas>
18 | 	<script>
19 | 		let $drawing = document.getElementById('drawing')
20 | 		let ctx = $drawing.getContext && $drawing.getContext('2d')
21 | 		let fontSize = 100
22 | 		let fontStr = 'Hello world'
23 | 
24 | 		if (ctx) {
25 | 			ctx.textAlign = 'start'
26 | 			ctx.textBaseline = 'middle'
27 | 			ctx.font = `${fontSize}px Arial`
28 | 
29 | 			while (ctx.measureText(fontStr).width > 60) {
30 | 				fontSize--
31 | 				ctx.font = `${fontSize}px Arial`
32 | 			}
33 | 
34 | 			ctx.fillText(fontStr, 10, 10)
35 | 			ctx.fillText(`Font size is ${fontSize}px`, 10, 50)
36 | 
37 | 		}
38 | 	</script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/examples/第14章-表单脚本/paste.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>paste</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div class="box">
13 |     <input type="text" class="paste-input">
14 |   </div>
15 |   <script>
16 |     let $pasteInput = document.querySelector('.paste-input')
17 |     let getClipboardData = (e) => {
18 |       let clipboardData = (e || event).clipboardData
19 | 
20 |       return clipboardData.getData('text')
21 |     }
22 |     let setClipboardData = (e, val) => {
23 |       let params = e.clipboardData ? 'text/plain' : 'text'
24 |       let clipboardData = (e || event).clipboardData
25 | 
26 |       clipboardData.setData(params, val)
27 |     }
28 | 
29 |     $pasteInput.addEventListener('paste', (e) => {
30 |       let data = getClipboardData(e)
31 |       console.log('paste===', data)
32 |     }, false)
33 |     
34 |   </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 qianlongo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/examples/第14章-表单脚本/input.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>input</title>
 9 | </head>
10 | 
11 | <body>
12 |   <form action="">
13 |     <input type="text" size="200" maxlength="10">
14 |     <textarea name="textarea" id="" cols="30" rows="10">initial value</textarea>
15 |   </form>
16 | 
17 |   <input type="text" class="test-keypress">
18 |   
19 |   <script>
20 |     let $form = document.forms[0]
21 |     let $area = $form.elements['textarea']
22 |     let $keyPress = document.querySelector('.test-keypress')
23 | 
24 |     $keyPress.addEventListener('keypress', (e) => {
25 |       e.preventDefault()
26 |     }, false)
27 | 
28 |     $area.addEventListener('select', (e) => {
29 |       console.log($area.value.substring($area.selectionStart, $area.selectionEnd))
30 |     }, false)
31 |     $area.value = 111 // js改变其value，不会体现在<textarea></textarea>之间
32 |     $area.select()
33 | 
34 |     // setSelectionRange()方法
35 | 
36 |     console.log($area.setSelectionRange(0, 10))
37 |   </script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/examples/第15章-canvas/canvas4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>canvas基本使用</title>
 9 | 	<style>
10 | 		#drawing{
11 | 			border: solid 1px green;
12 | 		}
13 | 	</style>
14 | </head>
15 | 
16 | <body>
17 | 	<canvas id="drawing" width="400" height="400"></canvas>
18 | 	<script>
19 | 		let $drawing = document.getElementById('drawing')
20 | 		let ctx = $drawing.getContext && $drawing.getContext('2d')
21 | 
22 | 		if (ctx) {
23 | 			ctx.beginPath()
24 | 			ctx.arc(100, 100, 100, 0, 2 * Math.PI, false)
25 | 			ctx.moveTo(190, 100) // 防止画出多余的线
26 | 			ctx.arc(100, 100, 90, 0, 2 * Math.PI, false)
27 | 			ctx.moveTo(100, 100)
28 | 			ctx.lineTo(100, 30)
29 | 			ctx.moveTo(100, 100)
30 | 			ctx.lineTo(40, 100)
31 | 			ctx.stroke()
32 | 			ctx.font = 'bold 14px Arial'
33 | 			ctx.textAlign = 'center'
34 | 			ctx.textBaseline = 'middle'
35 | 			ctx.fillText('12', 100, 20)
36 | 			ctx.textAlign = 'start'
37 | 			ctx.fillText('12', 100, 40)
38 | 			ctx.textAlign = 'end'
39 | 			ctx.fillText('12', 100, 60)
40 | 		}
41 | 	</script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/examples/第14章-表单脚本/auto-focus.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 	<title>自动切换焦点</title>
 9 | </head>
10 | 
11 | <body>
12 | 	<form action="" name="form1">
13 | 		<input type="text" name="tel1" maxlength="3">
14 | 		<input type="text" name="tel2" maxlength="4">
15 | 		<input type="text" name="tel3" maxlength="5">
16 | 	</form>
17 | 	<script>
18 | 		let $form = document.forms['form1']
19 | 
20 | 		let getNextInput = (e) => {
21 | 			let target = (e || event).target
22 | 			let maxLength = target.maxLength
23 | 			let val = target.value
24 | 			let name = target.name
25 | 			let len = name.length
26 | 			let nextInputIndex = Number(name[name.length - 1]) + 1
27 | 			let prefix
28 | 
29 | 			if (val.length === maxLength) {
30 | 				prefix = name.slice(0, len - 1)
31 | 				name = `${prefix}${nextInputIndex}`
32 | 				return $form.elements[name]
33 | 			}
34 | 		}
35 | 
36 | 
37 | 		$form.addEventListener('keyup', (e) => {
38 | 			let $nextInput = getNextInput(e)
39 | 			
40 | 			if ($nextInput) {
41 | 				$nextInput.focus()
42 | 			}
43 | 		}, false)
44 | 	</script>
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/examples/第21章-Ajax与Comet/测试activeXString.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <script>
12 |     function createXHR() {
13 |       if (typeof XMLHttpRequest != 'undefined') {
14 |         return new XMLHttpRequest()
15 |       } else if (typeof arguments.callee.activeXString != 'string') {
16 |         console.log('进了arguments.callee.activeXString')
17 |         var versions = [
18 |           'MSXML2.XMLHttp',
19 |           'MSXML2.XMLhttp.3.0',
20 |           'MSXML2.XMLhttp.6.0'
21 |         ]
22 |         for (var i = 0, len = versions.length; i < len; i++) {
23 |           try {
24 |             // 为什么这里不将实例返回也可以得到XHR对象
25 |             console.log(versions[i])
26 |             new ActiveXObject(versions[i])
27 |             arguments.callee.activeXString = versions[i]
28 |             break
29 |           } catch (e) {
30 |             // 跳过
31 |           }
32 |         }
33 |         console.log('ActiveXObject', arguments.callee.activeXString)
34 |         return new ActiveXObject(arguments.callee.activeXString)
35 |       } else {
36 |         throw new Error('No XHR object available')
37 |       }
38 |     }
39 | 
40 |     createXHR()
41 |   </script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/examples/第13章-事件/addHandler.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <button class="btn">点击</button>
11 |   <script>
12 |     const addHandler = (element, type, handler) => {
13 |       if (element.addEventListener) {
14 |         element.addEventListener(type, handler, false)
15 |       } else if (element.attachEvent) {
16 |         element.attachEvent(`on${type}`, handler)
17 |       } else {
18 |         element[`on${type}`] = handler
19 |       }
20 |     }
21 | 
22 |     const removeHandler = (element, type, handler) => {
23 |       if (element.removeEventListener) {
24 |         element.removeEventListener(type, handler, false)
25 |       } else if (element.detachEvent) {
26 |         element.detachEvent(`on${type}`, handler)
27 |       } else {
28 |         element[`on${type}`] = null
29 |       }
30 |     }
31 | 
32 |     const $btn = document.querySelector('.btn')
33 |     const logClassName = function () {
34 |       console.log(this.className)
35 |     }
36 | 
37 |     addHandler($btn, 'click', logClassName)
38 |     addHandler($btn, 'click', function () {
39 |       console.log('hello world')
40 |     })
41 | 
42 |     removeHandler($btn, 'click', logClassName)
43 |   </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/examples/第14章-表单脚本/button-type.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>能够提交表单的类型</title>
 9 | </head>
10 | 
11 | <body>
12 |   <form action="https://github.com/">
13 |     <input type="text" value="用户名" name="username">
14 |     <input type="password" value="pwd" name="password">
15 |     <!-- 有以下三种按钮类型就可以提交表单 -->
16 |     <input type="submit" value="提交表单"> 
17 |     <input type="reset" value="重置表单">
18 |     <!-- <button type="submit">提交表单</button> -->
19 |     <!-- <input type="image" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png"> -->
20 |   </form>
21 |   <script>
22 |     let $form = document.forms[0]
23 |     let fields = [].slice.call($form.elements)
24 |     let checkForm = () => {
25 |       return (fields.filter((ele) => {
26 |         return ['text', 'password'].includes(ele.type)
27 |       }).every((ele) => {
28 |         return ele.value.length > 6
29 |       }))
30 |     }
31 | 
32 |     ['submit', 'reset'].forEach((v) => {
33 |       $form.addEventListener(v, function (event) {
34 |         if (checkForm()) {
35 |           // xxx 通过表单验证
36 |         } else {
37 |           // xxx 没通过
38 |           event.preventDefault()
39 |         }
40 |       }, false)
41 |     })
42 |     
43 |   </script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/第16章-HTML5脚本编程.md:
--------------------------------------------------------------------------------
 1 | 本章内容
 2 |   -使用跨文档消息传递
 3 |   -拖放API
 4 |   -音频与视频
 5 | 
 6 | ## 16.1 跨文档消息传递
 7 | 
 8 | > 跨文档消息传送（cross-document-messaging），有时候简称为XDM，指的是在来自不同域的页面间传递消息。例如www.wrox.com域中的页面与位于一个内嵌框架中的p2p.wrox.com域中的页面通信。
 9 | 
10 | XDM的核心是postMessage方法，在HTML5中除了XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：**向另一个地方传递数据**，对于XDM而言，“另一个地方”指的是包含在当前页面中的<iframe>或者由当前页面弹出的窗口
11 | 
12 | postMessage方法接收两个参数，一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。来看下面的例子
13 | 
14 | ``` javascript
15 | 
16 | let iframeWindow = document.getElementById('myframe').contentWindow
17 | 
18 | iframeWindow.postMessage('A secret', 'http://www.wrox.com')
19 | 
20 | 
21 | ```
22 | 
23 | 如果postMessage的第二个参数是'*'，则可以把消息发送给来自任何域的文档，但是我们不推荐这样做。
24 | 
25 | 接收到XDM消息的时候会触发window对象的message事件，这个事件是以异步形式触发的，因此从发送消息到接收消息（触发窗口的message事件）可能要经过一段时间的延迟。触发message事件之后，传递给onmessage处理程序的事件包含以下三方面的信息。
26 | 
27 | 1. data：作为postMessage第一个参数传入的字符串参数
28 | 2. origin：发送消息的文档所在的域，例如"http://www.wrox.com"
29 | 3. source: 发送消息的文档的window对象的代理，这个代理对象主要用于发送一条消息的窗口中调用postMessage方法，如果发送消息的窗口来自同一个域，那么这个对象就是window。
30 | 
31 | 
32 | **特别注意**
33 | 
34 | 1. event.source大多数情况下只是window对象的代理，并非是实际的window对象，换句话说，不能通过这个代理对象拿到window对象的其他任何信息，记住，只通过这个代理调用postMessage就好，这个方法永远存在。
35 | 
36 | 2. XDM还有一些怪异之处，首先就是postMessage的第一个参数最早是作为“永远都是字符串”来实现的，但是后来这个参数定义改了，改成允许传入任何数据结构，可是并非所有的浏览器都实现了这一变化，为了保险起见，使用postMessage时，最好还是只传字符串，如果要传结构化后的数据，最佳选择是现在要传入的数据上调用JSON.stringfy,通过postMessage传入得到的字符串，然后再在onmessage事件处理程序中调用JSON.parse
37 | 
38 | ## 16.2.1 拖放事件
39 | 
40 | ## 16.4 历史状态管理
41 | 
42 | > 
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/file3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     .box{
10 |       width: 300px;
11 |       border: solid 1px green;
12 |       position: absolute;
13 |       left: 50%;
14 |       top: 50%;
15 |       transform: translate(-50%, -50%);
16 |       text-align: center;
17 |     }
18 |   </style>
19 | </head>
20 | <body>
21 |   <div class="box">
22 |     <span>将文件拖进此处</span>
23 |     <ul class="files-info"></ul>
24 |   </div>
25 |   
26 |   <script>
27 |     let $target = document.querySelector('.box')
28 |     let $fileInfo = document.querySelector('.files-info')
29 |     let files
30 |     let cLi = (file) => {
31 |       return `
32 |         <li>
33 |           <span>${file.name}</span><br />
34 |           <span>${file.size}</span><br />
35 |           <span>${file.type}</span><br />
36 |         </li>
37 |       `
38 |     }
39 |     let handle = (e) => {
40 |       e = e || window.event
41 | 
42 |       e.preventDefault()
43 |       if (e.type === 'drop') {
44 |         files = e.dataTransfer.files
45 |         Array.from(files).forEach((file) => {
46 |           $fileInfo.innerHTML += cLi(file)
47 |         })
48 |       }
49 |       
50 |     }  
51 |     $target.addEventListener('dragenter', handle, false)
52 |     $target.addEventListener('dragover', handle, false)
53 |     $target.addEventListener('drop', handle, false)
54 |   </script>
55 | </body>
56 | </html> 


--------------------------------------------------------------------------------
/第3章-基本概念.md:
--------------------------------------------------------------------------------
 1 | 本章内容
 2 |   语法
 3 |   数据类型
 4 |   流控制语句
 5 |   理解函数
 6 | 
 7 | 任何语言的核心都必然会描述这门语言最基本的工作原理，而描述的内容通常都要涉及这门语言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念
 8 | 
 9 | ## 3.1 语法
10 | 
11 | > ECMAScript的原发大量借鉴了C及其他类C语言（如Java何Perl）的语法。因此，熟悉这些语言的开发人员在接受ECMAScript更加宽松的语法时，一定会有一种轻松自在的感觉
12 | 
13 | ### 3.1.1 区分大小写
14 | 
15 | > 要理解的第一个概念就是ECMAScript中的一切（变量名、函数名和操作符）都区分大小写。这也就意味着，变量名test和变量名Test分别表示两个不同的变量，而函数名不能使用typeof ，因为它是一个关键字，但typeof 则完全可以是一个有效的函数名(`不太理解这句话`)。
16 | 
17 | ### 3.1.2 标识符
18 | 
19 | > 所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符。
20 | 
21 | 1. 第一个字符必须是一个字母、下划线(_)、或一个美元符号($)
22 | 2. 其他字符可以是字母、数字、下划线或者美元符号
23 | 
24 | 按照惯例、ECMAScript标识符采用驼峰大小写格式、也就是第一个字母小写、剩下的每个有意思的单词的首字母大写，例如：
25 | 
26 | firstSecond
27 | myCar
28 | doSomeThingImportant
29 | 
30 | 虽然没有强制要求必须采用这种格式，但为了与ECMAScript内置的函数和对象命名格式保持一致，可以将其当做是一种最佳实践。
31 | 
32 | ### 3.1.3 注释
33 | 
34 | > js中采用C风格的注释，包括单行注释和块级注释
35 | 
36 | 1. //
37 | 2. 
38 | 
39 | /*
40 |  *
41 |  *
42 |  */
43 | 
44 |  ### 3.1.4 严格模式 
45 | 
46 |  > ECMAScript 5 引入了严格模式(strict mode)的概念。严格模式是为JavaScript定义了一种不同的解析和执行原理。在严格模式下，ECMAScript3中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误。
47 | 
48 |  使用严格模式方式有以下两种
49 | 
50 |  ``` javascript
51 | 
52 |  // 1 代码顶部
53 | 
54 |  "use strict"
55 | 
56 |  // 2 函数体内
57 | 
58 |  function doSomeThing () {
59 |    "use strict"
60 |  }
61 | 
62 | 
63 |  ```
64 | 
65 |  ### 3.15 语句
66 | 
67 |  
68 |  ## 3.3 变量
69 | 
70 |  > ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据，换句话说每个变量仅仅是一个用于保存值的占位符而已
71 | 
72 |  ## 3.4 数据类型
73 | 
74 |  1. Undefined
75 |  2. Null
76 |  3. Number
77 |  4. String
78 |  5. Boolean
79 |  6. Object
80 | 
81 |  (`需要注意的是es6中又新增了一种基础数据类型 Symbol`)
82 | 
83 | 
84 | ### 3.4.5 Number类型
85 | 
86 | ### 3.4.6 String类型
87 | 


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/files.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>files</title>
 8 |   <style>
 9 |     span{
10 |       display: inline-block;
11 |       margin: 0 10px;
12 |     }
13 |   </style>
14 | </head>
15 | <body>
16 |   <input type="file" class="files" multiple>
17 |   <div class="output"></div>
18 |   <script>
19 |     let $files = document.querySelector('.files')
20 |     let $output = document.querySelector('.output')
21 | 
22 |     let genShtml = (sHtml, isImg) => {
23 |       return isImg ? `
24 |         <img src="${sHtml}" height="100">
25 |       ` : `<pre>${sHtml}</pre>`
26 |     }
27 |     let insertShtml = (sHtml) => {
28 |       $output.innerHTML += sHtml
29 |     }
30 | 
31 |     $files.addEventListener('change', (e) => {
32 |       let target, files, isImg, readAs
33 | 
34 |       e = e || event
35 |       target = e.target || e.srcElement
36 |       files = target.files
37 | 
38 |       Array.from(files).forEach((file, i) => {
39 |         let fileReader = new FileReader()
40 | 
41 |         if (/image/.test(file.type)) {
42 |           isImg = true
43 |           readAs = 'readAsDataURL'
44 |         } else {
45 |           isImg = false
46 |           readAs = 'readAsText'
47 |         }
48 |         
49 |         fileReader[readAs](file)
50 |         fileReader.onload = () => {
51 |           insertShtml(genShtml(fileReader.result, isImg))
52 |         }
53 |         fileReader.onprogress = (e) => {
54 |           if (e.lengthComputable) {
55 |             console.log(e.loaded, e.total)
56 |           }
57 |         }
58 |       })
59 |       
60 |       
61 |     }, false)
62 |   </script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/examples/第25章-新兴的API/files2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>files</title>
 8 |   <style>
 9 |     span{
10 |       display: inline-block;
11 |       margin: 0 10px;
12 |     }
13 |   </style>
14 | </head>
15 | <body>
16 |   <input type="file" class="files" multiple>
17 |   <div class="output"></div>
18 |   <script>
19 |     let $files = document.querySelector('.files')
20 |     let $output = document.querySelector('.output')
21 |     let blobSlice = (blob, startByte, length) => {
22 |       if (blob.slice) {
23 |         return blob.slice(startByte, length)
24 |       } else if (blob.webkitSlice) {
25 |         return blob.webkitSlice(startByte, length)
26 |       } else if (blob.mozSlice) {
27 |         return blob.mozSlice(startByte, length)
28 |       } else {
29 |         return null
30 |       }
31 |     }
32 |     let genShtml = (sHtml, isImg) => {
33 |       return isImg ? `
34 |         <img src="${sHtml}" height="100">
35 |       ` : `<pre>${sHtml}</pre>`
36 |     }
37 |     let insertShtml = (sHtml) => {
38 |       $output.innerHTML += sHtml
39 |     }
40 | 
41 |     $files.addEventListener('change', (e) => {
42 |       let target, files, isImg, readAs
43 | 
44 |       e = e || event
45 |       target = e.target || e.srcElement
46 |       files = target.files
47 | 
48 |       Array.from(files).forEach((file, i) => {
49 |         let fileReader = new FileReader()
50 | 
51 |         if (/image/.test(file.type)) {
52 |           isImg = true
53 |           readAs = 'readAsDataURL'
54 |         } else {
55 |           isImg = false
56 |           readAs = 'readAsText'
57 |         }
58 |         
59 |         // fileReader[readAs](blobSlice(file, 5, 10))
60 |         fileReader[readAs](file)
61 |         fileReader.onload = () => {
62 |           insertShtml(genShtml(fileReader.result, isImg))
63 |         }
64 |         fileReader.onprogress = (e) => {
65 |           if (e.lengthComputable) {
66 |             console.log(e.loaded, e.total)
67 |           }
68 |         }
69 |       })
70 |       
71 |       
72 |     }, false)
73 |   </script>
74 | </body>
75 | </html> 


--------------------------------------------------------------------------------
/examples/第16章-HTML5脚本编程/drag.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>原生拖放</title>
 8 |   <style>
 9 |     *{
10 |       margin: 0;
11 |       padding: 0;
12 |     }
13 | 
14 |     .drag{
15 |       width: 30px;
16 |       height: 30px;
17 |       border-radius: 50%;
18 |       background: green;
19 |       display: inline-block;
20 |     }
21 |     .drag.pink{
22 |       background: pink;
23 |     }
24 |     
25 |     .target{
26 |       width: 400px;
27 |       margin-top: 100px; 
28 |     }
29 |     .target li{
30 |       height: 30px;
31 |       line-height: 30px;
32 |       border: solid 1px green;
33 |       text-align: center;
34 |     }
35 | 
36 |     .color-red{
37 |       color: red;
38 |     }
39 |   </style>
40 | </head>
41 | <body>
42 |   <div class="drag" draggable="true"></div>
43 |   <ul class="target">
44 |     <li>1</li>
45 |     <li>2</li>
46 |     <li>3</li>
47 |   </ul>
48 |   <script>
49 |     let $drag = null
50 |     let $target = document.querySelector('.target')
51 | 
52 |     document.addEventListener('dragstart', (e) => {
53 |       let { target } = e
54 |       $drag = target
55 |       target.className += ' pink'
56 |     }, false)
57 |     document.addEventListener('drag', (e) => {
58 |       // console.log(e.type)
59 |     }, false)
60 |     document.addEventListener('dragend', (e) => {
61 |       let { target, type } = e
62 |       target.className = 'drag'
63 |     }, false)
64 | 
65 |     document.addEventListener('dragover', (e) => {
66 |       e.preventDefault()
67 |     }, false)
68 |     document.addEventListener('dragenter', (e) => {
69 |       let { target } = e
70 |       
71 |       if (target.tagName === 'LI') {
72 |         target.className += ' color-red'
73 |       }
74 |     }, false)
75 |     document.addEventListener('dragleave', (e) => {
76 |       let { target } = e
77 |       
78 |       if (target.tagName === 'LI') {
79 |         target.className = ''
80 |       }
81 |     }, false)
82 |     document.addEventListener('drop', (e) => {
83 |       let { target } = e
84 |       
85 |       if (target.tagName === 'LI') {
86 |         target.className = ''
87 |         $drag.parentNode.removeChild($drag)
88 |         target.appendChild($drag)
89 |       }
90 |     }, false)
91 |   </script>
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # professional-js
 2 | 
 3 | > 最近打算重新巩固一下js基础，遥想详细看这本书还是2015年大三的时候，现在已经工作一年，越是工作，越是容易把基础丢失。开一个仓库，来记录重温的过程。
 4 | 
 5 | **重温的过程并不会完全按照书籍的目录，而是觉得自己哪方面的知识开始模糊薄弱了**
 6 | 
 7 | ## 重温记录
 8 | 
 9 | [第4章-变量、作用域和内存问题](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC4%E7%AB%A0-%E5%8F%98%E9%87%8F%E3%80%81%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E5%86%85%E5%AD%98%E9%97%AE%E9%A2%98.md)
10 | 
11 | [第5章-引用类型](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC5%E7%AB%A0-%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B.md)
12 | 
13 | [第6章-面向对象的程序设计](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC6%E7%AB%A0-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1.md)
14 | 
15 | [第7章-函数表达式](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC7%E7%AB%A0-%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F.md)
16 | 
17 | [第8章-BOM](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC8%E7%AB%A0-BOM.md)
18 | 
19 | [第9章-客户端检测](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC9%E7%AB%A0-%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%A3%80%E6%B5%8B.md)
20 | 
21 | [第10-DOM](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC10-DOM.md)
22 | 
23 | [第13章-事件](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC13%E7%AB%A0-%E4%BA%8B%E4%BB%B6.md)
24 | 
25 | [第14章-表单脚本](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC14%E7%AB%A0-%E8%A1%A8%E5%8D%95%E8%84%9A%E6%9C%AC.md)
26 | 
27 | [第15章-使用canvas绘图](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC15%E7%AB%A0-%E4%BD%BF%E7%94%A8canvas%E7%BB%98%E5%9B%BE.md)
28 | 
29 | [第16章-HTML5脚本编程](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC16%E7%AB%A0-HTML5%E8%84%9A%E6%9C%AC%E7%BC%96%E7%A8%8B.md)
30 | 
31 | [第17章-错误处理与调试](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC17%E7%AB%A0-%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86%E4%B8%8E%E8%B0%83%E8%AF%95.md)
32 | 
33 | [第20章-JSON](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC20%E7%AB%A0-Json.md)
34 | 
35 | [第21章-Ajax与Comet](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC21%E7%AB%A0-Ajax%E4%B8%8EComet.md)
36 | 
37 | [第22章-高级技巧](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC22%E7%AB%A0-%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7.md)
38 | 
39 | 
40 | [第23章-离线应用与客户端存储](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC23%E7%AB%A0-%E7%A6%BB%E7%BA%BF%E5%BA%94%E7%94%A8%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%AD%98%E5%82%A8.md)
41 | 
42 | [第25章-新兴的API](https://github.com/qianlongo/professional-js/blob/master/%E7%AC%AC25%E7%AB%A0-%E6%96%B0%E5%85%B4%E7%9A%84API.md)
43 | 
44 | 


--------------------------------------------------------------------------------
/第10-DOM.md:
--------------------------------------------------------------------------------
 1 | ## DOM
 2 | 
 3 | > DOM（文档对象模型），是针对HTML和XML文档的一个API，DOM描述了一个层次化的节点树，允许开发人员`添加`，`移除`,`修改`页面的某一部分。
 4 | 
 5 | ## 目标
 6 | 
 7 | 1. 理解包含不同层次节点的DOM
 8 | 2. 使用不同的节点类型(一般是元素节点，文本节点，文档碎片，文档节点等)
 9 | 3. 克服浏览器的兼容性问题及各种陷阱
10 | 
11 | ## 节点的类型
12 | 
13 | > 接下来会简要的总结常见的几种节点类型以及其相关的知识点
14 | 
15 | ## Node类型
16 | 
17 | > DOM1定义了一个Node借口，所有的元素都有`nodeType`属性，nodeType可取得值有12中，常见和经常用的有以下几种
18 | 
19 | 1. 1 (元素节点)
20 | 2. 3 (文本节点)
21 | 3. 9 (文档节点)
22 | 4. 11 (文档碎片`DocumentFragment`)
23 | 
24 | ## childNodes
25 | 
26 | > 每个节点都有`childNodes`属性，其保存着一种类数组对象，用于保存一组有序的节点，可以用下标方式去访问，也可以用`item`方法去访问,当然也要注意，childNodes属性有浏览器的兼容问题，ie下只包含其子节点中为元素节点的子元素，其他浏览器则还包括元素节点
27 | 
28 | 
29 | ``` javascript
30 | var eles = someNode.childNodes
31 | var len = eles.length
32 | var firstChild = ele[0] or eles.item(0)
33 | var lastChild = eles[len - 1] or eles.item(len - 1)
34 | 
35 | ```
36 | 
37 | ## 节点之间的关系
38 | 
39 | > 节点之间的关系是多样的，两个节点之间可以父子节点，祖孙节点，兄弟节点等等
40 | 
41 | **previousSibling**
42 | **nextSibling**
43 | **firstChild**
44 | **lastChild**
45 | 
46 | 当一个列表中只存在一个节点，那么previousSibling和nextSibling都为null
47 | 
48 | firstChild和lastChild也分别指向第一个和最后一个子节点
49 | 
50 | 
51 | ## 操作节点
52 | 
53 | > 我们可以用`appendChild`、`insertBefore`、`replaceChild`来进行常见的节点之间的操作
54 | 
55 | **parentNode.appendChild(childNode)**
56 | 
57 | 1. 将childNode节点添加到parentNode节点末尾
58 | 2. 如果childNode节点已经在文档中存在，则从原来的位置移动到parentNode的末尾。
59 | 
60 | [appendChild用法链接](https://qianlongo.github.io/professional-js/examples/%E7%AC%AC%E5%8D%81%E7%AB%A0-DOM/%E6%93%8D%E4%BD%9C%E8%8A%82%E7%82%B9.html)
61 | 
62 | **parentNode.insertBefore(要插入的节点, 作为参照的节点)**
63 | 
64 | 1. 如果`作为参照的节点`不为null，`则要插入的节点`最终会插入到`作为参照的节点`前面。
65 | 2. 如果`作为参照的节点`为null，则其作用与`appendChild`类似
66 | 3. 该方法执行之后返回`要插入的节点`
67 | 
68 | [insertBefore的用法](https://qianlongo.github.io/professional-js/examples/%E7%AC%AC%E5%8D%81%E7%AB%A0-DOM/%E6%93%8D%E4%BD%9C%E8%8A%82%E7%82%B9.html)
69 | 
70 | **parentNode.replaceChild(要插入的节点, 要替换的节点)**
71 | 
72 | 1. `要插入的节点`如果是原来已经存在，则从原来的位置移动到`要替换的节点`位置前面
73 | 
74 | [replaceChild的用法](https://qianlongo.github.io/professional-js/examples/%E7%AC%AC%E5%8D%81%E7%AB%A0-DOM/%E6%93%8D%E4%BD%9C%E8%8A%82%E7%82%B9.html)
75 | 
76 | **parentNode.removeChild(childNode)**
77 | 
78 | [removeChild的用法](https://qianlongo.github.io/professional-js/examples/%E7%AC%AC%E5%8D%81%E7%AB%A0-DOM/%E6%93%8D%E4%BD%9C%E8%8A%82%E7%82%B9.html)
79 | 
80 | **ele.cloneNode(true or other)**
81 | 
82 | 1. 克隆节点，如果传入的值为true，则深度克隆，包括文本节点等
83 | 2. 如果传入为false 或者不传入，则浅复制该节点本身
84 | 3. 注意复制节点并不会连同事件也复制，但是ie有bug，会连同事件一起复制
85 | 
86 | [cloneNode的用法](https://qianlongo.github.io/professional-js/examples/%E7%AC%AC%E5%8D%81%E7%AB%A0-DOM/%E6%93%8D%E4%BD%9C%E8%8A%82%E7%82%B9.html)
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/examples/第15章-canvas/time.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 | 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 | 	<title>Document</title>
  9 | </head>
 10 | 
 11 | <body>
 12 | 	<canvas id="canvas" width="200" height="200"></canvas>
 13 | 	<script>
 14 | 		let $canvas = document.querySelector('#canvas')
 15 | 		let ctx = $canvas.getContext && $canvas.getContext('2d')
 16 | 		let w = $canvas.width
 17 | 		let h = $canvas.height
 18 | 		let middleX = w / 2
 19 | 		let middleY = h / 2
 20 | 		let r = middleX
 21 | 		let number = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2] // 从横坐标开始画
 22 | 		
 23 | 		let app = {
 24 | 			init () {
 25 | 				setInterval(() => {
 26 | 					this.draw()
 27 | 				}, 1000)
 28 | 			},
 29 | 			drawBg () {
 30 | 				ctx.save()
 31 | 				ctx.translate(middleX, middleY)
 32 | 				ctx.beginPath()
 33 | 				// 外圆
 34 | 				ctx.arc(0, 0, r, 0, 2 * Math.PI)
 35 | 				ctx.stroke()
 36 | 				// 数字 1 ~ 12, 水平垂直居中
 37 | 				ctx.font = '18px Arial'
 38 | 				ctx.textAlign = 'center'
 39 | 				ctx.textBaseline = 'middle'
 40 | 
 41 | 				number.forEach((num, index) => {
 42 | 					let reg = 2 * Math.PI / 12 * index // 360度分成12份
 43 | 					let x = Math.cos(reg) * (r - 18)
 44 | 					let y = Math.sin(reg) * (r - 18)
 45 | 
 46 | 					ctx.fillText(num, x, y)
 47 | 				})
 48 | 
 49 | 				// 画出60个格子
 50 | 				let dotNum = 60
 51 | 
 52 | 				while (dotNum--) {
 53 | 					let reg = 2 * Math.PI / 60 * dotNum
 54 | 					let x = Math.cos(reg) * (r - 5)
 55 | 					let y = Math.sin(reg) * (r - 5)
 56 | 
 57 | 					ctx.beginPath()
 58 | 					ctx.fillStyle = dotNum % 5 ? '#ccc' : '#000'
 59 | 					ctx.arc(x, y, 2, 0, 2 * Math.PI, false)
 60 | 					ctx.fill()
 61 | 				}			
 62 | 			},
 63 | 			drawHour (hour, minute) {
 64 | 				ctx.save()
 65 | 				ctx.beginPath()
 66 | 				rad = 2 * Math.PI / 12 * hour
 67 | 				mrad = 2 * Math.PI / 12 / 60 * minute
 68 | 				ctx.rotate(rad + mrad)
 69 | 				ctx.lineWidth = 6
 70 | 				ctx.lineCap = 'round'
 71 | 				ctx.moveTo(0, 10)
 72 | 				ctx.lineTo(0, -r / 2)
 73 | 				ctx.stroke()
 74 | 				ctx.restore()
 75 | 		
 76 | 			},
 77 | 			drawMinute (minute) {
 78 | 				ctx.save()
 79 | 				ctx.beginPath()
 80 | 				let rad = 2 * Math.PI / 60 * minute
 81 | 				ctx.rotate(rad)
 82 | 				ctx.lineWidth = 3
 83 | 				ctx.lineCap = 'round'
 84 | 				ctx.moveTo(0, 10)
 85 | 				ctx.lineTo(0, -r + 30)
 86 | 				ctx.stroke()
 87 | 				ctx.restore()
 88 | 			},
 89 | 			drawSecond (second) {
 90 | 				ctx.save()
 91 | 				ctx.beginPath()
 92 | 				ctx.fillStyle = '#c14443'
 93 | 				let rad = 2 * Math.PI / 60 * second
 94 | 				ctx.rotate(rad)
 95 | 				ctx.moveTo(-2, 20)
 96 | 				ctx.lineTo(2, 20)
 97 | 				ctx.lineTo(1, -r + 18)
 98 | 				ctx.lineTo(-1, -r + 18)
 99 | 				ctx.fill()
100 | 				ctx.restore()
101 | 			},
102 | 			draw () {
103 | 				ctx.clearRect(0, 0, w, h)
104 | 				let now = new Date()
105 | 				let hour = now.getHours()
106 | 				let minutes = now.getMinutes()
107 | 				let seconds = now.getSeconds()
108 | 				this.drawBg()
109 | 				this.drawHour(hour, minutes)
110 | 				this.drawMinute(minutes)
111 | 				this.drawSecond(seconds)
112 | 				ctx.restore()
113 | 			}
114 | 		}
115 | 
116 | 		app.init()
117 | 	</script>
118 | </body>
119 | 
120 | </html>


--------------------------------------------------------------------------------
/第25章-新兴的API.md:
--------------------------------------------------------------------------------
  1 | 本章目标
  2 |  1. 创建平滑的动画
  3 |  2. 操作文件
  4 |  3. 使用Web Workers在后台执行JavaScript
  5 | 
  6 | **第25章，我们先看看文件操作相关的知识点**
  7 | 
  8 | ## 25.4 File API
  9 | 
 10 | > 不能直接访问用户计算机中的文件，一直都是web应用开发中的一大障碍，2000年以前，处理文件唯一的方式就是在表单中加入<input type="file">字段，仅此而已，File API的宗旨是为Web开发人员开提供一种安全的的方式，以便在客户端访问用户计算机中的文件，并更好地对这些文件进行操作。
 11 | 
 12 | File API在表单的文件字段的基础上又添加了一些直接访问文件信息的接口，HTML5中在DOM中为文件输入元素添加了一个files集合，在通过文件输入字段选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应一个文件，每个File对象下面都有下列的只读属性。
 13 | 
 14 | name: 本地文件系统中的文件名
 15 | size: 文件的字节大小
 16 | type: 字符串，文件的MIME类型
 17 | lastModifiedDate: 字符串，文件上一次被修改的时间（只有Chrome实现了这个属性）
 18 | 
 19 | **文件信息获取示例**
 20 | html
 21 | 
 22 | ``` html
 23 | 
 24 | <input type="file" class="files" multiple>
 25 | 
 26 | ```
 27 | 
 28 | javascript
 29 | 
 30 | ``` javascript
 31 | 
 32 | let $files = document.querySelector('.files')
 33 | 
 34 |   $files.addEventListener('change', (e) => {
 35 |     let target, files
 36 | 
 37 |     e = e || event
 38 |     target = e.target || e.srcElement
 39 |     files = target.files
 40 | 
 41 |     Array.from(files).forEach((file, i) => {
 42 |       console.table(file)
 43 |     })
 44 |   }, false)
 45 | 
 46 | 
 47 | ```
 48 | 
 49 | ## 25.4.1 FileReader类型
 50 | 
 51 | > FileReader类型实现的是一种异步文件读取机制，可以把FileReader想象成XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。问了读取文件中的数据，FileReader提供了以下几个方法。
 52 | 
 53 | 1. readAsText(file, encoding)： 以纯文本形式读取文件，将读取到的文本保存在result属性中
 54 | 
 55 | 2. readAsDataURL(file): 读取文件并将文件以数据URI的形式保存在result属性中。
 56 | 
 57 | 3. readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。
 58 | 
 59 | 4. readArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
 60 | 
 61 | **由于读取文件的过程是异步的，因为FileReader也提供了几个事件，其中最有用的三个事件是progress，error，load，分别表示是否又读取了数据，是否发生错误以及是否已经读完了整个文件**
 62 | 
 63 | 每隔50ms左右，就会触发一次progress事件，通过事件对象可以获得与XHR的progress事件相同的信息。lengthComputed,loaded,total,另外尽管可能没有包含全部数据但是每次progress事件中都可以通过FileReader的result属性读取到文件内容。
 64 | 
 65 | 由于种种原因无法读取文件，就会触发error事件，触发error事件时，相关的信息将会保存到FileReader的error属性中，这个属性中将保存一个对象，该对象只有一个属性code，即错误码，这个错误码是
 66 | 
 67 | 1. 表示未找到文件
 68 | 2. 表示安全性错误
 69 | 3. 表示读取中断
 70 | 4. 表示文件不可读
 71 | 5. 表示编码错误
 72 | 
 73 | 文件成功加载后会触发load事件，如果发生了error事件就不会触发load事件。 
 74 | 
 75 | ## 25.4.2 读取部分内容
 76 | 
 77 | > 有时候，我们只想读取文件的一部分内容而不是全部内容，为此，File对象还支持一个slice方法，这个方法在Firefox中叫mozSlice，在chrome中叫做webkitSlice，其接受两个参数，起始字节，以及要读取的字节数。这个方法返回一个Blob的实例，Blob是File类型的父类型。下面是一个兼容的方法
 78 | 
 79 | ``` javascript
 80 | 
 81 | function blobSlice (blob, startByte, length) {
 82 |   if (blob.slice) {
 83 |     return blob.slice(startByte, length)
 84 |   } else if (blob.webkitSlice) {
 85 |     return blob.webkitSlice(startByte, length)
 86 |   } else if (blob.mozSlice) {
 87 |     return blob.mozSlice(startByte, length)
 88 |   } else {
 89 |     return null
 90 |   }
 91 | }
 92 | 
 93 | 
 94 | ```
 95 | 
 96 | 具体例子可以查看/examples/第25章-新兴的API/files2.html
 97 | 
 98 | 这种特性允许只读取部分内容可以节省很多时间，非常适合只关注数据中某个特性部分（比如文件头部）的情况
 99 | 
100 | ## 25.4.3 对象URL
101 | 
102 | ## 25.4.4 读取拖放的文件
103 | 
104 | > 围绕文件信息，结合使用的HTML5 API和文件API，可以做出很赞的东西来。与拖放一张图片或者一个链接类似，从桌面上把文件拖放到浏览器中也会触发drop事件，而且可以在event.dataTransfer.files中读取到被放置的文件，当然此时他是一个File对象，与通过文件输入字段取得的File对象一样
105 | 
106 | 
107 | ## 25.6 Web Workers
108 | 
109 | > 随着Web应用复杂性的与日俱增，越来越复杂的计算在所难免，长时间运行的JavaScript进行会导致浏览器冻结用户界面，让人感觉屏幕“冻结”了，Web Workers规范通过让JavaScript在后台运行解决了这个问题，浏览器实现Web Worker的方式有很多种，可以使用线程，后台进程或者运行在其他处理器上的进程，等等。怎么实现细节其实没有那么重要，重要的是开发人员现在可以放心地运行JavaScript而不必担心影响用户体验了。
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 


--------------------------------------------------------------------------------
/第4章-变量、作用域和内存问题.md:
--------------------------------------------------------------------------------
  1 | ## 变量、作用域和内存问题
  2 | 
  3 | 学习目标
  4 | 
  5 | 1. 理解基本类型和引用类型的值
  6 | 2. 理解执行环境
  7 | 3. 理解垃圾收集
  8 | 
  9 | **JavaScript松散类型的本质，决定了它只是在特定时间用于保存特定的值的一个名字而已。由于不存在定义某个变量必须保存何种数据类型值的规则，变量的值，及其数据类型可以在脚本的声明周期内改变。**
 10 | 
 11 | ## 4.1 基本类型和引用类型的值
 12 | 
 13 | js中包括两种不同数据类型的值
 14 | 
 15 | 1. 几本类型值 (`undefined` `null` `string` `number` `boolean`)
 16 | 2. 引用类型值 (`对象`)
 17 | 
 18 | ## 4.1.1 动态属性
 19 | 
 20 | > 这节说了一个问题，只能给引用类型的值动态地添加属性，不能给基本类型的值添加。
 21 | 
 22 | ## 4.1.2 复制变量值
 23 | 
 24 | > 两种数据类型，除了保存方式不一样之外，在从一个变量向另一个变量复制基本类型值和引用类型值时，也存在不同。
 25 | 
 26 | 1. 如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。
 27 | 
 28 | 
 29 | ``` javascript
 30 | var num1 = 5
 31 | var num2 = num1
 32 | 
 33 | ```
 34 | 看下图
 35 | 
 36 | ![看下图](http://odssgnnpf.bkt.clouddn.com/%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B%E5%A4%8D%E5%88%B6.png)
 37 | 
 38 | 2. 当用一个变量向另一个变量复制引用类型的值的时候，同样也会将存储在变量对象中的值复制一份放到新变量分配的空间中，不同的是，这个值的副本实际上是一个**指针**，而这个指针指向存储在堆中的一个对象，复制操作结束之后，两个变量实际上将引用同一个对象。所以只要改变其中一个变量就会影响到另一个变量。
 39 | 
 40 | ``` javascript
 41 | var obj1 = new object()
 42 | var obj2 = obj1
 43 | ibj1.name = 'qianlongo'
 44 | alert(obj.name) // qianlongo
 45 | ```
 46 | 
 47 | 基本原理看下图
 48 | 
 49 | ![](http://odssgnnpf.bkt.clouddn.com/%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E5%A4%8D%E5%88%B6.png)
 50 | 
 51 | ## 4.1.3 传递参数
 52 | 
 53 | > ECMAScript中所有函数的参数都是按值传递的，也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。
 54 | 
 55 | 理解上面这句话，大概就可以理解js中的传参机制了，还有可以可以把函数的参数想象成局部变量。
 56 | 
 57 | ## 4.1.4 检测类型
 58 | 
 59 | > 要检测一个变量是不是基本数据类型的？typeof是得力的工具，更具体一些旧事typeof可以确定一个变量是string、number、boolean、还是undefined，但是null会返回object。
 60 | 
 61 | ## 4.2 执行环境及作用域
 62 | 
 63 | ## 4.2.1 延长作用域
 64 | 
 65 | 1. try catch
 66 | 2. with
 67 | 
 68 | ## 没有块级作用域
 69 | > 在类似C语言中，由花括号封闭的代码块都有自己的作用域，因而支持根据条件来定义变量。
 70 | 
 71 | ``` javascript
 72 | if (true) {
 73 |   var color = 'blue'
 74 | }
 75 | 
 76 | alert(color) // blue
 77 | ```
 78 | 
 79 | 如果在类似c语言中，if执行之后变量color会被销毁，但是在js中会被添加到当前的执行环境中。
 80 | 
 81 | **声明函数**
 82 | 
 83 | > 使用var声明的变量会自动添加到最接近的环境中，在函数内部，最接近的环境就是函数局部环境，在with语句中，最接近的环境是函数环境，如果初始化的时候没有制定var声明，该变量就会被添加到全局环境中。
 84 | 
 85 | 查询标志符
 86 | 
 87 | > 说白了就是js在查找变量的过程是逐级向上的。
 88 | 
 89 | ``` javascript
 90 | var color = 'blue'
 91 | 
 92 | function getColor () {
 93 |   return color
 94 | }
 95 | 
 96 | alert(getColor()) // blue
 97 | 
 98 | ```
 99 | 
100 | ![](http://odssgnnpf.bkt.clouddn.com/%E6%9F%A5%E8%AF%A2%E6%A0%87%E5%BF%97%E7%AC%A6.png)
101 | 
102 | ## 4.3 垃圾收集
103 | 
104 | > JavaScript有自动的垃圾回收机制，执行环境会自动管理代码执行过程中使用的内容。
105 | 
106 | 垃圾回收机制的基本原理
107 | 
108 | **找出那些不再继续使用的变量，然后释放其占用的内存。**为此，垃圾收集器会按照固定的时间间隔周期性地执行这一操作
109 | 
110 | 垃圾回收机制一般有两种，`标记清除` `引用计数`
111 | 
112 | ## 4.3.1标记清除
113 | 
114 | 基本原理
115 | 
116 | > 当变量进入环境(例如： 声明一个变量)，就将这个变量标记为"进入环境"，当变量离开环境时将其标志为"离开环境"
117 | 
118 | ## 4.3.2 引用计数
119 | 
120 | 基本原理
121 | 
122 | > 引用计数的含义是跟踪记录**每个值被引用的次数**。
123 | 1. 当声明了一个变量并将一个引用类型的值赋给该变量时，则这个值的引用次数就是1，如果同一个值又被赋给另一个变量，则该引用次数又加一.
124 | 2. 相反如果包含这个值引用的变量又取得了另外一个值，则这个值的引用次数减一。
125 | 3. 当这个值的引用次数变成0的时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。
126 | 
127 | **引用计数带来的问题**
128 | 
129 | ``` javascript
130 | function problem () {
131 |   var objectA = new object()
132 |   var objectB = new object()
133 |   
134 |   objectA.somOtherObject = objectB
135 |   objectB.somOtherObject = objectA
136 | }
137 | 
138 | ```
139 | 
140 | 这个例子中两个对象通过各自的属性相互引用，导致这两个对象的引用次数都是2，且永远不可能为0。在菜用标记清除的策略中，函数执行完成之后，两个对象都离开的作用域，所以循环引用不是问题。
141 | 
142 | **ie中的麻烦**
143 | 
144 | ie中的BOM和DOM对象不是JavaScript对象，而是使用c++以COM(Component Object Model 组件对象模型)对象形成的。但是COM对象的垃圾收集机制是引用计数，所以即使ie的JavaScript引擎室使用标记清楚策略来实现的，但是因为存在上面的问题，依然会有循环引用带来的问题。
145 | 
146 | ``` javascript
147 | 
148 | var element = document.getElementById('some_element')
149 | var myObject = new Object()
150 | myObject.element = element
151 | element.someObject = myObject
152 | 
153 | ```
154 | 为了避免以上问题，应该手动断原声js对象与DOM元素之间的连接
155 | 
156 | ``` javascript
157 | myObject.element = null
158 | element.someObject = null
159 | 
160 | ```
161 | 
162 | ## 性能问题
163 | 
164 | > 主要说垃圾回收机制周期处理时间
165 | 
166 | ## 管理内存
167 | 
168 | > 将不用的变量手动设置为null，解除引用关系。 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 


--------------------------------------------------------------------------------
/第9章-客户端检测.md:
--------------------------------------------------------------------------------
  1 | **学习目标**
  2 | 1. 使用能力检测
  3 | 2. 用户代理检测的历史
  4 | 3. 选择检测的方式
  5 | 
  6 | ## 前言
  7 | 
  8 | > 各大浏览器在实现公共接口方面投入了很多精力，但是结果仍然是每一种浏览器都有各自存在不一致性的问题，面对普遍不一致的问题，开发人员要么采取迁就各方的“最小公分母”策略，要么就得利用各种客户端的检测方法，来突破或者规避种种局限。
  9 | 
 10 | ## 能力检测
 11 | 
 12 | > 最常用也是最为人们广泛接受的客户端检测形式是能力检测，能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力，采用这种形式不必顾忌特定的浏览器是如何如何，只要确定浏览器支持的特定的能力，就可以给出解决方案，举个例子。
 13 | 
 14 | 在IE5之前的版本不支持**document.getElementById()**这个DOM方法，尽管可以使用非标准的**document.all**属性实现相同的功能，但是IE早期的版本中，确实不存在前面那个方法，于是就有了下面的能力检测代码。
 15 | 
 16 | ``` javascript
 17 | 
 18 | function getElement (id) {
 19 |   if (document.getElementById) {
 20 |     return document.getElementById(id)
 21 |   } else if (document.all) {
 22 |     return document.all[id];
 23 |   } else {
 24 |     throw new Error('No way to retrieve element!')
 25 |   }
 26 | }
 27 | 
 28 | ```
 29 | 
 30 | 这里的**getElement**函数的用途是返回具有给定ID的元素，因为**document.getElementById**是实现这一目的的标准，所以一开始就检测了这个方法，如果该函数不存在就继续监测**document.all**是否存在，如果是就使用，如果两个特性都不满足，则创建一个错误并抛出。表示这个函数没有办法使用
 31 | 
 32 | 主要要理解能力检测，首先必须要理解两个重要的概念。
 33 | 
 34 | 1. 先检测达成目的的最常用的特性，可以保证代码最优化。因为在多数情况下，都可以避免测试多个条件。
 35 | 
 36 | 2. 必须检测实际要用到的特性，一个特性存在并不意味着另外一个特性也存在。
 37 | 
 38 | ``` javascript
 39 | 
 40 | function getWindowWith () {
 41 |   if (document.all) {
 42 |     return document.documentElement.clientWidth // 错误的使用例子
 43 |   } else {
 44 |     return window.innerWidth
 45 |   }
 46 | }
 47 | 
 48 | 
 49 | ```
 50 | 
 51 | 上面是一个错误使用能力检测的例子，检测**document.all**是否存在，并不意味着**document.documentElement.clientWith**也存在。
 52 | 
 53 | ## 9.1.1 更可靠的能力检测
 54 | 
 55 | > 能力检测对于想知道某个特性是否会按照适当的方式行事（而不仅仅是某个特性存在）非常有用。
 56 | 
 57 | ``` javascript
 58 | 
 59 | function isSortable (object) {
 60 |   return !!object.sort
 61 | }
 62 | 
 63 | ```
 64 | 
 65 | 这个函数通过检测对象是否存在sort方法，来确定是否支持排序，问题是包含sort属性的对象也会返回true
 66 | 
 67 | ``` javascript
 68 | let result = isSortable({ sort: true })
 69 | 
 70 | ```
 71 | 
 72 | 检测某个属性是否存在并不能确定对象是够支持排序，更好的方式是检测sort是不是一个函数。
 73 | 
 74 | ``` javascript
 75 | 
 76 | function isSortable (object) {
 77 |   return typeof object.sort === 'function'
 78 | }
 79 | 
 80 | ```
 81 | 
 82 | 在可能的情况下，要尽量用typeof进行能力检测，特别是，宿主对象没有义务让typeof返回合理的值，最令人发指的是事就发生在ie中，大多数浏览器在检测到`document.createElement()`存在时多会返回true
 83 | 
 84 | ``` javascript
 85 | 
 86 | function hasCreateElement () {
 87 |   return typeof document.createElement === 'function'
 88 | }
 89 | 
 90 | 
 91 | ```
 92 | 
 93 | 但是在ie8及其之前的版本中，这个函数返回false，因为`typeof document.createElement`返回的是`object`而不是`function`,本质原因是DOM对象是宿主对象，IE及其更早的版本中的宿主对象是COM对象，所以typeof才会返回object，IE9纠正了这个问题，对所有的DOM方法都返回`function`.
 94 | 
 95 | 再举个例子了解一下typeof的的行为不准确性。
 96 | 
 97 | **ActiveX**对象（只有IE支持）与其他对象的行为差异很大。
 98 | 
 99 | ``` javascript
100 | 
101 | let xhr = new ActiveXObject('Microsoft.XMLHttp')
102 | 
103 | if (xhr.open) {
104 |   // xxx
105 | }
106 | 
107 | ```
108 | 
109 | 直接把函数当做属性访问会导致js错误，所以使用typeof操作符会更加安全一些。但是有一个问题是typeof xhr.open会返回unknow
110 | 
111 | ## 9.1.2 能力检测，不是浏览器检测
112 | 
113 | > 检测某个或者某几个特性并不能确定浏览器，下面的代码就是错误地依赖能力检测的典型示例。
114 | 
115 | 
116 | ``` javascript
117 | 
118 | let isFirefox = !!(navigator.vendor && navigator.vendorSub)
119 | 
120 | let isIE = !!(document.all && document.uniqueID)
121 | 
122 | 
123 | ```
124 | 
125 | 这两行代码代表了对能力检测的典型勿用，以前确实可以通过检测navigatorv.vendor和navigator.vendorSub来确定firefox浏览器，但是别的浏览器也会实现相同的功能，所以检测自然会出现问题。
126 | 
127 | 9.2 怪癖检测
128 | 
129 | > 与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为，但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷，这通常需要运行一段代码，以确定某一特性不能正常工作。
130 | 
131 | 1. IE8之前有一个bug，即如果某个实例属性与标记为[[DontEnum]]的某个原型属性同名，name该实例属性将不会出现在for in循环当中。使用以下代码来检测。
132 | 
133 | ``` javascript
134 | 
135 | let hasDontEnumQuick = (() => {
136 |   let o = { toString () {} }
137 | 
138 |   for (let prop in o) {
139 |     if (prop === 'toString') {
140 |       return false
141 |     }
142 |   }
143 | 
144 |   return true
145 | })()
146 | 
147 | ```
148 | 
149 | 2. Safari3以前的浏览器版本会枚举被隐藏的属性，可以用下面的代码检测该怪癖
150 | 
151 | ``` javascript
152 | 
153 | let hasEnumShadowQuick = (() => {
154 |   let o = { toString () {} }
155 |   let count = 0
156 | 
157 |   for (let prop in o) {
158 |     if (prop === 'toString') {
159 |       count++
160 |     }
161 |   }
162 | 
163 |   return count > 1
164 | })()
165 | 
166 | 
167 | ```
168 | 
169 | 如果浏览器存在这个bug，那么for in循环枚举带有自定义的toString方法的对象，就会返回两个toString 的实例。
170 | 
171 | **一般来说“怪癖”检测是个别浏览器所独有的，而且通常被归为bug，建议仅检测那些对你有直接影响的怪癖，而且最好是在脚本一开始就执行此类检测，以便尽早解决问题**
172 | 
173 | ## 9.3 用户代理
174 | 
175 | > 第三种方式，也是争议最大的一种客户端检测方式叫做用户代理检测。用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。
176 | 因为存在浏览器通过再自己的用户代理字符串中添加一些错误或者误导的信息来达到欺骗的目的。其优先级排在能力检测和怪癖检测之后。
177 | 
178 | 


--------------------------------------------------------------------------------
/第22章-高级技巧.md:
--------------------------------------------------------------------------------
  1 | ## 高级技巧
  2 | 
  3 | 本章内容
  4 |   1. 使用高级函数
  5 |   2. 防止篡改对象
  6 |   3. ...
  7 | 
  8 | 22.1 高级函数
  9 | 
 10 | 22.1.1 安全的类型检测
 11 | > JavaScript内置的类型检测并不是完全可靠，发生错误的情况不再少数，
 12 | 
 13 | 1. **例如typeof操作符噢，由于它有一些无法预知的行为，经常会导致检测数据类型时得不到靠谱的结果。Safari在对正则表达式应用typeof操作符时会返回function,因此很难判断一个值是否是函数**
 14 | 
 15 | 2. instanceof 操作符存在全局作用域的情况下，也是问题多多。
 16 | 
 17 | ``` javascript
 18 | let isArray = value instanceof Array
 19 | 
 20 | ```
 21 | 以上代码要`true`,value必须是一个数组，而且还必须与Array构造函数在同一个全局的作用域中（比如value是一个页面中的iframe定义的，就会返回false）
 22 | 
 23 | 解决以上问题的方案是调用Object的toString方法，都会返回一个[object NativeConstructorName]格式的字符串，每个类在内部都有一个[[class]]属性，这个属性中就指定了上述字符串中构造函数的名。
 24 | 
 25 | 例如
 26 | 
 27 | ``` javascript
 28 | let isArray = (value) => {
 29 |   return Object.prototype.toString.call(value) === '[object Array]'
 30 | }
 31 | 
 32 | let isFunction = (value) => {
 33 |   return Object.prototype.toString.call(value) === '[object Function]'
 34 | }
 35 | 
 36 | let isRegExp = (value) => {
 37 |   return Object.prototype.toString.call(value) === '[object RegExp]'
 38 | }
 39 | 
 40 | ```
 41 | 不过要注意IE中以COM对象实现的任何函数，isFunction都会返回false，因为他不是原生的javascript对象。
 42 | 
 43 | [JavaScript:Object.prototype.toString方法的原理](http://www.cnblogs.com/ziyunfei/archive/2012/11/05/2754156.html)
 44 | 
 45 | 
 46 | 
 47 | 
 48 | ## 22.1.2 作用域安全的构造函数
 49 | 
 50 | > 构造函数其实就是一个用new操作符调用的函数，当使用new调用的时候，构造函数内用到的this会指向新创建的对象实例。
 51 | 
 52 | 举个例子
 53 | 
 54 | ``` javascript
 55 | function Person (name, age, job) {
 56 |   this.name = name
 57 |   this.age = age
 58 |   this.job = job
 59 | }
 60 | 
 61 | let p = new Person('qianlongo', 100, 'fe')
 62 | 
 63 | ```
 64 | **当使用new操作符调用时会创建一个新的Person对象，但是问题就是出现在没有使用new的时候，由于this是在运行时绑定的，所以直接调用Person会映射到全局的window对象**
 65 | 
 66 | 作用域安全的构造函数在进行任何更改之前，首先确认this对象是正确类型的实例，如果不是，那么会创建新的实例并返回。
 67 | 
 68 | 举个例子
 69 | 
 70 | ``` javascript
 71 | 
 72 | function Person (name) {
 73 |   if (!(this instanceof Person)) {
 74 |     return new Person(name)
 75 |   }
 76 | 
 77 |   this.name = name
 78 | }
 79 | 
 80 | let p1 = new Person('qianlongo')
 81 | let p2 = new Person('xiaohuihui')
 82 | 
 83 | ```
 84 | **以上代码实现了不管是否使用new操作符去调用Person函数都会生成一个新的Person实例**
 85 | 
 86 | 但是以上模式也有缺陷，比如在使用构造函数的窃取模式来实现继承并且不用原型链，那么这个继承可能会遭到破坏。
 87 | 
 88 | 举个例子
 89 | 
 90 | ``` javascript
 91 | 
 92 | function A (name) {
 93 |   if (!(this instanceof A)) {
 94 |     return new A(name)
 95 |   }
 96 |   this.name = name
 97 |   this.showName = function () {
 98 |     console.log(this.name)
 99 |   }
100 | }
101 | 
102 | function B (name, age) {
103 |   A.call(this, name)
104 |   this.age = age
105 | }
106 | 
107 | let b1 = new B('qianlongo', 100)
108 | b1.name // undefined
109 | 
110 | ```
111 | 在这段代码中A函数的构造函数是安全的，然后B函数却不是，新创建一个B函数的实例后，应该通过A.call来继承A的name属性，但是由于A函数的作用域是安全的，this并不是A函数的实例，所以会创建一个新的A对象，B中的this并没有得到增长，同事A.call(name)返回的值也没有用到，所以b1中就不会有name属性。
112 | 
113 | 但是构造函数窃取模式使用原型链或者寄生组合模式就可以解决这个问题。举个例子。
114 | 
115 | 解释：这里是因为 a instanceof b 操作符只要a实例的原型链上能找到b都会返回true
116 | 
117 | 
118 | ``` javascript
119 | function A (name) {
120 |   if (!(this instanceof A)) {
121 |     return new A(name)
122 |   }
123 |   this.name = name
124 |   this.showInfo = function () {
125 |     console.log(this.name)
126 |   }
127 | }
128 | 
129 | function B (name, age) {
130 |   A.call(this, name)
131 |   this.age = age
132 |   this.showAge = function () {
133 |     console.log(this.age)
134 |   }
135 | }
136 | 
137 | B.prototype = new A()
138 | 
139 | let b2 = new B('qianlongo', 1)
140 | b2.name // qianlongo
141 | 
142 | ```
143 | 
144 | ## 22.1.3 惰性载入函数
145 | 
146 | > 浏览器之间有各种差异，所以大多数的js代码包含了大量的if语句，将执行引导到正确的代码中。看下面的代码
147 | 
148 | 
149 | ``` javascript
150 | 
151 | function createXHR () {
152 |   if (typeof XMLHttpRequest != 'undefined') {
153 |     return new XMLHttpRequest()
154 |   } else if (typeof ActiveXObject != 'undefined') {
155 |     // xxx
156 |   } else {
157 |     throw new Error('No XHR object available')
158 |   }
159 | }
160 | 
161 | 
162 | ```
163 | 
164 | 每次调用函数都需要对浏览器支持的功能检查一遍，但其实每次调用的结果都是不变的，所以没有必要每次都重新判断执行一遍，解决方案就是使用惰性载入的技巧。
165 | 
166 | 惰性载入表示函数执行的分支置灰发生一次，有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数，第一次调用时，该函数会被覆盖为另外一个按合适的方式执行的函数，这样任何对原函数的调用都不会再经过执行的分支了。
167 | 
168 | 方式一
169 | 
170 | 
171 | ``` javascript
172 | 
173 | function createXHR () {
174 |   if (typeof XMLHttpRequest != 'undefined') {
175 |     createXHR = function () {
176 |       return new XMLHttpRequest() 
177 |     }
178 |   } else if (typeof ActiveXObject != 'undefined') {
179 |     createXHR = function () {
180 |       // xxx
181 |     }
182 |   } else {
183 |     createXHR = function () {
184 |       throw new Error('No XHR object available')
185 |     }
186 |   }
187 | 
188 |   return createXHR()
189 | }
190 | 
191 | ```
192 | 
193 | 第二种实现惰性载入的方式是在声明函数的时候就指定适当的函数，这样，第一次调用函数的时候就不会损失性能了，而在代码首次加载时会损失一点性能。
194 | 
195 | ``` javascript
196 | 
197 | let createXHR = (() => {
198 |   if (typeof XMLHttpRequest != 'undefined') {
199 |     return () => {
200 |       return new XMLHttpRequest() 
201 |     }
202 |   } else if (typeof ActiveXObject != 'undefined') {
203 |     return () => {
204 |       // xxx
205 |     }
206 |   } else {
207 |     return () => {
208 |       throw new Error('No XHR object available')
209 |     }
210 |   }
211 | })()
212 | 
213 | 
214 | ```
215 | 
216 | ## 22.1.4 函数绑定
217 | 
218 | ## 22.1.5 函数柯里化
219 | 
220 | ## 22.2 防止篡改对象
221 | 
222 | 
223 | 
224 | 


--------------------------------------------------------------------------------
/第6章-面向对象的程序设计.md:
--------------------------------------------------------------------------------
  1 | ## 面向对象的程序设计
  2 | 
  3 | 学习目标
  4 | 
  5 | 1. 理解对象属性
  6 | 2. 理解并创建对象（**重要**）
  7 | 3. 理解继承(**重要**)
  8 | 
  9 | **概述**
 10 | 
 11 | > 面向对象(OO)的语言都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象，js中的对象是"无序属性的集合，其属性可以包含基本值，对象或者函数"
 12 | 
 13 | 
 14 | ## 6.1 理解对象
 15 | 
 16 | 创建自定义对象的2种常见方式
 17 | 
 18 | 1. 创建一个Object的实例
 19 | 
 20 | ``` javascript
 21 | 
 22 | var person = new Object()
 23 | person.name = 'qianlongo'
 24 | person.sayName = function () {
 25 |   alert(this.name)
 26 | }
 27 | 
 28 | ```
 29 | 
 30 | 2. 对象字面量创建
 31 | 
 32 | ``` javascript
 33 | 
 34 | var person = {
 35 |   name: 'qianlongo',
 36 |   sayName: function () {
 37 |     alert(this.name)
 38 |   }
 39 | }
 40 | 
 41 | ```
 42 | 
 43 | ## 6.1.1 属性类型
 44 | 
 45 | 1. 数据属性 
 46 | 2. 访问器属性
 47 | 
 48 | **数据属性**
 49 | 
 50 | > 数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有4个描述其行为的特性。
 51 | 
 52 | [[Configurable]] : 表示`1 能否通过delete删除属性重而重新定义属性`，`2. 能否修改属性的特性`，`3. 能否把属性修改为访问器属性`,使用new Object或对象字面量，默认值为`true`
 53 | 
 54 | [[Enumerable]] : 表述能否通过for in循环返回属性，使用new Object或对象字面量，默认值为`true`
 55 | 
 56 | [[Writable]] : 表述能否修改属性的值，使用new Object或对象字面量，默认值为`true`
 57 | 
 58 | [[Value]] : 包含这个属性的数据值，读取属性值的时候，从这个位置读，写入属性值的时候，把新值保存到这个位置。这个特性的默认值为undefined。
 59 | 
 60 | **经过测试，通过[Object.defineProperty](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)定义对象的属性 Configurable、Enumerable、Writable默认值都是false，而Value没有设置则是undefined**
 61 | 
 62 | 可以多次调用Object.defineProperty()方法修改同一属性，但在把configurable特性设置为false之后就会有限制了。
 63 | 
 64 | **访问器属性**
 65 | 
 66 | > 访问器属性不包括数据值，包含一堆getter和setter函数（这两个函数不是必须的）。在读取属性的时，会调用getter函数，这个函数负责返回有效值，在写入访问器属性时，会调用getter函数并传入新值，这个函数负责决定如何处理数据。分别有以下属性
 67 | 
 68 | [[Configurable]] : 表示`1 能否通过delete删除属性重而重新定义属性`，`2. 能否修改属性的特性`，`3. 能否把属性修改为访问器属性`,使用new Object或对象字面量，默认值为`true`
 69 | 
 70 | [[Enumerable]] : 表述能否通过for in循环返回属性，使用new Object或对象字面量，默认值为`true`
 71 | 
 72 | [[Get]] : 在读取属性时调用的函数，默认值为undefined
 73 | 
 74 | [[Set]] : 在写入属性时调用的函数，默认值为undefined
 75 | 
 76 | 访问器属性不能直接定义，必须使用Object.defineProperty定义。
 77 | 
 78 | ``` javascript
 79 | 
 80 | var book = {
 81 |   _year: 2004,
 82 |   edition: 1
 83 | }
 84 | 
 85 | Object.defineProperty(book, 'year', {
 86 |   get: function () {
 87 |     return this._year
 88 |   },
 89 |   set: function (newValue) {
 90 |     if (newValue > 2004) {
 91 |       this._year = newValue
 92 |       this.edition += newValue - 2004
 93 |     }
 94 |   }
 95 | })
 96 | 
 97 | book.year = 2005
 98 | alert(book.edition)
 99 | 
100 | ```
101 | 
102 | **不一定get和set函数都要指定，只指定get，意味着只能读不能写，只指定set，意为着只能写不能读**
103 | 
104 | 同样我们可以使用`__defineGetter__`和`__defineSetter__`来做一些get、set的事情
105 | 
106 | ``` javascript
107 | 
108 | var book = {
109 |   _year: 2004,
110 |   edition: 1
111 | }
112 | 
113 | book.__defineGetter__('year', function () {
114 |   return this._year
115 | })
116 | 
117 | book.__defineSetter__('year', function (newValue) {
118 |   if (newValue > 2004) {
119 |     this._year = newValue
120 |     this.edition += newValue - 2004
121 |   }
122 | })
123 | 
124 | 
125 | ```
126 | 
127 | ## 6.1.2 定义多个属性
128 | 
129 | > Object.defineProperties()一次描述多个属性。
130 | 
131 | ``` javascript
132 | var book = {}
133 | Object.defineProperties(book, {
134 |   _year: {
135 |     value: 2004,
136 |     writable: true // 不指定将不可写
137 |   },
138 |   edition: {
139 |     value: 1,
140 |     writable: true
141 |   },
142 |   year: {
143 |     get: function () {
144 |       return this._year
145 |     },
146 |     set: function (newValue) {
147 |       if (newValue > 2004) {
148 |         this._year = newValue
149 |         this.edition += newValue - 2004
150 |       }
151 |     }
152 |   }
153 | })
154 | 
155 | ```
156 | ## 6.2 创建对象
157 | 
158 | > 使用Object构造函数和对象字面量的形式来创建对象有一个明显的缺点，使用同一个接口创建很多对象，会产生很多垃圾代码。
159 | 
160 | ## 创建对象的各种模式
161 | 
162 | > 创建对象的模式有很多种，比如`工厂模式`、`构造函数模式`、`原型模式`、`混合构造函数和原型模式`等等，这里做主要的代码示例和介绍。
163 | 
164 | 
165 | ## 6.2.1 工厂模式
166 | 
167 | > 工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程，用函数来封装以特定接口来创建对象的细节。
168 | 
169 | ``` javascript
170 | 
171 | function createPerson (name, sex, age) {
172 |   let  o = new Object()
173 | 
174 |   o.name = name
175 |   o.sex = sex
176 |   o.age = age
177 |   o.sayName = function () {
178 |     console.log(this.name)
179 |   }
180 |   return o
181 | }
182 | 
183 | let p1 = createPerson('qianlongo', 'boy', 100)
184 | let p2 = createPerson('huihui', 'boy', 1000)
185 | 
186 | ```
187 | 
188 | **评论**
189 | 
190 | `createPerson`函数能够根据传入的参数来构建包含三个所有必要信息的`Person`对象,可以无数次的调用这个函数，而它每次都会返回包含三个属性的一个方法的对象。工厂模式虽然解决了创建多个相似对象的代码冗余问题，但是却没有解决`对象识别`的问题。
191 | 
192 | ## 6.2.2 构造函数模式
193 | 
194 | > 构造函数可以用来创建特定类型的对象，有些类似Array和Object在运行时就自动出现在执行环境中，此外，也可以自定义构造函数。从而自定义对象类型的属性和方法。
195 | 
196 | 
197 | ``` javascript
198 | function Person (name, sex, age) {
199 |   this.name = name
200 |   this.sex = sex
201 |   this.age = age
202 |   this.sayName = function () {
203 |     console.log(this.name)
204 |   }
205 | }
206 | 
207 | let p1 = new Person('qianlongo', 'boy', 100)
208 | let p2 = new Person('huihui', 'girl', 1000)
209 | 
210 | ```
211 | 
212 | 比较两个例子可以发现，有以下区别。
213 | 
214 | 1. 没有显示地创建对象
215 | 2. 直接将属性和方法赋给了this对象
216 | 3. 没有return语句
217 | 4. 构造函数名字使用首字母大写
218 | 
219 | 创建Person实例大概经历了以下几步
220 | 
221 | 1. 创建一个新的对象
222 | 2. 将构造函数的作用域赋值给新对象（因此this就指向了这个新对象）
223 | 3. 执行构造函数中的代码（为这个新对象添加属性）
224 | 4. 返回新的对象
225 | 
226 | **创建自定义的构造函数意味着可以将它的实例标记为一种特定的类型，这也是其胜过工厂模式的地方**
227 | 
228 | 


--------------------------------------------------------------------------------
/examples/第十章-DOM/操作节点.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <title>appendChild insertBefore replaceChild</title>
  8 |   <style>
  9 |     .red{
 10 |       color: red;
 11 |     }
 12 |   </style>
 13 | </head>
 14 | <body>
 15 |   <div class="box">
 16 |     <h2>appendChild</h2>
 17 |     <div class="append-child">
 18 |       <button>添加不存在的元素</button>
 19 |       <button>添加已经存在的元素到末尾</button>
 20 |       <div class="append-child-box">
 21 |         <span class="has-exist">我是已经存在的元素</span>
 22 |       </div>
 23 |     </div>
 24 |     <div class="insert-before">
 25 |       <h2>insertBefore</h2>
 26 |       <button>作为参考的节点不为null</button>
 27 |       <button>作为参考的节点为null</button>
 28 |       <div class="insert-before-box">
 29 |         <div>我是第一个元素</div>
 30 |         <div class="reference-point">我是参考节点</div>
 31 |       </div>
 32 |     </div>
 33 |     <div class="replace-child">
 34 |       <h2>replaceChild 点击下列任何一个按钮请再刷新页面试其他一个按钮</h2>
 35 |       <button>要插入的节点已经在文档树中</button>
 36 |       <button>要插入的节点是新创建的元素</button>
 37 |       <div class="replace-child-box">
 38 |         <div class="has-exist">我是第一个已经存在的元素</div>
 39 |         <div class="replace-ele">我是要被替换的元素</div>
 40 |         <div class="has-exist2">我是第三个已经存在的元素</div>
 41 |       </div>
 42 |     </div>
 43 |     <div class="remove-child">
 44 |       <h2>removeChild</h2>
 45 |       <button>移除已经存在的节点</button>
 46 |       <div class="remove-child-box">
 47 |         <div class="has-exist">我是已经存在的元素</div>
 48 |         <div class="has-exist2">我是第二个已经存在的元素</div>
 49 |       </div>
 50 |     </div>
 51 |     <div class="clone-node-child">
 52 |       <h2>cloneNode 请打开console控制台看输出效果</h2>
 53 |       <button>深度克隆</button>
 54 |       <button>浅克隆</button>
 55 |       <div class="clone-node-box">
 56 |         <span>我是第一个元素</span>
 57 |         <ul>
 58 |           <li>1</li>
 59 |           <li>2</li>
 60 |           <li>3</li>
 61 |         </ul> 
 62 |       </div>
 63 |     </div>
 64 |   </div>
 65 |   <script>
 66 |     (() => {
 67 |       let doc = document
 68 |       let $ = (selector, context) => {
 69 |         return (context && context || doc).querySelectorAll(selector)
 70 |       }
 71 |       createEle = (tagName, iClass) => {
 72 |          let ele = doc.createElement(tagName)
 73 | 
 74 |          if (iClass !== void 0) {
 75 |           ele.className = iClass
 76 |          }
 77 | 
 78 |          return ele
 79 |       }
 80 |       let app = {
 81 |         init () {
 82 |           this.appendChild()
 83 |           this.insertBefore()
 84 |           this.replaceChild()
 85 |           this.removeChild()
 86 |           this.cloneNode()
 87 |         },
 88 |         appendChild () {
 89 |           let btns = $('.append-child button')
 90 |           let hasExist = $('.append-child .has-exist')[0]
 91 |           let appendChildBox = $('.append-child .append-child-box')[0]
 92 |           let iCount = 0
 93 | 
 94 |           btns[0].addEventListener('click', () => {
 95 |             let notExist = createEle('div', 'red')
 96 |                 notExist.innerHTML = '我是原来不存在的节点' + iCount++
 97 |             appendChildBox.appendChild(notExist)
 98 |           }, false)
 99 | 
100 |           btns[1].addEventListener('click', () => {
101 |             appendChildBox.appendChild(hasExist)
102 |           }, false)
103 |         },
104 |         insertBefore () {
105 |           let btns = $('.insert-before button')
106 |           let referencePoint = $('.insert-before .reference-point')[0]
107 |           let insertBeforeBox = $('.insert-before .insert-before-box')[0]
108 |           let iCount = 0
109 |           let insertBefore = (hasReference) => {
110 |             let notExist = createEle('div', 'red')
111 |                 notExist.innerHTML = (hasReference ? '我是要插入到参考节点的前面的' : '我要插入的参考点为null，所以和appendChild效果类似') + iCount++
112 |             return notExist
113 |           }
114 |           
115 |           btns[0].addEventListener('click', () => {
116 |             insertBeforeBox.insertBefore(insertBefore(1), referencePoint)
117 |           }, false)
118 | 
119 |           btns[1].addEventListener('click', () => {
120 |             insertBeforeBox.appendChild(insertBefore(0))
121 |           }, false)
122 |         },
123 |         replaceChild () {
124 |           let btns = $('.replace-child button')
125 |           let hasExist = $('.replace-child .has-exist')[0]
126 |           let replaceEle = $('.replace-child .replace-ele')[0]
127 |           let replaceChildBox = $('.replace-child .replace-child-box')[0]
128 |           let iCount = 0
129 |           let newEle = createEle('div', 'red')
130 |               newEle.innerHTML = '我是新创建的节点'
131 | 
132 |           btns[0].addEventListener('click', () => {
133 |             replaceChildBox.replaceChild(hasExist, replaceEle)
134 |           }, false)
135 | 
136 |           btns[1].addEventListener('click', () => {
137 |             replaceChildBox.replaceChild(newEle, replaceEle)
138 |           }, false)
139 |         },
140 |         removeChild () {
141 |           let btns = $('.remove-child button')
142 |           let hasExist = $('.remove-child .has-exist')[0]
143 |           let removeChildBox = $('.remove-child .remove-child-box')[0]
144 | 
145 |           btns[0].addEventListener('click', () => {
146 |             removeChildBox.removeChild(hasExist)
147 |           }, false)
148 |         },
149 |         cloneNode () {
150 |           let btns = $('.clone-node-child button')
151 |           let cloneNodeBox = $('.clone-node-child .clone-node-box')[0]
152 | 
153 |           btns[0].addEventListener('click', () => {
154 |             console.log(cloneNodeBox.cloneNode(true))
155 |           }, false)
156 | 
157 |           btns[1].addEventListener('click', () => {
158 |             console.log(cloneNodeBox.cloneNode())
159 |           }, false)
160 |         }
161 |       }
162 | 
163 |       app.init()
164 |     })()
165 |   </script>
166 | </body>
167 | </html>


--------------------------------------------------------------------------------
/第15章-使用canvas绘图.md:
--------------------------------------------------------------------------------
  1 | 目标
  2 | 	1. 理解<canvas>元素
  3 | 	2. 绘制简单的2d图形
  4 | 	3. 使用WebGL绘制3D图形
  5 | 
  6 | ## 15.1 基本用法
  7 | 
  8 | > 使用canvas元素，需要先设置其width和height，指定可以绘图的大小，出现在开始和结束标签中的内容是后备信息，如果浏览器不支持canvas元素就会显示这些信息。
  9 | 
 10 | ``` html
 11 | <canvas id="drawing" width="200" height="200"></canvas>
 12 | 
 13 | ```
 14 | 
 15 | 与其他元素一样，canvas对象的DOM元素也有width和height属性，可以随意修改，而且也可以通过css为该元素添加样式(**与直接在html指定width和height有什么不同呢？**)，如果不添加任何样式或者不绘制图形，在页面中是看不到该元素的。
 16 | 
 17 | 要在这块画布上绘图，需要取得绘图上下文。并通过`getContext()`方法传入上下文的名字`2d`。
 18 | 
 19 | ``` javascript
 20 | let drawing = document.getElementById('drawing')
 21 | 
 22 | // 如果确定支持canvas元素
 23 | if (drawing.getContext) {
 24 | 	let ctx = drawing.getContext()
 25 | }
 26 | 
 27 | ```
 28 | 
 29 | 如上代码，在使用canvas元素之前需要先检测getContext方法是否存在，在有些浏览器中会HTML规范之外的元素创建默认的HTML元素对象，在这种情况中，虽然保存着一个有效的元素引用，也检测不到getContext方法。
 30 | 
 31 | 使用toDataURL方法，可以导出在canvas元素上绘制的图像，这个方法接收一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文，比如，要取得画布中的一幅PNG格式的图像，可以使用以下代码。
 32 | 
 33 | ``` javascript
 34 | let drawing = document.getElementById('drawing')
 35 | 
 36 | if (drawing.getContext) {
 37 | 	let imgURL = drawing.toDataURL('image/png')
 38 | 	let image = document.createElement('img')
 39 | 	image.src = imgURL
 40 | 	document.body.appendChild(image)
 41 | }
 42 | 
 43 | ```
 44 | 
 45 | **注意： 如果绘制到画布上的图像源自不同的域，toDataURL方法会抛出错误**
 46 | 
 47 | 
 48 | ## 15.2 2D上下文
 49 | 
 50 | > 使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形，弧线和路径。2D上下文的坐标开始于canvas元素的左上角，原点是(0, 0)，所有的坐标值都基于这个原点计算，x值越大表示跃靠右，y值越大表示越靠下，默认情况下，width和height表示水平和垂直方向上可用的像素数目。
 51 | 
 52 | 15.2.1 填充和描边
 53 | 
 54 | > 2D上下文的两种基本绘图操作是填充和描边，填充即使用指定的样式（颜色，渐变，或图像）填充图形，描边就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性，fillStyle和strokeStyle
 55 | 
 56 | **需要注意的是这两个属性的值都可以是字符串，渐变对象或模式对象，而且默认的值都是“#000000”，如果为他们指定表示颜色的字符串，可以使用css中指定颜色值的任何格式，包括颜色名，十六进制码，rgb，rgba，hsl和hsla**
 57 | 
 58 | 
 59 | 下面是一个简单的例子
 60 | 
 61 | ``` javascript
 62 | let $drawing = document.getElementById('drawing')
 63 | let ctx = $drawing.getContext && $drawing.getContext()
 64 | 
 65 | if (ctx) {
 66 | 	ctx.strokeStyle = 'red'
 67 | 	ctx.fillStyle = '#0000ff'
 68 | }
 69 | 
 70 | ```
 71 | 
 72 | 所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值，这两个属性的值也可以是渐变对象和模式对象。
 73 | 
 74 | ## 15.2.2 绘制矩形
 75 | 
 76 | > 矩形是唯一一种可以直接到2D的上下文中绘制的形状，与矩形有关的方法包括`fillRect`,`strokeRect`,`clearRect`这三个方法都可以接受4个参数，矩形的x坐标，矩形的y坐标，矩形的宽度和句型的高度。这些参数的单位都是像素。
 77 | 
 78 | fillRect方法在画布上绘制的矩形会填充指定的颜色，填充的颜色通过fillStyle属性指定。比如：
 79 | 
 80 | ```javascript
 81 | 
 82 | let $drawing = document.getElementById('drawing')
 83 | let ctx = $drawing.getContext && $drawing.getContext()
 84 | 
 85 | if (ctx) {
 86 | 	// 绘制红色的矩形
 87 | 	ctx.fillStyle = '#ff0000'
 88 | 	ctx.fillRect(10, 10, 50, 50)
 89 | 	// 绘制半透明的矩形
 90 | 	ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
 91 | 	ctx.fillRect(30, 30, 50, 50)
 92 | }
 93 | 
 94 | ```
 95 | 
 96 | 以上代码先将fillStyle设置为红色，然后从（10， 10）处开始绘制矩形，矩形的宽度和高度均为50像素，然后通过rgba格式将fillStyle设置为半透明的颜色，在第一个矩形上面绘制的第二矩形，结果就是可以透过蓝色的矩形看到红色的矩形。
 97 | 
 98 | **strokeRect**
 99 | 
100 | strokeRect方法在画布上绘制的矩形会使用指定的颜色描边，描边的颜色通过strokeStyle指定。
101 | 
102 | ``` javascript
103 | let $drawing = document.getElementById('drawing')
104 | let ctx = $drawing.getContext && $drawing.getContext()
105 | 
106 | if (ctx) {
107 | 	// 绘制红色的矩形
108 | 	ctx.fillStyle = '#ff0000'
109 | 	ctx.strokeRect(10, 10, 50, 50)
110 | 	// 绘制半透明的矩形
111 | 	ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
112 | 	ctx.strokeRect(30, 30, 50, 50)
113 | }
114 | 
115 | ```
116 | 
117 | 以上代码绘制了两个重叠的矩形，不过这两个矩形都只有框线，内部没有填充颜色。
118 | 
119 | ## 15.2.3 绘制路径
120 | 
121 | > 2D绘制上下文支持很多在画布上绘制路径的方法，通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用`beginPath()`方法，表示要开始绘制新的路径，然后再通过调用以下方法来实际地绘制路径。
122 | 
123 | 1. arc(x, y, radius, startAngle, endAngle, counterclockwise); 以(x, y)为圆心绘制一条弧线，弧线的半径为radius，起始角度和结束角度（用弧度表示）分别为startAngle何endAngle，最后一个参数表示是否按照逆时针方向计算，值为false表示按顺时针计算。
124 | 
125 | 2. arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2, y2)并且以给定的半径radius穿过(x1, y1)
126 | 
127 | 3. bezierCurveTo(c1x, c1y, c2x, c2y, x, y)： 从上一点开始绘制一条曲线，到(x, y)位置，并且以（c1x, c1y）和（c2x, c2y）为控制点。
128 | 
129 | 4. lineTo(x, y): 从上一点开始绘制一条直线，直到(x, y)为止。
130 | 
131 | 5. moveTo(x, y): 将绘图游标移动到(x, y)，不画线。
132 | 
133 | 6. quadraticCurveTo(cx, cy, x, y): 从上一点开始绘制一条二次曲线，到(x, y)为止。并且以(cx, cy)为控制点。
134 | 
135 | 7. rect(c, y, width, height), 从点(x, y)开始绘制一个矩形，宽度和高度由width和height指定，这个方法绘制的是矩形路径，而不是strokeRect和fillRect所绘制的**独立矩形形状**。
136 | 
137 | 创立了路径后，接下来有几种可能的选择，如果要绘制一条连接到起点的线条，可以调用closePath(),如果路径已经完成，你想用fillStyle填充他，可以调用fill(),另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle，最后还可以调用clip，这个方法可以在路径上创建一个剪切区域。
138 | 
139 | 接下来我们要绘制一个不带数字的时钟表盘。
140 | 
141 | ``` javascript
142 | let $drawing = document.getElementById('drawing')
143 | let ctx = $drawing.getContext && $drawing.getContext('2d')
144 | 
145 | 	if (ctx) {
146 | 		ctx.beginPath()
147 | 		ctx.arc(100, 100, 100, 0, 2 * Math.PI, false)
148 | 		ctx.moveTo(190, 100) // 防止画出多余的线
149 | 		ctx.arc(100, 100, 90, 0, 2 * Math.PI, false)
150 | 		ctx.moveTo(100, 100)
151 | 		ctx.lineTo(100, 20)
152 | 		ctx.moveTo(100, 100)
153 | 		ctx.lineTo(40, 100)
154 | 		ctx.stroke()
155 | 	}
156 | 
157 | ```
158 | 
159 | ## 15.2.4 绘制文本
160 | 
161 | > 2d绘图上下文也提供了绘制文本的方法，绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接受4个参数，要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度。而且这两个方法都以下列3个属性为基础。
162 | 
163 | 1. font: 表示文本样式，大小，以及字体，用css中指定的字体格式来指定例如： "10px Arial"
164 | 
165 | 2. textAlign: 表示文本对齐方式，可能的值有“start”， “end”，“left”，“right”， “center”，建议使用“start”， “end”，不适用“left”，“right”，因为前者的意思更稳妥，能同时适合从左到右，和从右到左的语言。
166 | 
167 | 3. textBaseline： 表示文本的基线，可能的值有“top”， “hanging”， “middle”， “alphabetic”， “ideographic”，“bottom”
168 | 
169 | 这几个属性都有默认值，因此没有必要每次使用它们都重新设置一遍值，fillText()方法使用fillStyle属性绘制文本，strokeText使用strokeStyle属性为文本描边，相对来说，还是使用fillText的时候更多，因为该方法模仿了在网页中正常显示文本。
170 | 
171 | 接下来我们接着上面的例子绘制数字。
172 | 
173 | ``` javascript
174 | 
175 | 	ctx.font = 'bold 14px Arial'
176 | 	ctx.textAlign = 'center'
177 | 	ctx.textBaseline = 'middle'
178 | 	ctx.fillText('12', 100, 20)
179 | 	ctx.textAlign = 'start'
180 | 	ctx.fillText('12', 100, 40)
181 | 	ctx.textAlign = 'end'
182 | 	ctx.fillText('12', 100, 60)
183 | 
184 | ```
185 | 注意：将textAlign设置为“center”，把textBaseline设置为“middle”，所以坐标为(100, 20)表示的是文本水平和垂直重点的坐标，如果将textAlign设置为“start”，则x坐标表示的是文本左端的位置（从左到右的语言），设置为“end”，则x坐标表示的是文本右端的位置.
186 | 
187 | **measureText**
188 | 
189 | 当需要将文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText(),这个方法接收一个参数，即要回执的文本，返回一个textMetrics对象，返回的对象只有一个width属性，并且该方法是利用font，textAlign和textBaseline的当前值计算指定的文本的大小。比如，假设你想在一个140像素宽的矩形区域中绘制文本，Hello world！下面的代码从100像素的字体大小开始递减，最终会找到合适的字体大小。
190 | 
191 | 
192 | ``` javascript
193 | let fontSize = 100
194 | let fontStr = 'Hello world'
195 | 
196 | if (ctx) {
197 | 	ctx.textAlign = 'start'
198 | 	ctx.textBaseline = 'middle'
199 | 	ctx.font = `${fontSize}px Arial`
200 | 
201 | 	while (ctx.measureText(fontStr).width > 60) {
202 | 		fontSize--
203 | 		ctx.font = `${fontSize}px Arial`
204 | 	}
205 | 
206 | 	ctx.fillText(fontStr, 10, 10)
207 | 	ctx.fillText(`Font size is ${fontSize}px`, 10, 50)
208 | 
209 | }
210 | 
211 | ```
212 | 
213 | ## 15.2.5 变换
214 | 
215 | > do it
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 


--------------------------------------------------------------------------------
/第7章-函数表达式.md:
--------------------------------------------------------------------------------
  1 | ## 函数表达式
  2 | 
  3 | 学习目标
  4 | 
  5 | 1. 函数表达式的特征
  6 | 2. 使用函数实现递归
  7 | 3. 使用闭包定义私有变量
  8 | 
  9 | ##  定义函数的方式
 10 | 
 11 | 1. 函数声明（存在函数声明提升，所以可以在函数声明之前调用函数）
 12 | 
 13 | ``` javascript
 14 | function fn () {
 15 |   return 'qianlongo'
 16 | }
 17 | 
 18 | ```
 19 | 
 20 | 2. 函数表达式（声明必须在调用之前）
 21 | 
 22 | ``` javascript
 23 | let fn = () => {}
 24 | 
 25 | ```
 26 | 
 27 | 部分浏览器实现了一个非标准的属性`name`，表示函数名字
 28 | 
 29 | **不要用下面的方式去定义一个函数**
 30 | 
 31 | 不同的浏览器对此解析不同，有的两个都声明了，有的只声明了a函数
 32 | 
 33 | ``` javascript
 34 | 
 35 | if (true) {
 36 |   function a () {
 37 |     return 'a'
 38 |   }
 39 | } else {
 40 |   function b () {
 41 |     return 'b'
 42 |   }
 43 | }
 44 | 
 45 | ```
 46 | 
 47 | 
 48 | **如果想根据不同的条件声明函数可以用函数表达式**
 49 | 
 50 | ``` javascript
 51 | var fn = null
 52 | 
 53 | if (true) {
 54 |   fn = function () {
 55 |     return 'a'
 56 |   }
 57 | } else {
 58 |   fn = function () {
 59 |     return 'b'
 60 |   }
 61 | }
 62 | 
 63 | ```
 64 | 
 65 | ## 7.1 递归
 66 | 
 67 | > 递归函数是一个函数通过名字调用自身的情况下构成的。
 68 | 
 69 | ``` javascript
 70 | function recursion (num) {
 71 |   if (num === 1) {
 72 |     return 1
 73 |   } else {
 74 |     return num * recursion(num - 1)        
 75 |   }
 76 | }
 77 | 
 78 | ```
 79 | 以上定义了一个递归求阶乘的函数，如果我们用下面这种使用方式会怎么样呢？
 80 | 
 81 | ``` javascript
 82 | var fn = recursion
 83 | recursion = null
 84 | 
 85 | fn(2) // 这个时候就报错了，因为recursion函数内部，调用了recursion本身，但是recurtion已经被赋值为了null。
 86 | 
 87 | 
 88 | ```
 89 | **怎么办？使用`arguments.callee`**
 90 | 
 91 | 他是一个当前正在执行的函数的引用
 92 | 
 93 | ``` javascript
 94 | function recursion (num) {
 95 |   if (num === 1) {
 96 |     return 1
 97 |   } else {
 98 |     return num * arguments.callee(num - 1)        
 99 |   }
100 | }
101 | 
102 | var fn = recursion
103 | 
104 | recursion = null
105 | 
106 | fn(3) // 6
107 | 
108 | ```
109 | 缺陷是严格模式下不允许这样用
110 | 
111 | **还有别的方式**
112 | 
113 | ``` javascript
114 | 
115 | var recursion = function f (num) {
116 |   if (num === 1) {
117 |     return 1
118 |   } else {
119 |     return num * f(num - 1)
120 |   }
121 | }
122 | 
123 | var fn = recursion
124 | recursion = null
125 | fn(3) // 2
126 | ```
127 | 
128 | **函数表达式依旧可以给函数取名字**
129 | 
130 | ## 7.2 闭包
131 | 
132 | > 一个能够访问另一个函数作用域中变量的函数。
133 | 
134 | ``` javascript
135 | var property = function (key) {
136 |   return function (obj) {
137 |     return obj[key]    
138 |   }
139 | }
140 | 
141 | var length = property('length')
142 | 
143 | ```
144 | 
145 | 以上就是一个经典的闭包，需要注意的是闭包会产生比普通函数更多的内存，所以需要慎用。
146 | 
147 | 
148 | ## 7.2.1 闭包与变量
149 | 
150 | > 闭包只能取得包含函数中任何变量的最后一个值
151 | 
152 | 
153 | ``` javascript
154 | var fn = function () {
155 |   var arrFn = []
156 |   var i = 0
157 |   
158 |   for (; i < 10; i++) {
159 |     arrFn[i] = function () {
160 |       return i
161 |     }
162 |   }
163 |   
164 |   return arrFn
165 | }
166 | 
167 | var fns = fn()
168 | ```
169 | 
170 | 我们以为创建出来的函数数组`fns`会输出0， 1， 2....，但是实际上只会得到10，因为闭包只能拿到包含函数中所有变量的最后值。
171 | 
172 | **i在循环结束的时候已经变成了10**，故所有的函数执行都只能得到10
173 | 
174 | 
175 | **如果想得到对应的输出，我们可以用其他的闭包方式,例如**
176 | 
177 | 
178 | ``` javascript
179 | var fn = function () {
180 |   var arrFn = []
181 |   var i = 0
182 |   
183 |   for (; i < 10; i++) {
184 |     arrFn[i] = (function (num) {
185 |       return function () {
186 |         return num
187 |       }
188 |     })(i)
189 |   }
190 |   
191 |   return arrFn
192 | }
193 | 
194 | var fns = fn()
195 | 
196 | 
197 | ```
198 | **这个时候每个立即执行函数的都有自己的执行环境，而fns数组中函数的所形成的闭包自然也可以得到自己的唯一的num值了**
199 | 
200 | 
201 | ## 7.2.2 关于this对象
202 | 
203 | > 关于闭包能够访问另一个函数的变量，有两个比较特殊`this`, `arguments`
204 | 
205 | ``` javascript
206 | var name = 'the window'
207 | var obj = {
208 |   name: 'the obj',
209 |   showName: function () {
210 |     return function () {
211 |       return this.name // 注意这里
212 |     }
213 |   }
214 | }
215 | 
216 | obj.showName()() // the window
217 | ```
218 | 
219 | **为毛得到了`the window`**,记住`this`和`arguments`两个值比较特殊就可以，如果没有手动将`另一个函数的this和arguments赋值`，其得到的还是动态运行的结果，我们看下面的例子就可以明白
220 | 
221 | 
222 | ``` javascript
223 | var name = 'the window'
224 | var obj = {
225 |   name: 'the obj',
226 |   showName: function () {
227 |     var thatArguments = arguments
228 |     var that = this
229 |     return function () {
230 |       console.log(thatArguments)
231 |       console.log(that.name)
232 |       console.log(this.name) 
233 |     }
234 |   }
235 | }
236 | 
237 | obj.showName()() // the window
238 | 
239 | 
240 | ```
241 | 
242 | ## 7.2.3  内存泄漏
243 | 
244 | > javascript中常见的有两种垃圾回收机制，其中引用计数就是造成内存泄漏的罪魁祸首。
245 | 
246 | 1. **标记清除**
247 | 2. **引用计数(为什么总是ie这个坏蛋)**
248 | 
249 | **通过以下例子简单的回顾一下两种垃圾回收机制**
250 | 
251 | ``` javascript
252 | 
253 | function problem () {
254 |   var a = {}
255 |   var b = {}
256 | 
257 |   a.otherObj = b
258 |   b.otherObj = a
259 | }
260 | 
261 | 
262 | ```
263 | 
264 | **标记清除**
265 | 
266 | > 当变量进入环境（比如在函数中声明一个变量）的时候就讲这个变量标记为**进入环境**，当变量离开环境的时候，则将其标记为**离开环境**
267 | 
268 | 上面那个例子中，当函数结束的时候，两个对象都离开了作用域，因此这种相互引用不是个问题
269 | 
270 | **引用计数**
271 | 
272 | > 首先引用清除的含义是记录每个值被引用的次数
273 | 
274 | >  当声明了一个变量并将一个`引用类型的值`赋值给该变量时
275 | 
276 | > 这个`值`的引用次数就是1
277 | 
278 | > 如果同一个值又被赋给了另外一个变量则该值的引用次数`加1`
279 | 
280 | > 相反如果包含这个值引用的变量又取得了`另外一个值`,则这个`值`的引用次数减1
281 | 
282 | > 当这个值的引用次数为0的时候，则释放其所占空间
283 | 
284 | 上面那个例子中，a和b通过各自的属性相互引用，从而造成两个空对象的引用计数都为2.当函数结束之后，a和b将继续存在，因为两个空对象的引用次数不可能为0，当这种情况出现的多了，将有大量的空间被占用得不到释放。
285 | 
286 | 
287 | **接下里看一下闭包的使用中可能因为`引用计数`机制造成内存泄漏问题**
288 | 
289 | ``` javascript
290 | 
291 | function assignHandler () {
292 |   var ele = document.getElementById('id')
293 |   ele.onclick = function () {
294 |     console.log(ele.id)
295 |   }
296 | }
297 | 
298 | ```
299 | 
300 | 这个函数创建了一个作为ele元素事件处理程序的闭包，这个闭包中又创建了一个循环引用，只要事件处理程序(匿名函数)一直存在，则ele的引用计数至少为1
301 | 因此ele所占用的内存空间永远得不到释放，可以通过以下的例子解决该问题
302 | 
303 | 
304 | ``` javascript
305 | 
306 | function assignHandler () {
307 |   var ele = document.getElementById('id')
308 |   var id = ele.id
309 | 
310 |   ele.onclick = function () {
311 |     console.log(id) // 消除循环引用
312 |   }
313 | 
314 |   ele = null // 减少引用次数
315 | }
316 | 
317 | ```
318 | 
319 | ## 7.3 模仿块级作用域
320 | 
321 | > js中没有块级作用域的概念，只有函数和全局作用域，那么这意味着，在块语句中定义的变量实际上是在`包含函数`中而非`语句中`创建的。举个例子
322 | 
323 | **注意： js中使用var如果对同一个变量进行声明，其实会对后续的声明视而不见，但是会执行后续声明中的初始化工作**
324 | 
325 | ``` javascript
326 | 
327 | function outputNum (num) {
328 |   for (var i = 0; i < num; i++) {
329 |     console.log(i)
330 |   }
331 |   console.log(i) // 在java、c++类的语言中，这里是会报错的，因为i只在上面的for循环中起效
332 | }
333 | 
334 | ```
335 | 
336 | **所以说`变量的声明`**
337 | 
338 | **是在`包含函数`中，也就是上面的outputNum函数体中**
339 | 
340 | **而不是在`语句中`,比如上面的for循环中**
341 | 
342 | **那么如果用函数表达式来模拟块级作用域呢？**
343 | 
344 | 很简单，用一个立即执行函数包裹起来就可以
345 | 
346 | ``` javascript
347 | 
348 | function outputNum (num) {
349 |   (function () {
350 |     for (var i = 0; i < num; i++) {
351 |       console.log(i)
352 |     }
353 |   })()
354 |   
355 |   console.log(i) // Uncaught ReferenceError: i is not defined
356 | }
357 | 
358 | ```
359 | 
360 | 为什么`(function () {})()`可以模仿块级作用域呢？
361 | 
362 | > 匿名函数中定义的任何变量都会在其执行结束时销毁，这也是为什么i只能在循环中使用的原因。
363 | 
364 | **这种技术也经常被用在限制向全局作用域中添加过多的变量和函数，从而避免全局污染**
365 | 
366 | 
367 | ## 7.4 私有变量
368 | 
369 | > js中没有私有成员的概念，所有对象的属性都是公有的，不过倒是有一个私有变量的概念，任何在函数中定义的变量都是私有变量。私有变量包括`函数的参数`、`局部变量`、`函数内部定义的其它函数`。
370 | 
371 | ``` javascript
372 | function add (num1, num2) {
373 |   var sum = num1 + num2
374 |   return sum
375 | }
376 | 
377 | ```
378 | 
379 | 函数的外部没有任何方法能够访问add函数的内部私有变量sum1、sum2和sum。利用闭包的性质，我们可以创建能够访问私有变量的公有方法(也叫做**特权方法**)。
380 | 
381 | 有两种在对象上创建特权方法的方法。
382 | 
383 | 1. 在构造函数中定义特权方法。
384 | 
385 | ``` javascript
386 | 
387 | function MyObject () {
388 |   // 私有私有变量和函数
389 |   var privateVariable = 10
390 | 
391 |   function privateFunction () {
392 |     return false
393 |   }
394 | 
395 |   this.publicMethod = function () {
396 |     privateVariable++
397 |     return privateFunction()
398 |   }
399 | }
400 | 
401 | ```
402 | 
403 | 利用私有和特权成员可以隐藏那些不应该被直接修改的数据。
404 | 
405 | 使用构造函数模式来创建特权方法的缺点是必须要用构造函数模式来达到这个目的，而且每个实例都会创建相同的一组方法，而使用静态私有变量来实现特权方法可以避免这个问题。
406 | 
407 | ## 7.4.1 静态私有变量
408 | 
409 | ## 7.4.2 模块模式
410 | 
411 | ## 7.4.3 增强的模块模式
412 | 
413 | > 后面几种方式了结一下即可
414 | 


--------------------------------------------------------------------------------
/第13章-事件.md:
--------------------------------------------------------------------------------
  1 | 本章内容
  2 | 1. 理解事件流
  3 | 2. 使用事件处理程序
  4 | 3. 不同的事件类型
  5 | 
  6 | JavaScript与HTML之间的交互通过事件实现，事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码，这种在传统软件工程中称为观察员模式，支持页面的行为与页面的外观之间的松散耦合
  7 | 
  8 | 13.1 事件流
  9 | 
 10 | > 事件流描述的从页面接收事件的顺序，IE的事件是冒泡流，Netscape的事件流是事件捕获流。
 11 | 
 12 | 13.1.1 事件冒泡
 13 | 
 14 | > IE的事件流叫做事件冒泡，也就是事件由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上传播到较为不具体的节点。
 15 | 
 16 | **举例**
 17 | 
 18 | ``` html
 19 | 
 20 | <!DOCTYPE html>
 21 | <html lang="en">
 22 | <head>
 23 |   <meta charset="UTF-8">
 24 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 25 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 26 |   <title>Document</title>
 27 | </head>
 28 | <body>
 29 |   <div></div>
 30 | </body>
 31 | </html>
 32 | 
 33 | ```
 34 | ![冒泡事件流](http://odssgnnpf.bkt.clouddn.com/QQ20180120-205757@2x.png)
 35 | 
 36 | 所有的现代浏览器都支持事件冒泡，但是具体实现上还有一些差别，IE5.5更在版本中的事件冒泡会跳过html元素。IE9，chrome和safari则将事件一直冒泡到window对象.
 37 | 
 38 | ## 13.1.2 事件捕获
 39 | 
 40 | Netscape Communicator团队提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，事件捕获的用于在事件到达预定目标之前捕获他。
 41 | 
 42 | ![事件捕获](http://odssgnnpf.bkt.clouddn.com/QQ20180120-211624@2x.png)
 43 | 
 44 | 虽然事件捕获是Netscape Communicator唯一支持的事件流模型，但是IE9、safari等浏览器都支持这种事件模型，规范要求事件应该从document对象开始传播，但是这些浏览器都是从window开始传播。
 45 | 
 46 | ## 13.1.3 DOM事件流
 47 | 
 48 | > "DOM2级事件" 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。**首先发生的是事件捕获，为截获事件提供了机会**，然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
 49 | 
 50 | ## 13.2 事件处理程序
 51 | 
 52 | > 事件就是用户或浏览器自身执行的某种动作，诸如click、load和mouseover，都是事件的名称，响应某个事件的函数叫做事件处理程序（或事件监听器）
 53 | 
 54 | **为事件指定事件处理程序的方式有很多种，如下**
 55 | 
 56 | * HTML 事件处理程序
 57 | 
 58 |   > 元素所支持的每种事件，都可以使用一个与事件**同名**的**HTML特性**来指定，该特性的值是**能够执行的JavaScript代码**，例如
 59 | 
 60 |   ``` html
 61 |   <div class="box" onclick="console.log(1)"></div>
 62 |   ```
 63 | 
 64 |   当然也可以调用在页面中其他地方定义的脚本,事件处理程序中的代码在执行时，1. **有权访问全局作用域中的任何代码。**
 65 | 
 66 |   ``` javascript
 67 |   <script>
 68 |     let showMsg = () => {
 69 |       console.log('hello world')
 70 |     }
 71 |   </script>
 72 | 
 73 |   <div class="box" onclick="showMsg()"></div>
 74 |   ```
 75 | 
 76 |   2. **可以通过event变量，直接访问事件对象，不用自己定义，也不用从函数的参数列表读取**
 77 | 
 78 |   3. **在这个函数中this等于事件的目标元素**
 79 | 
 80 |   ``` html
 81 |   <script>
 82 |     let showMsg = function (val, e) {
 83 |       console.log(val)
 84 |       console.log(e)
 85 |     }
 86 |   </script>
 87 |   <div class="box" onclick="showMsg(this.innerHTML, event)">hello world</div>
 88 | 
 89 |   ```
 90 | 
 91 |   **HTML事件处理程序缺点**
 92 | 
 93 |   1. 存在"时差问题"，当用户触发相应的事件时，如果事件处理程序尚不具备执行条件，就会引发错误。（比如上面的`script`标签中放到页尾）
 94 | 
 95 |   2. 扩展事件处理程序中的作用域在不同的浏览器中会导致不同的结果。
 96 | 
 97 |   3. HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动两个地方，这也是大家都转向JavaScript指定事件处理程序的原因所在。
 98 | 
 99 | ## 13.2.2 DOM0级事件处理程序
100 | 
101 | > 通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式有以下几个特点。
102 | 
103 | 1. 简单
104 | 2. 跨浏览器
105 | 
106 | 每个元素（包括window和document）都有自己的事件处理程序，这些属性通常全部小写，例如onclick。
107 | 
108 | ``` html
109 | <button class="btn">按钮</button>
110 | 
111 | ```
112 | 
113 | ``` javascript
114 | 
115 | let btn = document.querySelector('.btn')
116 | 
117 |   btn.onclick = function () {
118 |     console.log(this.className)
119 |   }
120 | 
121 | ```
122 | 
123 | 需要注意的是，在这些代码运行之前不会指定事件处理程序，因此这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。
124 | 
125 | 
126 | **使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此这时候的事件处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素。**
127 | 
128 | **1. 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理**
129 | 
130 | **2. 也可以删除通过DOM0级方法指定的事件程序，如下**
131 | 
132 | ``` javascript
133 | 
134 | btn.onclick = null
135 | 
136 | ```
137 | 
138 | 
139 | 
140 | **使用DOM0级方法指定的事件处理程序**
141 | 
142 | ## 13.2.3 DOM2级事件处理程序
143 | 
144 | > "DOM2级事件"定义了两个方法，分别用于指定和删除事件处理程序：`addEventListener`、`removeEventListener`,所有的DOM节点都包括这两个方法，并且接受3个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。**如果这个布尔值为true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序**
145 | 
146 | ``` javascript
147 | 
148 | let btn = document.querySelector('.btn')
149 | 
150 |   btn.addEventListener('click', function () {
151 |     console.log(this.className)
152 |   }, false)
153 | 
154 | 
155 | ```
156 | 
157 | 与DOM0级方法一样，这里添加的事件处理程序也是在其依附的**元素的作用域中运行**,但其可以添加多个事件处理函数。并且是按照添加的顺序触发
158 | 
159 | ``` javascript
160 | 
161 | let btn = document.querySelector('.btn')
162 | 
163 |   btn.addEventListener('click', function () {
164 |     console.log('hello world 1')
165 |   }, false)
166 | 
167 |   btn.addEventListener('click', function () {
168 |     console.log('hello world 2')
169 |   }, false)
170 | 
171 | // 打印出 hello world 1, hello world 2
172 | ```
173 | 
174 | **移除事件处理程序**
175 | 
176 | > 通过`addEventListener`添加的事件处理程序只能使用`removeEventListener`来移除，移除时传入的参数和添加处理程序时使用的参数相同，这也意味着通过其添加的匿名函数将无法移除。
177 | 
178 | ``` javascript
179 | 
180 | const handleClick = () => {
181 |   console.log('hello world 3')
182 | }
183 | 
184 | btn.addEventListener('click', handleClick, false)
185 | btn.removeEventListener('click', handleClick, false) // 移除的时候需要和添加的时候参数保持一致,匿名函数无法移除
186 | 
187 | ```
188 | 
189 | **如果不是特别需要，不建议在捕获阶段注册事件处理程序**
190 | 
191 | ## 13.2.4 IE事件处理程序
192 | 
193 | > IE实现了与DOM中类似的两个方法，attachEvent, detachEvent。接受相同的参数，事件名称和事件处理程序函数。
194 | 
195 | `attachEvent`添加与`detachEvent`移除事件
196 | 
197 | ``` javascript
198 | 
199 | let $btn = document.querySelector('button')
200 | const handle = function () {
201 |   console.log('1)
202 | }
203 | const handle2 = function () {
204 |   console.log('2')
205 | }
206 | // 添加事件
207 | $btn.attachEvent('onclick', handle)
208 | $btn.attachEvent('onclick', handle2)
209 | // 移除事件
210 | $btn.detachEvent('onclick', handle)
211 | 
212 | 
213 | ```
214 | 
215 | **通过`attachEvent添加的事件处理程序以添加时的相反顺序触发`，移除事件的时候，事件名称和事件处理函数必须与添加的时候相同，匿名函数无法移除**
216 | 
217 | ## 13.2.5 跨浏览器的事件处理程序
218 | 
219 | > 恰当的使用能力检测，可以编写跨浏览器的事件处理。要保证处理事件在大多数浏览器下一致运行，只需要关注冒泡阶段。
220 | 
221 | 我们要创建的一个方法是addHandler(),它的职责是分别使用DOM0级方法，DOM2级方法或IE方法来添加事件。
222 | 
223 | **addHandler**
224 | 
225 | ``` javascript
226 | const addHandler = (element, type, handler) => {
227 |   if (element.addEventListener) {
228 |     element.addEventListener(type, handler, false)
229 |   } else if (element.attachEvent) {
230 |     element.attachEvent(`on${type}`, handler)
231 |   } else {
232 |     element[`on${type}`] = handler
233 |   }
234 | }
235 | 
236 | ```
237 | 
238 | **removeHandler**
239 | 
240 | ``` javascript
241 | 
242 | const removeHandler = (element, type, handler) => {
243 |   if (element.removeEventListener) {
244 |     element.removeEventListener(type, handler, false)
245 |   } else if (element.detachEvent) {
246 |     element.detachEvent(`on${type}`, handler)
247 |   } else {
248 |     element[`on${type}`] = null
249 |   }
250 | }
251 | 
252 | 
253 | ```
254 | 
255 | **实例**
256 | 
257 | ``` javascript
258 | 
259 | const $btn = document.querySelector('.btn')
260 | const logClassName = function () {
261 |   console.log(this.className)
262 | }
263 | 
264 | addHandler($btn, 'click', logClassName)
265 | addHandler($btn, 'click', function () {
266 |   console.log('hello world')
267 | })
268 | 
269 | removeHandler($btn, 'click', logClassName)
270 | 
271 | 
272 | ```
273 | 
274 | ## 13.3 事件对象
275 | 
276 | > 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。 例如包含包括事件的元素，事件的类型以及其他特定事件相关的信息。例如鼠标操作导致得事件对象中，会包含鼠标的位置信息，而键盘操作的事件对象中，会包含与按下的键有关的信息，所有的浏览器都支持event对象，但支持的方式不同
277 | 
278 | ### 13.3.1 DOM中的事件对象
279 | 
280 | > 兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论指定事件处理程序使用什么方式（DOM0和DOM2级），都会传入event对象，如下例子
281 | 
282 | 
283 | ``` javascript
284 | 
285 | let $btn = document.querySelector('.box')
286 | 
287 | const logEventType = (event) => {
288 |   console.log(event.type)
289 | }
290 | 
291 | $btn.onclick = logEventType
292 | $btn.addEventListener('click', logEventType, false)
293 | 
294 | 
295 | ```
296 | 
297 | 另外以下面这种方式提供event对象，可以让HTML特性事件处理程序函数执行相同的操作。
298 | 
299 | 
300 | ``` javascript
301 | 
302 | 
303 | <div class="box" onclick="console.log(this.innerHTML, event)">hello world</div>
304 | 
305 | ```
306 | 
307 | 
308 | 
309 | **event对象包含创建它的特定的事件相关的属性和方法，触发的事件类型不一样，可用的属性和方法也不一样。不过所有的事件都会有下表列出的成员**
310 | 
311 | 
312 | 属性/方法 | 类型 | 读/写 | 说明 
313 | - | :-: | -: | -: 
314 | bubbles | Boolean| 只读 | 表明事件是否冒泡
315 | 
316 | cancelable | Boolean| 只读 | 表明是否可以取消事件的默认行为
317 | 
318 | currentTarget | Element| 只读 | 其事件处理程序当前正在处理事件的那个元素
319 | 
320 | defaultPrevented | Boolean| 只读 | 为true表示已经调用了preventDefault()
321 | 
322 | detail | Integer| 只读 | 与事件相关的细节信息
323 | 
324 | eventPhase | Integer| 只读 | 调用事件处理程序的截断：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
325 | 
326 | preventDefault() | Function| 只读 | 取消事件的默认行为，如果是cancelable是true，则可以使用这个方法。
327 | 
328 | stopImmediatePropagation() | Function| 只读 | 取消事件的进一步捕获或者冒泡，同事阻止任何事件处理程序被调用。
329 | 
330 | stopPropagation() | Function| 只读 | 取消事件的进一步捕获或者冒泡，如果bubbles为true则可以使用这个方法
331 | 
332 | target | Element| 只读 | 事件的目标
333 | 
334 | trusted | Boolean| 只读 | 为true表示事件是由浏览器生成的，为false则表示事件是由开发人员通过JavaScript创建的
335 | 
336 | type | String| 只读 | 被触发的事件类型
337 | 
338 | view | AbstractView| 只读 | 与事件关联的抽象视图，等同于发生事件的window对象
339 | 
340 | ### 13.3.2 IE中的事件对象
341 | 
342 | > 与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。
343 | 
344 | ``` javascript
345 | 
346 | let $btn = document.querySelector('button')
347 | 
348 | $btn.onclick = () => {
349 |   let event = window.event
350 |   console.log(event.type)
351 | }
352 | 
353 | 
354 | ```
355 | 
356 | ### 13.3.3 跨浏览器的事件对象
357 | 
358 | ## 13.4 事件类型
359 | 
360 | > web浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信 ，而DOM3级事件，规定了以下几类事件
361 | 
362 | ### 13.4.1 UI事件
363 | 
364 | ### 13.4.2 焦点事件
365 | 
366 | ### 13.4.3 鼠标与滚轮事件
367 | 
368 | 
369 | 
370 | 
371 | 
372 | 
373 | 
374 | 
375 | 


--------------------------------------------------------------------------------
/第14章-表单脚本.md:
--------------------------------------------------------------------------------
  1 | ## 表单脚本
  2 | 
  3 | 目标：
  4 | 
  5 | 1. 理解表单
  6 | 2. 文本框验证和交互
  7 | 3. 使用其他表单控制
  8 | 
  9 | ## 14.1 表单基础知识
 10 | 
 11 | > 在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的元素类型是HTMLFormElement类型，HTMLFormElement继承了HTMLElement，所以除了与其他html元素具有的相同属性之外还拥有以下属性。
 12 | 
 13 | 1. acceptCharset: 服务器能够处理的字符集，等价于HTML中的accept-charset。
 14 | 
 15 | 2. action: 接受请求的URL，等价于html中的action特性
 16 | 
 17 | 3. enctype： 请求的编码类型，等价于html中的enctype
 18 | 
 19 | 4. length：表单中控件的数量
 20 | 
 21 | 5. method： 要发送的http请求的类型，通常是`get`或者`post`，等价于html中的method特性
 22 | 
 23 | 6. name：表单的名称，等价于html中的name属性
 24 | 
 25 | 7. reset(): 将表单域重置为默认值
 26 | 
 27 | 8. submit(): 提交表单
 28 | 
 29 | 9. target: 用于发送请求和接收响应的窗口的名称，等价于html中的target属性。
 30 | 
 31 | **获取表单引用的一些方式**
 32 | 
 33 | 1. 通过getElementById方法找到
 34 | 
 35 | 2. 通过document.forms可以获取到页面中所有的表单，并通过索引或者name取得特定的表单。
 36 | 
 37 | ``` javascript
 38 | let forms = document.forms
 39 | let firstForm = forms[0]
 40 | let myForm = form['form2']
 41 | 
 42 | ```
 43 | 
 44 | ## 14.1.1 提交表单
 45 | 
 46 | > 用户点击提交按钮或者图像按钮就会提交表单。使用<input>或者<button>都可以定义提交按钮，只要将其type类型的值设置为‘submit’即可。图像按钮则是将<input>的type设置为‘image’。
 47 | 
 48 | **只要表单中存在上面列出的任何一种按钮，那么在相应的表单控件拥有焦点的情况下，按下回车键就可以提交表单(需要注意的是textarea是个例外，会换行。)，相反没有以上的提交按钮，则不会提交表单**
 49 | 
 50 | **以以上三种按钮提交表单的时候，浏览器在将请求发送给服务器前触发submit事件，这样我们就有机会可以验证表单数据，并决定是不是允许表单提交**
 51 | 
 52 | ``` html
 53 | <form action="https://github.com/">
 54 |   <input type="text" value="用户名" name="username">
 55 |   <input type="password" value="pwd" name="password">
 56 |   <input type="submit" value="提交表单"> 
 57 | </form>
 58 | 
 59 | ```
 60 | 
 61 | 
 62 | ``` javascript
 63 | let $form = document.forms[0]
 64 | let fields = [].slice.call($form.elements)
 65 | let checkForm = () => {
 66 |   return (fields.filter((ele) => {
 67 |     return ['text', 'password'].includes(ele.type)
 68 |   }).every((ele) => {
 69 |     return ele.value.length > 6
 70 |   }))
 71 | }
 72 | 
 73 | $form.addEventListener('submit', function (event) {
 74 |   if (checkForm()) {
 75 |     // xxx 通过表单验证
 76 |   } else {
 77 |     // xxx 没通过
 78 |     event.preventDefault()
 79 |   }
 80 | }, false)
 81 | 
 82 | ```
 83 | 
 84 | ## 14.1.2 重置表单
 85 | 
 86 | > 和表单提交有类似，可以通过`<input>`或者`button`标签并且`type`属性为`reset`来创建重置按钮。它的功能就是将所有的表单字段都恢复到页面刚加载完毕的时候的初始值。同样用户点击充值表单的时候会触发reset事件，我们可以必要的时候取消重置操作
 87 | 
 88 | ``` html
 89 | <form action="https://github.com/">
 90 |   <input type="text" value="用户名" name="username">
 91 |   <input type="password" value="pwd" name="password">
 92 |   <!-- 以下两种方式都可以定义重置按钮 -->
 93 |    <input type="reset" value="重置表单">  
 94 |   <!-- <button>重置表单</button>   -->
 95 | </form>
 96 | 
 97 | ```
 98 | 
 99 | **稍微修改一下上面的脚本**
100 | 
101 | ```  javascript
102 | let $form = document.forms[0]
103 |   let fields = [].slice.call($form.elements)
104 |   let checkForm = () => {
105 |     return (fields.filter((ele) => {
106 |       return ['text', 'password'].includes(ele.type)
107 |     }).every((ele) => {
108 |       return ele.value.length > 6
109 |     }))
110 |   }
111 | 
112 |   ['submit', 'reset'].forEach((v) => {
113 |     $form.addEventListener(v, function (event) {
114 |       if (checkForm()) {
115 |         // xxx 通过表单验证
116 |       } else {
117 |         // xxx 没通过
118 |         event.preventDefault()
119 |       }
120 |     }, false)
121 |   })
122 | 
123 | ```
124 | **当然最后我们也可以通过form.reset()**在js中手动触发重置操作。
125 | 
126 | ## 14.1.3 表单字段
127 | 
128 | > 表单元素与其他的原生元素一样，可以使用`getElementById`等方式去访问。此外每个表单都有一个elements属性，表示表单中所有元素的集合。如果有多个表单控件都在使用一个name（比如单选按钮），name就会返回以该name命名的一个NodeList
129 | 
130 | ``` html
131 |  <form action="">
132 |   <input type="text" name="username">
133 |   <input type="text" name="username">
134 |   <input type="text" name="pwd">
135 |   <input type="radio" name="sex" value="boy">
136 |   <input type="radio" name="sex" value="girl">
137 |   <input type="submit">
138 | </form>
139 | 
140 | ```
141 | 
142 | ``` javascript
143 | let $form = document.forms[0]
144 | let elements = $form.elements
145 | 
146 | ```
147 | 以下是`elements`变量的取值，可以看到可以通过索引0,1,2等形式去访问表单控件，也可以通过`pwd`,`sex`等命名形式去访问。
148 | 
149 | ![](http://odssgnnpf.bkt.clouddn.com/QQ20170902-170740@2x.png)
150 | 
151 | **共有的表单字段属性**
152 | 
153 | > 除了<fieldset>元素之外，所有的表单字段都拥有相同的一组属性。比如如下。
154 | 
155 | 1. disabled:布尔值，表示当前字段是否被禁用。
156 | 2. form：指向当前字段所属表单的指针，只读。
157 | 3. name：当前字段的名称
158 | 4. readOnly：布尔值，表示当前字段是否只读。
159 | 5. tabIndex：表示当前字段的切换号
160 | 6. type：当前字段的类型，如“checkbox”，“radio”等等
161 | 7. value：当前字段被提交给服务器的值，对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
162 | 
163 | **除了form属性之外，可以通过js动态修改其值**
164 | 
165 | **共有的表单字段方法**
166 | 
167 | 1. focus(),获取焦点
168 | 2. blur()，失去焦点
169 | 
170 | > 需要注意的是，只有表单字段才可以获取焦点，对于其他元素来说，如果先将其`tabIndex`属性设置为-1，然后在调用focus()方法，也可以让这些元素获得焦点。当前opera目前不支持这种技术
171 | 
172 | **共有的表单事件**
173 | 
174 | 除了支持鼠标，键盘，更改和HTML事件之外，所有表单字段都支持下面三个事件。
175 | 
176 | 1. blur：当前子弹失去焦点时触发
177 | 2. change：对于input和textarea元素来说，在他们是去焦点并且值改变时触发，对于select元素，在其选项改变时触发，
178 | 3. focus：当前字段获得焦点时触发
179 | 
180 | ## 14.2 文本框脚本
181 | 
182 | > 在HTML中，<input>元素和<textarea>元素都表示文本框。这两个空间非常类似，而且大多数的时候行为也差不多，不过还是有一些差别。
183 | 
184 | 1. 对于input元素来说可以通过`size`特性来设置能够显示的字符数，通过value特性，可以设置初始值。，而`maxlength`则可以指定能够接受的最大字符数。如果要创建一个文本框，让他能够显示25个字符，单输入不能超过50个字符。可以用如下代码。
185 | 
186 | ``` html
187 | 
188 | <input type="text" size="25" maxlength="50" value="initial value">
189 | 
190 | ```
191 | 
192 | 2. 但是对于<textarea>而言，元素始终会呈现为一个多行文本，要指定文本框的大小可以通过`rows`和`cols`,rows表示行数，cols表示列数。与<input>元素的区别在于其初始值需要放在<textarea>initial value<textarea>之间。并且不能指定最大字符数。
193 | 
194 | ## 14.2.1 选择文本
195 | 
196 | > 上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本，在调用select()方法时，大多数浏览器都会讲焦点设置到文本框中。
197 | 
198 | 在文本框获取焦点时选择所有文本，可以让用户不必一个一个删除文本。
199 | 
200 | 1. **select事件**
201 | 
202 | > 与`select()`方法对应的是select事件，在选择了文本框的文本时就会触发select事件。但是什么时候触发会因浏览器而异。在ie9+，Opera,FireFox，Chrome和Safari中，只有用户选择了文本而且释放了鼠标才会触发select事件。但是在ie8及更早的版本中只要用户选择了一个字母，不必释放鼠标，就会触发。当然在调用select()方法的时候也会触发该事件。
203 | 
204 | 2. **获取选择的文本**
205 | 
206 | > 通过`selectionStart`和`selectionEnd`表示所选择的文本的范文（即文本选区的开头和结尾的偏移量），就可以知道用户到底选择了啥。
207 | 
208 | ``` javascript
209 | 
210 | $area.addEventListener('select', (e) => {
211 |   console.log($area.value.substring($area.selectionStart, $area.selectionEnd))
212 | }, false)
213 | 
214 | 
215 | ```
216 | 
217 | 当然该方式是有兼容问题的，
218 | 
219 | 3. **选择部分文本**
220 | 
221 | > HTML5中为选择文本框中的部分文本提供了解决方法，即`setSelectionRange`方法，接收两个参数，要选择地第一个和最后一个字符之后的字符的索引。
222 | 
223 | ## 14.2.2 过滤输入
224 | 
225 | > 我们经常会要求用户在文本框中输入特定格式的数据，比如必须匹配某种模式，我们可以综合运用事件和DOM手段，来将普通的文本框转化成能够理解用户输入数据的功能控件。
226 | 
227 | 1. 屏蔽字符
228 | 
229 | > 有时候我们需要用户输入的文本中不包含某些字符，这个时候可以给`keypress`事件，阻止这个事件的默认行为来屏蔽此类字符。甚至在某些极端的情况下可以屏蔽掉所有操作。
230 | 
231 | ``` javascript
232 | $keyPress.addEventListener('keypress', (e) => {
233 |   e.preventDefault()
234 | }, false)
235 | 
236 | ```
237 | 
238 | 3. 操作剪切板
239 | 
240 | > IE是第一个支持与剪切板相关事件，以及通过js访问剪切板数据的浏览器。后来html5也把剪切板事件纳入了规范，下面是6个剪切板事件。
241 | 
242 | 1. beforecopy: 在发生复制操作前触发
243 | 2. copy：在发生复制操作时触发
244 | 3. beforecut：在发生剪切操作前触发
245 | 4. cut：在发生剪切操作时触发
246 | 5. beforepaste：在发生粘贴操作前触发
247 | 6. paste：在发生粘贴操作时触发
248 | 
249 | ``` html
250 | 
251 | <div class="box">
252 |   <input type="text" class="paste-input">
253 | </div>
254 | 
255 | ```
256 | 
257 | ``` javascript
258 | let $pasteInput = document.querySelector('.paste-input')
259 | 
260 | let getClipboardData = (e) => {
261 |   let clipboardData = (e || event).clipboardData
262 | 
263 |   return clipboardData.getData('text')
264 | }
265 | let setClipboardData = (e, val) => {
266 |   let params = e.clipboardData ? 'text/plain' : 'text'
267 |   let clipboardData = (e || event).clipboardData
268 | 
269 |   clipboardData.setData(params, val)
270 | }
271 | 
272 | $pasteInput.addEventListener('paste', (e) => {
273 |   let data = getClipboardData(e)
274 |   console.log('paste===', data)
275 | }, false)
276 | 
277 | ```
278 | 
279 | **拿到的兼容事件对象上有一个clipboardData属性，这个对象有三个方法，分别是getData，setData和clearData。用于从剪切板中取得数据，他接收一个参数，即要取得的数据的格式，在ie中，有两种数据格式：‘text’和‘url’，在firefox和safari中的setData方法不能识别‘text’类型，这两个浏览器在成功将文本放到剪切板中后，都会返回true，否则返回false**
280 | 
281 | ## 14.2.3 自动切换焦点
282 | 
283 | > 使用js可以从多个方面增强表单的易用性，其中，最常见的一种方式就是在用户填写完当前字段的时候，自动将焦点切换到下一个字段。通常在自动切换焦点之前，必须知道用户已经输入了既定的长度的数据（比如电话号码）。
284 | 
285 | ``` html
286 | 
287 | <form action="" name="form1">
288 |   <input type="text" name="tel1" maxlength="3">
289 |   <input type="text" name="tel2" maxlength="4">
290 |   <input type="text" name="tel3" maxlength="5">
291 | </form>
292 | 
293 | ```
294 | 
295 | ``` javascript
296 | let $form = document.forms['form1']
297 | 
298 | let getNextInput = (e) => {
299 |   let target = (e || event).target
300 |   let maxLength = target.maxLength
301 |   let val = target.value
302 |   let name = target.name
303 |   let len = name.length
304 |   let nextInputIndex = Number(name[name.length - 1]) + 1
305 |   let prefix
306 | 
307 |   if (val.length === maxLength) {
308 |     prefix = name.slice(0, len - 1)
309 |     name = `${prefix}${nextInputIndex}`
310 |     return $form.elements[name]
311 |   }
312 | }
313 | 
314 | 
315 | $form.addEventListener('keyup', (e) => {
316 |   let $nextInput = getNextInput(e)
317 |   
318 |   if ($nextInput) {
319 |     $nextInput.focus()
320 |   }
321 | }, false)
322 | 
323 | ```
324 | 
325 | ## 14.4 表单序列化
326 | 
327 | > 在浏览器中提交表单之前，浏览器是怎样将数据发送给服务器的,如下说明。
328 | 
329 | 1. 对表单字段的名称和值进行URL(encodeURIComponent())编码,并使用(&)进行分割
330 | 2. 不发送禁用的表单字段
331 | 3. 只发送勾选的复选框和单选按钮
332 | 4. 不发送type为`reset`和`button`的按钮
333 | 5. 多选框中每个选中的值单独一个条目
334 | 6. 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则不会发送，也包括type为image的input元素
335 | 7. `<select>`元素的值就是选中的 `<option>`元素的value值，如果`<option>`元素没有value特性则是`<option>`的文本值
336 | 
337 | **放一张常见的表单提交的GET方式各个字段的截图**
338 | 
339 | 
340 | ![放一张常见的表单提交的POST方式各个字段的截图](http://odssgnnpf.bkt.clouddn.com/%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E6%96%B9%E5%BC%8Fget.png)
341 | 
342 | 
343 | **放一张常见的表单提交的POST方式各个字段的截图**
344 | 
345 | 
346 | ![放一张常见的表单提交的POST方式各个字段的截图](http://odssgnnpf.bkt.clouddn.com/%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E6%96%B9%E5%BC%8F.png)
347 | 
348 | 有以上知识点即可以回到第21章继续Ajax相关


--------------------------------------------------------------------------------
/第21章-Ajax与Comet.md:
--------------------------------------------------------------------------------
  1 | ## Ajax与Comet
  2 | 
  3 | [也可以查看阮一峰AJAX学习](http://javascript.ruanyifeng.com/bom/ajax.html)
  4 | 
  5 | > Asynchronous Javascript and XML(`Ajax`),这一技术能够能够向服务器请求额外的数据而不用刷新页面，能够带来更好的用户体验，熟练地使用XHR对象是Web开发人员必须掌握的一项技能。
  6 | 
  7 | ## 阅读主要内容和目标
  8 | 
  9 | 1. 使用`XMLHttpRequest`
 10 | 2. 使用`XMLHttpRequest`相应的事件
 11 | 3. 跨域Ajax通信的限制
 12 | 
 13 | ## 21.1 XMLHttpRequest对象
 14 | 
 15 | > XMLHttpRequest对象是使用Ajax技术最重要的一个点，最早支持该api的浏览器是IE5，在该浏览器中通过MSXML中的一个ActiveX对象实现的，所以在IE中也可能会遇到三个不同版本的XHR对象，分别是`MSXML2.XMLHttp`、`MSXML2.XMLHttp.3.0`、`MSXML2.XMLHttp.6.0`。需要兼容的话可以使用下面这个函数。
 16 | 
 17 | ``` javascript
 18 | 
 19 | //  适用于ie7之前的版本
 20 | 
 21 | function createXHR () {
 22 |   if (typeof arguments.callee.activeXString != 'string') {
 23 |     var versions = [
 24 |       'MSXML2.XMLHttp',
 25 |       'MSXML2.XMLhttp.3.0',
 26 |       'MSXML2.XMLhttp.6.0'
 27 |     ]
 28 |     for (var i = 0, len = versions.length; i < len; i++) {
 29 |       try {
 30 |         new ActiveXObject(versions[i])
 31 |         arguments.callee.activeXString = versions[i]
 32 |         break
 33 |       } catch (e) {
 34 |         // 跳过
 35 |       }
 36 |     }
 37 |   }
 38 |   return new ActiveXObject(arguments.callee.activeXString)
 39 | }
 40 | 
 41 | ```
 42 | 
 43 | **当然如果我们只想支持ie7以及更高版本的浏览器只需要像下面这样使用构造函数**
 44 | 
 45 | ``` javascript
 46 | 
 47 | var xhr = new XMLHttpRequest()
 48 | 
 49 | 
 50 | ```
 51 | 
 52 | **如果必须支持ie7以下的版本，稍微改造下前面的createXHR函数即可**
 53 | 
 54 | ``` javascript
 55 | function createXHR () {
 56 |   if (typeof XMLHttpRequest != 'undefined') {
 57 |     return new XMLHttpRequest()
 58 |   } else if (typeof arguments.callee.activeXString != 'string') {
 59 |     console.log('进了arguments.callee.activeXString')
 60 |     var versions = [
 61 |       'MSXML2.XMLHttp',
 62 |       'MSXML2.XMLhttp.3.0',
 63 |       'MSXML2.XMLhttp.6.0'
 64 |     ]
 65 |     for (var i = 0, len = versions.length; i < len; i++) {
 66 |       try {
 67 |         // 为什么这里不将实例返回也可以得到XHR对象
 68 |         console.log(versions[i])
 69 |         new ActiveXObject(versions[i])
 70 |         arguments.callee.activeXString = versions[i]
 71 |         break
 72 |       } catch (e) {
 73 |         // 跳过
 74 |       }
 75 |     }
 76 |     console.log('ActiveXObject')
 77 |     return new ActiveXObject(arguments.callee.activeXString)
 78 |   } else {
 79 |     throw new Error('No XHR object available')
 80 |   }
 81 | }
 82 | 
 83 | ```
 84 | 
 85 | ## 21.1.1 XHR的用法
 86 | 
 87 | > 上面了解了如何用兼容的方式获取一个xhr对象，现在开始学习如何使用，一般大致上可以分为以下三步。
 88 | 
 89 | 1. 通过`onreadystatechange`监听请求状态
 90 | 2. xhr.open(method, url, true or false)
 91 | 3. xhr.send()
 92 | 
 93 | 
 94 | `xhr.open(method, url, true or false)`的三个参数分别是请求的类型(`get`、`post`等)，请求的url，以及请求是否设置为异步。
 95 | 
 96 | **示例**
 97 | 
 98 | ``` javascript
 99 | xhr.open('get', 'example.php', false)
100 | 
101 | ```
102 | 
103 | **特别说明**
104 | 
105 | 1. url可以是相对路径也可以是绝对路径
106 | 2. 调用`open`方法后并不会立即发送一个请求到服务器，只是启动一个请求以备发送。
107 | 
108 | 
109 | 真正发送请求是从xhr.send()开始
110 | 
111 | ``` javascript
112 | xhr.open('get', 'example.php', false)
113 | xhr.send(null)
114 | 
115 | ```
116 | 
117 | `send`方法接收一个参数，即作为请求主体发送的数据，如果不需要发送数据必须传入`null`,此时请求才真正地被分派至服务器。
118 | 
119 | 当发送的请求接收到响应的时候会自动填充`xhr`对象的相关属性，现在对相关属性介绍如下。
120 | 
121 | 1. responseText(作为响应主体被返回的文本)
122 | 2. status (响应的http状态)
123 | 3. statusText(http状态说明)
124 | 
125 | 接收到响应的时候先判断`status`属性，以判断响应是否完成，一般将http状态为200(304表示请求的资源没有更改，可以走浏览器缓存)时作为成功的标志。
126 | 
127 | 所以可以如下写法检查请求的状态
128 | 
129 | ``` javascript
130 | xhr.open('get', 'example.php', false)
131 | xhr.send(null)
132 | if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
133 |   // 成功
134 |   alert(xhr.responseText)
135 | } else {
136 |   alert('request was unsuccessful' + xhr.status)
137 | }
138 | 
139 | ```
140 | 
141 | 像上面那样发送的是同步请求，大多数情况下我们发送的还是异步请求以不阻塞js继续执行，这个时候可以监测xhr对象的`readyState`属性,该属性表示请求/响应过程属于哪一个阶段。总共有以下几个阶段
142 | 
143 | 1. 0 : 未初始化，还没有调用open()方法
144 | 2. 1 : 启动，已经吊用open()方法但是还没有调用send()方法
145 | 3. 2 : 发送，已经调用send()方法，但是尚未接收到响应
146 | 4. 3 : 接收，已经接收到部分数据
147 | 5. 4 : 完成，已经接收到全部数据，而且已经可以在客户端使用了。
148 | 
149 | 通常`readyState`由一个值切换到另一个值都会触发`onreadystatechange`事件，通常我们只对为4的情况感兴趣，因为只有这个时候响应的数据是完整的。
150 | 
151 | **看一个完成一些的例子**
152 | 
153 | ``` javascript
154 | let xhr = createXHR()
155 | 
156 | xhr.onreadystatechange = function () {
157 |   if (xhr.readyState === 4) {
158 |     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
159 |       // 成功
160 |       alert(xhr.responseText)
161 |     } else {
162 |       // 失败
163 |     }
164 |   }
165 | }
166 | xhr.open('get', 'example.php', true)
167 | xhr.send(null)
168 | 
169 | ```
170 | 
171 | **另外既然可以发送请求，我们也可以终止请求，调用xhr.abort()法方法，xhr对象将会停止触发事件，此时也应该对xhr对象解除引用操作**
172 | 
173 | ## 21.1.2 http头部信息
174 | 
175 | > 每个http的请求和响应都会带有响应的头部信息，xhr对象提供了操作这两种头部(请求头部和响应头部)信息的方法。
176 | 
177 | 1. Accept : 浏览器能够处理的内容类型
178 | 2. Accept-charset : 浏览器能够显示的字符集
179 | 3. Accept-Encoding : 浏览器能够处理的压缩编码
180 | 4. Accept-Language : 浏览器当前设置的语言
181 | 5. Connection : 浏览器与服务器之间的连接类型
182 | 6. Cookie : 当前页面设置的任何cookie
183 | 7. Host : 发出的请求所在的域
184 | 8. Referer : 发出请求的页面URI (`特别注意：这个单词正确拼写应该是referrer,但是HTTP规范把单词拼错了，也只能将错就错了`)
185 | 
186 | **可以使用`xhr.setRequestHeader`来设置自定义的请求头部信息**
187 | 
188 | 该方法接收两个参数，即头部字段的名称和头部字段的值。
189 | 
190 | **如果要成功的发送请求头部信息，必须在调用open方法之后并且调用send方法之前调用setRequesHeader方法**，比如
191 | 
192 | ``` javascript
193 | var xhr = createXHR()
194 | xhr.onreadystatechange = function () {
195 |   if (xhr.readyState === 4) {
196 |     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
197 |        console.log((xhr.responseText))
198 |     }
199 |   }
200 | }
201 | xhr.open('get', 'example', true)
202 | xhr.setRequestHeader('name', 'qianlongo')
203 | xhr.send(null)
204 | 
205 | ```
206 | 服务端在接收到这种自定义的头部信息之后，可以执行响应的后续操作，建议不要修改浏览器默认的头部相关字段。
207 | 
208 | 我们也可以调用`xhr.getResponseHeader()`，并传入一个头部字段的名称即可获取响应的头部信息，而调用`xhr.getAllResponseHeaders()`则可以获取包含所有头部信息的长字符串。
209 | 
210 | 以下是示例。
211 | 
212 | ``` javascript
213 | var myHeader = xhr.getResponseHeader('myHeader')
214 | var allHeaders = xhr.getAllResponseHeaders()
215 | ```
216 | 
217 | 当然了客户端在发起请求的时候可以自定义请求头部信息，服务端同样可以返回客户端一些自定义的头部信息。
218 | 
219 | ## 21.1.3 GET请求
220 | 
221 | > GET是最常见的请求类型，最常用于向服务器查询某些信息，将查询字符串跟在url的后面，以便将信息发送给服务器。，对于XHR而言传入open方法的url后的查询字符串，必须经过正确的编码（即名和值都必须使用encodeURIComponent()进行处理）才行。
222 |  
223 | ``` javascript
224 | function addURLParam (url, name, value) {
225 |   url += (url.indexOf('?') === -1 ? '?' : '&')
226 |   url += encodeURIComponent(name) + '=' + encodeURIComponent(value)
227 |   return url
228 | }
229 | 
230 | ```
231 | 
232 | ## 21.1.4 POST请求
233 | 
234 | > 使用频率仅次于get的是post请求，通常用于向服务器发送应该被保存的数据，post请求应该将数据作为请求的主体提交而get请求传统上不是如此，post请求可以包含非常多的数据而且格式不限。
235 | 
236 | 
237 | **默认情况下，服务器对post请求和提交的web表单请求并不会一视同仁，因此服务器必须有程序来读取发送过来的原始数据，并且解析出有用的部分，不过我们可以用xhr来模仿表单提交**
238 | 
239 | 模仿表单提交一般有以下两点
240 | 
241 | 1. 将请求头的`Content-type`设置为`application/x-www-form-urlencoded`,也就是表单提交的类型
242 | 2. 其次以合适的格式创建一个字符串，post格式与查询字符串的格式相同
243 | 
244 | **简单示例**
245 | 
246 | ``` javascript
247 | function submitData () {
248 |   var xhr = createXHR()
249 |   xhr.onreadystatechange = function () {
250 |     if (xhr.readyState === 4) {
251 |       if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
252 |         alert(xhr.responseText)
253 |       } else {
254 |         alert('err')
255 |       }
256 |     }
257 |   }
258 |   xhr.open('post', 'example.php', true)
259 |   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') // 着重点
260 |   var form = document.getElementById('user-info')
261 |   xhr.send(serialize(form)) // 着重点
262 | }
263 | 
264 | ```
265 | 
266 | **与GET请求相比POST请求消耗的资源会更多一些，从性能角度看，发送相同的数据，GET请求的速度可以达到POST请求的2倍**
267 | 
268 | **因为Ajax涉及到模仿表单提交等知识，现在暂停到这里，先回顾完第14章－表单脚本再回到这里**
269 | 
270 | **对于了解本章知识点需要的表单知识主要是以GET和POST两种方式提交时的请求头部`Content-type`和`formData`以及提交给后端的是经过`encodeURIComponent()`处理的即可**
271 | 
272 | ## 21.2 XMLHttpRequest 2级
273 | 
274 | ## 21.2.1 FormData
275 | 
276 | > 现代Web应用中频繁使用的一项功能就是表单序列化，`XMLHttpRequest 2`为此定义了`FormData`类型，FormData为序列化表单和创建与表单格式相同的数据(用于通过XHR传输)提供了便利。
277 | 
278 | 使用示例
279 | 
280 | ``` javascript
281 | var data = new FormData()
282 | 
283 | data.append('name', 'qianlongo')
284 | 
285 | ```
286 | 
287 | 其接收两个参数，数据的健和值
288 | 
289 | 当然也可以直接像`FormData`传入表单
290 | 
291 | 示例
292 |  
293 | ``` javascript
294 | var xhr = createXHR()
295 | xhr.onreadystatechange = function () {
296 |   if (xhr.readyState === 4) {
297 |     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
298 |       alert(xhr.responseText)
299 |     } else {
300 |       alert('err')
301 |     }
302 |   }
303 | }
304 | xhr.open('post', 'example.php', true)
305 | var form = document.getElementById('user-info')
306 | xhr.send(new FormData(form)) // 着重点
307 | 
308 | ```
309 | 
310 | **对比上面一个例子我们可以发现，使用FormData来传输数据的时候，可以省去设置头部`Content-type`，也不必自己序列化表单，可谓方便多了**
311 | 
312 | ## 21.2.2 超时设置
313 | 
314 | > 超时设置可以参考zepto ajax模块中的处理 [zepto-ajax模块](https://github.com/qianlongo/zepto-analysis/blob/master/src/ajax.js)
315 | 
316 | ## overrideMimeType()方法
317 | 
318 | > 该方法用于重写XHR响应的MIME类型，因为返回响应的类型决定了XHR对象如何处理它，所以提供一种能够重写服务端返回的MIME类型是很有用的。[MIME MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
319 | 
320 | 举个例子：服务器返回的MIME类型是text/plain,但是数据中实际包含的是XML，那么XHR根据MIME的类型，即使数据是XML。responseXML属性中仍然是null，通过调用overrideMimeType方法，可以保证把响应当作XML而非穿文本来处理。
321 | 
322 | ``` javascript
323 | var xhr = createXHR()
324 | xhr.open('get', 'text.php', true)
325 | xhr.overrideMimeType('text/xml')
326 | xhr.send(null)
327 | ```
328 | 
329 | **注意该方法必须要在send方法之前调用，才能保证重写响应的MIME类型**
330 | 
331 | ## 21.3 进度事件
332 | 
333 | > Progress Events定义了客户端与服务器通信有关的事件。
334 | 
335 | 1. loadStart ： 在接收到响应数据的第一个自己触发
336 | 2. progress ：在接收响应期间持续不断的触发
337 | 3. error ： 在请求发生错误时触发
338 | 4. abort ： 在因为调用abort()方法而终止连接时触发
339 | 5. load ： 在接收到完整的数据时触发
340 | 6. loadend ： 在通信完成或者触发error、abort或load事件后触发
341 | 
342 | 现在着重看`load`和`progress`事件
343 | 
344 | ## 21.3.1 load事件
345 | 
346 | > load事件的初衷在于简化异步交互的模型，用以替代readystatechange事件，响应接收完毕将会触发load事件，因此也就没有必要检查readyState属性。并且load事件处理程序会受到一个event对象，target属性就是指向xhr对象的实例，也就可以访问到其所有的属性和方法。
347 | 
348 | 遗憾的是并不是所有的浏览器都实现了适当的事件对象，所以兼容写法还是如下
349 | 
350 | ``` javascript
351 | var xhr = createXHR()
352 | xhr.onload = function () {
353 |   if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
354 |     alert(xhr.responseText)
355 |   } else {
356 |     alert('Request was unsuccessful')
357 |   }
358 | }
359 | 
360 | ```
361 | 
362 | ## 21.3.2 progress事件
363 | 
364 | > 该事件会在浏览器接收数据期间周期性的触发。而onprogress的事件处理程序会接收到一个event对象，其target属性是XHR对象，但是包含三个而外的属性 
365 | 
366 | 1. `lengthComputable` (表示进度信息是否可用)
367 | 2. `position` (表示已经接收的字节数)
368 | 3. `totalSize` (表示根据Content-Length响应头部确定的预期的字节数)
369 | 
370 | **这些属性兼容性问题比较大，谨慎使用**
371 | 
372 | ## 21.4 跨域资源共享
373 | 
374 | ## 21.4.1 IE对CORS的实现
375 | 
376 | ## 21.4.2 其他浏览器对CORS的实现
377 | 
378 | ## 21.4.3 Preflighted Request
379 | 
380 | ## 21.4.4 带凭据的请求
381 | 
382 | ## 21.4.5 跨浏览器的CORS
383 | 
384 | **以上章节都是讲解CORS形式跨域的解决方案，本书介绍比较少，可以看阮一峰的文章 [跨域资源共享 CORS 详解](http://www.ruanyifeng.com/blog/2016/04/cors.html)**
385 | 
386 | ## 21.5 其他跨域技术
387 | 
388 | > 在CORS技术出现之前，解决跨域问题，一般是利用DOM中能够执行跨域请求的功能，在不依赖XHR对象的情况下也能发送某种请求。
389 | 
390 | ## 21.5.1 图像ping
391 | 
392 | > 网页中无论从哪个网页中加载图片都不用担心跨域的问题，通过动态的创建图像，使用它们的onload和onerror事件处理程序来确定是否接收到了响应。
393 | 
394 | **图像ping是与服务器进行简单、单向的跨域通信的一种方式，请求的数据通过查询字符串形式发送给服务器，而响应可以是任意内容，但通常是像素图或204响应，通过图像ping浏览器得到不任何数据，但可以通过onload和onerror事件知晓请求是何时接收到的。**
395 | 
396 | ``` javascript
397 | var img = new Image()
398 | img.onload = img.onerror = function () {
399 |   alert('DONE')
400 | }
401 | img.src = 'www.baidu.com'
402 | 
403 | ```
404 | 
405 | ## 21.5.2 JSONP
406 | 
407 | > JSONP(JSON with padding),由两部分组成：回调函数和数据，回调函数是当响应到来的时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的json数据。
408 | 
409 | **通过动态地创建`<script>`标签，将其src属性指向一个跨域的url，其实这里的script标签和img标签类似，都有能力不受限制的跨域加载资源，因为JSONP是有效的JavaScript代码，所以在请求完成之后，即在JSONP响应加载到页面以后，就会立即执行。**
410 | 
411 | 可以看一篇自己以前写过的文章[原来你是这样的jsonp(原理与具体实现细节)](https://github.com/qianlongo/zepto-analysis/issues/4)
412 | 
413 | **示例**
414 | 
415 | ``` javascript
416 | function handleResponse (response) {
417 |   console.log(response)
418 | }
419 | 
420 | var script = document.createElement('script')
421 | script.src = 'http://example.php?callback=handleReponse'
422 | document.body.appendChild(script)
423 | 
424 | ```
425 | 
426 | 


--------------------------------------------------------------------------------
/第5章-引用类型.md:
--------------------------------------------------------------------------------
  1 | ## 引用类型
  2 | 
  3 | 学习目标
  4 | 
  5 | 1. 使用对象
  6 | 2. 创建并操作数组
  7 | 3. 理解基本的JavaScript类型
  8 | 4. 使用基本类型和基本包装类型
  9 | 
 10 | ## 5.1 Object类型
 11 | 
 12 | > 大多数引用类型的值都是Object类型的实例，而且Object也是ECMAScript中使用最多的一个类型。
 13 | 
 14 | **创建对象的方式**
 15 | 
 16 | 1. 使用new操作符后跟Object构造函数
 17 | 
 18 | ``` javascript
 19 | var person = new Object()
 20 | person.name = 'qianlongo'
 21 | person.sex = 'boy'
 22 | ```
 23 | 
 24 | 2. 对象字面量表示法(定义对象的一种简写形式)
 25 | 
 26 | ``` javascript
 27 | var person = {
 28 |   name: 'qianlongo',
 29 |   sex: 'boy'
 30 | }
 31 | ```
 32 | 
 33 | **注意对象的最后一个属性后面不是说不能加逗号，是在部分浏览器例IE7及更早版本下会报错，所以最好不要写**
 34 | 
 35 | `访问对象的方式`
 36 | 
 37 | 一般有两种
 38 | 
 39 | 1. 点表示法(obj.name)
 40 | 2. 方括号表示法(obj['name'])
 41 | 
 42 | **两种方式都可以但是如果属性名中包含会导致语法错误的字符，或者属性使用的是关键字或保留字，也可以使用方括号表示法(这个时候使用点表示法就报错了)**
 43 | 
 44 | 当然了除非必须使用方括号表示法不然建议使用点表示法
 45 | 
 46 | ## 5.2 Array类型
 47 | 
 48 | 创建数组的方式有两种
 49 | 
 50 | 1. 使用Array的构造函数
 51 | 
 52 | ``` javascript
 53 | var colors = new Array()
 54 | 
 55 | ```
 56 | 如果事先知道数组的长度可以传一个数字，并且该数字会变成该数组length属性的值。
 57 | 
 58 | ``` javascript
 59 | var colors = new Array(20)
 60 | 
 61 | ```
 62 | 
 63 | 当然也可以向数组传入应该包含的项
 64 | 
 65 | ``` javascript
 66 | var colors = new Array('red', 'green')
 67 | 
 68 | ```
 69 | 
 70 | **所以当你向构造函数传递一个值的时候，如果这个值是数值，那么会创建给定项数的数组。如果传递的是其他类型参数，则会创建包含那个值的只有一项的数组。**
 71 | 
 72 | 另外创建数组也可以省去new操作符。
 73 | 
 74 | 2. 创建数组的第二种基本方式是数组字面量表示法。
 75 | 
 76 | ``` javascript
 77 | var colors = ['red', 'green']
 78 | var names = []
 79 | var values = [1, 2, ] // 不要这样，这样会创建包含2或3项的数组
 80 | var options = [, , , , ,] // 不要这样，这样会创建包含5或6项的数组
 81 | ```
 82 | **注意不要像第二行以及第三行那样创建数组，在ie中values是包含3个项且值分别为1， 2， undefined的数组**
 83 | 
 84 | 在读取或者设置数组的值时，要使用方括号并提供索引基于0的数字索引.
 85 | 
 86 | ``` javascript
 87 | var colors = ['red', 'blue', 'green']
 88 | alert(colors[0])
 89 | colors[2] = 'black' // 修改第三项
 90 | colors[3] = 'brown' // 新增第四项
 91 | ```
 92 | 
 93 | **当设置的索引大于数组现有的项数的时，数组就会自动增加到该索引加一的长度(其实不然应该是索引值需小于4294967295)**
 94 | 
 95 | 数组的length可读可写，通过设置length属性可以从数组的末尾移除项或者向数组中添加项。
 96 | 
 97 | ``` javascript
 98 | var colors = ['red', 'green', 'blue']
 99 | colors.length = 2
100 | alert(colors[2]) // undefined
101 | ```
102 | 
103 | 利用length属性也可以很方便的添加新项
104 | 
105 | ``` javascript
106 | var colors = ['red', 'blue']
107 | colors[colors.length] = 'black'
108 | colors[colors.length] = 'pink'
109 | colors[100] = 'grey' // 4 ~ 99 都是undefined
110 | 
111 | ```
112 | **特别注意数组最多可以包含4294967294个项，如果添加的项数超过这个数，可能会导致错误**
113 | 
114 | **特别注意数组最多可以包含4294967294个项，如果添加的项数超过这个数，可能会导致错误**
115 | 
116 | **特别注意数组最多可以包含4294967294个项，如果添加的项数超过这个数，可能会导致错误**
117 | 
118 | ## 5.2.1 检测数组
119 | 
120 | 1. 对于一个网页或者一个全局作用域而言，使用instanceof即可
121 | 
122 | ``` javascript
123 | if (value instanceof Array) {
124 |   // 
125 | }
126 | 
127 | ```
128 | 当然这样判断是有缺陷的，如果使用iframe形式嵌入网页，那么至少存在两个以上的全局执行环境，从而存在两个以上不同版本的Array构造函数。这样第一个框架与第二个框架分别具有不同的构造函数，(具体验证可以看examples/第五章-引用类型/iframe父窗口.html)
129 | 
130 | 2. 也可以利用`Object.prototype.toString`来判断
131 | 
132 | ``` javascript
133 | var isArray = function (obj) {
134 |   return obj == null ? false : Object.prototype.toString.call(obj) === '[object Array]'
135 | }
136 | 
137 | ```
138 | 3. 还可以借助es5中的新api`Array.isArray()`
139 | 
140 | ``` javascript
141 | if (Array.isArray(obj)) {
142 |   // xxx
143 | }
144 | 
145 | ```
146 | 
147 | ...待补充
148 | 
149 | ## 5.2.2 转换方法
150 | 
151 | 以下是数组的三个转换方法
152 | 
153 | 1. valueOf(返回的是数组本身,即是相同的引用)
154 | 2. toString(返回数组中每个值的字符串形式拼接形成的一个以逗号分隔的字符串)
155 | 3. toLocaleString(与toString类似，不过是调用数组的每一项的toLocaleString方法)
156 | 
157 | ``` javascript
158 | var person = {
159 |   name: 'qianlongo',
160 |   toString () {
161 |     return this.name
162 |   },
163 |   toLocaleString () {
164 |     return `${this.name}-boy`
165 |   }
166 | }
167 | var people = [person]
168 | alert(people) // qianlongo
169 | alert(people.toString()) // qianlongo
170 | alert(people.toLocaleString()) // qianlongo-boy
171 | ```
172 | 
173 | 有一个疑问，如下，既然是调用数组的每一项的toString、toLocaleString方法拼接成的字符串,为什么下面不报错呢？内部做了兼容？(null没有toString和toLocaleString方法)
174 | 
175 | ``` javascript
176 | var arr = ['qianlongo', null]
177 | arr.toString() // qianlongo,
178 | arr.toLocaleString() // qianlongo,
179 | ```
180 | 
181 | ## 5.2.3 栈方法
182 | 
183 | > 数组提供的push和pop方法可以让其像其他数据结构一样，完成(LIFO)后进先出的表现。
184 | 
185 | [push](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push) (可以接收任意的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度)
186 | 
187 | pop (删除数组最后一项，并返回移除的项)
188 | 
189 | ``` javascript
190 | var colors = new Array()
191 | var count = colors.push('red', 'green') // 2
192 | count = colors.push('black') // 3
193 | var item = colors.pop() // 'black'
194 | ```
195 | 
196 | **当然我们也可以向这样使用push**
197 | 
198 | ``` javascript
199 | var arr = ['a', 'b']
200 | arr.push.apply(arr, ['c', 'd'])
201 | console.log(arr) // ["a", "b", "c", "d"]
202 | ```
203 | 
204 | **甚至可以像数组一样，在对象上使用push方法**
205 | 
206 | ``` javascript
207 | let push = Array.prototype.push
208 | let obj = {
209 |   length: 0,
210 |   addItem () {
211 |     push.apply(this, arguments) // 使用apply可以支持一次性传入多个选项
212 |   }
213 | }
214 | 
215 | obj.addItem('hello')
216 | obj.addItem('world')
217 | obj.addItem({age: 100})
218 | obj.addItem('qianlongo', 'sex')
219 | 
220 | ```
221 | 
222 | ![像使用数组一样使用push](http://odssgnnpf.bkt.clouddn.com/QQ20170705-141845.png)
223 | 
224 | ## 5.2.4 队列方法
225 | 
226 | > 利用shift和push可以模仿队列(FIFO)的数据结构形态。
227 | 
228 | shift(删除数组的第一个项并返回该项)
229 | 
230 | ``` javascript
231 | var colors = new Array()
232 | var count = colors.push('red', 'green') // 2
233 | var item = colors.shift() // red
234 | ```
235 | 
236 | 当然可以使用unshift和pop实现相反方向的队列结构
237 | 
238 | unshift(在数组的前端添加任意个项并返回新数组的长度)
239 | 
240 | ``` javascript
241 | var colors = new Array()
242 | var count = colors.unshift('red', 'green') // 2
243 | var item = colors.pop() // green
244 | 
245 | ```
246 | 
247 | **当然我们也可以向这样使用unshift**
248 | 
249 | ``` javascript
250 | var arr = ['c', 'd']
251 | arr.unshift.apply(arr, ['a', 'b'])
252 | console.log(arr) // ["a", "b", "c", "d"]
253 | ```
254 | 
255 | ## 5.2.5 重排序方法
256 | 
257 | 数组排序主要关注两个原生支持的方法
258 | 
259 | 1. reverse(反转数组，会影响原数组,并且返回值为原数组的引用)
260 | 
261 | ``` c
262 | var values = [1, 2, 3, 4, 5]
263 | var tempArr = values.reverse() // [5, 4, 3, 2, 1]
264 | values === tempArr // true
265 | ```
266 | 
267 | 2. sort(sort方法会调用每个数组项的toString方法，然后比较得到的字符串,即使是数字比较的也是字符串，以确定如何排序, 会改变原数组)
268 | 
269 | ``` javascript
270 | var values = [0, 1, 5, 10, 15]
271 | values.sort() // [0, 1, 10, 15, 5]
272 | ```
273 | 
274 | 看这张图了解原因
275 | 
276 | ![比较](http://odssgnnpf.bkt.clouddn.com/QQ20170705-140353.png)
277 | 
278 | **所以为了得到真正的排序后的结果，从小到大或者从大到小我们可以像下面这样做**
279 | 
280 | ``` javascript
281 | var values = [1, -3, 0, 5, 10, 1, 34, 2]
282 | // 从小到大
283 | values.sort((a, b) => a - b)
284 | // 从大到小
285 | values.sort((a, b) => b - a)
286 | ```
287 | 
288 | ## 5.2.6 操作方法
289 | 
290 | [concat方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
291 | 
292 | 基于当前的数组中的所有项创建一个新的数组，具体来说就是先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
293 | 
294 | 1. 如果没有传参数，只是简单地对当前数组的拷贝
295 | 2. 如果传递的是一个或者多个数组，则该方法会将这些数组中的所有项都添加到该数组中
296 | 3. 如果传递的不是数组，这些值就会简单地添加到数组的末尾
297 | 
298 | ``` javascript
299 | var colors = ['red']
300 | var colors2 = colors.concat('yellow', ['green']) // ["red", "yellow", "green"]
301 | ```
302 | 
303 | **concat 方法并不修改调用它的对象(this 指向的对象) 和参数中的各个数组本身的值,而是将他们的每个元素拷贝一份放在组合成的新数组中.原数组中的元素有两种被拷贝的方式:**
304 | 
305 | 1. 对象引用(非对象直接量):concat 方法会复制对象引用放到组合的新数组里,原数组和新数组中的对象引用都指向同一个实际的对象,所以,当实际的对象被修改时,两个数组也同时会被修改.
306 | 2. 字符串和数字(是原始值,而不是包装原始值的 String 和 Number 对象): concat 方法会复制字符串和数字的值放到新数组里.
307 | 
308 | ``` javascript
309 | var arr = [1, {name: 'qianlongo'}]
310 | var arr2 = arr.concat([{sex: 'boy'}])
311 | 
312 | arr2[0] = 'a' // 没有修改arr[0]的值
313 | arr2[1].name = 'xiaohuihui' // 此时也修改了arr[1]的值
314 | ```
315 | 
316 | [slice方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
317 | 
318 | > slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分`浅拷贝`到一个新数组对象。原始数组不会被修改
319 | 
320 | 1. 如果没有传参数则表示对当前数组的一个浅拷贝
321 | 2. 如果传递了一个参数则返回从该参数指定的位置开始到当前数组末尾所有的项。
322 | 3. 如果传递了两个参数则返回起始位置到结束位置的所有的项(不包含结束位置)
323 | 
324 | **特别提示：如果有一个值为负值，则利用数组长度加上该值来确定相应的位置,比如下面的例子得到的结果是相同的**
325 | 
326 | ``` javascript
327 | var arr = [1, 2, 3, 4, 5]
328 | var arr2 = arr.slice(-2, -1)
329 | var arr3 = arr.slice(3, 4)
330 | ```
331 | 
332 | [splice](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
333 | 
334 | 该方法可谓强大，可以实现`删除`、`插入`、`替换`等功能，且直接改变原数组的内容,通过以下例子来说明其用法
335 | 
336 | `array.splice(start)`
337 | 
338 | `array.splice(start, deleteCount)`
339 | 
340 | `array.splice(start, deleteCount, item1, item2, ...)`
341 | 
342 | **splice使用举例**
343 | 
344 | ``` javascript
345 | var colors = ['red', 'green', 'blue']
346 | // 1. 删除第一项(删除)
347 | var removed = colors.splice(0, 1) // removed是一个数组，包含删除的项 ["red"]
348 | // 2. 从第一个位置开始插入两项(插入)
349 | removed = colors.splice(1, 0, 'yellow', 'orange') // 如果没有删除，返回的是一个空数组[]
350 | // 3. 替换
351 | removed = colors.splice(1, 1, 'red')
352 | ```
353 | 结果可以看下面的图
354 | 
355 | ![](http://odssgnnpf.bkt.clouddn.com/QQ20170705-161141.png)
356 | 
357 | ## 5.2.7 位置方法
358 | 
359 | es5中添加了两个位置方法：
360 | 
361 | 1. [indexOf](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
362 | 
363 | 2. [lastIndexOf](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)
364 | 
365 | 这两个方法都接收两个参数，要查找的项和(可选的)表示查找起点位置的索引，执行后的返回值都是表示要查找的项在数组中的位置，在找到则返回-1.并且比较使用的是严格比较（即值和类型都要相等）。
366 | 
367 | **关于第二个参数特别注意下面这段话**
368 | 
369 | `开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，仍然从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.`
370 | 
371 | indexOf
372 | 
373 | ![indexOf](http://odssgnnpf.bkt.clouddn.com/QQ20170705-162401.png)
374 | 
375 | lastIndexOf
376 | 
377 | ![lastIndexOf](http://odssgnnpf.bkt.clouddn.com/QQ20170705-162719.png)
378 | 
379 | ## 5.2.8 迭代方法
380 | 
381 | es5中添加了5个迭代方法，每个方法都接收两个参数，要在每一项上运行的函数和运行该函数的执行上下文(影响内部的this值)，而传入的函数会接收三个值(数组的项，该项的索引，以及数组本身)
382 | 
383 | 1. every(对数组中的每一个项运行给定的函数，如果该数组的每一项都返回true，那么结果也返回true)
384 | 2. some(对数组中的每一项运行给定的函数，如果该项对任一项返回true，就返回true)
385 | 3. forEach(对数组中的每一项运行给定的函数，该函数没有返回值)
386 | 4. map(对数组中的每一项运行给定的函数，返回每次调用函数的结果组成的数组)
387 | 5. filter(对数组的每一项运行给定的函数，返回该函数返回true的项组成的数组)
388 | 
389 | **特别注意**
390 | 
391 | `注意： 没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。`
392 | 
393 | 使用举例
394 | 
395 | ``` javascript
396 | 
397 | var arr = [1, 2, 3, 4, 5, 4]
398 | 
399 | // forEach
400 | arr.forEach(function (v, i, array) {
401 |   console.log(v, i, array, this)
402 | }, {name: 'qianlongo'})
403 | 
404 | // every
405 | arr.every((v) => {
406 |   return v < 0
407 | })
408 | 
409 | // some
410 | arr.some((v) => {
411 |   return v > 1
412 | })
413 | 
414 | // map
415 | arr.map((v) => {
416 |   return `${v}-hello`
417 | })
418 | 
419 | // filter
420 | arr.filter((v) => {
421 |   return v > 3
422 | })
423 | 
424 | ```
425 | 
426 | ![迭代方法使用举例](http://odssgnnpf.bkt.clouddn.com/QQ20170705-165411.png)
427 | 
428 | ## 5.3 Date类型
429 | 
430 | ## 5.4 RegExp类型
431 | 
432 | ## 5.5 Function类型
433 | 
434 | > 函数实际上是对象，每个函数都是Function的实例，而且都与其它引用类型一样具有属性和方法。由于函数是对象，所以函数名也是指向函数对象的指针，不会与某个函数绑定。
435 | 
436 | 定义函数的方式
437 | 
438 | 1. 函数声明
439 | 
440 | ``` javascript
441 | function sum (num1, num2) {
442 |   return num1 + num2
443 | }
444 | 
445 | ```
446 | 
447 | 2. 函数表达式
448 | 
449 | ``` javascript
450 | var sum = function (num1, num2) {
451 |   return num1 + num2
452 | }
453 | 
454 | ```
455 | 
456 | 3. 使用Function构造函数(这种方式平时用到比较少)
457 | 
458 | Function构造函数可以接收任意数量的参数，但最后一个参数指的是函数体，前面的参数则是新函数的参数。
459 | 
460 | ``` javascript
461 | var sum = new Function ('num1', 'num2', 'return num1 + num2')
462 | 
463 | ```
464 | 
465 | **函数名其实仅仅是指向函数的指针，因此函数名与包含对象指针的其它变量没有什么不同，也就是说函数可能会有多个名字**
466 | 
467 | ## 5.5.1 没有重载(深入理解)
468 | 
469 | > 将函数想象为指针，有助于理解为什么函数没有重载的概念。
470 | 
471 | ``` javascript
472 | var addSum = function () {
473 |   return 1
474 | }
475 | var addSum = function () {
476 |   return 2
477 | }
478 | 
479 | ```
480 | 
481 | ## 5.5.2 函数声明与函数表达式
482 | 
483 | > 解析器在向执行环境中加载数据时，对函数声明和函数表达式并不是一视同仁，解析器会率先读取函数声明（**存在函数声明提升**），并使其在执行任何代码之前可用，而函数表达式，则是必须等到解析器执行到它所在的代码行，才会真正地被执行。
484 | 
485 | ``` javascript
486 | alert(sum(10, 10)) // 20
487 | 
488 | function sum (num1, num2) {
489 |   return num1 + num2
490 | }
491 | 
492 | alert(fn()) // 报错
493 | 
494 | var fn = function () {
495 |   return 1
496 | }
497 | ```
498 | 
499 | ## 


--------------------------------------------------------------------------------