《Web網(wǎng)站設(shè)計(jì)與開發(fā)教程》課件第4章

第4章腳本語言JavaScript4.1JavaScript簡(jiǎn)介 4.2JavaScript的基本語法4.3JavaScript的面向?qū)ο筇匦?.4JavaScript在瀏覽器中的應(yīng)用4.5JavaScript在HTML5中的應(yīng)用4.6常用的JavaScript框架

【學(xué)習(xí)提示】如果說HTML文檔創(chuàng)建了網(wǎng)頁中的對(duì)象，CSS設(shè)置了這些對(duì)象的屬性值，那么JavaScript就可以讓這些對(duì)象活起來，并按照規(guī)定的程序動(dòng)起來，因?yàn)镴avaScript是一種程序設(shè)計(jì)語言。作為一個(gè)熱門的計(jì)算機(jī)語言，JavaScript擁有大量的特性和優(yōu)點(diǎn)，開發(fā)人員還可以在此基礎(chǔ)上擴(kuò)展出各種復(fù)雜的應(yīng)用。在很多云計(jì)算的環(huán)境中，我們看到了用JavaScript作為主要開發(fā)工具實(shí)現(xiàn)的在線文檔編輯器(類似Word)、可交互的地圖以及各種社交網(wǎng)絡(luò)軟件。鑒于初學(xué)者的需要和知識(shí)結(jié)構(gòu)的考慮，本章著重介紹JavaScript語言最核心的特性和程序開發(fā)方法，特別是討論了其對(duì)瀏覽器對(duì)象的操縱。在此基礎(chǔ)上，還介紹了幾種目前流行的JavaScript框架。

JavaScript是由Netscape公司開發(fā)的一種基于對(duì)象、事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語言。JavaScript可以讓網(wǎng)頁產(chǎn)生動(dòng)態(tài)、交互的效果，從而改善用戶體驗(yàn)。目前，JavaScript已成為Web客戶端開發(fā)的主流腳本語言。4.1JavaScript簡(jiǎn)介

JavaScript由JavaScript核心語言、JavaScript客戶端擴(kuò)展和JavaScript服務(wù)器端擴(kuò)展三部分組成。核心語言部分包括JavaScript的基本語法和JavaScript的內(nèi)置對(duì)象，在客戶端和服務(wù)器端均可運(yùn)行。客戶端擴(kuò)展部分支持瀏覽器的對(duì)象模型DOM，可以很方便地控制頁面上的對(duì)象。服務(wù)器端擴(kuò)展部分支持在服務(wù)器上運(yùn)行時(shí)需要的對(duì)象，這些對(duì)象可以和Web數(shù)據(jù)庫連接，可以在應(yīng)用程序之間交換信息，對(duì)服務(wù)器上的文件進(jìn)行控制。本書主要討論JavaScript核心語言和JavaScript客戶端擴(kuò)展的部分。

JavaScript和Java表面上看似存在某些聯(lián)系，但是本質(zhì)上講，它們是兩種不同的語言。JavaScript是Netscape公司的產(chǎn)品，是一種解釋型的腳本語言；而Java是Sun公司(現(xiàn)在已歸于Oracle麾下)的產(chǎn)品，是一種面向?qū)ο蟪绦蛟O(shè)計(jì)語言。從語法風(fēng)格上看，JavaScript比較靈活自由，而Java是一種強(qiáng)類型語言，語法比較嚴(yán)謹(jǐn)。它與Java名稱上的近似，是當(dāng)時(shí)Netscape為了營(yíng)銷考慮與Sun公司達(dá)成協(xié)議的結(jié)果。

JavaScript程序是純文本、無需編譯的，任何文本編輯器都可以編輯JavaScript文件。雖然在JavaScript中并不強(qiáng)調(diào)完整的面向?qū)ο蟮母拍?，但是JavaScript使用了一種叫“原型化繼承”的模型，并且JavaScript中也有作用域、閉包、繼承、上下文對(duì)象等概念。

JavaScript通過<script>標(biāo)簽在HTML文檔中嵌入腳本代碼，有兩種嵌入腳本的方法：第一種方法，直接在HTML文檔中編寫JavaScript代碼如下：

<scripttype="text/JavaScript">

document.write("這是JavaScript！采用直接插入的方法！");

</script>為了避免不支持JavaScript的瀏覽器將JavaScript程序解譯成純文字，書寫代碼時(shí)可以將JavaScript程序放在HTML的注釋標(biāo)簽“<!---->”之間。例如：

<scriptlanguage="JavaScript"type="text/JavaScript">

<!--document.write("這是JavaScript！采用直接插入的方法！");-->

</script>

第二種方法，可以通過文件引用的方式將已經(jīng)編寫好的JavaScript文件(通常以.js為擴(kuò)展名)引入進(jìn)來。這種方式可以提高代碼的重用性和可讀性。例如：

<scriptsrc＝"foo.js"language="JavaScript"type="text/JavaScript"></script>

其中，src屬性值就是腳本文件的地址。需要說明的是，如果在<script>標(biāo)簽中指定了src屬性，<script>標(biāo)簽中的其他內(nèi)容都會(huì)被忽略，即在一個(gè)<script>標(biāo)簽中要么將JavaScript程序直接寫入HTML文檔，要么通過文件引用的方式來實(shí)現(xiàn)，二者不能同時(shí)生效。例如：

<scriptsrc＝"foo.js"language="JavaScript"type="text/JavaScript">

document.write("這段腳本將不會(huì)被執(zhí)行!");

</script>

另外，雖然一個(gè)HTML文檔上的<script>塊的數(shù)量沒有明確的限制，但是將JavaScript完全地分散到許多個(gè)<script>塊和集中到一個(gè)<script>塊都不是一個(gè)好的習(xí)慣。正確的用法是，按照獨(dú)立功能的劃分將一組相互依賴的或者功能相近的模塊寫在一個(gè)<script>塊內(nèi)，將功能相對(duì)獨(dú)立、彼此孤立的代碼分開寫入多個(gè)<script>塊。

JavaScript語言的語法類似于C語言和Java語言，但JavaScript的語法遠(yuǎn)不如C語言等嚴(yán)格。如果程序中有錯(cuò)誤，瀏覽器會(huì)忽略錯(cuò)誤的部分，而不是停止執(zhí)行。與C語言一樣，JavaScript是對(duì)大小寫敏感的語言。4.2JavaScript的基本語法4.2.1常量和變量

JavaScript程序中的數(shù)據(jù)可根據(jù)值的特征分為常量和變量。常量是那些在程序中可預(yù)知結(jié)果的量，不隨程序的運(yùn)行而變化，而變量則正好相反。常量和變量共同構(gòu)成了程序操作數(shù)據(jù)的整體。

JavaScript中的常量更接近“直接量”，它可以是數(shù)值、字符串或者布爾值。一般來說，JavaScript的常量是那些只能出現(xiàn)在賦值表達(dá)式右邊的那些量。例如，3.1415、“Helloworld”、true、null等都是常量。

JavaScript中用標(biāo)識(shí)符來命名一個(gè)變量。在代碼vara=5，b="test"，c=newObject()中，標(biāo)識(shí)符a、b、c都是變量，它們可以出現(xiàn)在賦值表達(dá)式的左側(cè)。嚴(yán)格地說，有一個(gè)例外，在JavaScript中，undefined符號(hào)可以出現(xiàn)在賦值號(hào)的左邊，但是根據(jù)它的標(biāo)準(zhǔn)化含義，還是將它歸為常量。

JavaScript中合法標(biāo)識(shí)符可以由字母、數(shù)字、下劃線以及$符號(hào)組成，其中首字符不能是數(shù)字。JavaScript內(nèi)部定義的保留字不能用作變量名，如下：

breakcasecatchcontinuedefaultdeletedoelsefinally

forfunctionifinwithnewreturnswitchthisthrow

trytypeofvarvoidwhileinstanceof

另外，留在以后使用的保留字也不能用作變量名，它們包括：

Abstractbooleanbytecharclassimplementsdebuggerdouble

enumexportextendsfimalfloatgotoconstsynchronized

intinterfacelongmativepackageprivateprotectedpublic

shortstaticsupermportthrowstransientvolatile不同于C/C++

和Java，JavaScript是一種“弱類型”語言，即JavaScript的變量可以存儲(chǔ)任何類型的值。也就是說，對(duì)于JavaScript而言，數(shù)據(jù)類型和變量不是綁定的，變量的類型通常要到運(yùn)行時(shí)才能決定。在JavaScript中既可以在聲明變量時(shí)初始化，也可以在變量被聲明后賦值，例如：

varnum=3

或者：

varnum

num=3因?yàn)镴avaScript變量沒有類型規(guī)則的約定，所以JavaScript的使用從語法上來講就比較簡(jiǎn)單靈活。但同時(shí)，由于沒有變量類型的約束，因而對(duì)程序員也提出了更高的要求，尤其是在編寫比較長(zhǎng)而復(fù)雜的程序時(shí)，謹(jǐn)慎地管理變量和它所指向值的類型，是一件非常重要的事情。4.2.2數(shù)據(jù)類型

JavaScript中的數(shù)據(jù)類型主要包括基本數(shù)據(jù)類型和引用數(shù)據(jù)類型?；緮?shù)據(jù)類型包括數(shù)值、字符串和布爾型，引用數(shù)據(jù)類型包括數(shù)組和對(duì)象。

1．?dāng)?shù)值

數(shù)值是最基本的數(shù)據(jù)類型，它們表示的是普通的數(shù)。JavaScript的數(shù)值并不區(qū)別整型或是浮點(diǎn)型，也可以理解為：所有的數(shù)值都是由浮點(diǎn)型表示的，是精度64位浮點(diǎn)型格式(等同于Java和C++

中的double類型)。JavaScript可表示的整數(shù)精度范圍從

-253～253。十六進(jìn)制整數(shù)常量的表示方法是以“0X”或者“0x”開頭，其后跟隨十六進(jìn)制數(shù)字串。十六進(jìn)制數(shù)是用數(shù)字0～9以及字母A～F來表示的，其中字母大小寫均可。例如：0xff，0xCAFE911。

JavaScript中浮點(diǎn)型數(shù)值可以采用科學(xué)計(jì)數(shù)法表示，例如：3.14，234.3333，6.02e23，1.4738e-23。

除了基本的數(shù)值之外，JavaScript還支持一些特殊的數(shù)值，表4-1列出了一些特殊數(shù)值常量及其含義。表4-1JavaScript中特殊數(shù)值常量及其含義

2．字符串

JavaScript中的字符串?dāng)?shù)據(jù)類型是由Unicode字符組成的序列。與C++

或Java不同，JavaScript沒有char類型的數(shù)據(jù)，字符串是表示文本數(shù)據(jù)的最小單位。

JavaScript的字符串常量是用單引號(hào)或雙引號(hào)括起來的字符序列，其中可以含有0個(gè)或多個(gè)Unicode字符。字符串中可以使用轉(zhuǎn)義符，如“\n”。與C語言類似，反斜線(

\

)為轉(zhuǎn)義字符，如“\n”表示換行符。當(dāng)用單引號(hào)來界定字符串時(shí)，字符串中如果有單引號(hào)字符，就必須用轉(zhuǎn)義序列(

\'

)來進(jìn)行轉(zhuǎn)義。反之，當(dāng)用雙引號(hào)來界定字符串時(shí)，字符串中如果有雙引號(hào)字符，就要使用轉(zhuǎn)義序列(

\"

)來進(jìn)行轉(zhuǎn)義。例如：

alert('\")；(實(shí)際輸出的字符串為一個(gè)單引號(hào))

alert("\"\\")；(實(shí)際輸出的字符串為一個(gè)雙引號(hào)和一個(gè)反斜線)

表4-2列出了JavaScript轉(zhuǎn)義序列以及它們所代表的字符。表4-2JavaScript轉(zhuǎn)義序列以及所代表的字符3．布爾型

布爾型是最簡(jiǎn)單的一種基本數(shù)據(jù)類型，它只有兩個(gè)常量值，即true和false，代表著邏輯上的“真”和“假”。

4．?dāng)?shù)組

數(shù)組是元素的集合，數(shù)組中的每一個(gè)元素都具有唯一下標(biāo)并用來標(biāo)識(shí)，可以通過下標(biāo)來訪問這些數(shù)值。數(shù)組下標(biāo)是從0開始的連續(xù)整數(shù)。在JavaScript中，數(shù)組的元素不一定是數(shù)值，可以是任何類型的數(shù)據(jù)(甚至可以是數(shù)組，進(jìn)而構(gòu)建成為二維數(shù)組)。

可以通過數(shù)組的構(gòu)造函數(shù)Array()來創(chuàng)建一個(gè)數(shù)組，數(shù)組一旦被創(chuàng)建，就可以給數(shù)組的任何元素賦值。與Java以及C++明顯不同的是，JavaScript的數(shù)組元素不必具有相同的類型。例如：

vara=newArray();

a[0]=1.2;

a[1]="JavaScript";

a[2]=true;

a[3]=newArray(1,2,3);

構(gòu)造函數(shù)Array()可以包含參數(shù)，這些參數(shù)被一次作為數(shù)組對(duì)應(yīng)的元素進(jìn)行初始化，例如上面的語句a[3]=newArray(1,2,3)，使得數(shù)組元素a[3]初始化一個(gè)新的數(shù)組，等同于：

a[3]=newArray();

a[3][0]=1;

a[3][1]=2;

a[3][2]=3。

5．對(duì)象

對(duì)象是JavaScript中的一種引用數(shù)據(jù)類型，也是一種抽象和廣義的數(shù)據(jù)結(jié)構(gòu)。JavaScript對(duì)象是一個(gè)非常重要的知識(shí)，將在后面章節(jié)專門討論。在這里僅討論對(duì)象的基本形式和基本語法。

JavaScript中，對(duì)象是通過調(diào)用構(gòu)造函數(shù)來創(chuàng)建的。理論上任何JavaScript函數(shù)都可以作為構(gòu)造函數(shù)來創(chuàng)建。例如：

varo=newObject();

vartime=newDate();

varpattern=newRegExp("\\sjava\s",i);對(duì)象一旦創(chuàng)建，就可以根據(jù)自己的意愿來設(shè)計(jì)并使用它們的屬性。4.2.3表達(dá)式和運(yùn)算符

JavaScript中的表達(dá)式是由變量、常量、布爾量和運(yùn)算符按一定規(guī)則組成的集合。JavaScript中有三種表達(dá)式：算術(shù)表達(dá)式、串表達(dá)式和邏輯表達(dá)式。例如：

number++

"Hello"+"youarewelcome!"

(a>5)&&(b=2)

JavaScript中的運(yùn)算符有：算術(shù)運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算符、位運(yùn)算符、條件運(yùn)算符、逗號(hào)運(yùn)算符和對(duì)象運(yùn)算符等。

1．算術(shù)運(yùn)算符

算術(shù)運(yùn)算符用于執(zhí)行變量與/或值之間的算術(shù)運(yùn)算。給定y=5，則表4-3給出了算術(shù)運(yùn)算符的使用說明。表4-3JavaScript中算術(shù)運(yùn)算符

2．賦值運(yùn)算符

賦值運(yùn)算符用于給JavaScript變量賦值。表4-4給出了賦值運(yùn)算符的使用說明。表4-4JavaScript中賦值運(yùn)算符

3．邏輯運(yùn)算符與比較運(yùn)算符

邏輯運(yùn)算符與比較運(yùn)算符都可返回布爾型的值。邏輯運(yùn)算符用于測(cè)定變量或值之間的邏輯。表4-5給出了邏輯運(yùn)算符的使用說明。表4-5JavaScript中邏輯運(yùn)算符

比較運(yùn)算符在邏輯語句中使用。表4-6給出了比較運(yùn)算符的使用說明。表4-6JavaScript中比較運(yùn)算符

4．字符串運(yùn)算符

JavaScript只有一個(gè)字符串運(yùn)算符“+”，使用字符串運(yùn)算符可以把幾個(gè)串連接在一起。例如，“hello”+“,world”的返回值就是“hello,world”。

5．位運(yùn)算符

位運(yùn)算符是對(duì)數(shù)值的二進(jìn)制位進(jìn)行逐位運(yùn)算的一類運(yùn)算符。它們用于二進(jìn)制數(shù)操作，在JavaScript的程序設(shè)計(jì)中并不常用。表4-7給出了位運(yùn)算符的使用說明。表4-7JavaScript中位運(yùn)算符

6．條件運(yùn)算符

條件運(yùn)算符是JavaScript中唯一的三目運(yùn)算符。它的表達(dá)式如下：

test?語句1:語句2

其中test、語句1、語句2是它的三個(gè)表達(dá)式。條件運(yùn)算符首先計(jì)算它的第一個(gè)表達(dá)式test的值，如果它的值為true，則執(zhí)行語句1并返回其結(jié)果；否則執(zhí)行語句2并返回其結(jié)果。例如，下面代碼可根據(jù)當(dāng)前的時(shí)間返回am或pm的標(biāo)志。

varnow=newDate();

varmark=(now.getHours()>12)?"pm":"am";

7．逗號(hào)運(yùn)算符

逗號(hào)運(yùn)算符是一個(gè)雙目運(yùn)算符，它的作用是連接左右兩個(gè)運(yùn)算數(shù)，先計(jì)算左邊的運(yùn)算數(shù)，再計(jì)算右邊的運(yùn)算數(shù)，并將右邊運(yùn)算數(shù)的計(jì)算結(jié)果作為表達(dá)式的值返回。因此，

x=(i=0，j=1，k=2)等價(jià)于：i=0；j=1；x=k=2；

運(yùn)算符一般是在只允許出現(xiàn)一個(gè)語句的地方使用，在實(shí)際應(yīng)用中，逗號(hào)運(yùn)算符常與for循環(huán)語句聯(lián)合使用。

8．對(duì)象運(yùn)算符

對(duì)象運(yùn)算符是指作用于對(duì)象實(shí)例、屬性或者數(shù)組以及數(shù)組元素的運(yùn)算符。JavaScript中對(duì)象運(yùn)算符包括in運(yùn)算符、new運(yùn)算符、delete運(yùn)算符、.

運(yùn)算符和

[]

運(yùn)算符。

對(duì)象運(yùn)算符“in”要求其左邊的運(yùn)算數(shù)是一個(gè)字符串，或可以被轉(zhuǎn)換為字符串，右邊的運(yùn)算數(shù)是一個(gè)對(duì)象或者數(shù)組。如果該運(yùn)算符左邊的值是其右邊對(duì)象的一個(gè)屬性名，則返回true。例如：

varpoint={x：1，y：1}； //定義一個(gè)對(duì)象

varhas_x="x"inpoint； //值為true

varhas_y="y"inpoint； //值為true

varhas_z="z"inpoint； //值為false

可以看出，運(yùn)算符“in”使得程序可以把對(duì)象當(dāng)作一個(gè)集合來使用，對(duì)象的屬性作為集合的元素。對(duì)于JavaScript來說，這是一種方便且高效的設(shè)計(jì)和實(shí)現(xiàn)方法。

對(duì)象運(yùn)算符“new”是一個(gè)單目運(yùn)算符，用來根據(jù)函數(shù)原型創(chuàng)建一個(gè)新對(duì)象，并調(diào)用該函數(shù)原型初始化它。用于創(chuàng)建對(duì)象的函數(shù)原型既是這個(gè)對(duì)象的類，也是這個(gè)對(duì)象的構(gòu)造函數(shù)。new運(yùn)算符的語法如下：

newconstructor(arguments)；

constructor必須是一個(gè)函數(shù)或者閉包，其后應(yīng)該有一個(gè)括號(hào)括起來的參數(shù)列表，列表中有零個(gè)或多個(gè)參數(shù)，而且參數(shù)之間用逗號(hào)分隔。下面是使用new運(yùn)算符的例子：

<html>

<head>

<title>對(duì)象和對(duì)象的構(gòu)造</title>

</head>

<body>

<scripttype="text/JavaScript">

<!--

varo=newDate(); //

o是一個(gè)Date對(duì)象

Complex=function(r,i) //自定義Complex類型，表示復(fù)數(shù)

{

this.re=r;

this.im=i;

}

varc=newComplex(1,2); //

c是一個(gè)復(fù)數(shù)對(duì)象

document.write(o.toLocaleString());

document.write("<br>");

document.write(""+c.re+","+c.im);

-->

</script>

</body>

</html>

上述代碼執(zhí)行后將在網(wǎng)頁上顯示出年、月、日、時(shí)、分、秒的信息。

對(duì)象運(yùn)算符“delete”是一個(gè)單目運(yùn)算符，它將刪除運(yùn)算數(shù)所指定的對(duì)象屬性、數(shù)組元素或者變量。如果刪除成功，它將返回true，否則將返回false。注意，并非所有的屬性和變量都是可以被刪除的，某些內(nèi)部的核心屬性和客戶端屬性不能被刪除，用var語句聲明的變量也是不能被刪除的。如果delete使用的運(yùn)算符是一個(gè)不存在的屬性，它將返回true。前面介紹“in”運(yùn)算符時(shí)曾經(jīng)提到過用對(duì)象作為集合，如配合上“delete”運(yùn)算符則可以很方便地實(shí)現(xiàn)集合元素的插入、檢索與刪除。

對(duì)象運(yùn)算符“.”和“[]”都是用來存取對(duì)象和數(shù)組元素的雙目運(yùn)算符。它們的第一個(gè)運(yùn)算數(shù)都是對(duì)象或者數(shù)組。它們的區(qū)別是運(yùn)算符“.”將第二個(gè)運(yùn)算數(shù)作為對(duì)象的屬性來讀寫，而“[]”將第二個(gè)運(yùn)算數(shù)作為數(shù)組的下標(biāo)來讀寫；運(yùn)算符“.”要求第二個(gè)運(yùn)算數(shù)只能是合法的標(biāo)識(shí)符，而運(yùn)算符“[]”的第二個(gè)運(yùn)算數(shù)可以是任何類型的值甚至undefined，但不能是未定義的標(biāo)識(shí)符。例如：

vara=newObject()；

a.x=1；

alert(a["x"])； //a.x和a["x"]是兩種等價(jià)的表示形式

varb=[1,2,3]；

alert(b[1])； //對(duì)于數(shù)組b，b[1]通過下標(biāo)"1"訪問數(shù)組的第二個(gè)元素4.2.4循環(huán)語句

循環(huán)語句是JavaScript中允許執(zhí)行重復(fù)動(dòng)作的語句。JavaScript中，循環(huán)語句主要有while語句和for語句兩種形式。

while語句的基本形式如下：

while(expression)

statement

while語句首先計(jì)算expression的值。如果它的值是false，那么JavaScript就轉(zhuǎn)而執(zhí)行程序中的下一條語句；如果值為true，那么就執(zhí)行循環(huán)體的statement，然后再計(jì)算expression的值，一直重復(fù)以上動(dòng)作直到expression的值為false為止。下面是一個(gè)while循環(huán)的例子。

vari=10;

while(i--)

{

document.write(i);

}

JavaScript中，for語句通常比while語句更常見，因?yàn)檫@種循環(huán)語句結(jié)構(gòu)通常比while語句更方便。for語句抽象了結(jié)構(gòu)化語言中大多數(shù)循環(huán)的常用模式，這種模式包括一個(gè)計(jì)數(shù)器變量，在第一次循環(huán)之前進(jìn)行初始化，在每次循環(huán)開始之時(shí)檢查該計(jì)數(shù)器的值，決定循環(huán)是否繼續(xù)，最后在每次循環(huán)結(jié)束之后通過表達(dá)式更新這個(gè)計(jì)數(shù)器變量的值。for語句的基本形式如下：

for(initialize;test_expr;increment)

statement

其中，initialize對(duì)應(yīng)計(jì)數(shù)器的初始化，test_expr對(duì)應(yīng)計(jì)數(shù)器的檢測(cè)，increment對(duì)應(yīng)計(jì)數(shù)器值的更新。與上面這個(gè)形式等價(jià)的while語句如下：

initialize;

while(test_expr){

statement;

increment;

}在循環(huán)開始之前，for語句先計(jì)算initialize的值。在實(shí)際的程序中，initialize通常是一個(gè)var變量聲明和賦值語句，每次循環(huán)開始前要先計(jì)算表達(dá)式test_expr的值，如果它的值為true，那么就執(zhí)行循環(huán)體的statement，最后計(jì)算表達(dá)式increment的值。這個(gè)表達(dá)式通常是一個(gè)自增/自減運(yùn)算或賦值表達(dá)式。例如：

for(vari=0;i<10;i++)

{

document.write(i);

}在for循環(huán)中，也允許使用多個(gè)計(jì)數(shù)器并在一次循環(huán)中同時(shí)改變它們的值。這個(gè)時(shí)候，前面介紹的逗號(hào)運(yùn)算符就派上用場(chǎng)了，例如：

for(vari=0,varj=0;i+j<10;i++,j+=2)

{

document.write(i+""+j+"<br>");

}

除了基本形式之外，for語句還有另一種形式：

for(variableinobject)

statement在這種情況下，for語句可以枚舉一個(gè)數(shù)組或者一個(gè)對(duì)象的屬性，并把它們賦給in運(yùn)算符左邊的運(yùn)算數(shù)，同時(shí)執(zhí)行statement。這種方法常用來窮舉數(shù)組的所有元素和遍歷對(duì)象的屬性，包括原生屬性和繼承屬性，前提是元素和屬性是可枚舉的。for/in的存在不但為JavaScript提供了一種很強(qiáng)大的反射機(jī)制，也使得JavaScript的集合對(duì)象使用起來可以像哈希表一樣方便。4.2.5條件語句

條件語句是一種帶有判定條件的語句，根據(jù)條件的不同，程序選擇性地執(zhí)行某個(gè)特定的語句。條件語句和后循環(huán)語句都是帶有從句的語句，它們是JavaScript中的復(fù)合語句。

JavaScript中的條件語句包括if語句和switch語句。

if語句是基本的條件控制語句，這個(gè)語句的基本形式如下：

if(expression)

statement在這個(gè)基本形式中，expression是要被計(jì)算的表達(dá)式，statement是一個(gè)句子或者一個(gè)段落。如果計(jì)算的結(jié)果不是false且不能轉(zhuǎn)換為false，那么就執(zhí)行statement的內(nèi)容；否則就不執(zhí)行statement的內(nèi)容。例如：

if(null==username)

username="jack";

或者也可以用段落作為從句，例如：

if(a!=null&&b!=null)

{ a=a+b;

b=a-b;

a=a-b;

}

除基本形式外，if語句還具有擴(kuò)展形式，在擴(kuò)展形式下，if語句允許帶有else從句，如下：

if(expression)

statement1

else

statement2如果expression的計(jì)算結(jié)果不是false且不能夠被轉(zhuǎn)換為false，那么執(zhí)行statement1語句；否則執(zhí)行statement2語句。

if語句還可以相互嵌套，例如：

if(expression1){

if(expression2)

statement1,2

}

else{

if(expression3){

statement3

}

else

Statement4

}

上面的語句還可以書寫成更為緊湊簡(jiǎn)潔的格式，如下：

if(expression1){

if(expression2)

statement1,2

}

elseif(expression3){

statement3

}

elseif(expression3){

statement4

}

理論上講，結(jié)構(gòu)化語言的任何一種條件邏輯結(jié)構(gòu)都能用if和if與else組合來實(shí)現(xiàn)。但是當(dāng)程序的邏輯結(jié)構(gòu)出現(xiàn)多路分支的時(shí)候，如果僅依賴于層層嵌套的if語句，程序的邏輯結(jié)構(gòu)最終將變得極其復(fù)雜。如果此時(shí)多個(gè)分支都依賴于同一組表達(dá)式的時(shí)候，JavaScript提供的switch語句將比if語句嵌套更為簡(jiǎn)潔。switch語句的基本形式如下：

switch(expression)

{statements

}

其中，statements從句通常包括一個(gè)或多個(gè)case標(biāo)簽，以及零個(gè)或一個(gè)default標(biāo)簽。case標(biāo)簽和default標(biāo)簽都要用一個(gè)冒號(hào)來標(biāo)記。當(dāng)執(zhí)行一個(gè)switch語句的時(shí)候，先計(jì)算expression的值，然后查找和這個(gè)值匹配的case語句標(biāo)簽，如果找到了相應(yīng)的標(biāo)簽，就開始執(zhí)行標(biāo)簽后代碼塊中的第一條語句并依次順序執(zhí)行，直到switch語句的末尾或者出現(xiàn)跳轉(zhuǎn)語句為止。如果沒有查找到相應(yīng)的標(biāo)簽，就開始執(zhí)行標(biāo)簽default后的第一條語句并依次順序執(zhí)行，直到switch語句的末尾或者出現(xiàn)跳轉(zhuǎn)語句為止。如果沒有default標(biāo)簽，它就跳過所有的statements代碼塊。下面是一個(gè)具體的switch控制語句的例子。

<html>

<head>

<title>switch控制語句</title>

</head>

<body>

<scripttype="text/JavaScript">

<!--

functionconvert(x){

switch(typeofx){

case'number':returnx.toString(16);//把整數(shù)轉(zhuǎn)換成十六進(jìn)制的整數(shù)

break;

case'string':return'"'+x+'"';//返回引號(hào)包圍的字符串

break;

case'boolean':returnx.toString().toUpperCase();//轉(zhuǎn)換為大寫

break;

default:returnx.toString();//直接調(diào)用x的toString()方法進(jìn)行轉(zhuǎn)換

}

}

document.write(convert(110)+"<br/>");//轉(zhuǎn)換數(shù)值

document.write(convert("ab")+"<br/>");//轉(zhuǎn)換字符串

document.write(convert(true)+"<br/>");//轉(zhuǎn)換布爾值圖4-1switch語句的執(zhí)行效果圖

-->

</script>

</body>

</html>

上述代碼的執(zhí)行效果如圖4-1所示。

上面程序中出現(xiàn)了break語句，break語句是JavaScript中的跳轉(zhuǎn)語句，它會(huì)使運(yùn)行的程序立即退出包含在最內(nèi)層的循環(huán)或者switch語句。在本例中，遇到break語句之后就會(huì)結(jié)束switch語句，如果沒有break語句程序則會(huì)繼續(xù)執(zhí)行接下來的case語句。跳轉(zhuǎn)語句是用來讓程序邏輯跳出所在分支、循環(huán)或從函數(shù)調(diào)用返回的語句。除了break語句，JavaScript中還有continue和return這兩種跳轉(zhuǎn)語句。

continue語句的用法和break語句非常類似，唯一的區(qū)別是，continue不是退出循環(huán)而是開始一次新的迭代。continue語句只能用在循環(huán)語句的循環(huán)體中，在其他地方使用都會(huì)引起系統(tǒng)級(jí)別的語法錯(cuò)誤。執(zhí)行continue語句時(shí)，封閉循環(huán)的當(dāng)前迭代就會(huì)被終止，開始執(zhí)行下一次迭代。例如：

for(vari=1;i<10;i++)

{

if(i%3!=0)

continue;

document.write(i+"<br>");

}上面的代碼意思是對(duì)于每次迭代的i值如不能被3整除，則跳過當(dāng)前循環(huán)(不執(zhí)行document語句)而進(jìn)入下一次循環(huán)。4.2.6函數(shù)

在JavaScript中可以使用函數(shù)，函數(shù)是封裝在程序中可以多次使用的模塊，必須先定義后使用。JavaScript中函數(shù)定義的方式主要有兩種，分別是通過function語句來定義和通過構(gòu)造Function對(duì)象來定義。形式上，前者將函數(shù)視為一種靜態(tài)語法，而后者將函數(shù)作為一種動(dòng)態(tài)對(duì)象。在目前的大多數(shù)JavaScript實(shí)現(xiàn)中，用function定義函數(shù)要比Function構(gòu)造函數(shù)快得多，所以Function僅用于某些動(dòng)態(tài)要求很強(qiáng)的場(chǎng)合。不過，不論采用何種方式，JavaScript的一個(gè)函數(shù)都是Function對(duì)象的一個(gè)實(shí)例。

通過function語句來定義函數(shù)有兩種方式，分別是命名方式和匿名方式，例如：functionf1(){alert()}; //命名方式

varf1=function(){alert()}; //匿名方式

有時(shí)候也將命名方式定義函數(shù)的方法稱為“聲明式”函數(shù)定義，而把匿名方式定義函數(shù)的方法稱為“引用式”函數(shù)定義或者函數(shù)表達(dá)式。命名方式定義函數(shù)的方法是最常用的方法，其基本形式如下：

function函數(shù)名(參數(shù)列表)

{函數(shù)體

}

function是JavaScript中定義一個(gè)函數(shù)的關(guān)鍵字。函數(shù)名跟在關(guān)鍵字function之后，可以由合法的標(biāo)識(shí)符組成。函數(shù)的參數(shù)列表中多個(gè)參數(shù)用逗號(hào)分開。下面的代碼說明了聲明式函數(shù)定義和引用式函數(shù)定義的區(qū)別。

<html>

<head>

<title>兩種方式定義函數(shù)的區(qū)別</title>

</head>

<body>

<scripttype="text/JavaScript">

functiondwn(s){

document.write(s+"<br/>");

}

functiont1(){

dwn("t1");

}

t1();

functiont1(){//重新聲明一個(gè)新的t1

dwn("newt1...");

}

t1();

t1=function(){

dwn("newt1");

}

t1();

</script>

</body>

</html>上面代碼執(zhí)行后得到的結(jié)果依次是newt1...，newt1...，newt1，而不是t1，newt1…，newt1。這是因?yàn)?，聲明式函?shù)定義的代碼先于函數(shù)執(zhí)行代碼被解析器解析，而引用式函數(shù)定義的代碼則是在函數(shù)運(yùn)行中進(jìn)行動(dòng)態(tài)解析的。

如果函數(shù)已經(jīng)被定義了，那么就可以使用運(yùn)算符“()”來調(diào)用它，在括號(hào)中可以傳遞零個(gè)或多個(gè)參數(shù)，它們是用逗號(hào)隔開的。

return語句用來指定函數(shù)的返回值，把這個(gè)值作為函數(shù)調(diào)用表達(dá)式的值。return語句的基本形式如下：

returnexpression;

return語句只能出現(xiàn)在閉包或函數(shù)體內(nèi)，在執(zhí)行return語句時(shí)，先計(jì)算expression，然后返回它的值作為函數(shù)的值，并且將控制邏輯從函數(shù)體內(nèi)返回。例如：

functionsquare(x)

{

returnx*x;//定義一個(gè)函數(shù)square()，計(jì)算x的平方值并返回該計(jì)算結(jié)果

}

return語句的expression可以省略，缺省expression的return語句僅僅是從函數(shù)調(diào)用中返回，不帶任何值。如果一個(gè)函數(shù)執(zhí)行了缺省expression的return語句或者執(zhí)行到函數(shù)主體的尾部而返回，那么它的返回值就是undefined。

JavaScript是否面向?qū)ο?，是一個(gè)一直有爭(zhēng)議的話題，這里也不妄下結(jié)論。有人說JavaScript是一種基于對(duì)象的語言，這種說法基本上是正確的。通常認(rèn)為，面向?qū)ο缶哂腥筇攸c(diǎn)——封裝、繼承、多態(tài)，而“基于對(duì)象”是使用對(duì)象，不一定支持利用現(xiàn)有的對(duì)象模板產(chǎn)生新的對(duì)象類型，也就是說“基于對(duì)象”不要求擁有繼承的特點(diǎn)。4.3JavaScript的面向?qū)ο筇匦远岸鄳B(tài)”更是在繼承的基礎(chǔ)上實(shí)現(xiàn)的。JavaScript是基于對(duì)象(如DOM)的語言，它使用一些封裝好的對(duì)象，調(diào)用對(duì)象的方法，設(shè)置對(duì)象的屬性?！懊嫦?qū)ο蟆焙汀盎趯?duì)象”都實(shí)現(xiàn)了“封裝”的概念，但是“基于對(duì)象”的語言無法從父類中繼承新對(duì)象類型。籠統(tǒng)地說，“基于對(duì)象”也是一種“面向?qū)ο蟆薄?/p>

下面將介紹與JavaScript相關(guān)的面向?qū)ο蠹夹g(shù)，而關(guān)于面向?qū)ο蟊旧砀钊氲膬?nèi)容，可以參考相關(guān)的面向?qū)ο蠓治?、設(shè)計(jì)和開發(fā)教程。4.3.1類和對(duì)象

JavaScript對(duì)象是對(duì)具有相同特性實(shí)體的抽象描述，對(duì)象實(shí)例是具有這些特征的單個(gè)實(shí)體。對(duì)象包含屬性(properties)和方法(methods)兩種。屬性是對(duì)象靜態(tài)特征的描述，是對(duì)象的數(shù)據(jù)，以變量表征；方法是對(duì)象動(dòng)態(tài)特征的描述，也可以是對(duì)數(shù)據(jù)的操作，用函數(shù)描述。JavaScript中的對(duì)象可通過函數(shù)由new運(yùn)算符生成。生成對(duì)象的函數(shù)被稱為類或者構(gòu)造函數(shù)，生成的對(duì)象被稱為類的對(duì)象實(shí)例，簡(jiǎn)稱為對(duì)象。

JavaScript允許給對(duì)象添加任意的屬性和方法，這使得JavaScript對(duì)象變得非常強(qiáng)大。在JavaScript中，幾乎所有的對(duì)象都是同源對(duì)象，它們都繼承自O(shè)bject對(duì)象。一般來說，JavaScript中包含三種對(duì)象：瀏覽器對(duì)象、內(nèi)置對(duì)象和自定義對(duì)象。

通過下面的實(shí)例來說明JavaScript的三種構(gòu)造對(duì)象方法。

(1)第一種方法：newObject。

vara=newobject();

a.x=1,a.y=2;

這種方法是通過實(shí)例化一個(gè)Object來生成對(duì)象，然后通過構(gòu)造基本對(duì)象直接添加屬性的方法來實(shí)現(xiàn)。我們說JavaScript是一種弱類型的語言，一方面體現(xiàn)在JavaScript的變量、參數(shù)和返回值可以是任意類型的，另一方面也體現(xiàn)在JavaScrip可以對(duì)對(duì)象任意添加屬性和方法，這樣無形中就淡化了“類型”的概念。例如：

vara=newObject();

varb=newObject();

a.x=1,a.y=2;

b.x=1,b.y=2,b.z=3;

在這種情況下既沒有辦法說明a、b是同一種類型，也沒辦法說明它們是不同的類型，而在C++

和Java中，變量的類型是很明確的，在聲明時(shí)就已經(jīng)確定了它們的類型和存儲(chǔ)空間。

(2)第二種方法：對(duì)象直接量。

varb={x:1,y:2};

這種方法使用了對(duì)象常量，實(shí)際上可以看成是第一種方法的快捷表示法。

(3)第三種方法：定義類型。

第三種方法是一種比較有趣也比較容易理解的方法：

functionPoint(x,y)

{

this.x=x;

this.y=y;

}

varp1=newPoint(1,2);

varp2=newPoint(3,4);

我們發(fā)現(xiàn)p1和p2是同一種類型的對(duì)象，它們都是Point的實(shí)例，而Point是“類”。4.3.2JavaScript的內(nèi)置對(duì)象

JavaScript核心中提供了豐富的內(nèi)置對(duì)象，除了之前出現(xiàn)的Object對(duì)象外，最常見的有Math對(duì)象、Date對(duì)象、Error對(duì)象、String對(duì)象和RegExp對(duì)象。

1．Math對(duì)象

Math對(duì)象是一個(gè)靜態(tài)對(duì)象，這意味著不能用它來構(gòu)造實(shí)例。程序可以通過調(diào)用Math.sin()這樣的靜態(tài)函數(shù)來實(shí)現(xiàn)一定的功能。Math對(duì)象主要為JavaScript核心提供了對(duì)數(shù)值進(jìn)行代數(shù)計(jì)算的一系列方法以及幾個(gè)重要的數(shù)值常量。表4-8列出了Math對(duì)象的屬性說明；表4-9列出了Math對(duì)象的常用方法。表4-8JavaScript中Math對(duì)象的屬性說明表4-9JavaScript中Math對(duì)象的常用方法注意：調(diào)用Math靜態(tài)方法如果出現(xiàn)數(shù)值計(jì)算錯(cuò)誤，返回值為NaN；其他情況下，返回值為數(shù)值類型計(jì)算結(jié)果。

2．Date對(duì)象

Date對(duì)象是JavaScript中用來表示日期和時(shí)間的數(shù)據(jù)類型。可以通過幾種類型的參數(shù)來構(gòu)造它，最簡(jiǎn)單的形式是缺省參數(shù)如下：

varnow=newDate();

其次可以是依次表示“年”、“月”、“日”、“時(shí)”、“分”、“秒”、“毫秒”的數(shù)值，這些數(shù)值除了“年”和“月”之外，其他的都可以缺省。例如：

vartime=newDate(1999,1,2);

以這種形式構(gòu)造日期時(shí)應(yīng)當(dāng)注意的是，JavaScript中的月份是從0開始計(jì)算的，因此上面的例子構(gòu)造的日期是2月2日，而不是1月2日。

第三種構(gòu)造日期的方式是通過一個(gè)表示日期的字符串，例如：

vard=newDate("1999/01/0212:00:01");//這一次表示的是1月份了

JavaScript為Date對(duì)象提供了許多有用的方法，下面通過一個(gè)例子給出構(gòu)造Date對(duì)象和使用Date對(duì)象方法的示范。

<html>

<head></head>

<body>

<script>

<!--

vartoday=newDate();

varyear=today.getFullYear(); //獲取年份

varmonth=today.getMonth()+1; //JavaScript中月份是從0開始的

vardate=today.getDate(); //獲取當(dāng)月的日期

//表示星期的中文

varweeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

//輸出結(jié)果

document.write("今天是:");

document.write(year);

document.write("年");

document.write(month);

document.write("月");

document.write(date);

document.write("日");

document.write(""+weeks[today.getDay()]);

-->

</script>

</body>

</html>

上述代碼的輸出效果如圖4-2所示。圖4-2JavaScript中Date對(duì)象的運(yùn)行效果圖

3．Error對(duì)象

JavaScript中的Error對(duì)象是用來在異常處理中保存異常信息的。Error對(duì)象包括Error及其派生類的實(shí)例，Error的派生類是EvalError、RangeError、TypeError和SyntaxError。

Error對(duì)象的構(gòu)造函數(shù)只有一個(gè)參數(shù)，它是一個(gè)可以缺省的字符串，用來提供異常的錯(cuò)誤消息。如果傳遞了字符串參數(shù)，該對(duì)象就將它作為message屬性的值，否則它將使用默認(rèn)的字符串作為該屬性的值。如果把Error構(gòu)造函數(shù)當(dāng)作普通函數(shù)來調(diào)用，它的行為也和使用new運(yùn)算符進(jìn)行對(duì)象構(gòu)造時(shí)一樣。默認(rèn)的Error對(duì)象的屬性和方法比較少，主要包括message以及name和toString方法。

Error對(duì)象的name屬性是一個(gè)表明發(fā)生的錯(cuò)誤或者異常類型的字符串，所有的Error對(duì)象都從它們的構(gòu)造函數(shù)中繼承這一屬性。該屬性的默認(rèn)值與構(gòu)造函數(shù)名相同。因此SyntaxError對(duì)象的name屬性值為“SyntaxError”，EvalError對(duì)象的name屬性值為“EvalError”。

Error對(duì)象的toString方法把Error對(duì)象轉(zhuǎn)換成字符串。ECMAScript標(biāo)準(zhǔn)除了規(guī)定該方法的返回值是字符串外，沒有再做其他規(guī)定。尤其是，它不要求返回的字符串包含錯(cuò)誤或錯(cuò)誤消息。

4．String對(duì)象

字符串對(duì)象是JavaScript基本數(shù)據(jù)類型中最復(fù)雜的一種類型，也是使用頻率很高的數(shù)據(jù)類型。String對(duì)象有兩種創(chuàng)建方式：一是直接聲明方式；二是通過構(gòu)造函數(shù)newString()創(chuàng)建一個(gè)新的字符串對(duì)象。例如：

vars1="abcdef";

vars2=newString("Hello,world");

String對(duì)象的屬性不多，常用的是lenth屬性，用于標(biāo)識(shí)字符串的長(zhǎng)度。String對(duì)象的方法比較多，而且功能也比較強(qiáng)大，表4-10列出了String對(duì)象的方法。可以看出，很多函數(shù)是與字符串的顯示有關(guān)的。表4-10JavaScript中String對(duì)象的方法5．RegExp對(duì)象

在JavaScript中，正則表達(dá)式由RegExp對(duì)象表示，它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。每一條正則表達(dá)式模式對(duì)應(yīng)一個(gè)RegExp實(shí)例，有兩種方式可以創(chuàng)建RegExp對(duì)象的實(shí)例，包括：

●使用RegExp的顯示構(gòu)造函數(shù)。其語法規(guī)則如下：

newRegExp("pattern"[,"flags"]);

●使用RegExp的隱式構(gòu)造函數(shù)，采用純文本格式。其語法規(guī)則如下：

/pattern/[flags];

pattern部分為要使用的正則表達(dá)式模式文本，是必需的。在第一種方式中，pattern部分以JavaScript字符串的形式存在，需要使用雙引號(hào)或單引號(hào)括起來；在第二種方式中，pattern部分嵌套在兩個(gè)“/”之間，不能使用引號(hào)。

flags部分設(shè)置正則表達(dá)式的標(biāo)志信息，是可選項(xiàng)。如果設(shè)置flags部分，在第一種方式中，以字符串的形式存在；在第二種方式中，以文本的形式緊接在最后一個(gè)“/”字符之后。flags可以是以下標(biāo)志的組合。

●

g是全局標(biāo)志。如果設(shè)置了這個(gè)標(biāo)志，則在執(zhí)行搜索和替換時(shí)，將對(duì)所有匹配的部分起作用；否則，僅搜索和替換最早匹配的內(nèi)容。

●

i是忽略大小寫標(biāo)志。如果設(shè)置了這個(gè)標(biāo)志，進(jìn)行匹配比較時(shí)，將忽略大小寫。

●

m是多行標(biāo)志。如果不設(shè)置該標(biāo)志，那么元字符“^”只與整個(gè)被搜索字符串的開始位置相匹配，而元字符“$”只與被搜索字符串的結(jié)束位置相匹配。如果設(shè)置了該標(biāo)志，“^”還可以匹配“\n”或“\r”之后的位置(即下一行的行首)，同樣“$”可以匹配“\n”或“\r”之后的位置(即下一行的行尾)。

RegExp對(duì)象的方法如表4-11所示。表4-11JavaScript中RegExp對(duì)象的常用方法下面的例子將實(shí)現(xiàn)用split方法分割字符串，代碼如下：

<html>

<head>

<title></title>

</head>

<body>

<scripttype="text/JavaScript">

<!--

varspitArray=newArray();

varstr="JavaScript、ASP、JSP、Java";

varregex=/、/;

spitArray=str.split(regex);

for(i=0;i<spitArray.length;i++)

document.write(spitArray[i]+"");

//-->

</script>

</body>

</html>

上述代碼的輸出效果如圖4-3所示。

表4-12列出了方括號(hào)在正則表達(dá)式中的使用說明；表4-13給出了元字符在正則表達(dá)式中的使用說明。表4-12正則表達(dá)式中方括號(hào)的使用說明表4-13正則表達(dá)式中元字符的使用說明在正則表達(dá)式中，量詞的作用也是很重要的，表4-14列出了量詞的使用說明，其中n代表某種字符或字符串。表4-14正則表達(dá)式中量詞的使用說明4.3.3異常處理機(jī)制

所謂異常(exception)是一個(gè)信號(hào)，說明當(dāng)前程序發(fā)生了某種意外狀況或者錯(cuò)誤。拋出(throw)一個(gè)異常就是用信號(hào)通知運(yùn)行環(huán)境，程序發(fā)生了某種意外。捕捉(catch)一個(gè)異常就是處理它，采取必要或適當(dāng)?shù)膭?dòng)作從異常狀態(tài)中恢復(fù)。JavaScript異?？偸茄刂{(diào)用堆棧自下向上傳播，直到它被捕獲或者傳播到調(diào)用堆棧頂部為止。被傳播到調(diào)用頂部的異常將會(huì)引發(fā)一個(gè)運(yùn)行時(shí)錯(cuò)誤，從而終止程序的執(zhí)行。

異常通常是由運(yùn)行環(huán)境自動(dòng)引發(fā)的，原因可能是出現(xiàn)了語法錯(cuò)誤，對(duì)一個(gè)錯(cuò)誤的數(shù)據(jù)類型進(jìn)行操作或者其他的一些系統(tǒng)錯(cuò)誤。在JavaScript中，也允許程序明確地拋出某種類型的異常，這個(gè)時(shí)候可以使用throw語句。throw語句的基本形式如下：

throwexpression

expression的值可以是任意類型，但它通常是一個(gè)Error類或者Error子類的一個(gè)實(shí)例。拋出一個(gè)存放錯(cuò)誤信息的字符串或代表某種錯(cuò)誤代碼的數(shù)字也非常有用。

JavaScript的異常處理機(jī)制是非常標(biāo)準(zhǔn)的try/catch/finally模式。try語句定義了需要處理異常的代碼塊，catch從句跟隨在try塊后，當(dāng)try塊內(nèi)某個(gè)部分發(fā)生了異常，catch則能夠“捕獲”它們。由于try從句內(nèi)的語句可以是函數(shù)嵌套，當(dāng)一個(gè)內(nèi)層的函數(shù)調(diào)用發(fā)生異常時(shí)，外層的catch可以捕獲內(nèi)層所有未被捕獲的異常。從調(diào)用堆棧的層次上看，內(nèi)層異常是沿著出棧方向被從內(nèi)往外“拋出”的，因此這種異常處理機(jī)制又被稱為throw-catch機(jī)制。

finally塊一般跟隨在catch從句之后，finally塊的內(nèi)容是不管是否產(chǎn)生異常都會(huì)被執(zhí)行的指令。雖然catch和finally從句都是可選的，但是try從句之后至少應(yīng)當(dāng)有一個(gè)catch塊或finally塊。下面是一個(gè)異常處理的例子。

try{

Bugbugbug//這里將會(huì)引發(fā)一個(gè)SystaxError

}

catch(e){ //產(chǎn)生的SystaxError在這里會(huì)被接住

alert(e);//異常對(duì)象將被按照默認(rèn)的方式顯示出來

}

finally{

alert("finally");//不論如何，程序最終執(zhí)行finally語句

}

4.4.1瀏覽器對(duì)象

JavaScript中包含三種對(duì)象，其中瀏覽器對(duì)象是在開發(fā)網(wǎng)站前臺(tái)程序時(shí)不可或缺的對(duì)象。瀏覽器對(duì)象的結(jié)構(gòu)如圖4-4所示。下面分別介紹兩個(gè)最常用的瀏覽器對(duì)象window對(duì)象和document對(duì)象。4.4JavaScript在瀏覽器中的應(yīng)用

圖4-4瀏覽器對(duì)象的結(jié)構(gòu)

1．window對(duì)象

window對(duì)象是瀏覽器提供的第一類對(duì)象，它的含義是瀏覽器窗口，每個(gè)獨(dú)立的瀏覽器窗口或者窗口中的框架都是用一個(gè)window對(duì)象的實(shí)例來表示的。window對(duì)象是內(nèi)建對(duì)象中的最頂層對(duì)象，它的下層對(duì)象有event對(duì)象、frame對(duì)象和document對(duì)象等，其中最主要的是document對(duì)象，它指的是HTML頁面對(duì)象。

window對(duì)象提供了豐富的屬性和方法。它主要常見的屬性有：name、parent、self、top、status和defaultStatus等；主要方法有：alert()、confirm()、close()、open()、prompt()、setTimeout()和clearTimeout()等。表4-15列舉了window對(duì)象的主要屬性和它們的應(yīng)用說明；表4-16列舉了window對(duì)象的主要方法以及它們的應(yīng)用說明。表4-15window對(duì)象的主要屬性表4-16window對(duì)象的主要方法

window對(duì)象方法中的alert()、prompt()和confirm()方法，用作JavaScript的接口元素，來顯示用戶的輸入，并完成用戶和程序的對(duì)話過程。

alert()：顯示一個(gè)警告框，其中“提示”是可選的，是在警告框內(nèi)輸入內(nèi)容。

confirm()：顯示一個(gè)確認(rèn)框，等待用戶選擇按鈕?！疤崾尽币彩强蛇x的，是在提示框中顯示內(nèi)容，用戶可以根據(jù)提示選擇“確定”或“取消”按鈕。

prompt()：顯示一個(gè)提示框，等待輸入文本，如果選擇“確定”按鈕，則返回文本框中的內(nèi)容；如果選擇“取消”按鈕，則返回一個(gè)空值。它的“提示”和“默認(rèn)值”都是可選的，“默認(rèn)值”是文本框的默認(rèn)值。

下面是一個(gè)window對(duì)象的綜合應(yīng)用案例。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"/TR/html4/loose.dtd">

<html>

<head>

<title>window對(duì)象示例</title>

</head>

<body>

<buttonid="btn"onclick=link("張三")/>

<scripttype="text/JavaScript">

<！--

varbtn=document.getElementById("btn");

btn.value="點(diǎn)擊我";

functionlink(str){

varmyStr=prompt("請(qǐng)輸入姓名");

if(myStr==null){

alert("未獲取任何信息!");

}

elseif(myStr==str){//如果驗(yàn)證姓名輸入正確

varmybool=confirm(myStr+"你好！你想打開新的窗口?");

if(mybool)

window.open("");

else

return;

}

else{

alert("對(duì)不起，用戶名信息錯(cuò)誤！");

}

}

-->

</script>

</body>

</html>

上述代碼說明如下：

(1)prompt()：程序中的varmyStr=prompt("請(qǐng)輸入姓名")語句，如果用戶選擇“確定”按鈕，則在提示框中輸入的數(shù)據(jù)將會(huì)賦值給變量myStr；如果用戶選擇“取消”按鈕，則將默認(rèn)值賦給myStr。它在瀏覽器中的顯示如圖4-5所示。

(2)程序中alert("對(duì)不起，用戶名信息錯(cuò)誤！");在瀏覽器中的顯示如圖4-6所示。

(3)

confirm()：varmybool=confirm(myStr+"你好！你想打開新的窗口?");該確認(rèn)框在瀏覽器中的顯示如圖4-6所示。

(4)程序中window.open("");是調(diào)用了window對(duì)象的open方法，其作用是打開一個(gè)新的窗口。

圖4-5prompt語句的執(zhí)行效果圖

圖4-6confirm語句的執(zhí)行效果圖

2．document對(duì)象

document對(duì)象是瀏覽器的一個(gè)重要對(duì)象，它代表著瀏覽器窗口的文檔內(nèi)容。瀏覽器裝載一個(gè)新的頁面時(shí)，總是初始化一個(gè)新的document對(duì)象。window對(duì)象的document屬性總是引用當(dāng)前已初始化的document元素。

document對(duì)象的屬性可以用來設(shè)置Web頁面的特性，如標(biāo)題、前景色、背景色和超鏈接顏色等。其主要用來設(shè)置當(dāng)前HTML文件的顯示效果。表4-17列舉了document對(duì)象的主要屬性和它們的使用說明。表4-17document對(duì)象的主要屬性

document對(duì)象的方法主要是用于文檔的創(chuàng)建和修改操作，表4-18列舉了document對(duì)象的主要方法和它們的使用說明。表4-18document對(duì)象的主要方法4.4.2JavaScript在DOM中的應(yīng)用方式

DOM(DocumentObjectModel，文檔對(duì)象模型)，是以面向?qū)ο蟮姆绞矫枋龅奈臋n模型。DOM可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)，它是表示和處理一個(gè)HTML或XML文檔的常用方法。DOM定義了表示和修改文檔所需的對(duì)象、對(duì)象的行為和屬性以及它們之間的關(guān)系。根據(jù)W3CDOM規(guī)范，DOM是HTML與XML的應(yīng)用編程接口(API)，DOM將整個(gè)頁面映射為一個(gè)由層次節(jié)點(diǎn)組成的文件。DOM的設(shè)計(jì)是以對(duì)象管理組織(OMG)的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語言。DOM技術(shù)使得用戶頁面可以動(dòng)態(tài)的變化，如，可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等。DOM技術(shù)使得頁面的交互性大大增強(qiáng)。下面構(gòu)建一個(gè)非?；镜木W(wǎng)頁，其代碼如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title></title>

</head>

<body>

<h3>例子</h3>

<ptitle="選擇你最喜歡的運(yùn)動(dòng)">你最喜歡的運(yùn)動(dòng)是?</p>

<ul>

<li>籃球</li>

<li>乒乓球</li>

<li>足球</li>

</ul>

</body>

</html>

上述代碼的輸出效果如圖4-7所示。圖4-7代碼運(yùn)行效果圖可以把上面的HTML描述為一棵DOM樹，在這棵樹中，<h3>、<p>、<ul>

以及<ul>的3個(gè)<li>子節(jié)點(diǎn)都是樹的節(jié)點(diǎn)，可以通過JavaScript中的getElementById或者getElementByTagName方法來獲取元素，這樣得到的元素就是DOM對(duì)象。DOM對(duì)象可以使用JavaScript中的方法和屬性。getElementById方法是通過節(jié)點(diǎn)的id值來獲取該節(jié)點(diǎn)元素，getElementByTagName是通過標(biāo)簽的名稱獲取所有與之相同標(biāo)簽的節(jié)點(diǎn)，返回的是一個(gè)數(shù)組。將上述代碼修改如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title></title>

</head>

<body>

<h3>例子</h3>

<ptitle="選擇你最喜歡的運(yùn)動(dòng)">你最喜歡的運(yùn)動(dòng)是？</p>

<ul>

<li>籃球</li>

<li>乒乓球</li>

<li>足球</li>

</ul>

<divid="dom">

</div>

<scripttype="text/JavaScript"language="JavaScript">

varuls=document.getElementsByTagName("ul");

uls[0].style.listStyle="none";

vardomObj=document.getElementById("dom");

domObj.innerHTML="<h1>hello,world!</h1>"

</script>

</body>

</html>

通過getElementById方法獲取id值為dom的div節(jié)點(diǎn)，然后對(duì)其進(jìn)行相應(yīng)的操作。例如：

vardomObj=document.getElementById("dom");

domObj.innerHTML="<h1>hello,world!</h1>";上述代碼將會(huì)在div中填充相應(yīng)HTML代碼，并且可以通過getElementByTagName獲取標(biāo)簽的節(jié)點(diǎn)。例如：

varuls=document.getElementsByTagName("ul");

uls[0].style.listStyle="none";圖4-8代碼的執(zhí)行效果圖上面代碼獲取所有ul標(biāo)簽的節(jié)點(diǎn)，雖然這里只有一個(gè)ul標(biāo)簽但返回的是一個(gè)數(shù)組，通過對(duì)數(shù)組下標(biāo)的操作可以對(duì)具體標(biāo)簽進(jìn)行操作。上面uls[0]表示對(duì)第一個(gè)ul標(biāo)簽的引用，uls[0].style.listStyle是將ul標(biāo)簽的listStyle樣式修改為none。需要說明的是，通過JavaScript修改HTML標(biāo)簽樣式的時(shí)候，樣式屬性的名稱和CSS中有所區(qū)別。CSS中l(wèi)istStyle樣式對(duì)應(yīng)著list-style，通過JavaScript修改樣式的時(shí)候，應(yīng)該去掉連字符，并且去掉連字符后的每個(gè)首字母必須大寫。修改后的效果如圖4-8所示。

HTML文檔中不同的元素類型分別對(duì)應(yīng)不同類型的DOM節(jié)點(diǎn)，在JavaScript中，這些節(jié)點(diǎn)是作為實(shí)現(xiàn)特定Node接口的DOM對(duì)象來操作的。每個(gè)Node對(duì)象都有一個(gè)nodeType屬性，這些屬