Web Design with JavaScript and the DOM 读书笔记

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

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

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

2.testPic

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

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

5.nodeValue属性

aaaa

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

文本是第一个子元素

6.firstChild和lastChild属性

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

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

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

3.分离JavaScript

1
2
3
4
5
6
7
8
9
10
11
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事件处理函数上

1
2
3
4
window.onload = function(){  
firstFunction();
secondFunction();
}

改进版:

1
2
3
4
5
6
7
8
9
10
11
12
13
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()

1
document.createElement("p");  

2.2 appendChild()

1
parent.appendChild(child) ;  

2.3 createTextNode()

1
document.TextNode("Hi");  

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 抽象化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)

十一、设计实践

]]>


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!