《JavaScript DOM 编程艺术（第2版）》笔记
第1章：JavaScript 简史
- JavaScript 的劈头
JavaScript 是 Netscape 公司和 Sun 公司合作开发的。
- DOM
DOM 是一套对文档的内容举行笼统和概念化的要领。
- 阅读器战役
本日，险些一切的阅读器都内置了对 DOM 的支撑，只需遵照 DOM 规范，就能够放心大胆的去做。
第2章：JavaScript 语法
语句
发起在每条语句末端都加上分号。
解释
// 单行解释 /* 多行解释 多行解释*/变量
var mood = "happy"; var age = 33;数据范例
- 字符串
- 数值
- 布尔值
数组
- 数组
- 关联数组
- 对象
- 操作符
- 算术操作符
+,-,*,/,++,--,+=- 比较操作符
>,=,<,>=,<=,==,!=,===…….==并不示意严厉相称，以为 false 与 “” 示意的寄义雷同。false == ''; // true===举行严厉比较，不仅比较值，而且比较变量的范例。false === ''; // false- 逻辑操作符
前提语句和轮回语句
if (condions) { statemen}while轮回
while (conditions) { statements; }- for 轮回
函数与对象
- 函数：
function name(arguments) { statements; }- 对象(object)：
对象是一种异常重要的数据范例。
对象的两种接见情势：
- 属性
Object.property 要领
Object.method()宿主对象：在Web运用中就是由阅读器供应的预定义对象。
第3章：DOM
DOM：
- 文档：D (document)
对象：O(object)
- 用户定义对象
- 内建对象：如 Array,Math,Data等。
- 宿主对象：由阅读器供应的对象。
- 模子: M(model)
节点(node)：
- 元素节点
- 文本节点
- 属性节点
猎取元素：
getElementByIdgetElementsByTagNamegetElementsByClassName
猎取属性：
getAttribute
设置属性：
setAttribute
第4章：案例研讨：JavaScript图片库
引见了 DOM 供应的几个新属性：
childNodesnodeTypenodeValuefirstChildlastChild
第5章：最好实战
安稳退步
安稳退步(graceful degradation)：准确运用 JavaScript 剧本，能够让接见者在他们的阅读器不支撑 JavaScript 的情况下依然能顺遂地阅读你的网站。
不能安稳退步会影响你的网页在搜索引擎上的排名。
"javascript:"伪协定：这类做法异常不好- 真协定：用来在因特网上的计算机之间传输数据包，如HTTP协定(http://)、FTP协定(ftp://)等。
伪协定：非规范化的协定。
// 用"javascript:" 伪协定挪用 popUp()函数： <a href="javascript:popUp('http://www.example.com/');">Example</a>
内嵌的事宜处置惩罚函数
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>异常不好，由于
#只是建立了一个空链接。安稳退步方法：将
href属性设置为实在存在的 URL 地点，让它成为一个有用的链接。<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>如许，纵然 javascript 被制止，这个链接也是可用的。
渐进加强
渐进加强就是用一些分外的信息层去包裹原始数据。
根据“渐进加强”准绳建立出来的网页险些都相符“安稳退步”准绳。
构造、款式、行动要星散。
向后兼容
对象检测
// 比方 if (!document.getElementById) { return false; }阅读器嗅探手艺
经由过程提取阅读器供应商供应的信息来处理向后兼容问题。
机能斟酌
- 只管少接见DOM和只管削减标记
合并和安排剧本
- 引荐把
functionA.js,functionB.js,functionC.js合并到一个剧本文件中，如许能够削减加载页面时发送的要求数目。 - 把
<script>标签都放到文档的末端</body>标记之前。由于位于<head>中的剧本会致使阅读器没法并行加载其他文件。
- 引荐把
紧缩剧本
- JSMin(http://javascript.crockford.c…)
- YUI Compressor
第6章：案例研讨：图片库改进版
同享onload事宜：addLoadEvent()函数
须要多个函数都在页面加载时实行。addLoadEvent只要一个参数：打算在页面加载终了时实行的函数的名字。
- 把现有的 window.onload 事宜处置惩罚函数的值存入变量 oldonload;
- 假如这个处置惩罚函数上还没有绑定任何函数，就像日常平凡那样把新函数增加给它；
- 假如这个处置惩罚函数上已绑定了一些函数，就把新函数追加到现有指令的末端。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function (){
oldonload();
func();
}
}
}第7章 动态建立标记
动态增加
注重：用
document.createElement建立一个空缺的p元素，想在p元素内部增加内容，实际上内容也是一个文本节点，所以应当
document.createTextNode建立一个文本节点，再用
.appendChild增加到p节点中。
window.onload = function () {
var testdiv = document.getElementById("testdiv");
var para = document.createElement("p"); // 建立 p 元素节点
var txt1 = document.createTextNode("This is"); // 建立 文本节点
var em = document.createElement("em"); // 建立 em 元素节点
var txt2 = document.createTextNode("content."); // 建立 文本节点
var txt3 = document.createTextNode("my "); // 建立 文本节点
testdiv.appendChild(para); // 将 p 元素节点增加到 div 中
para.appendChild(txt1); // 将文本节点增加到 p 元素中
para.appendChild(em);
para.appendChild(txt2);
em.appendChild(txt3); // 将文本节点增加到 em 元素中
}在现有元素后插进去一个元素：insertAfter()函数
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}第8章：充分文档的内容
- 把文档里的缩略语显现为一个“缩略语列表”
- 为文档里援用的每段文献节选天生一个“文献泉源链接”
- 把文档所支撑的快捷键线是位于分“快捷键清单”
第9章：CSS-DOM
给一个元素追加新的 class:
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}第10章 ：用JavaScript完成动画结果
位置position
- static
- fixed
- relative
- absolute
时候
var variable = setTimeout("function",interval)clearTimeout(variable)
-
parseInt把字符串里的数值信息提取出来
第11章：HTML5
- canvas
- 音频和视频
- 表单
