快捷導航

JavaScript 中級筆記第一章

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

JavaScript 中級筆記

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

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

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

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

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

復制代碼代碼如下:

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

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

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

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

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

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

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

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

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

復制代碼代碼如下:

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