本书是iQuery之父的经典之作，是深入学习JavaScript技术的绝佳教材，涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技巧以及未来趋势，辅以诸多代码示例，条理清楚、分析到位。本书展示了更新颖、更巧妙、更有深度的JavaScript技术，同时理清了JavaScript的发展脉络，既能磨炼技能，又可开拓视野。

John Resig，美国软件工程师，jQuery之父，骨灰级Web开发大师，毕业于罗切斯特理工学院，2007年加入Mozilla公司，现为可汗学院开发人员。

Russ Ferguson，杰出开发人员，曾为多家知名企业开发应用，并任教于普罗斯特艺术学院和帕森设计学院。

John Paxton，杰出开发人员，通晓多种开发语言，现专心研究Java和JavaScript

第1章 专业JavaScript技术  1

1.1 JavaScript的历程  1

1.2 现代JavaScript  3

1.2.1 库的崛起  4

1.2.2 移动，可不只说说而已  5

1.2.3 何去何从  5

1.3 后续内容  6

1.4 小结  7

第2章 特性、函数和对象  8

2.1 语言特性  8

2.1.1 引用和值  8

2.1.2 作用域  10

2.1.3 上下文  12

2.1.4 闭包  13

2.1.5 函数重载与类型检查  16

2.2 新的对象工具  19

2.2.1 对象  19

2.2.2 修改对象  19

2.3 小结  22

第3章 创建可重用代码  23

3.1 面向对象的JavaScript  23

3.1.1 继承  27

3.1.2 成员可见性  31

3.1.3 面向对象JavaScript的未来  33

3.2 打包JavaScript  33

3.2.1 命名空间  33

3.2.2 模块模式  34

3.2.3 立即调用的函数表达式  36

3.3 小结  38

第4章 JavaScript代码调试  39

4.1 调试工具  39

4.1.1 控制台  40

4.1.2 利用控制台的特性  42

4.2 调试器  43

4.2.1 DOM探查器  44

4.2.2 网络分析器  44

4.2.3 时间线  45

4.2.4 侧写器  45

4.3 小结  47

第5章 文档对象模型  48

5.1 文档对象模型简介  48

5.1.1 DOM结构  50

5.1.2 DOM中的相互关系  51

5.2 访问DOM元素  53

5.3 等待HTML DOM载入  56

5.3.1 等待页面载入  56

5.3.2 等待正确的事件  56

5.4 获取元素内容  57

5.4.1 获取元素的文本内容  57

5.4.2 获取元素的HTML  59

5.5 使用元素特性  59

5.6 修改DOM  63

5.6.1 使用DOM创建节点  63

5.6.2 插入DOM  63

5.6.3 向DOM中插入HTML  64

5.6.4 从DOM中删除节点  66

5.6.5 处理DOM中的空白字符  67

5.6.6 简单的DOM导航  68

5.7 小结  70

第6章 事件  71

6.1 JavaScript事件简介  71

6.1.1 栈、队列和事件循环  71

6.1.2 事件阶段  72

6.2 绑定事件侦听器  73

6.2.1 传统式绑定  74

6.2.2 DOM绑定：W3C  77

6.2.3 解除事件绑定  78

6.3 常见的事件特性  79

6.3.1 事件对象  79

6.3.2 取消事件冒泡  80

6.3.3 屏蔽浏览器的默认行为  81

6.3.4 事件委托  82

6.4 事件对象  83

6.4.1 普通属性  83

6.4.2 鼠标属性  84

6.4.3 键盘属性  86

6.5 事件类型  86

6.5.1 页面事件  87

6.5.2 UI事件  88

6.5.3 鼠标事件  88

6.5.4 键盘事件  89

6.5.5 表单事件  90

6.5.6 事件可访问性  90

6.6 小结  91

第7章 JavaScript与表单验证  92

7.1 HTML与CSS表单验证  92

7.2 JavaScript表单验证  95

7.2.1 验证与用户  98

7.2.2 验证事件  99

7.3 定制验证  101

7.4 小结  102

第8章 Ajax入门  103

8.1 使用Ajax  104

8.1.1 HTTP请求  104

8.1.2 HTTP响应  109

8.2 小结  111

第9章 Web生产工具  112

9.1 为项目搭建脚手架  112

9.2 NPM必不可少  113

9.3 生成器  113

9.3.1 版本控制  115

9.3.2 添加文件、更新以及首次提交  116

9.4 小结  119

第10章 AngularJS与测试  120

10.1 视图与控制器  122

10.2 远程数据源  124

10.3 路由  126

10.4 路由参数  126

10.5 应用程序测试  128

10.5.1 单元测试  128

10.5.2 使用Protractor进行端到端测试  132

10.6 小结  134

第11章 JavaScript的未来  135

11.1 ECMAScript的过去和未来  135

11.2 使用ECMAScript Harmony  136

11.2.1 Harmony资源  136

11.2.2 使用Harmony  137

11.3 ECMAScript Harmony语言特性  141

11.3.1 箭头函数  142

11.3.2 类  143

11.3.3 Promise  144

11.3.4 模块  146

11.3.5 类型扩展  148

11.3.6 全新的聚合类型  151

11.4 小结  153

附录A DOM参考  154

基本类型和引用类型

基本类型：字符串 数字 布尔值 null(待确定) undifined

引用类型：对象 数组

引用传递 保存的只是对象的地址

var obj = {};
var obj1 = obj;
obj.name="hey";
obj.name === obj1.name

// 自修改对象
var items = [1,2,3];
var items1 = items;
items.push(4);
items.length === items1.length

// 更改对象的引用
//将items设置为字符串数组（对象）
var items = ["one","two","three"];
var items1 = items;
items = ["new","array"];
//现在items items1指向不同的对象
//items指向 new array
//items1指向 one two three

// 修改对象生成一个全新对象而非自修改对象

var item="test";

var itemstr = item;
items+='ing';
console.log(item!=itemstr)

作用域

var foo = 'test';
if (true) {
    var foo = 'new test';
}
console.log(foo === 'new test');

function test() {
    var foo = 'old test';
}
test();
console.log(foo === 'new test');

function test() {
    foo = 'test';
}
test();
console.log(window.foo === 'test');

上下文

function setFoo(fooInput) {
    this.foo = fooInput
}

var foo = 5;
console.log('foo at the window level is set to'+foo);
var obj = {
    foo:10
}
console.log('foo at the obj is set to'+obj.foo)

setFoo(15);
console.log('now foo at the window level is set to'+foo);
obj.setFoo = setFoo;
obj.setFoo(20);
console.log('foo at the obj is now set to'+foo)

// 更改函数上下文

function changeColor(color) {
    this.style.color = color;
}
changeColor("white");
window对象没有style对象

var main = document.createElement('div');
changeColor.call(main,"black");
console.log(main.style.color)


function setBodyColor() {
    changeColor.apply(document.body,arguments);

}

setBodyColor('black');