JavaScript DOM编程艺术 读书笔记
第一章 JavaScript简史
1.1 JavaScript的起源
1.2 DOM
DOM是一套对文档的内容进行抽象和概念化的方法。
1.3 浏览器战争
1.3.1 DHTML
DHTML是描述HTML,CSS,和JavaScript技术组合的术语。
1.3.2 浏览器之间的冲突
1.4制定标准
1.4.1 浏览器以外的考虑
DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容，结构和样式。
1.4.2 浏览器战争的解决
1.4.3 暂新的起点
WebKit是Safari和Chrome采用的一个开源Web浏览器引擎。以WebKit和Gecko(Firefox的核心)为代表的开源引擎， 在促进微软的Trident(IE的核心）等转悠浏览器引擎逐步向Web标准靠拢方面祈祷特别积极的作用。
1.5 小结
第二章 JavaScript语法
2.1 准备工作
程序设计语言分为解释型和编译型两大类。
编译型语言的错误在代码编译阶段就能被发现。而解析型语言的错误只有智能等到解析器执行到有关代码时才能被发现。
2.2 语法
2.2.1语句
statement
2.2.2 注释
comment
解析器直接忽略
单行//
多行 /* */
<!-- 单行注释 for JavaScript
2.2.3 变量
variable
赋值 assignment
JavaScript无需事先声明declare变量
JavaScript区分大小写
通常驼峰格式是函数名，方法名和对象属性名命名的首选格式。
字面量literal:可以直接在JavaScript代码中写出来的数据。
2.2.4 数据类型
声明变量的的同时还要声明变量的数据类型，这种声明成为类型声明 typing
必须明确类型声明的语言成为强类型语言strongly typed.
JavaScript是一种弱类型语言weakly typed.这意味着程序员可以再任何阶段改变变量的数据类型。
1 字符串
转义escaping
2 数值
带小数点数值成为浮点数floating-point number
负数 -20
负浮点数 -20.333333
3 布尔值
boolean
2.2.5 数组
字符串，数值和布尔型都是标量 scalar
关联数组
2.2.6 对象
关键字 Object
用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们，大大提高了脚本的可读性。
2.3 操作
算术操作符 arithmetic operation
拼接 concatenation +
2.4 条件语句
conditional statement
2.4.1 比较操作符
相等操作符==认为空字符串与false的含义相同。
=== !==
2.4.2 逻辑操作符
逻辑比较 operand
2.5 循环语句
2.5.1 while循环
do...while循环 至少执行一次
2.5.2 for循环
2.6 函数
在命名变量时，我用下划线来分隔各个单词，在命名函数时，我用驼峰命名法。
变量的作用域scope
全局变量 global variable
局部变量 local variable
如果在某个函数中使用了var 那个变量就被视为一个局部变量。反之，那个变量就会视为一个全局变量。
2.7 对象
属性property和方法method都用“点”语法访问
用户定义对象 user-defined object
内建对象 native object
2.7.1 内建对象
2.7.2 宿主对象
由浏览器提供的预定义对象被成为宿主对象 host object
document Form Image Element
2.8 小结
第三章 DOM
3.1 文档：DOM中的"D"
document
3.2 对象：DOM中的“O”
用户定义对象 user-defined object: 由程序员自行创建的对象。
内建对象 native object
宿主对象 host object ,window对象
BOM 浏览器对象模型 window.open window.blur
3.3 模型：DOM中的"M"
parent child sibling
3.4 节点
node
3.4.1 元素节点
element node
根元素<html>
3.4.2 文本节点
3.4.3 属性节点
attribute node
3.4.4 CSS
3.4.5 获取元素
通过元素ID getElementById
通过标签名字 getElmentsByTagName
文档里共有多少个元素节点 document.getElementsByTagName("*")
通过类名获取 getElementsByClassName
HTML5 DOM 新增的
3.4.6 盘点知识
3.5 获取和设置属性
3.5.1 getAttribute
getAttribute方法不属于document对象 属于元素节点对象
3.5.2 setAttribute
setAttribute做出的修改不会放映在文档本身的源代码里。
DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。
第四章 案例研究：JavaScript图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<script>
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="/images/1.png" title="A fireworks display" onClick="showPic(this); return false;" >Fireworks</a>
</li>
<li>
<a href="/images/2.jpg" title="A cup of black coffee" onClick="showPic(this); return false;" >Coffee</a>
</li>
<li>
<a href="/images/3.jpg" title="A red,red rose" onClick="showPic(this); return false;" >Rose</a>
</li>
<li>
<a href="/images/4.jpg" title="The famous clock" onClick="showPic(this); return false;" >Big Ben</a>
</li>
</ul>
<img id="placeholder" src="/images/5.gif" alt="my image gallery"/>
</body>
</html>
4.4 对这个函数进行扩展
4.4.1 childNodes属性
4.4.2 nodeType属性
元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3
4.4.5 nodeValue属性
想改变一个文本节点的值，就用nodeValue属性
第五章 最佳实践
5.2 平稳退化
gracefull degradation
5.2.1 javascript: 伪协议
pseudo-protocol
伪协议让我们通过一个链接来调用javascript函数。
第六章 案例研究：图片库改进版
6.2 它支持平稳退化吗？
6.3 它的JavaScript与HTML标记是分离的吗
6.3.1 添加事件处理函数
结构化程序设计 structed programming：函数应该只有一个入口和一个出口。
如果一个函数有多个出口，只要这些出口集中出现在函数的开头部分，就是可以接受的。
6.3.2 共享onload事件
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
6.5 优化
三元操作符 ternary operator
6.8 DOM Core和HTML-DOM
第七章 动态创建标记
7.1 一些传统方法
7.1.1 document.write
避免使用document.write
MIME类型application/xhtml+xml与document.write不兼容
7.1.2 innerHTML属性
MIME类型application/xhtml+xml与innerHTML不兼容
但值得推荐使用
7.2 DOM方法
7.2.1 createElement方法
window.onload=function(){
var para=document.createElement("p");
var info="nodeName:";
info+=para.nodeName;
info+=" nodeType:";
info+=para.nodeType;
alert(info);
}
7.2.2 appendChild方法
var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
7.2.3 createTextNode方法
window.onload=function(){
var para=document.createElement("p");
var txt=document.createTextNode("Hello World");
para.appendChild(txt);
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
}
7.2.4 一个更复杂的组合
window.onload=function(){
var para=document.createElement("p");
var txt1=document.createTextNode("This is ");
var emphasis=document.createElement("em");
var txt2=document.createTextNode("my");
var txt3=document.createTextNode(" content.");
para.appendChild(txt1);
emphasis.appendChild(txt2);
para.appendChild(emphasis);
para.appendChild(txt3);
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
}