掩饰不住收到此书的喜悦,抓紧时间来学习咯!
- 作者: 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