Ceilwoo Profile

Jun 14

Web Design with JavaScript and the DOM 读书笔记

Posted inCode by ceil

读书笔记…还差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” >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.向后兼容性
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的编写
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);
}