前兩章的基礎(chǔ)內(nèi)容自己之前的JavaScript筆記已記錄過嗤形，就不再贅述精偿，直接從第三章Dom開始，Dom內(nèi)容之前也有寫筆記派殷，這里算是補(bǔ)充还最。
- <a href="#c1">第三章 Dom</a>
- <a href="#c2">第四章 案例：JavaScript圖片庫</a>
- <a href="#c22">第五章 最佳實(shí)踐</a>
- <a href="#c222">第六章 JS圖片庫改進(jìn)版</a>
第一章 JavaScript簡史
第二章 JavaScript語法
<a name="c1"></a>第三章 Dom
- Document Object Model,文本對象模型
- 一篇文檔就是一顆節(jié)點(diǎn)樹
- 常用的三種節(jié)點(diǎn)：文本節(jié)點(diǎn)、元素節(jié)點(diǎn)毡惜、屬性節(jié)點(diǎn)
- Dom中三種方式獲得元素節(jié)點(diǎn)：
- getElementById 返回一個與有特定ID值的元素節(jié)點(diǎn)對應(yīng)的對象
- getElementByTagName 返回一個對象數(shù)組（更準(zhǔn)確地說拓轻，是一個節(jié)點(diǎn)列表），可把通配符(*)作為其參數(shù)
- getElemetnByClassName 返回一個對象數(shù)組（更準(zhǔn)確地說经伙，是一個節(jié)點(diǎn)列表）偿凭，需要考慮解決兼容性：
function getElementsByClassName(node,classname) {
if(node.getElementsByClassName) {//使用現(xiàn)有方法
return node.getElementByClassName(classname);
}else{
var results = new Array();
var eles = node.getElementsByTagName("*");
for(var i = 0;i<elems.length;i++) {
if(elems[i].className.indexOf(classname)！=-1){
results[results.length] = elems[i];
}
}
return false;
}
}
- 獲取和設(shè)置屬性
getAttribute坤塞，setAttribute法严，只能用于元素節(jié)點(diǎn)
object.setAttribute(attribute, value);辜伟，創(chuàng)建屬性，并賦值，這個很常用。
for(var i = 0; i<paras.length;i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) {
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
<a name = "c2"></a>第四章 JS圖片庫
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
var text = whichpic.getAttribute("title");//某個圖片鏈接被點(diǎn)擊時张弛，該鏈接的title屬性值將被提取并保存到變量text中
var description = document.getElementById("description");
placeholder.setAttribute("src", source);//source是屬性src的值
description.firstChild.nodeValue = text;//把description對象的第一個子節(jié)點(diǎn)的nodeValue屬性值設(shè)置為變量text的值
}
//上邊的注釋可作為編程的思路
- function showPic(whichpic)
whichpic代表一個元素節(jié)點(diǎn)，是一個指向某個圖片的<a>元素需要分解出圖片的文件路徑酪劫，可通過在whichpic元素上調(diào)用getAttribute得到吞鸭。 - onclick = "showPic(this); return false";
把onclick事件處理函數(shù)嵌入到一個鏈接中時，需要把這個鏈接本身用作該函數(shù)的參數(shù)覆糟，this表示“這個對象”/“這個<a>元素節(jié)點(diǎn)”刻剥。
點(diǎn)擊鏈接時，showPic函數(shù)會被調(diào)用滩字，但是鏈接點(diǎn)擊的默認(rèn)行為也會被調(diào)用造虏，阻止默認(rèn)行為：onclick = "return false;"
當(dāng)為return false時，onclick事件處理函數(shù)則認(rèn)為這個鏈接未被點(diǎn)擊麦箍。
<a name = "c22"></a>第五章 最佳實(shí)踐
- 平穩(wěn)退化(graceful degradation)：網(wǎng)頁在沒有JavaScript的情況下也能正常工作漓藕。
- JS中用
window.open(url,name,features)打開新的瀏覽器窗口:
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
- 調(diào)用函數(shù)時"javascript: "偽協(xié)議和內(nèi)嵌事件處理函數(shù)都不能實(shí)現(xiàn)平穩(wěn)退化
"javascript: "偽協(xié)議：
<a href="javascript:popUp('http://www.example.com/');">Example</a>
內(nèi)嵌事件處理函數(shù)：
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>
- 解決辦法：
在鏈接里給href屬性設(shè)置真實(shí)存在的URL（依然存在不足之處：每次打開新窗口，都需要把JS代碼嵌入到標(biāo)記文檔中）
<a onclick="popUp(this.href ); return false;">Example</a>
- 分離JavaScript
window.onload = prepareLinks;
function prepareLinks(){
//把事件添加到有著特定屬性的一組元素上
var links = document.getElementsByTagName("a"); //1.把文檔里的所有鏈接全放入一個數(shù)組里
for (var i=0; i<links.length; i++) {//2.遍歷數(shù)組
if (links[i].getAttribute("class") == "popup"){// 3.如果某個鏈接的class屬性等于popup挟裂，就表示這個鏈接在被點(diǎn)擊時應(yīng)該調(diào)用popUp()函數(shù)
popUp(this.getAttribute("href")); //1)把這個鏈接的href屬性值傳遞給popUp()函數(shù)
return false; //2)取消這個鏈接的默認(rèn)行為
}
}
}
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
//注釋可作為編程思路
- 把事件添加到有著特定屬性的一組元素上撵术，步驟：
- 把文檔里的所有鏈接全放入一個數(shù)組里；
- 遍歷數(shù)組话瞧；
- 如果某個鏈接的class屬性等于popup，就表示這個鏈接在被點(diǎn)擊時應(yīng)該調(diào)用popUp()函數(shù):
- 把這個鏈接的href屬性值傳遞給popUp()函數(shù)
- 取消這個鏈接的默認(rèn)行為
- window.onload = function{...}
把代碼打包到函數(shù)prepareLinks里寝姿，并添加到window對象觸發(fā)的onload事件上交排。必須的步驟，不然加載腳本時文檔可能不完整饵筑，導(dǎo)致模型埃篓、DOM都不完整，代碼無法正常工作
- 向后兼容根资，對象檢測
if (!getElementyById || !getElementsByTagName) return false;
//一定要刪掉方法后的圓括號架专，如果不刪掉，測試的將是方法的結(jié)果玄帕，無論方法是否存在部脚。
- 性能考慮
- 盡量少訪問DOM和減少標(biāo)記
在多個函數(shù)都會去的一組類似元素的情況下，可以考慮重構(gòu)代碼裤纹，把搜索結(jié)果保存在一個全局變量里委刘，或者把一組元素直接以參數(shù)形式傳遞給函數(shù) - 合并和放置腳本
包含腳本的最佳方式是使用外部腳本，因?yàn)橥獠课募c標(biāo)記能清晰的分離開，把多個腳本合并到一個中锡移，減少請求呕童。減少請求數(shù)量通常是性能優(yōu)化首先要考慮的。
把所有<script>標(biāo)簽都放到文檔末尾淆珊，</body>標(biāo)簽之前 - 壓縮腳本
把腳本中不必要的字節(jié)夺饲，如空格和注釋，統(tǒng)統(tǒng)刪除（查看網(wǎng)頁源碼時便能體驗(yàn)到）
常用的代碼壓縮工具：
JSMin
YUI Compressor
Closure Compiler
<a name="c222"></a> 第六章 JS圖片庫改進(jìn)版
1.JavaScript與HTML標(biāo)記分離
開始時onclick事件處理函數(shù)直接插入到HTML文檔里:
<ul>
<li><a href = "#" onclick = "showPic(this); return false;" title = "..."></li>
...
</ul>
為<ul>設(shè)置id屬性便可把JS移出文檔：
<ul id = "imagegallery">...
- 添加事件處理函數(shù)施符，該函數(shù)完成以下工作：
- 檢查當(dāng)前瀏覽器是否理解getElementByTagName往声；
- 檢查當(dāng)前瀏覽器是否理解getElementById；
- 檢查當(dāng)前網(wǎng)頁是否存在一個id為imagegallery的元素操刀；
- 遍歷imagegallery元素的所有鏈接
- 設(shè)置onclick事件烁挟，讓它在有關(guān)鏈接被點(diǎn)擊時完成以下操作：
1）把這個鏈接作為參數(shù)傳遞給showPic函數(shù)；
2）取消鏈接被點(diǎn)擊時的默認(rèn)行為骨坑。
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;//1.檢查點(diǎn)
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");//2.變量
for ( var i=0; i < links.length; i++) {//3.遍歷
links[i].onclick = function() {//4.改變行為
// return !showPic(this);
retrun showPic(this) ? false : true;//this在這里代表links[i]
}
//links[i].onkeypress = links[i].onclick;盡量不使用鍵盤觸發(fā)事件
}
}
---
links[i].onclick = function() 定義了一個匿名函數(shù)：一種在代碼執(zhí)行時創(chuàng)建函數(shù)的辦法撼嗓。這個匿名函數(shù)里的所有語句都將在link[i]元素被點(diǎn)擊時執(zhí)行。
return !showPic(this)：
1.如果showPic返回true欢唾，我們就返回false且警，瀏覽器不會打開那個鏈接；
2.如果showPic返回false礁遣，我們認(rèn)為圖片沒有更新斑芜，于是返回true以允許默認(rèn)行為發(fā)生
3.this在這里代表links[i]
- 共享onload事件
把創(chuàng)建的函數(shù)綁定到事件上：window.onload = prepareGallery；
如果有多個函數(shù)想在頁面加載完畢時立即執(zhí)行祟霍，可以創(chuàng)建如下函數(shù)：
window.onload = function(){
fisrtFunction();
secondFunction();
...
}
更好的解決方案是利用函數(shù)addLoadEvent杏头，它只有一個參數(shù)：打算在頁面加載完畢時執(zhí)行的函數(shù)的名字，如下：
//代碼的注釋部分即為addLoadEvent函數(shù)將要完成的操作
function addLoadEvent(func) {//只有一個參數(shù)沸呐，在頁面加載完畢時執(zhí)行的函數(shù)的名字
var oldonload = window.onload;//把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload
if (typeof window.onload != 'function') {
window.onload = func;//如果這個處理函數(shù)上還沒有綁定任何函數(shù)醇王，把新函數(shù)添加給它
} else {
window.onload = function() {
oldonload();
func();//如果這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把新函數(shù)追加到現(xiàn)有指令的末尾
}
}
}
addLoadEvent(prepareGallery);
2.DOM Core和HTML-DOM
getElementById,getElementsByTagName,setAttribute崭添，getAttribute等方法都是DOM Core的組成部分寓娩，不專屬于JavaScript，支持DOM的任何一種語言都可以使用呼渣。
關(guān)于HTML-DOM可以參考這里棘伴。
