《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高级程序设计》（第三版），这本书简直博大精深。。。。。表示总结起来好难，有空会把一些重要的方法总结上来的。