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