掩饰不住收到此书的喜悦，抓紧时间来学习咯！
- 作者： JEREMY Keith & Jeffrey Sambells
- 相关代码 ： www.friendsofed.com
第1章 JavaScript 简史
1. BOM： Browser Object Model
可以用来调整Web浏览器窗口的高度、宽度和位置等属性的方法
2. W3C对DOM的定义
一个与系统平台和编程语言无关的接口，程序和脚本可通过接口动态地访问和修改文档的内容、结构和样式
3. 浏览器引擎
* WebKit -- Safari Chrome
* Gecko -- Firefox
* Trident -- IE
第2章 JavaScript 语法
1. 驼峰格式（camel case）
驼峰格式是函数名、方法名和对象属性名命名的首选格式
命名变量时，可以使用下划线来分割单词，这种做法可以有效区分变量名和函数名的区别
第3章 DOM
1. DOM： Document Object Model
2. 节点类型
元素节点、属性节点和文本节点等
3. 获取和设置属性
object.getAttribute(attribute)
object.setAttribute(attribute, value)
第4章 案例研究：JavaScript 图片库
1. 没有人愿意等待很长的时间去下载一个网页
2. 事件处理函数中一个规避跳转的方法
onclick = "showPic(this); retrun false;"
第5章 最佳实践
1. 不滥用JS，思考增加额外的行为是否确有必要？
2. 必要情况下才使用弹出窗口
window.open(url, name, features)
window.open(winURL, "popup", "width=320,height=480")
3. 平稳退化：HTML文档中通过 "javascript:function();" 伪协议调用代码并不好
较老的浏览器或者禁用JavaScript功能的浏览器会出现错误
4. 同上理论，HTML中的<a>标签url链接应填入正确的地址，而不仅仅是"#"
一种精简的写法：
<a href="http://www.w3c.com/" onclick="popUp(this.href); return false;">Example</a>
5. 检测浏览器是否支持此种方法
if(!document.getElementsByTagName) return false;
6. 性能考虑
尽量少访问DOM和尽量减少标记
合并和放置脚本：减少加载页面时发送的请求数量
压缩脚本文件：使用代码压缩工具
第6章 案例研究：图片库改进版
1. 它支持平稳退化吗？
为不支持 JavaScript 的浏览器预留退路
2. 它的 JavaScript 与 HTML 标记是分离的吗？
将 JS 代码移除 HTML 文档并不是一件难事
3. 添加时间处理函数时，检查一下浏览器是否支持此类函数？
添加测试类函数，保证不理解这个方法的老浏览器不会执行之后的内容
如果想用 JS 给某个网页添加一些行为，就不该让 JS 代码对这个网页结构产生任何依赖
4. 共享 onload 事件
window.onload = function() {
firstFunction();
secondFunction();
}
第7章 动态创建标记
1. 在已有元素前插入一个新元素
parentEle.insertBefore(newEle, targetEle)
将新元素(new)插入到同一个父元素(parent)下的目标元素(target)之前
2. 编写在已知元素之后插入一个新元素的函数
function insertAfter(newEle, targetEle) {
var parent = tarrgetEle.parentNode;
if(parent.lastChild == targetEle) {
parent.appendChild(newEle);
}else {
parent.insertBefore(newEle, targetEle.nextSibling);
}
}
3. Ajax
对页面的请求以异步方式发送到服务器，只更新页面中的一小部分，而不会再次加载整个页面了
使用 Ajax 时，注意同源策略：
使用 XMLHttpRequest 对象发送的请求只能访问与其所在的 HTML 处于同一个域中的数据，不能向其他域发送请求
4. XMLHttpRequest 对象
IE中以 ActiveX 对象的形式实现一个名为 XMLHTTP 的对象：
var request = new ActiveX0bject("Msxml2.XMLHTTP.3.0");
其他浏览器中则基于 XMLHttpRequest 来创建对象：
var request = new XMLHttpRequest();
然而IE会这么轻松的放过你吗？too young！
不同IE版本中使用的 XMLHTTP 对象也不完全相同，为了兼容：
function getHTTPObject() {
if(typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function() {
try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e) {}
return false;
}
}
return new XMLHttpRequest();
}
5. Hijax ：渐进增强地使用 Ajax
Ajax 应用主要依赖后台服务器，服务器端的脚本语言完成了大部分的工作
第8章 充实文档的内容
1. 两个原则：渐进增强 和 平稳退化
第9章 CSS-DOM
1. hover 和 JS事件的选用
选择最容易实现的方法
如果仅想让连接在鼠标悬停时改变颜色，则选用 CSS 中的 hover
第10章 用 JavaScript 实现动画效果
1. 页面加载完成函数示例：
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != "function") {
window.onload = func;
}else {
window.onload = function() {
oldonload();
func();
}
}
}
2.通过使用CSS-DOM和JavaScript的setTimeout函数实现动画效果
平滑移动的动画效果且平稳退化的通用性函数，书中示例有点落后，css3已经可以轻松实现过渡动画特效。
第11章 HTML5
1. canvas、video、audio
为了确保浏览器支持所有容器和编解码器，需要提供多种后备格式：
MP4: 基于H.264＋AAC
WebM：基于VP8+Vorbis
Ogg：基于Theora视频＋Vorbis音频
但万能的github已经有车轮子可供使用，例：video.js
网友评论