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 代码负责关于“行为”的信息。

  • 向后兼容

网页设计需要考虑旧浏览器的解析能力。

  1. 对象检测：检测浏览器对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

document.write()可以将字符串插入到文档里。 但是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);

3. createTextNode

以上已经插入了一个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);

2. request.readyState: 0-4, 其中4表示完成。

    3.  Hijax： 渐进增强的使用Ajax.