掩飾不住收到此書的喜悅脱吱,抓緊時(shí)間來學(xué)習(xí)咯智政!
- 作者: JEREMY Keith & Jeffrey Sambells
- 相關(guān)代碼 : www.friendsofed.com
第1章 JavaScript 簡史
1. BOM: Browser Object Model
可以用來調(diào)整Web瀏覽器窗口的高度、寬度和位置等屬性的方法
2. W3C對(duì)DOM的定義
一個(gè)與系統(tǒng)平臺(tái)和編程語言無關(guān)的接口箱蝠,程序和腳本可通過接口動(dòng)態(tài)地訪問和修改文檔的內(nèi)容、結(jié)構(gòu)和樣式
3. 瀏覽器引擎
* WebKit -- Safari Chrome
* Gecko -- Firefox
* Trident -- IE
第2章 JavaScript 語法
1. 駝峰格式(camel case)
駝峰格式是函數(shù)名垦垂、方法名和對(duì)象屬性名命名的首選格式
命名變量時(shí)宦搬,可以使用下劃線來分割單詞,這種做法可以有效區(qū)分變量名和函數(shù)名的區(qū)別
第3章 DOM
1. DOM: Document Object Model
2. 節(jié)點(diǎn)類型
元素節(jié)點(diǎn)劫拗、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)等
3. 獲取和設(shè)置屬性
object.getAttribute(attribute)
object.setAttribute(attribute, value)
第4章 案例研究:JavaScript 圖片庫
1. 沒有人愿意等待很長的時(shí)間去下載一個(gè)網(wǎng)頁
2. 事件處理函數(shù)中一個(gè)規(guī)避跳轉(zhuǎn)的方法
onclick = "showPic(this); retrun false;"
第5章 最佳實(shí)踐
1. 不濫用JS间校,思考增加額外的行為是否確有必要?
2. 必要情況下才使用彈出窗口
window.open(url, name, features)
window.open(winURL, "popup", "width=320,height=480")
3. 平穩(wěn)退化:HTML文檔中通過 "javascript:function();" 偽協(xié)議調(diào)用代碼并不好
較老的瀏覽器或者禁用JavaScript功能的瀏覽器會(huì)出現(xiàn)錯(cuò)誤
4. 同上理論页慷,HTML中的<a>
標(biāo)簽url鏈接應(yīng)填入正確的地址憔足,而不僅僅是"#"
一種精簡的寫法:
<a onclick="popUp(this.href); return false;">Example</a>
5. 檢測(cè)瀏覽器是否支持此種方法
if(!document.getElementsByTagName) return false;
6. 性能考慮
盡量少訪問DOM和盡量減少標(biāo)記
合并和放置腳本:減少加載頁面時(shí)發(fā)送的請(qǐng)求數(shù)量
壓縮腳本文件:使用代碼壓縮工具
第6章 案例研究:圖片庫改進(jìn)版
1. 它支持平穩(wěn)退化嗎胁附?
為不支持 JavaScript 的瀏覽器預(yù)留退路
2. 它的 JavaScript 與 HTML 標(biāo)記是分離的嗎?
將 JS 代碼移除 HTML 文檔并不是一件難事
3. 添加時(shí)間處理函數(shù)時(shí)滓彰,檢查一下瀏覽器是否支持此類函數(shù)控妻?
添加測(cè)試類函數(shù),保證不理解這個(gè)方法的老瀏覽器不會(huì)執(zhí)行之后的內(nèi)容
如果想用 JS 給某個(gè)網(wǎng)頁添加一些行為揭绑,就不該讓 JS 代碼對(duì)這個(gè)網(wǎng)頁結(jié)構(gòu)產(chǎn)生任何依賴
4. 共享 onload 事件
window.onload = function() {
firstFunction();
secondFunction();
}
第7章 動(dòng)態(tài)創(chuàng)建標(biāo)記
1. 在已有元素前插入一個(gè)新元素
parentEle.insertBefore(newEle, targetEle)
將新元素(new)插入到同一個(gè)父元素(parent)下的目標(biāo)元素(target)之前
2. 編寫在已知元素之后插入一個(gè)新元素的函數(shù)
function insertAfter(newEle, targetEle) {
var parent = tarrgetEle.parentNode;
if(parent.lastChild == targetEle) {
parent.appendChild(newEle);
}else {
parent.insertBefore(newEle, targetEle.nextSibling);
}
}
3. Ajax
對(duì)頁面的請(qǐng)求以異步方式發(fā)送到服務(wù)器弓候,只更新頁面中的一小部分,而不會(huì)再次加載整個(gè)頁面了
使用 Ajax 時(shí)他匪,注意同源策略:
使用 XMLHttpRequest 對(duì)象發(fā)送的請(qǐng)求只能訪問與其所在的 HTML 處于同一個(gè)域中的數(shù)據(jù)菇存,不能向其他域發(fā)送請(qǐng)求
4. XMLHttpRequest 對(duì)象
IE中以 ActiveX 對(duì)象的形式實(shí)現(xiàn)一個(gè)名為 XMLHTTP 的對(duì)象:
var request = new ActiveX0bject("Msxml2.XMLHTTP.3.0");
其他瀏覽器中則基于 XMLHttpRequest 來創(chuàng)建對(duì)象:
var request = new XMLHttpRequest();
然而IE會(huì)這么輕松的放過你嗎?too young邦蜜!
不同IE版本中使用的 XMLHTTP 對(duì)象也不完全相同依鸥,為了兼容:
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 :漸進(jìn)增強(qiáng)地使用 Ajax
Ajax 應(yīng)用主要依賴后臺(tái)服務(wù)器,服務(wù)器端的腳本語言完成了大部分的工作
第8章 充實(shí)文檔的內(nèi)容
1. 兩個(gè)原則:漸進(jìn)增強(qiáng) 和 平穩(wěn)退化
第9章 CSS-DOM
1. hover 和 JS事件的選用
選擇最容易實(shí)現(xiàn)的方法
如果僅想讓連接在鼠標(biāo)懸停時(shí)改變顏色悼沈,則選用 CSS 中的 hover
第10章 用 JavaScript 實(shí)現(xiàn)動(dòng)畫效果
1. 頁面加載完成函數(shù)示例:
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函數(shù)實(shí)現(xiàn)動(dòng)畫效果
平滑移動(dòng)的動(dòng)畫效果且平穩(wěn)退化的通用性函數(shù)毕籽,書中示例有點(diǎn)落后,css3已經(jīng)可以輕松實(shí)現(xiàn)過渡動(dòng)畫特效井辆。
第11章 HTML5
1. canvas关筒、video、audio
為了確保瀏覽器支持所有容器和編解碼器杯缺,需要提供多種后備格式:
MP4: 基于H.264+AAC
WebM:基于VP8+Vorbis
Ogg:基于Theora視頻+Vorbis音頻
但萬能的github已經(jīng)有車輪子可供使用蒸播,例:video.js