共计 5064 个字符，预计需要花费 13 分钟才能阅读完成。
这是学习笔记，仅供学习所用。
看完前四章后，感觉这个书介绍的很基础，适合那些没接触过 JavaScript 的人。前两章但凡有点基础，并不是很推荐读，真正的实货从第三章开始，介绍的都是 JavaScript 的 DOM 操作。
第 1 章 JavaScript 简史
1.1 JavaScript 的起源
JavaScript 是一种脚本语言，通常只能通过 Web 浏览器去完成一些操作而不能像普通意义上的程序那样独立运行。
1.2 DOM
DOM 是一套对文档的内容进行抽象和概念化的方法。
在现实世界里，人们对所谓的“世界对象模型”都不会陌生。例如，当用“汽车”、“房子”和“树”等名词来称呼日常生活环境里的事物时，我们可以百分之百地肯定对方知道我们说的时什么，这是因为人们对这些名词所代表的东西有着同样的认识。
这个道理对网页也同样适用。JavaScript 的早期版本向程序员提供了查询和操控 Web 文档某些实际内容（主要是图像和表单）的手段。因为 JavaScript 预先定义了“images”和“forms”等术语。
1.3 浏览器战争
1.3.1 DHTML
DHTML 是“Dynamic HTML”（动态 HTML）的简称。DHTML 并不是一项新技术，而是描述 HTML、CSS 和 JavaScript 技术组合的术语。DHTMl 背后的含义是：
- 利用 HTML 把网页标记未各种元素；
- 利用 CSS 设置元素样式和它们的显式位置；
- 利用 JavaScript 实时地操控页面和改变样式。
第 2 章 JavaScript 语法
2.1 准备工作
用 JAvaScript 编写的代码必须通过 HTML/XHTML 文档才能执行，有两种方法可以做到这点：
- 将 JavaScript 代码放到文档 <head> 标签种的 <script> 标签之间；
- 把 JavaScript 代码存为一个扩展名为.js 的独立文件。
最好的做法就是把 <script> 标签放到 HTML 文档的最后，</body> 标签之前，这样能使浏览器更快地加载页面。
2.2 语法
2.2.1 语句
用 JavaScript 编写的脚本，与其他语言编写出来的脚本一样，都由一系列指令构成，这些指令叫做语句（statement）。只有按照正确的语法编写出来的语句才能得到正确的解释。
语句使构成任何一个脚本的基本单位。
2.2.2 注释
有时你需要在脚本中写一些仅供自己参考或提醒自己的信息，你希望 JavaScript 解释器能直接忽略这些信息。这类语句就是注释（comment）。
2.2.3 变量
在日常生活中，有些东西是固定不变的，有些东西则会发生变化，人们把那些会发生变化的东西称为“变量”。
把值存入变量的操作称为“赋值”。
注：JavaScript 允许程序员直接对变量赋值而无需事先声明。这在许多程序设计语言中是不允许的。有很多语言要求在使用变量之前必须先对它做出“介绍”，也称为 声明 。
在 JavaScript 脚本中，如果程序员在对某个变量赋值之前未声明，赋值操作将自动声明该变量。
在 JavaScript 语言里，变量和其他语法元素的名字都是区分字母大小写的。
JavaScript 语法不允许变量名中包含控股个或标点符号（美元符号 ”$” 例外）。
JavaScript 变量名允许包含字母、数字、美元符号和下划线（但第一个字符不允许是数字）。
2.2.4 数据类型
有些其他的语言要求在声明变量的同时还必须声明变量的数据类型，这种做法称为类型声明。必须明确类型声明的语言称为强类型语言；JavaScript 不需要进行类型声明，因此它是一种弱类型语言。这意味着程序员可以在任何阶段改变变量的数据类型。
1、字符串
字符串由零个或多个字符构成。字符包括（但不限于）字母、数字、标点符号和空格。字符串必须包在引号里，单引号或双引号都可以。
2、数值
如果想要给变量赋一个数值，不用限定它必须是一个整数。JavaScript 允许使用带小数点的数值，并且允许任意位小数，这样的数称为浮点数。
3、布尔值
布尔数据只有两个可选值——true 或 false。
2.2.5 数组
字符串、数值和布尔值都是标量。如果某个变量是标量，它在任意时刻就只能由一个值。如果想用一个变量来存储一组值，就需要使用数组。
数组是指用一个变量表示一个值的集合，集合中的每个值都是这个数组的一个元素。
2.2.6 对象
与数组类似，对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。
2.3 操作
算数操作符
加法是一种操作，减法、除法和乘法也是。这些算数操作中的每一种都必须借助于相应的操作符才能完成。
2.4 条件语句
JavaScript 使用条件语句来做判断。
2.5 循环语句
循环语句可以反复多次地执行同一段代码。循环语句分为几种不同的类型，但它们的工作原理几乎一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去：一旦给定条件的求值结果不再是 true，循环也就到此为止。
2.7 对象
对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性和方法：
- 属性是隶属于某个特定对象的变量；
- 方法是只有某个特定对象才能调用的函数。
2.7.1 内建对象
你其实已经见过一些内建对象了，数组就是其中一种。当我们使用 new 关键字去初始化一个数组时，其实是在创建一个 Array 对象的新实例。
2.7.2 宿主对象
除了内建对象，还可以在 JavaScript 脚本里使用一些已经预先定义好的其他对象。这些对象不是由 JavaScript 语言本身而是由它的运行环境提供的。具体到 Web 应用，这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象。
宿主对象包括 Form、Image 和 Element 等。另一种宿主对象也能用来获得网页上的任何一个元素的信息，它就是 document 对象。
第 3 章 DOM
3.1 文档：DOM 中的“D”
如果没有 document（文档），DOM 也就无从谈起。当创建了一个网页并把它加载到 Web 浏览器中时，DOM 就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。
在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明确。
3.2 对象：DOM 中的“O”
JavaScript 语言里的对象可以分为三种类型：
- 用户定义对象：由程序员自行创建的对象；
- 内建对象：内建在 JavaScript 语言里的对象，如 Array、Math 和 Date 等。
- 宿主对象：由浏览器提供的对象（最基础的对象就是 window 对象）。
window 对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为 BOM（浏览器对象模型）。
3.3 模型：DOM 中的“M”
DOM 中的“M”代表着“Model”（模型）。
DOM 代表着加载到浏览器窗口的当前网页。
DOM 把文档表示为一棵树，具体地说，是一个家谱树。
家谱树本身是一种模型。家谱树的典型用法是表示一个人类家族的谱系，并使用 parent（父）、child（子）、sibling（兄弟）等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的字辈，同时还是另一位成员的兄弟。
<html> 标签就是树根，他有两个分支 <head> 和 <body>，它们是兄弟关系，各有各的子元素，所以它们本身又是其他一些元素的父元素……
与使用“家谱树”这个术语相比，把文档称为“节点树”更准确。
3.4 节点
节点这个词是个网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。
在 DOM 里由许多不同类型的节点，就像原子包含着亚原子微粒那样，也有很多类型的 DOM 节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。
3.4.1 元素节点
DOM 的原子是元素节点。
标签的名字就是元素的名字。文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。
元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是 <html> 元素，它是我们的节点树的根元素。
3.4.2 文本节点
粗略地说，文本就是一个文本节点。
文本节点总是被包含在元素节点的内部。
3.4.3 属性节点
属性节点用来对元素做出更具体的描述。
<p title="title"> text </p>title=”title” 是一个属性节点，属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。
并非所有的元素都包含着属性，但所有的属性都被元素包含。
text 是文本节点。
3.4.6 盘点知识点
- 一份文档就是一棵节点树；
- 节点分为不同的类型：元素节点、属性节点和文本节点等；
- getElementById 将返回一个对象，该对象对应着文档里的一个特定的元素节点；
- getElementByTagName 和 getElementByClassName 将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点；
- 每个节点都是一个对象。
3.5 获取和设置属性
3.5.1 getAttribute
getAttribute 是一个函数。它只有一个参数——你打算查询的属性的名字：object.getAttribute(attribute).
getAttribute 方法不属于 document 对象，所以不能通过 document 对象调用。它只能通过元素节点对象调用。
3.5.2 setAttribute
与 getAttribute 一样，setAttribute 也只能用于元素节点：object.setAttribute(attribute, value).
setAttribute 实际上完成了两项操作：先创建这个属性，然后设置它的值。如果 setAttribute 用在一个本身就有这个属性的元素节点上，这个属性的值就会被覆盖掉。
细节：通过 setAttribute 对文档做出修改后，在通过浏览器的 view source（查看源代码）选项去查看文档的源代码时看到的仍将是该改变前的属性值，也就是说，setAttribute 做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自 DOM 的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是 DOM 的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。
3.6 小结
本章介绍了 DOM 提供的五个方法：
- getElementById
- getElementsByTagName
- getElementsByClassName
- getAttribute
- setAttribute
这五个方法是将要编写的许多 DOM 脚本的基石。
第 4 章 案例研究：JavaScript 图片库
1、在一棵节点树上，childNodes 属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes。
2、每一个节点都有 nodeType 属性，这个属性可以让我们知道自己正在与哪一种节点打交道：node.nodeType
nodeType 属性总共有 12 种可取值，但其中仅有 3 种具有实用价值。
- 元素节点的 nodeType 属性值是 1；
- 属性节点的 nodeType 属性值是 2；
- 文本节点的 nodeType 属性值是 3。
3、如果想要改变一个文本节点的值，那就使用 DOM 提供的 modeValue 属性，它用来得到（和设置）一个节点的值：node.nodeValue.
注：在用 nodeValue 属性获取 description 对象的值时，得到的并不是包含在这个段落里的文本。<p> 元素本身的 nodeValue 属性是一个空值，而你真正需要的是 <p> 元素所包含的文本的值。包含在 <p> 元素里的文本是另一种节点，它是 <p> 元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点的 nodeValue 属性值（xxx.childNodes[0].nodeValue）。
4、数组元素 childNodes[0]有个更直观易读的同义词。无论何时何地，只需要访问 childNodes 数组的第一个元素，都可以把它写成 firstChild：node.firstChild。
DOM 还提供了一个与之对应的 lastCHild 属性：node.lastChild，这代表着 childNodes 数组的最后一个元素。
4.5 小结
介绍了 DOM 的几个新属性：
- childNodes
- nodeType
- nodeValue
- firstChild
- lastChild
学习重点两个：一是如何利用 DOM 所提供的方法去编写图片库脚本，二是如何利用事件处理函数把 JavaScript 代码与网页集成在一起。