Chapter 2 JavaScript语法
- 变量
变量命名： 变量名包含字母、数字、美元符号和下划线（但第一个字符不允许是数字）区分大小写，不允许变量名中包含空格或标点符号（$除外）。
驼峰格式 是函数名、方法名和对象属性名命名的首选格式。
- 数据类型
JavaScript 是一种弱类型语言（weakly typed）语言，不需要进行任何类型的声明。
- 操作
算术操作符：+ -
"37"-7 //30
"37"+7 //377可以利用+/- 操作符，规范数据类型：num - 0; num+"" ;
- 变量的作用域（scope）
全局变量（global variable）: 可以在脚本的任何位置被引用。
局部变量（local variable）： 只存在于声明它的那个函数内部。
- 对象
对象的数据可以通过两种方式访问：属性（property）和方法（method）
Object.property ;
Object.method() ; 内建对象（native Object）：Array对象、 Math对象、 Date对象
宿组对象（host Object）：如 document对象
Chapter 3 DOM
DOM（Document Object Model）: 文档对象模型
- 节点（node）
DOM tree 是由node构成的集合。三种节点：元素节点、文本节点、属性节点。
- 获取元素
三种获取元素节点：元素ID、标签名字、类名字
document.getElementById("purchases"); //ID，返回一个对象
document.getElementsByTagName("a"); //标签名字，返回对象数组
getElementsByClassName("sale"); //类名字，返回对象数组- 获取和设置属性
getAttribute方法和setAttribute方法不属于document对象，只能通过元素节点对象调用。
var obj = document.getElementById("id");
obj.getAttribute("title"); //获取属性
obj.setAttribute("class","goods");setAttribute做出的修改不会反映在文档本身的源代码中。
DOM的工作模式：先加载文档的静态内容，再动态更新，动态更新不影响文档的静态内容。
Chapter 4 JavaScript图片库
- childNodes属性
获取任何一个元素的所有子元素，返回一个数组。
document.getElementsByTagName("body")[0] //文档只有一个body元素，所以它是返回的数组中的第一个（也是唯一一个元素）- nodeType属性
1. 元素节点：nodeType ＝ 1； 2. 属性节点：nodeType ＝ 2； 3. 文本节点：nodeType ＝ 3；
- nodeValue属性
能够改变文本的值。
<p>元素的nodeValue的属性值是null，因为真正储存文本的是它的儿子：文本节点。
- firstChild 和 lastChild属性
比node.childNodes[0] 和node.childeNodes(node.childNodes.length-1]可读性好。
Chapter 5 最佳实践
- 平稳退化
浏览器不支持JavaScript的情况下仍能够顺利浏览网站。这些平稳退化更多是面向网络搜索爬虫，如果不能平稳退化，可能在搜索引擎上的排名就可能下降。
- 伪协议：这种做法非常不好
可以用来链接JavaScript函数的伪协议： javascript: 用法： <a href="javascript:function_name(parameter)"></a>
- 渐进增强
用额外的信息层去包裹原始数据。JavaScript 代码负责关于“行为”的信息。
- 向后兼容
网页设计需要考虑旧浏览器的解析能力。
- 对象检测：检测浏览器对JavaScript的支持程度。
if （!document.getElemnetByid）return false;2.浏览器嗅探技术 （browser sniffung）
通过检索浏览器的品牌和版本来改善JS的向后兼容性。 但是有风险，因为浏览器有时候信息并不标准，而且浏览器的版本迭代更新导致这个实现起来更难。
- 性能考虑
为了web的流畅性。
1. 减少DOM访问和减少标记
每次DOM查询，都会历遍整个DOM树，所以减少DOM操作非常有必要。 可以用变量存储必要的DOM查询。 另外减少文档中标记数量可以减少DOM tree的规模，减少DOM操作的遍历时间。
2. 合并和放置脚本
合并脚本可以减少HTTP请求的次数。
脚本放置到<head>中会导致浏览器无法并行加载其他文件。（根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。但是下载脚本的期间，浏览器不会下载其他任何文件，即便是不同域名的文件页不会下载。）
3. 压缩脚本
JSMin
YUICompressor
Closure Compiler
Chapter 6 图片库改进版
1、结构化程序设计要求函数只有一个入口和出口。能够接受出口集中出现在函数的开头部分。
2、每个事件处理函数只能绑定一条指令。
3、nodeName属性总是返回一个大写字母的值，即使元素在HTML文档中是小写字母
- DOM Core:
var source = whichpic.getAttribute("href");- HTML-DOM:
var source = whichpic.href;Chapter 7 动态创建标记
- document.write
- innerHTML属性
这个属性不适W3C DOM标准的组成，但是已经包含到HTML5中。 innerHTML属性可以用来读写某给定元素里的HTML内容。 innerHTML属性不会获取元素里面的细节，一旦使用了innerHTML属性，他的全部内容都会被替换。
- DOM方法
用DOM方法改变DOM节点树上的内容，如setAttribute方法并没有改变文档的物理内容
1. createElement 方法
创建一个JavaScript世界的孤儿：
var para = document.createELement("p");2. appendChild() 方法
给para 孤儿找个家
var testdiv = document.getELementById("testdiv");
testdiv.appendChild(para);以上已经插入了一个P元素节点，但是需要增加文本的时候，还需要创建一个文本节点。 要使用createTextNode去创建一个文本节点。 例如：
var textnode = document.createTextNode("text");
para.appendChild(textnode);- insertBefore()
DOM提供了名为insertBefore()方法，这个方法是将一个新元素插入到现有的元素之前。
- insertAfter()
自定义的一个函数，DOM没有提供
//节点添加到另一个节点后
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) { //检查是不是新节点最后一个节点，如果是直接插入
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);// 如果不是，则插入目标节点的下一个兄弟节点之前
}
}- Ajax
1. XMLHttpRequest对象
充当浏览器脚本（客户端）与服务器之间的中间人角色。JavaScript可以通过这个对象自己发送请求。IE7+都支持原生的XHR对象了，只有IE5之前的比较麻烦。
// 对象检测通过XMLHttpRequest，如果失败则继续检测其他办法
function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function() {
try {return new ActiveObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try {return new ActiveObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try {return new ActiveObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
}
return new XMLHttpRequest();
} 该对象的open方法：打开指定服务器上将要访问的文件； 指定请求类型：GET、POST或SEND； 第三个参数用于指定请求是否以异步方式发送。
var request = getHTTPObject();
request.open("GET", "example.html", true); 3. Hijax： 渐进增强的使用Ajax.