本書在一些基礎(chǔ)的JavaScript語法上，通過一個個小例子講解了簡單的dom操作，最后把例子綜合起來做成一個網(wǎng)站。難得可貴的是其中的平穩(wěn)退化，漸進增強的web設(shè)計理念——確保頁面在沒有JavaScript的情況下也能正常工作。其中對兼容性的考慮和結(jié)構(gòu)、樣式、行為相分離的思想也是值得學(xué)習(xí)的。
1. 什么是JavaScript
JavaScript是一種運行在瀏覽器端的腳本語言。JavaScript主要包括ECMAscript（規(guī)定標(biāo)準(zhǔn)JavaScript的語法）、BOM（瀏覽器窗口對象的一組API ）、和重要的DOM（文檔對象模型，即如何操作文檔，對文檔的內(nèi)容進行抽象和概念化的方法）。
至于JavaScript的弱類型語言、解釋性語言和基于原型的特性在此不再贅述。
2.通用型函數(shù)
- onload讓函數(shù)在網(wǎng)頁加載完畢后立即執(zhí)行。else，如果window.onload上已經(jīng)綁定了函數(shù)，那么就將新函數(shù)追加到現(xiàn)有指令下面。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
- inserAfter函數(shù)在元素后插入一個新元素。 如果目標(biāo)元素是其父元素的最后一個子元素，那么就插入在其父元素后面；如果不是，那么就插入在目標(biāo)元素的下一個兄弟元素前面。
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
- 類jQuery的addClass()添加類名函數(shù)
function addClass(element,value) {
if (!element.className) {
element.className = value;//如果沒有類名則直接添加
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;//如果有類名將其轉(zhuǎn)化為字符串連接起來
element.className = newClassName;
}
}
3. JavaScript圖片庫
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
這里prepareGallery函數(shù)獲得圖片庫每個a標(biāo)簽的值，并對他們執(zhí)行showPic函數(shù)。這里前三句可以保證瀏覽器部分不支持JavaScript或者imagegallery不存在時腳本也可以正常工作，即漸進增強。
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
這里showPic函數(shù)將獲得a標(biāo)簽的src和alt屬性，并將其賦值給placeholder。配合prepareGallery可以實現(xiàn)點擊a標(biāo)簽更新img標(biāo)簽placeholder的src屬性和p標(biāo)簽description的nodevalue，從而做到圖片切換的效果。
優(yōu)點：
- 將onclick事件處理程序從a標(biāo)簽中解放出來，不僅做到結(jié)構(gòu)和行為相分離，而且簡化了代碼。
- 把showPic函數(shù)單獨抽象出來，其中的whichpic參數(shù)通過傳入不同的參數(shù)，使showpic函數(shù)具有一定的普適性（組件化）。
- 遍歷a標(biāo)簽，對每個標(biāo)簽執(zhí)行showpic函數(shù)，而不是每個a標(biāo)簽依次調(diào)用showpic函數(shù)，簡化了代碼，return false取消a鏈接默認的跳轉(zhuǎn)行為。
后面還會介紹將縮略圖包含在a標(biāo)簽內(nèi)，使頁面更美觀。結(jié)構(gòu)和行為相分離的理念要求我們動態(tài)生成img標(biāo)簽placeholder的src屬性和p標(biāo)簽description，因為這些標(biāo)簽僅僅是為了showpic函數(shù)服務(wù)的。結(jié)構(gòu)和行為分離固然很好，但這同時也會增加js的代碼量，其中的平衡也是實際開發(fā)中要考慮的因素。
4. Ajax異步加載頁面技術(shù)
優(yōu)勢：
- 通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
- 用戶可以繼續(xù)瀏覽頁面并與頁面交互，通過ajax可以按需加載和創(chuàng)建頁面內(nèi)容，而不會打斷用戶的瀏覽體驗，從而使web應(yīng)用呈現(xiàn)出功能豐富，交互敏捷，類似桌面應(yīng)用般的體驗。
XMLHttpRequest是ajax技術(shù)的核心，用于在后臺與服務(wù)器交換數(shù)據(jù)。ajax承擔(dān)瀏覽器和服務(wù)器端的中間人的角色，JavaScript通過ajax可以自己發(fā)送請求，也可以自己處理相應(yīng)。
- 創(chuàng)建ajax對象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
- 向服務(wù)器發(fā)送請求
將請求發(fā)送到服務(wù)器，我們使用XMLHttpRequest對象的open()方法。
open(method,url,async);
method：請求的類型；GET 或 POST；url：文件在服務(wù)器上的位置；async：true（異步）或 false（同步）；大部分情況下使用GET類型。
- 請求實例
`
function getNewContent(){
var request = getHTTPObject();//創(chuàng)建ajax對象
if(request){
request.open("GET","example.txt",true);//向服務(wù)器端(此處是txt文件)發(fā)送請求
request.onstatechange = function(){
if(request.readyState == 4){//readyState為4即請求成功
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById("new").appendChild(para);//將請求的內(nèi)容插入到id為new的div中
}
};
request.send(null);//將請求發(fā)送到服務(wù)器 string類型
}else{
alert("Sorry,your browser does not support ajx")
}
}
addLoadEvent(getNewContent);
`
5. 實現(xiàn)移動元素效果
function moveElement(elementID,final_x,final_y,interval) {//參數(shù)代表元素id 最終xy位置 移動速度
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {//屬性不會產(chǎn)生局部變量和全局變量的作用域問題 清除定時器
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);//這個公式可以實現(xiàn)移動動畫先快后慢的效果
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);//setTimeout遞歸調(diào)用自己可以實現(xiàn)類似setInterval每一幀結(jié)束后再次調(diào)用定時器的功能
}//但是遞歸調(diào)用浪費空間時間，存在效率問題
利用此函數(shù)可以實現(xiàn)圖片切換或者輪播之類的效果。
6. 最后的綜合項目 即大作業(yè)
預(yù)覽效果： https://richardyou.github.io/JavaScript-DOM-/index.html
代碼地址：https://github.com/richardyou/JavaScript-DOM-
