《JavaScript DOM 編程藝術》（第二版）讀書筆記（四）

第八章 充實文檔內容

這一章主要是對以前DOM方法的應用，有幾個須要注意的地方。

1.for/in 循環 

語法：for(variable in array){}

該循環能夠用來遍歷數組（也能夠是對象），主要應用於下標不是數字的數組（或對象）

是數字的話，數組通常是for循環：for(var i=0;i<array.length;i++){}

2.關於節點

在編寫DOM腳本時，咱們理所固然的認爲某個節點確定是一個元素節點，可是若是沒有把握，建議檢查nodeType屬性。

好比lastchild，咱們每每會認爲它得到的是元素節點，其實不必定，可是咱們能夠經過DOM方法編寫一個lastChildElement方法

咱們能夠把「*」通配符做爲參數傳進getElementsByTagName(),獲取所有的元素節點，再取最後一個元素節點，這樣就能夠保證得到最後一個元素節點。

 

第九章 CSS-DOM

style屬性element.style.property

style包含着元素的樣式，查詢這個屬性將返回一個對象而不是一個簡單的字符串。

獲取下一個元素節點的方法getNextElement()

function getNextElement(){
    if(node.nodeType==1){
        return node;
    }
    if(node.nextSibling){
        return getElement(node.nextSibling);
    }
    return null;
}

className屬性

element.className = value

利用這個屬性的特色咱們能夠編寫JQuery中的addClass函數(做者給出的代碼很像JQuery中的方法)

function addClass(element,value){
    if (!element.className) {
        element.className=value;
    } else{
        newClassName = element.className;
        newClassName = "";
        newClassName+=value;
        element.className=newClassName;
    };
}

 

第十章 用javascript實現動畫效果

setTimeout("function",interval)

clearTimeout()

setTimeout可以讓某個函數在通過一段時間以後纔開始執行。這個函數帶有兩個參數:第一個參數一般是一個字符串，其內容是將要執行那個函數的名字；第二個參數是一個數值，它以毫秒爲單位設定了須要通過多長時間之後纔開始執行一個參數所給的函數。

通常把這個函數調用賦值給一個變量 variable = setTimeout("function",interval)

clearTimeout是取消某個正在排隊等待執行的函數，這個方法須要一個參數：clearTimeout(variable)

moveElement()函數（該函數詳解請查看原書，效果相似Jquery的animate）

function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    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){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left = xpos+"px";
    elem.style.top = ypos+"px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
    movement= setTimeout(repeat,interval);
}

elementID:打算移動的元素的ID；final_x：該元素的目的地「左」位置；final_y：該元素的目的地「上」位置；interval：兩次移動之間的停頓時間。

 

但demo在這裏出現了問題，若是把鼠標指針在連接之間快速移動的話，動畫效果將會變得很奇怪。

這是由於不管上次的動畫效果有沒有完成。都會再次調用movement。

如下是改進之後的movement

function moveElement(elementID,final_x,final_y,interval){
    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);
    var dist = 0;
    if(xpos==final_x&&ypos==final_y){
        return true;
    }
    if(xpos<final_x){
        dist=Math.ceil((final_x-xpos)/10);
        xpos=xpos+dist;
    }
    if(xpos>final_x){
        dist=Math.ceil((xpos-final_x)/10);
        xpos=xpos-dist;
    }
    if(ypos<final_y){
        dist=Math.ceil((final_y-ypos)/10);
        ypos=ypos+dist;
    }
    if(ypos>final_y){
        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);
}

改進後的代碼經過給elem添加屬性和clearTimeout來解決動畫滯後的問題。同時使動畫過渡更平滑。

第十一章 HTML5

這章介紹了canvas，video，audio，form的一些新內容和新標籤，書上給了幾個示例，感受比較高端，略過不提。。。。

第十二章 綜合示例

這一章把以前的內容所有應用到，作了一個小的站點。有幾點須要注意

@import url() ：這個css方法能夠引入css樣式。能夠將幾個CSS文件合併到一個CSS文件裏面。

還有一個很重要的方法split()       語法：array = string.split(character)這個方法跟據character拆分字符串造成數組。

var color = "red,green,blue";
var array=color.split(",");//  ["red","green","blue"]

而後本章也沒有什麼可總結的

 

　　這本書的讀書筆記就寫到這，感受作得不是很好，我也不是很清楚如何才能簡略的歸納書上的內容，最後一章的內容使用了前面的所有內容，只加了一點不嚴格表單驗證和一些平穩退化的表單效果，感受意義不是很大。AJAX內容在本書也並無仔細介紹，感受還須要看其餘書提升。總之這本書是一本優秀的入門書籍，能夠說是它激起了我學習javascript的興趣。若是能跟着書上代碼一行行敲， 收穫會很大。

　　下一本書是《JavaScript高級程序設計》（第三版），這本書簡直博大精深。。。。。表示總結起來好難，有空會把一些重要的方法總結上來的。