第3章
客戶端腳本及應(yīng)用
第3章 客戶端腳本及應(yīng)用
JavaScript(以下簡(jiǎn)稱(chēng)JS)是一種腳本語(yǔ)言，用于編寫(xiě)頁(yè)面腳本以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)客戶端行為的控制。目前的瀏覽器大都內(nèi)嵌了JS引擎，用來(lái)執(zhí)行客戶端腳本。同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)人員還可以使用優(yōu)秀的JS功能擴(kuò)展庫(kù)jQuery或第三方提供的JS腳本。本章的學(xué)習(xí)要點(diǎn)如下。
?掌握在頁(yè)面中使用JS腳本的方法。
?掌握J(rèn)avaScript內(nèi)置對(duì)象實(shí)現(xiàn)對(duì)表單提交數(shù)據(jù)有效性的驗(yàn)證。
?掌握使用JS對(duì)象和瀏覽器對(duì)象實(shí)現(xiàn)頁(yè)面的交互效果和動(dòng)態(tài)效果。
?掌握jQuery的使用方法。
?掌握使用第三方的JS腳本制作圖片新聞的方法。
?了解面向?qū)ο笤O(shè)計(jì)方法的優(yōu)點(diǎn)。
?了解HTML 5與HTML 4的區(qū)別(新增功能)。
3.1 使用JavaScript腳本控制網(wǎng)頁(yè)的客戶端行為
3.1.1 JavaScript內(nèi)置對(duì)象和瀏覽器對(duì)象
JS是一種廣泛用于客戶端Web開(kāi)發(fā)的腳本語(yǔ)言，常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，如響應(yīng)用戶的各種操作。
如今的瀏覽器程序一般都嵌入了JavaScript解釋程序，用于解釋執(zhí)行嵌入在頁(yè)面里的JS腳本(程序)。
JS內(nèi)置了幾個(gè)重要對(duì)象，主要包括日期/時(shí)間對(duì)象Date、數(shù)組對(duì)象Array、字符串對(duì)象String和數(shù)學(xué)對(duì)象Math等。其中：Date、Array和String是動(dòng)態(tài)對(duì)象(本質(zhì)上是類(lèi))，它們封裝了一些常用的屬性和方法，使用前需要使用new運(yùn)算符創(chuàng)建其實(shí)例；而Math是靜態(tài)對(duì)象，不需要實(shí)例化就可以直接使用其方法及屬性。
對(duì)于嵌入到網(wǎng)頁(yè)中的JS來(lái)說(shuō)，其宿主對(duì)象就是瀏覽器提供的對(duì)象，所以又稱(chēng)為瀏覽器對(duì)象。在瀏覽器對(duì)象模型中，頂級(jí)對(duì)象是Window對(duì)象，表示瀏覽器的窗口，其提供了如下重要方法。
?alert()：產(chǎn)生警示消息框方法，警告框在單擊確定后消失。
?setTimeout()(或setInterval())：定時(shí)器方法，在指定的時(shí)間(或周期性地)調(diào)用某個(gè)方法。
?confirm()：產(chǎn)生一個(gè)是否型對(duì)話框方法，對(duì)話完成后對(duì)話框關(guān)閉。
在瀏覽器窗口里，可以包含文檔、框架和訪問(wèn)歷史記錄等對(duì)象，幾個(gè)常用的二級(jí)對(duì)象介紹如下。
?document：表示瀏覽器窗口里的文檔。
?location：表示窗口里文檔的位置，使用href屬性可實(shí)現(xiàn)客戶端頁(yè)面跳轉(zhuǎn)。
?navigator：表示客戶端瀏覽器。
?history：表示歷史訪問(wèn)記錄。
文檔對(duì)象document的常用方法如下。
?write(exp)：向文檔對(duì)應(yīng)的網(wǎng)頁(yè)窗口輸出表達(dá)式exp的值。
?getElementsByTagName(\"tagName\")：返回文檔里指定標(biāo)簽名的對(duì)象的集合。
?getElementById()：返回使用ID屬性定義的對(duì)象。
注意：
(1) 在JS腳本里使用瀏覽器對(duì)象時(shí)，瀏覽器對(duì)象名稱(chēng)通常需要小寫(xiě)，這不同于HTML標(biāo)記名稱(chēng)及其屬性名稱(chēng)，使用JS內(nèi)置對(duì)象時(shí)，其名稱(chēng)及其方法名需要嚴(yán)格區(qū)分大小寫(xiě)。
(2) 使用JS內(nèi)置對(duì)象編程時(shí)，其名稱(chēng)及其方法與屬性名需要嚴(yán)格區(qū)分大小寫(xiě)。
在一個(gè)文檔里可以包含超鏈接、圖像和表單等，表單又可以包含文本框、下拉列表、提交按鈕等。因此，瀏覽器對(duì)象模型具有多級(jí)結(jié)構(gòu)，如圖3.1.1所示。

圖3.1.1 瀏覽器對(duì)象模型簡(jiǎn)圖
為了控制客戶端的行為，需要引入面向?qū)ο蟮乃枷牒蛯?duì)象的PEM模型。
類(lèi)與對(duì)象是面向?qū)ο缶幊谭绞降暮诵暮突�礎(chǔ)，對(duì)象是類(lèi)的一個(gè)實(shí)例，類(lèi)是對(duì)一類(lèi)對(duì)象的抽象。通過(guò)類(lèi)可以對(duì)零散的用于實(shí)現(xiàn)某項(xiàng)功能的代碼進(jìn)行有效管理。
將要處理的問(wèn)題(對(duì)象)抽象為類(lèi)，并將這類(lèi)對(duì)象的屬性和方法封裝起來(lái)，然后通過(guò)對(duì)象的事件來(lái)訪問(wèn)該類(lèi)對(duì)象的屬性和方法來(lái)解決實(shí)際問(wèn)題。
任何對(duì)象都具有一些屬性(property)和方法(method)，方法是在一定的事件(event)發(fā)生時(shí)采用的，這就是對(duì)象的PEM模型。
JavaScript支持的瀏覽器事件有很多，它們可以用于不同的對(duì)象，常用事件如表3.1.1所示。
表3.1.1 JavaScript支持的常用瀏覽器事件
序 號(hào) 事 件 名 含義或說(shuō)明
1 OnClick 單擊事件，常用于button類(lèi)型的命令按鈕和超鏈接
2 OnFocus 獲得焦點(diǎn)事件，如激活文本框等對(duì)象時(shí)觸發(fā)
3 OnBlur 失去焦點(diǎn)事件，如下拉列表選擇、文本框輸入確定后觸發(fā)
4 OnChange 更新后事件，在元素的值發(fā)生改變時(shí)觸發(fā)
5 OnLoad Document對(duì)象的事件，瀏覽器完成HTML文檔載入時(shí)觸發(fā)
6 OnDblClick 雙擊事件，常用于button類(lèi)型的命令按鈕
7 OnMouseOver 鼠標(biāo)位于對(duì)象上時(shí)
8 OnMouseOut 鼠標(biāo)從對(duì)象上離開(kāi)時(shí)
要在JS中訪問(wèn)DOM(document object model，文檔對(duì)象模型)元素，就需要標(biāo)識(shí)HTML元素的標(biāo)記屬性。屬性ID和Name都可以用來(lái)標(biāo)識(shí)一個(gè)HTML元素，JavaScript分別有兩個(gè)方法getElementById()和getElementByName()來(lái)定位DOM節(jié)點(diǎn)。ID標(biāo)識(shí)的元素外觀由與ID屬性值相同的#樣式?jīng)Q定；在表單表提交到服務(wù)器端后，為了取到表單域的值，則需要使用Name屬性命名表單域(表單元素)。
注意：在HTML中，Name屬性值可以重復(fù)，而ID屬性值不可重復(fù)，是方法getElementById()的要求。
在設(shè)計(jì)在線測(cè)試頁(yè)面時(shí)，其單選題對(duì)應(yīng)的表單元素的Name屬性值相同，為此，客戶端腳本和服務(wù)器腳本分別提交其處理方法。
表單里的元素是頁(yè)面中的元素，在JS腳本中，除了可以按名稱(chēng)訪問(wèn)外，還可以使用elements[]數(shù)組訪問(wèn)。命名訪問(wèn)表單第i個(gè)元素的屬性的方法如下。
表單名.elements[i].屬性名 i=0,1,2…
其中，下標(biāo)i為該元素在表單內(nèi)元素出現(xiàn)的先后順序，從0開(kāi)始編號(hào)。
本課程在線測(cè)試頁(yè)面，請(qǐng)?jiān)L問(wèn)http://www.wustwzx.com/asp_net/zxcs.html。
3.1.2 JavaScript變量與常量、流程控制語(yǔ)句
程序是可執(zhí)行的語(yǔ)句序列。變量與常量是程序設(shè)計(jì)中最基本的概念。
常量在指在程序運(yùn)行過(guò)程中值不發(fā)生變化的量；變量是相對(duì)于常量而言的，它的值在程序運(yùn)行過(guò)程中可以隨時(shí)變化。
程序結(jié)構(gòu)除了容易理解的順序結(jié)構(gòu)外，還有分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。
1. 分支結(jié)構(gòu)
分支語(yǔ)句用于條件執(zhí)行，可分為單分支語(yǔ)句、雙分支語(yǔ)句和多分支語(yǔ)句三種。
單分支語(yǔ)句的用法格式如下。
if(exp){
statement; //exp的值為真時(shí)才執(zhí)行
}
//后繼語(yǔ)句; //無(wú)條件執(zhí)行的語(yǔ)句
雙分支語(yǔ)句用于二選一，其用法格式如下。
if(exp){
statement1; // exp的值為真時(shí)執(zhí)行
}else{
statement2; // exp的值為假時(shí)執(zhí)行
}
//后繼語(yǔ)句; //無(wú)條件執(zhí)行的語(yǔ)句
多分支語(yǔ)句用于多選一的情形，其用法格式如下。
if(exp1){
statement1;
}
else if(exp 2){
statement 2;
}
else if(exp 3){
statement 3;
}
……
else if(exp n){
statement n;
}
else{
statement n+1;
}
//后繼語(yǔ)句; //無(wú)條件執(zhí)行的語(yǔ)句
注意：多分支實(shí)質(zhì)上是基本分支語(yǔ)句的嵌套。
開(kāi)關(guān)語(yǔ)句可用于多選一的情形，其用法格式如下。
switch(表達(dá)式)
{
case 常量表達(dá)式1: 語(yǔ)句組1; break;
case 常量表達(dá)式2: 語(yǔ)句組2; break;
case 常量表達(dá)式3: 語(yǔ)句組3; break;
…….
case 常量表達(dá)式n: 語(yǔ)句組n; break;
default: 語(yǔ)句組n+1;
}
//后繼語(yǔ)句; //無(wú)條件執(zhí)行的語(yǔ)句
注意：執(zhí)行開(kāi)關(guān)語(yǔ)句時(shí)，遇到break語(yǔ)句就終止switch執(zhí)行語(yǔ)句，轉(zhuǎn)到后繼語(yǔ)句。
2. 循環(huán)結(jié)構(gòu)
循環(huán)結(jié)構(gòu)有for、while和do…while等多種格式。for循環(huán)的語(yǔ)法格式如下。
for(exp1;exp2;exp3){ //當(dāng)exp1僅執(zhí)行一次
循環(huán)體語(yǔ)句 //當(dāng)exp2為真時(shí)才執(zhí)行，然后執(zhí)行exp3，再次執(zhí)行exp2
}
// 后繼語(yǔ)句
注意：當(dāng)exp2為假時(shí)，將終止循環(huán)的執(zhí)行。
while循環(huán)的語(yǔ)法格式如下。
while(exp){ //當(dāng)exp為真才執(zhí)行循環(huán)體
循環(huán)體語(yǔ)句
}
// 后繼語(yǔ)句
do…while循環(huán)的語(yǔ)法格式如下。
do{
循環(huán)體語(yǔ)句
}while(exp); //當(dāng)exp為假時(shí)將執(zhí)行后繼語(yǔ)句
// 后繼語(yǔ)句
注意：do…while是先執(zhí)行循環(huán)體再判斷條件，因此，循環(huán)體至少執(zhí)行一次。
在循環(huán)體內(nèi)，通常使用if語(yǔ)句檢測(cè)某種條件是否成立。當(dāng)條件成立時(shí)，使用break語(yǔ)句可以提前終止循環(huán)，即程序執(zhí)行到循環(huán)語(yǔ)句的后繼語(yǔ)句。
3.1.3 在頁(yè)面里使用JavaScript腳本實(shí)現(xiàn)頁(yè)面的交互效果
使用button類(lèi)型的命令按鈕用來(lái)響應(yīng)客戶端的瀏覽器事件，而響應(yīng)客戶端事件的處理方法可用JS來(lái)寫(xiě)。在如下的例3.1.1中，OnLoad表示頁(yè)面加載完畢事件，OnClick表示單擊命令按鈕事件。
【例3.1.1】在頁(yè)面中央顯示一組圖片。
【瀏覽效果】頁(yè)面瀏覽效果如圖3.1.2所示。

圖3.1.2 頁(yè)面example3_1_1.html瀏覽效果
頁(yè)面example3_1_1.html代碼如下。



以交互方式在頁(yè)面正中央顯示一組圖片