一，回顧
首先先來回顧下DOM和事件。
1，DOM
DOM在JavaScript中是應用最廣泛的，大部分Web開發的程式設計語言都提供了相關的實現。給了開發人員一個統一的介面。
看下面的例子:
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 樣本操作DOM元素 */ window.onload = function(){ //給Dom元素添加顏色 var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].style.color = "red"; } } </script> </head> <body> <ul> <li>李老師-英語</li> <li>張老師-數學</li> <li>劉老師-物理</li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
等待頁面所有內容載入完畢後，通過getElementsByTagName()方法擷取頁面中的li元素，然後迴圈改變li元素顏色為紅色。
再看第二個DOM例子，例子將把第二個li元素從頁面中刪除。
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 樣本操作DOM元素 */ 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開始 } </script> </head> <body> <ul> <li>李老師-英語</li> <li>張老師-數學</li> <li>劉老師-物理</li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
現擷取到li元素的父節點ul元素，然後使用removeChild() 方法刪除ul元素下 指定的li元素。
當然也可以直接使用 parentNode來直接擷取li元素的父節點。代碼如下：
複製代碼 代碼如下:
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元素的父節點
}
2，事件
事件是黏合應用程式中所有使用者互動的膠水。DOM和事件的是JavaScript中的黃金搭檔（呵呵，來句廣告詞），它們決定著現代Web應用程式形態的根本所在。
看下面的例子：
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 樣本操作DOM元素 */ window.onload = function(){ //給Dom元素添加顏色 var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].style.color = "red"; li[i].onmouseover = function(){ this.style.color = "blue"; } li[i].onmouseout = function(){ this.style.color = "red"; } } } </script> </head> <body> <ul> <li>李老師-英語</li> <li>張老師-數學</li> <li>劉老師-物理</li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
本例中，擷取的li元素後，然後迴圈給元素添加事件，添加了onmouseover和onmouseout事件。當滑入時，改變顏色，滑出時，恢複顏色。
事件是複雜多變的，上例是一個最簡單的例子，所以基本上沒遇到問題。在以後，我們將遇到 比如 事件冒泡，事件傳遞 ，取消事件等問題。
3，DOM和事件
在DOM和事件互動的基礎上產生了DHTML，它的實質就是JavaScript事件和DOM元素上CSS屬性之間的互動。DHTML存在的意思就是組合這兩個技術，然後做它的事情。
二，簡單的物件導向開發
我們先來感受一下JavaScript物件導向是怎麼一個寫法。下面代碼展示了學校中的課程名和老師的資訊。
<script type="text/javascript"> /* 樣本用一個對象組合表示學校中的課程 'Lecture'類 用name和teacher作為參數 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'類的一個方法，用於產生一條資訊 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new來構造一個新的函數，然後調用display方法 var L = new Lecture("李老師","英語"); var L_msg = L.display(); alert(L_msg); </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
最終結果會輸出“李老師 是教 英語 的。”
在此例子的基礎上，我們再定義個函數，用來輸出所有的課程資訊。代碼如下所示：
<script type="text/javascript"> /* 樣本用一個對象組合表示學校中的課程 'Lecture'類 用name和teacher作為參數 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'類的一個方法，用於產生一條資訊 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new來構造一個新的函數，然後調用display方法 var L = new Lecture("李老師","英語"); var L_msg = L.display(); //alert(L_msg); //新定義一個'AllLecture'類 //用'lec'作為參數，lec是一個數組 function AllLecture( lec ){ this.lec = lec; } //'AllLecture'類的一個方法，用於產生所有的課程資訊 //需要迴圈輸出'lec' AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i<this.lec.length;i++){ str += this.lec[i] + "\n"; } return str; } //下面使用new來夠造一個新的函數，用於產生所有的資訊 //函數的參數是數組。 //使用'Lecture'類來產生數組的值。 var B = new AllLecture( [ new Lecture("李老師","英語").display() , new Lecture("張老師","數學").display() , new Lecture("劉老師","物理").display() ] ); var B_str = B.display(); alert(B_str); </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
最終結果會輸出：
![]()
本例中， 數組的值都調用了 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] 處，統一調用display()方法。然後去掉數組的值調用display()。修改後的代碼如下：
<script type="text/javascript"> /* 樣本用一個對象組合表示學校中的課程 'Lecture'類 用name和teacher作為參數 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'類的一個方法，用於產生一條資訊 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new來構造一個新的函數，然後調用display方法 var L = new Lecture("李老師","英語"); var L_msg = L.display(); //alert(L_msg); //新定義一個'AllLecture'類 //用'lec'作為參數，lec是一個數組 function AllLecture( lec ){ this.lec = lec; } //'AllLecture'類的一個方法，用於產生所有的課程資訊 //需要迴圈輸出'lec' AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i<this.lec.length;i++){ //str += this.lec[i] + "\n"; str += this.lec[i].display() + "\n"; //把display()放到這裡調用 } return str; } //下面使用new來夠造一個新的函數，用於產生所有的資訊 //函數的參數是數組。 //使用'Lecture'類來產生數組的值。 //var B = new AllLecture( [ new Lecture("李老師","英語").display() , new Lecture("張老師","數學").display() , new Lecture("劉老師","物理").display() ] ); var B = new AllLecture( [ new Lecture("李老師","英語") , new Lecture("張老師","數學") , new Lecture("劉老師","物理") ] ); var B_str = B.display(); alert(B_str); </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
同樣也可以輸出跟上例一樣的結果。
這是一個簡單的物件導向開發的例子，隨著JavaScript逐漸被程式員所接受，設計良好的物件導向代碼也日益普及。在後面的筆記中，你將會看到更多的物件導向程式碼。
三，小結
本章回顧了DOM和事件，然後通過例子簡單的講解了物件導向的開發。
