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

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

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

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

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

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

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

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

<scripttype="text/JavaScript">

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

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

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

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

</script>

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

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

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

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

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

</script>

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

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

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

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

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

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

breakcasecatchcontinuedefaultdeletedoelsefinally

forfunctionifinwithnewreturnswitchthisthrow

trytypeofvarvoidwhileinstanceof

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

Abstractbooleanbytecharclassimplementsdebuggerdouble

enumexportextendsfimalfloatgotoconstsynchronized

intinterfacelongmativepackageprivateprotectedpublic

shortstaticsupermportthrowstransientvolatile不同于C/C++

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

varnum=3

或者：

varnum

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

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

1．數(shù)值

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

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

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

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

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

2．字符串

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

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

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

\

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

\'

)來進行轉(zhuǎn)義。反之，當用雙引號來界定字符串時，字符串中如果有雙引號字符，就要使用轉(zhuǎn)義序列(

\"

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

alert('\")；(實際輸出的字符串為一個單引號)

alert("\"\\")；(實際輸出的字符串為一個雙引號和一個反斜線)

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

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

4．數(shù)組

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

可以通過數(shù)組的構(gòu)造函數(shù)Array()來創(chuàng)建一個數(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ù)組對應(yīng)的元素進行初始化，例如上面的語句a[3]=newArray(1,2,3)，使得數(shù)組元素a[3]初始化一個新的數(shù)組，等同于：

a[3]=newArray();

a[3][0]=1;

a[3][1]=2;

a[3][2]=3。

5．對象

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

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

varo=newObject();

vartime=newDate();

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

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

number++

"Hello"+"youarewelcome!"

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

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

1．算術(shù)運算符

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

2．賦值運算符

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

3．邏輯運算符與比較運算符

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

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

4．字符串運算符

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

5．位運算符

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

6．條件運算符

條件運算符是JavaScript中唯一的三目運算符。它的表達式如下：

test?語句1:語句2

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

varnow=newDate();

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

7．逗號運算符

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

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

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

8．對象運算符

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

運算符和

[]

運算符。

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

varpoint={x：1，y：1}； //定義一個對象

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

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

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

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

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

newconstructor(arguments)；

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

<html>

<head>

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

</head>

<body>

<scripttype="text/JavaScript">

<!--

varo=newDate(); //

o是一個Date對象

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

{

this.re=r;

this.im=i;

}

varc=newComplex(1,2); //

c是一個復(fù)數(shù)對象

document.write(o.toLocaleString());

document.write("<br>");

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

-->

</script>

</body>

</html>

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

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

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

vara=newObject()；

a.x=1；

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

varb=[1,2,3]；

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

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

while語句的基本形式如下：

while(expression)

statement

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

vari=10;

while(i--)

{

document.write(i);

}

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

for(initialize;test_expr;increment)

statement

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

initialize;

while(test_expr){

statement;

increment;

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

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

{

document.write(i);

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

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

{

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

}

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

for(variableinobject)

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

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

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

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

if(expression)

statement在這個基本形式中，expression是要被計算的表達式，statement是一個句子或者一個段落。如果計算的結(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語句還具有擴展形式，在擴展形式下，if語句允許帶有else從句，如下：

if(expression)

statement1

else

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

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

if(expression1){

if(expression2)

statement1,2

}

else{

if(expression3){

statement3

}

else

Statement4

}

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

if(expression1){

if(expression2)

statement1,2

}

elseif(expression3){

statement3

}

elseif(expression3){

statement4

}

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

switch(expression)

{statements

}

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

<html>

<head>

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

</head>

<body>

<scripttype="text/JavaScript">

<!--

functionconvert(x){

switch(typeofx){

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

break;

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

break;

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

break;

default:returnx.toString();//直接調(diào)用x的toString()方法進行轉(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)語句，它會使運行的程序立即退出包含在最內(nèi)層的循環(huán)或者switch語句。在本例中，遇到break語句之后就會結(jié)束switch語句，如果沒有break語句程序則會繼續(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)體中，在其他地方使用都會引起系統(tǒng)級別的語法錯誤。執(zhí)行continue語句時，封閉循環(huán)的當前迭代就會被終止，開始執(zhí)行下一次迭代。例如：

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

{

if(i%3!=0)

continue;

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

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

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

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

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

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

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

{函數(shù)體

}

function是JavaScript中定義一個函數(shù)的關(guān)鍵字。函數(shù)名跟在關(guān)鍵字function之后，可以由合法的標識符組成。函數(shù)的參數(shù)列表中多個參數(shù)用逗號分開。下面的代碼說明了聲明式函數(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(){//重新聲明一個新的t1

dwn("newt1...");

}

t1();

t1=function(){

dwn("newt1");

}

t1();

</script>

</body>

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

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

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

returnexpression;

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

functionsquare(x)

{

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

}

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

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

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

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

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

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

(1)第一種方法：newObject。

vara=newobject();

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

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

vara=newObject();

varb=newObject();

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

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

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

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

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

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

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

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

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

functionPoint(x,y)

{

this.x=x;

this.y=y;

}

varp1=newPoint(1,2);

varp2=newPoint(3,4);

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

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

1．Math對象

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

2．Date對象

Date對象是JavaScript中用來表示日期和時間的數(shù)據(jù)類型?？梢酝ㄟ^幾種類型的參數(shù)來構(gòu)造它，最簡單的形式是缺省參數(shù)如下：

varnow=newDate();

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

vartime=newDate(1999,1,2);

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

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

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

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

<html>

<head></head>

<body>

<script>

<!--

vartoday=newDate();

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

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

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

//表示星期的中文

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對象的運行效果圖

3．Error對象

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

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

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

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

4．String對象

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

vars1="abcdef";

vars2=newString("Hello,world");

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

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

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

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

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

/pattern/[flags];

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

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

●

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

●

i是忽略大小寫標志。如果設(shè)置了這個標志，進行匹配比較時，將忽略大小寫。

●

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

RegExp對象的方法如表4-11所示。表4-11JavaScript中RegExp對象的常用方法下面的例子將實現(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列出了方括號在正則表達式中的使用說明；表4-13給出了元字符在正則表達式中的使用說明。表4-12正則表達式中方括號的使用說明表4-13正則表達式中元字符的使用說明在正則表達式中，量詞的作用也是很重要的，表4-14列出了量詞的使用說明，其中n代表某種字符或字符串。表4-14正則表達式中量詞的使用說明4.3.3異常處理機制

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

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

throwexpression

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

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

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

try{

Bugbugbug//這里將會引發(fā)一個SystaxError

}

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

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

}

finally{

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

}

4.4.1瀏覽器對象

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

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

1．window對象

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

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

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

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

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

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

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

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

"/TR/html4/loose.dtd">

<html>

<head>

<title>window對象示例</title>

</head>

<body>

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

<scripttype="text/JavaScript">

<！--

varbtn=document.getElementById("btn");

btn.value="點擊我";

functionlink(str){

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

if(myStr==null){

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

}

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

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

if(mybool)

window.open("");

else

return;

}

else{

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

}

}

-->

</script>

</body>

</html>

上述代碼說明如下：

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

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

(3)

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

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

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

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

2．document對象

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

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

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

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

<ul>

<li>籃球</li>

<li>乒乓球</li>

<li>足球</li>

</ul>

</body>

</html>

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

以及<ul>的3個<li>子節(jié)點都是樹的節(jié)點，可以通過JavaScript中的getElementById或者getElementByTagName方法來獲取元素，這樣得到的元素就是DOM對象。DOM對象可以使用JavaScript中的方法和屬性。getElementById方法是通過節(jié)點的id值來獲取該節(jié)點元素，getElementByTagName是通過標簽的名稱獲取所有與之相同標簽的節(jié)點，返回的是一個數(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="選擇你最喜歡的運動">你最喜歡的運動是？</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é)點，然后對其進行相應(yīng)的操作。例如：

vardomObj=document.getElementById("dom");

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

varuls=document.getElementsByTagName("ul");

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

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