Web Design with JavaScript and the DOM 读书笔记

读书笔记…还差30页…要赶紧看了…真是相见恨晚啊….这么好的一本书书.. 最近googlepapes挂了后，东西放在mofile又忽然不见了几张图片…唉….算了，不吐槽了，赶紧看书 ，时日无多了

《Web Design with JavaScript and Document Object Model》
四、1.DOM1的setAttribute()

element.setAttribute("value","the new value");  

2.testPic

3.childNodes属性
返回一个数组，包含给定元素节点的全部子元素。
body元素的专用记号: document.body

4.nodeType属性
有12种可取值。
元素节点：1
属性节点：2
文本节点：3

5.nodeValue属性

aaaa

alert(document.getElementById("test").childNodes\[0\].nodeValue)  

文本是第一个子元素

6.firstChild和lastChild属性

node.firstChild=node.childNodes\[0\]  

五、JavaScript编程原则和良好习惯
1.预留退路

2.避免使用”javascript”伪协议及内嵌的事件处理函数
利于searchbot的搜索
Example F
[http://www](<a href=)” >Example Y

3.分离JavaScript

function prepareLinks(){  
var links = document.getElementByTagName("a");  
for(var i=0; i if(links\[i\].className == "popup"){  
links\[i\].onclick = fuction(){  
popUp(this.getAttribute("href"));  
return false;  
}}}}  
```  
4.向后兼容性
```javascript  
if(method){statements}  

对象检测技术

六、美术馆的改进
1.将多个JavaScript函数绑定到 onload事件处理函数上

window.onload = function(){  
firstFunction();  
secondFunction();  
}

改进版:

function addLoadEvent(func){  
var oldonload = window.onload;  
if (typeof window.onload != 'function'){  
window.onload = func;  
}else{  
window.onload = function(){  
oldonload();  
func();  
}  
}  
}    
addLoadEvent(firstFunction);  
addLoadEvent(secondFunction);  

2.JavaScript函数的优化 P95
3.DOM Core 和 Html-DOM

七、动态创建HTML内容
1.document.write() 和专利技术innerHTML
2.DOM
2.1 createElement()

document.createElement("p");  

2.2 appendChild()

parent.appendChild(child) ;  

2.3 createTextNode()

document.TextNode("Hi");  

2.4 insertBefore()
把一个新元素插入到一个现有元素的前面

parentElement.insertBefore(newElement,targetElement)  
2.5 insertAfter()函数的编写  
function insertAfter(newElement,targetElement){  
var parent = targetElement.parentNode;  
if (parent.lastChild == targetElement){  
parent.appendChild(newElement);  
}else{  
parent.insertBefore(newElement,targetElement.nextSibling);  
}  
}  
```  
八、充实文档的内容  
即使某种特定的浏览器会引起问题，也没有必要使用浏览器嗅探代码。对浏览器的名称和版本号进行嗅探的办法很难做到面面俱到，而且往往会导致非常复杂难解的代码。  
1.显示 "缩略词语表"  
2.显示"文献来源链接表"  
lastChildElement的编写  
```javascript
var quoteChildren = quotest\[i\].getElementByTagName('\*');  
if (quoteChildren.length<1) continue;  
var elem =quoteChildren\[quoteChildren.length-1\];  

3.显示”快速访问键清单”
约定俗成的快速访问键：
accesskey=”1” 返回到本网站主页
accesskey=”2” 后退到前一页面
accesskey=”4” 打开本网站的搜索表单/页面
accesskey=”9” 本站联系办法
accesskey=”0” 查看本网站的快速访问键清单

4.避免使用DOM插入核心内容
5.对文档里现有信息进行检索
getElementById(); getElementByTagName(); getAttribute();
6.把信息添加到文档
createElement(); createTextNode(); appendChild(); insertBefore(); setAttribute();

九、CSS-DOM
结构层、表示层、行为层
1.style属性 只能检索内嵌样式
2.样式信息的检索
element.style.fontFamily //Camel记号
3.className属性
通过JS代码刷新
4.对函数进行抽象化 P188

十、用JavaScript实现动画效果
1.位置
position属性
static: position的默认属性，有关元素将按照他们在HTML文档里的先后顺序出现在浏览器窗口里
relative: 与static相似，属性等于relative的元素可以(在float属性的作用下)从文档的正常显示顺序里脱离出来
absolute: 可以把元素摆放在它的”容器”(文档本身)里的任何位置，这个元素在原始HTML文档里出现的位置对此没有任何影响，它的显示位置将有top、left、right、bottom等属性决定
2.时间
2.1.setTimeout()函数
让某个函数在经过一段时间之后才开始执行
setTimeout(“function”,interval)
clearTimeout()取消等待执行队列里尚未执行的某个函数
movement = setTimeout(“moveMessage()”,5000);
clearTimeout(movement);

2.2.时间递增量
moveMessage()的逻辑：
(1) 获得元素的当前位置
(2)如果元素已经到达它的目的地，则退出这个函数
(3)如果元素尚未到达它的目的地，则把它想目的地移近一点
(4)经过一段时间间隔之后从步骤1开始重读上述步骤

2.3 抽象化

function moveElement(elementID,final\_x,final\_y,interval){  
if(!document.getElementById) return false;  
if(!document.getElementById("elementID")) return false;  
var elem = document.getElementById("elementID");  
/\*parseInt("39 steps") => 39 小数的话用 parseFloar(string)\*/  
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);  
}  

3. CSS
overflow属性
visible:不裁剪溢出的内容
hidden:裁剪溢出的内容
scroll:类似于hidden，浏览器将对溢出的内容进行裁剪，但会显示滚动条以便让用户能够看到内容的其他部分
auto:类似与scroll，但浏览器只在真的发生内容溢出时才显示滚动条

@import url(“style/layout.css”);

Math.ceil(number) Math.floor(number) Math.round(number)

十一、设计实践

]]>