前两章的基础内容自己之前的JavaScript笔记已记录过，就不再赘述，直接从第三章Dom开始，Dom内容之前也有写笔记，这里算是补充。
- <a href="#c1">第三章 Dom</a>
- <a href="#c2">第四章 案例：JavaScript图片库</a>
- <a href="#c22">第五章 最佳实践</a>
- <a href="#c222">第六章 JS图片库改进版</a>
第一章 JavaScript简史
第二章 JavaScript语法
<a name="c1"></a>第三章 Dom
- Document Object Model,文本对象模型
- 一篇文档就是一颗节点树
- 常用的三种节点：文本节点、元素节点、属性节点
- Dom中三种方式获得元素节点：
- getElementById 返回一个与有特定ID值的元素节点对应的对象
- getElementByTagName 返回一个对象数组（更准确地说，是一个节点列表），可把通配符(*)作为其参数
- getElemetnByClassName 返回一个对象数组（更准确地说，是一个节点列表），需要考虑解决兼容性：
function getElementsByClassName(node,classname) {
if(node.getElementsByClassName) {//使用现有方法
return node.getElementByClassName(classname);
}else{
var results = new Array();
var eles = node.getElementsByTagName("*");
for(var i = 0;i<elems.length;i++) {
if(elems[i].className.indexOf(classname)！=-1){
results[results.length] = elems[i];
}
}
return false;
}
}
- 获取和设置属性
getAttribute，setAttribute，只能用于元素节点
object.setAttribute(attribute, value);，创建属性，并赋值，这个很常用。
for(var i = 0; i<paras.length;i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) {
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
<a name = "c2"></a>第四章 JS图片库
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
var text = whichpic.getAttribute("title");//某个图片链接被点击时，该链接的title属性值将被提取并保存到变量text中
var description = document.getElementById("description");
placeholder.setAttribute("src", source);//source是属性src的值
description.firstChild.nodeValue = text;//把description对象的第一个子节点的nodeValue属性值设置为变量text的值
}
//上边的注释可作为编程的思路
- function showPic(whichpic)
whichpic代表一个元素节点，是一个指向某个图片的<a>元素需要分解出图片的文件路径，可通过在whichpic元素上调用getAttribute得到。 - onclick = "showPic(this); return false";
把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作该函数的参数，this表示“这个对象”/“这个<a>元素节点”。
点击链接时，showPic函数会被调用，但是链接点击的默认行为也会被调用，阻止默认行为：onclick = "return false;"
当为return false时，onclick事件处理函数则认为这个链接未被点击。
<a name = "c22"></a>第五章 最佳实践
- 平稳退化(graceful degradation)：网页在没有JavaScript的情况下也能正常工作。
- JS中用
window.open(url,name,features)打开新的浏览器窗口:
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
- 调用函数时"javascript: "伪协议和内嵌事件处理函数都不能实现平稳退化
"javascript: "伪协议：
<a href="javascript:popUp('http://www.example.com/');">Example</a>
内嵌事件处理函数：
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>
- 解决办法：
在链接里给href属性设置真实存在的URL（依然存在不足之处：每次打开新窗口，都需要把JS代码嵌入到标记文档中）
<a href="http://www.example.com/" onclick="popUp(this.href ); return false;">Example</a>
- 分离JavaScript
window.onload = prepareLinks;
function prepareLinks(){
//把事件添加到有着特定属性的一组元素上
var links = document.getElementsByTagName("a"); //1.把文档里的所有链接全放入一个数组里
for (var i=0; i<links.length; i++) {//2.遍历数组
if (links[i].getAttribute("class") == "popup"){// 3.如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数
popUp(this.getAttribute("href")); //1)把这个链接的href属性值传递给popUp()函数
return false; //2)取消这个链接的默认行为
}
}
}
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
//注释可作为编程思路
- 把事件添加到有着特定属性的一组元素上，步骤：
- 把文档里的所有链接全放入一个数组里；
- 遍历数组；
- 如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数:
- 把这个链接的href属性值传递给popUp()函数
- 取消这个链接的默认行为
- window.onload = function{...}
把代码打包到函数prepareLinks里，并添加到window对象触发的onload事件上。必须的步骤，不然加载脚本时文档可能不完整，导致模型、DOM都不完整，代码无法正常工作
- 向后兼容，对象检测
if (!getElementyById || !getElementsByTagName) return false;
//一定要删掉方法后的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。
- 性能考虑
- 尽量少访问DOM和减少标记
在多个函数都会去的一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数 - 合并和放置脚本
包含脚本的最佳方式是使用外部脚本，因为外部文件与标记能清晰的分离开，把多个脚本合并到一个中，减少请求。减少请求数量通常是性能优化首先要考虑的。
把所有<script>标签都放到文档末尾，</body>标签之前 - 压缩脚本
把脚本中不必要的字节，如空格和注释，统统删除（查看网页源码时便能体验到）
常用的代码压缩工具：
JSMin
YUI Compressor
Closure Compiler
<a name="c222"></a> 第六章 JS图片库改进版
1.JavaScript与HTML标记分离
开始时onclick事件处理函数直接插入到HTML文档里:
<ul>
<li><a href = "#" onclick = "showPic(this); return false;" title = "..."></li>
...
</ul>
为<ul>设置id属性便可把JS移出文档：
<ul id = "imagegallery">...
- 添加事件处理函数，该函数完成以下工作：
- 检查当前浏览器是否理解getElementByTagName；
- 检查当前浏览器是否理解getElementById；
- 检查当前网页是否存在一个id为imagegallery的元素；
- 遍历imagegallery元素的所有链接
- 设置onclick事件，让它在有关链接被点击时完成以下操作：
1）把这个链接作为参数传递给showPic函数；
2）取消链接被点击时的默认行为。
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;//1.检查点
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");//2.变量
for ( var i=0; i < links.length; i++) {//3.遍历
links[i].onclick = function() {//4.改变行为
// return !showPic(this);
retrun showPic(this) ? false : true;//this在这里代表links[i]
}
//links[i].onkeypress = links[i].onclick;尽量不使用键盘触发事件
}
}
---
links[i].onclick = function() 定义了一个匿名函数：一种在代码执行时创建函数的办法。这个匿名函数里的所有语句都将在link[i]元素被点击时执行。
return !showPic(this)：
1.如果showPic返回true，我们就返回false，浏览器不会打开那个链接；
2.如果showPic返回false，我们认为图片没有更新，于是返回true以允许默认行为发生
3.this在这里代表links[i]
- 共享onload事件
把创建的函数绑定到事件上：window.onload = prepareGallery；
如果有多个函数想在页面加载完毕时立即执行，可以创建如下函数：
window.onload = function(){
fisrtFunction();
secondFunction();
...
}
更好的解决方案是利用函数addLoadEvent，它只有一个参数：打算在页面加载完毕时执行的函数的名字，如下：
//代码的注释部分即为addLoadEvent函数将要完成的操作
function addLoadEvent(func) {//只有一个参数，在页面加载完毕时执行的函数的名字
var oldonload = window.onload;//把现有的window.onload事件处理函数的值存入变量oldonload
if (typeof window.onload != 'function') {
window.onload = func;//如果这个处理函数上还没有绑定任何函数，把新函数添加给它
} else {
window.onload = function() {
oldonload();
func();//如果这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾
}
}
}
addLoadEvent(prepareGallery);
2.DOM Core和HTML-DOM
getElementById,getElementsByTagName,setAttribute，getAttribute等方法都是DOM Core的组成部分，不专属于JavaScript，支持DOM的任何一种语言都可以使用。
关于HTML-DOM可以参考这里。
