|
|
一，回顧
首先先來回顧下DOM和事件。
1，DOM
DOM在JavaScript中是應用最廣泛的，大部分Web開發的編程語言都提供了相關的實現。給了開發者一個統一的接口。
看下面的例子:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
等待頁面所有內容加載完畢后，通過getElementsByTagName()方法獲取頁面中的li元素，然后循環改變li元素顏色為紅色。
再看第二個DOM例子，例子將把第二個li元素從頁面中刪除。
[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應用程序形態的根本所在。
看下面的例子：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
本例中，獲取的li元素后，然后循環給元素添加事件，添加了onmouseover和onmouseout事件。當滑入時，改變顏色，滑出時，恢復顏色。
事件是復雜多變的，上例是一個最簡單的例子，所以基本上沒遇到問題。在以后，我們將遇到 比如 事件冒泡，事件傳遞 ，取消事件等問題。
3，DOM和事件
在DOM和事件交互的基礎上產生了DHTML，它的實質就是JavaScript事件和DOM元素上CSS屬性之間的交互。DHTML存在的意思就是組合這兩個技術，然后做它的事情。
二，簡單的面向對象開發
我們先來感受一下JavaScript面向對象是怎么一個寫法。下面代碼展示了學校中的課程名和老師的信息。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
最終結果會輸出“李老師 是教 英語 的?！?
在此例子的基礎上，我們再定義個函數，用來輸出所有的課程信息。代碼如下所示：
[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()。修改后的代碼如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
同樣也可以輸出跟上例一樣的結果。
這是一個簡單的面向對象開發的例子，隨著JavaScript逐漸被程序員所接受，設計良好的面向對象代碼也日益普及。在后面的筆記中，你將會看到更多的面向對象程序代碼。
三，小結
本章回顧了DOM和事件，然后通過例子簡單的講解了面向對象的開發。
JavaScript技術：JavaScript 中級筆記 第一章，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
