JavaScript DOM编程艺术
<<JavaScript DOM编程艺术>>读书笔记。入门书籍，动态语言太过灵活，是一把双刃剑，不适合初学者作为第一门语言，在熟手手里是高效的工具，在新手手里是混乱的源头。 断断续续一个月时间才看完
01 JavaScript简史
JavaScript的第一个版本，即JavaScript 1.0版本，出现在1995年推出的Netscape Navigator2浏览器中。
JavaScript与Sun公司开发的Java程序语言没有任何联系。JavaScript是一种脚本语言。
DOM是一套对文档的内容进行抽象和概念化的方法。
02 JavaScript语法
用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。有两种方式可以做到这点：
- 将JavaScript代码放到文档标签中的
- 更好的方式把JavaScript代码存为一个扩展名为.js的独立文件，并把
解释型语言不需要编译器–它们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。
JavaScript的语法与Java和C++语言的语法非常相似。
用”//“注释单行，用”/ … /“注释多行
JavaScript允许程序员直接对变量赋值而无需事先声明。
必须明确类型声明的语言称为强类型(strongly typed)语言。JavaScript不需要进行类型声明，因此它是一种弱类型（weakly typed)语言。这意味着程序员可以在任何阶段改变变量的数据类型。
JavaScript数据类型：
- 字符串
字符串由零个或多个字符构成，字符包括但不限于字母，数字，标点符号和空格。 - 数值
整数，浮点 - 布尔值
在JavaScript中， 数组 用关键字Array声明。事实上，只需一对方括号把各个元素的初始值括起来就可以了：
var beatles = [“John”, “Paul”, “George”, “Ringo”];
甚至可以把这3种数据类型混在一起存入一个数组：
var lennon = [“John”, 1940, false];
数组还可以包含其他的数组，数组中的任何一个元素都可以把一个数组作为它的值：
var lennon = [“John”, 1940, false];
var beatles = [];
beatles[0] = lennon;
与数组类似, 对象 也是使用一个名字表示一组值。对象的每个值都是对象的一个属性：
var lennon = Object();
lennon.name = “John”;
lennon.year = 1940;
lennon.living = false;
与使用Array类似，创建对象使用Object关键字，它不使用方括号和下标来获取元素，而是像任何JavaScript对象一样，使用点号来获取属性。创建对象还有一种更简洁的语法，即花括号语法：
var lennon = {name:”John”, year:1940, living:false};
属性名与JavaScript变量的命名规则有相同之处，属性值可以是任何JavaScript值，包括其他对象。
操作(operation) // … 运算符被翻译成了 操作
arithmetic operatioin : =, +, -, *, /
比较操作符 ： ==, >, <, >=, <=, ===, !==
if () {
} else {
}
while () {
}
do {
} while();
for (initial condition; test condition; alter condition) {
statments;
}
function
可以使用var关键字明确地为函数变量设定作用域。如果在某个函数中使用了var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用var，那个变量就被视为一个全区变量，如果脚本里面已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。
03 DOM
对象是一种自足的数据集合。与某个特定对象相关联的变量被称为对象的 属性；只能通过某个特定对象去调用的函数被称为这个对象的 方法。
JavaScript语言里的对象可以分为三种类型：
- 用户定义对象(user-defined object) : 由程序员自行创建的对象.
- 内建对象(native object)：内建在JavaScript语言里的对象，如Array, Math和Date.
- 宿主对象(host object) ： 由浏览器提供的对象. window, document
DOM将一份文档表示为一棵树，这是我们理解和运用这一模型的关键。文档是由节点(Node)构成的集合。
节点分为不同的类型：Element node, text node, attribute node
DOM并不是与网页结构打交道的唯一技术。我们还可以通过CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容。
继承(inheritance)是CSS技术中的一项强大功能。类似于DOM，CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。
selector {
property: value;
}
在某些场合，当把样式应用于一份文档时，我们其实只是想让那些样式作用于某个特定的元素。例如，我们只想让某一段文本变成某种特殊的颜色和字体，但不想让其他段落受到影响。为了获得如此精细的控制，需要在文档里插入一些能够把这段文本与其他段落区别开来的特殊标志。
为了把某一个或某几个元素与其他元素区别开来，需要使用class属性或id属性。
- class属性
可以在所有的元素上任意应用class属性：This paragraph has the special class
So does this headline
在样式表里，可以像下面这样为class属性值相同的所有元素定义同一种样式：
.special {
font-style: italic;
}
还可以像下面这样利用class属性为一种特定类型的元素定义一种特定的样式：
h2.special {
text-transform: uppercase;
}
- id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符。
在样式表里，可以像下面这样为有特定id属性值的元素定义一种独享的样式：
#purchases {
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
有3种DOM方法可获取元素节点，分别是通过元素ID，通过标签名字和通过类名来获取。
- getElementById
DOM提供了一个名为getElementById的方法，这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。
JavaScript语言区分字母大小写。
typeof操作符可以告诉我们它的操作数是一个字符串，数值，函数，布尔值还是对象。 - getElementsByTagName
返回一个对象数组，每个对象分别对应文档里有着给定标签的一个元素。 - getElementsByClassName
这个方法让我们能够通过class属性中的类名来访问元素。
获取节点元素后，通过节点对象的getAttribute方法获取节点元素的属性，相应地，setAttribute方法可以更改属性节点的值。
04 案例研究：JavaScript图片库
this
- childNodes属性
在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。 - nodeType属性
element node的nodeType属性值是1
attribute node的nodeType属性值是2
text node的nodeType属性值是3
下一章将介绍一些JavaScript脚本编程方面的最佳实践，你会从中领悟这样一个道理：达成目标的过程与目标本身同样重要。
05 最佳实践
- 平稳退化 ： 确保网页在没有JavaScript的情况下也能正常工作
- 分离JavaScript : 把网页的结构和内容与JavaScript脚本的动作行为分开
- 向后兼容性 ： 确保老版本的浏览器不会因为你的JavaScript脚本而死掉
- 性能考虑 ： 确定脚本执行的性能最优
易学易用的技术就像一把双刃剑。因为容易学习和掌握，它们往往会在很短的时间内就为人们广泛接受，但也往往意味着缺乏高水平的质量控制措施。
正如物理学中的运动与惯性定律所描述的那样，如果人们在开始使用一种新技术时没有经过深思熟虑，而这种新技术又很快地成为了一种潮流，则纠正在早期阶段养成的坏习惯将会非常困难。
平稳退化：
如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓的 平稳退化 (graceful degradation),就是说，虽然某些功能无法使用，但是最基本的操作仍能顺利完成。
想象一下，有个访问者来到了你的网站，他总是在浏览Web时同时禁用图像和JavaScript。你肯定认为如今这样的用户已非常少见，而事实也正是如此。但这个访问者非常重要。你想象的那个用户时一个 搜索机器人(searchbot) .搜索机器人是一种自动化的程序，它们浏览Web的目的是为了把各种网页添加到搜索引擎的数据库里。目前只有极少数搜索机器人能够理解JavaScript代码，所以，如果你的JavaScript网页不能平稳退化，它们在搜索引擎上的排名就可能大受损害。
CSS可以让人们对网站设计工作中的各个方面作出严格细致的控制。CSS技术的最大优点是，它能够帮助你将web文档的内容结构(标记)和版面设计(样式)分离开来。真正能从CSS技术获益的方法，是把样式全部转移到外部文件中去。
作为CSS技术的突出优点，文档结构与文档样式的分离可以确保网页都能平稳退化。具备CSS支持的浏览器固然可以把网页呈现得美轮美奂，不支持或者禁用了CSS功能的浏览器同样可以把网页的内容按照正确的结构显示出来。
内容需要用HTML或者XHTML之类的标记语言来描述。在创建网站的时候，给内容加上正确的HTML标记是第一个步骤，或许也是最重要的步骤。
我的理解是标记 定义了 UI 组件
在给内容加上各种标记后，就可以使用各种CSS指令控制内容的显示效果。CSS指令构成了一个表示层。这个表示层就像一张透明的彩色薄膜，可以包裹到文档的结构上，使文档的内容呈现出各种色彩。但即使去掉这个表示层，文档的内容也依然可以访问(只是缺乏色彩而已).
所谓”渐进增强”就是用一些额外的信息层去包裹原始数据。按照”渐进增强”原则创建出来的网页几乎都符合”平稳退化”原则.
通过增加 间接层，做到 内容 与 样式 分离
类似于CSS,JavaScript和DOM提供的所有功能也应该构成一个额外的指令层。CSS代码负责提供关于”表示”的信息，JavaScrit代码负责提供关于”行为”的信息。行为层的应用方式与表示层一样。
值得推荐的方法是，先把样式信息存入一个外部文件，再在文档的head部分用标签来调用这个文件。
class属性是样式与文档内容之间的联结纽带。
类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个”挂钩”，就像CSS机制中的class或id属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。
如果JavaScript文件是从HTML文档的
部分用