快捷導(dǎo)航

JavaScript 中級(jí)筆記第一章

更新時(shí)間：2009年09月14日 12:59:41 作者：

JavaScript 中級(jí)筆記

一，回顧
首先先來回顧下DOM和事件。
1，DOM
DOM在JavaScript中是應(yīng)用最廣泛的，大部分Web開發(fā)的編程語言都提供了相關(guān)的實(shí)現(xiàn)。給了開發(fā)者一個(gè)統(tǒng)一的接口。
看下面的例子:

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

等待頁面所有內(nèi)容加載完畢后，通過getElementsByTagName()方法獲取頁面中的li元素，然后循環(huán)改變li元素顏色為紅色。
再看第二個(gè)DOM例子，例子將把第二個(gè)li元素從頁面中刪除。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

現(xiàn)獲取到li元素的父節(jié)點(diǎn)ul元素，然后使用removeChild() 方法刪除ul元素下指定的li元素。
當(dāng)然也可以直接使用 parentNode來直接獲取li元素的父節(jié)點(diǎn)。代碼如下：

復(fù)制代碼代碼如下:

 
window.onload = function(){ 
//給Dom元素添加顏色 
var li = document.getElementsByTagName("li"); 
for(var i=0;i<li.length;i++){ 
li[i].style.color = "red"; 
} 
//刪除第二個(gè)li元素 
//var ul = document.getElementsByTagName("ul")[0]; //索引從0開始 
//ul.removeChild( li[1] ); //索引從0開始 
li[1].parentNode.removeChild( li[1] ); //索引從0開始，直接使用parentNode來獲取li元素的父節(jié)點(diǎn) 
} 

2，事件
事件是黏合應(yīng)用程序中所有用戶交互的膠水。DOM和事件的是JavaScript中的黃金搭檔（呵呵，來句廣告詞），它們決定著現(xiàn)代Web應(yīng)用程序形態(tài)的根本所在。
看下面的例子：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

本例中，獲取的li元素后，然后循環(huán)給元素添加事件，添加了onmouseover和onmouseout事件。當(dāng)滑入時(shí)，改變顏色，滑出時(shí)，恢復(fù)顏色。
事件是復(fù)雜多變的，上例是一個(gè)最簡單的例子，所以基本上沒遇到問題。在以后，我們將遇到比如事件冒泡，事件傳遞，取消事件等問題。
3，DOM和事件
在DOM和事件交互的基礎(chǔ)上產(chǎn)生了DHTML，它的實(shí)質(zhì)就是JavaScript事件和DOM元素上CSS屬性之間的交互。DHTML存在的意思就是組合這兩個(gè)技術(shù)，然后做它的事情。
二，簡單的面向?qū)ο箝_發(fā)
我們先來感受一下JavaScript面向?qū)ο笫窃趺匆粋€(gè)寫法。下面代碼展示了學(xué)校中的課程名和老師的信息。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

最終結(jié)果會(huì)輸出“李老師是教英語的?！?
在此例子的基礎(chǔ)上，我們再定義個(gè)函數(shù)，用來輸出所有的課程信息。代碼如下所示：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

最終結(jié)果會(huì)輸出：

本例中，數(shù)組的值都調(diào)用了 display()方法。
改進(jìn)如下：
在

復(fù)制代碼代碼如下:

AllLecture.prototype.display=function(){ 
var str = ""; 
for(var i=0;i<this.lec.length;i++){ 
str += this.lec[i] + "\n"; 
} 
return str; 
} 

中的this.lec[i] 處，統(tǒng)一調(diào)用display()方法。然后去掉數(shù)組的值調(diào)用display()。修改后的代碼如下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

同樣也可以輸出跟上例一樣的結(jié)果。
這是一個(gè)簡單的面向?qū)ο箝_發(fā)的例子，隨著JavaScript逐漸被程序員所接受，設(shè)計(jì)良好的面向?qū)ο蟠a也日益普及。在后面的筆記中，你將會(huì)看到更多的面向?qū)ο蟪绦虼a。
三，小結(jié)
本章回顧了DOM和事件，然后通過例子簡單的講解了面向?qū)ο蟮拈_發(fā)。