在中級筆記中,你將學習到JavaScript的其它重要內容,比如說命名空間,閉包,物件導向,上下文,通用的JavaScript,分離 代碼等,這些都是很少有書籍提及到的內容。大家對這塊的只是都是一知半解,很模糊。相信大家都很期待,下面就開始JavaScript的中級之旅吧。
一,回顧 首先先來回顧下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>
等待頁面所有內容載入完畢後,通過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>
現擷取到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>
本例中,擷取的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>
最終結果會輸出“李老師 是教 英語 的。” 在此例子的基礎上,我們再定義個函數,用來輸出所有的課程資訊。代碼如下所示:
<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>
最終結果會輸出:
本例中, 數組的值都調用了 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>
同樣也可以輸出跟上例一樣的結果。
這是一個簡單的物件導向開發的例子,隨著JavaScript逐漸被程式員所接受,設計良好的物件導向代碼也日益普及。在後面的筆記中,你將會看到更多的物件導向程式碼。
三,小結