精通JavaScript動(dòng)態(tài)網(wǎng)頁(yè)編程（實(shí)例版）

第1部分　基本語(yǔ)法
第1章　數(shù)據(jù)類(lèi)型轉(zhuǎn)換　3
1.1　自動(dòng)類(lèi)型轉(zhuǎn)換　3
　　在代碼執(zhí)行過(guò)程中，JavaScript會(huì)根據(jù)需要進(jìn)行自動(dòng)類(lèi)型轉(zhuǎn)換。本節(jié)實(shí)例給出了自動(dòng)類(lèi)型轉(zhuǎn)換的方法。本節(jié)代碼主要使用document.write ()語(yǔ)句、邏輯值作為判斷條件。
1.2　顯式類(lèi)型轉(zhuǎn)換　7
　　除自動(dòng)類(lèi)型轉(zhuǎn)換外，有時(shí)候?yàn)榱吮苊庾詣?dòng)轉(zhuǎn)換或不轉(zhuǎn)換產(chǎn)生的不良后果，需要手動(dòng)進(jìn)行顯示的類(lèi)型轉(zhuǎn)換。本節(jié)實(shí)例給出顯示類(lèi)型轉(zhuǎn)換的用法。主要使用String對(duì)象的toLowerCase ()方法、Global對(duì)象的toString()方法、parseInt()方法和parseFloat()方法，以及typeof運(yùn)算符。
1.3　提升基本類(lèi)型為對(duì)象　9
　　每一個(gè)基本數(shù)據(jù)類(lèi)型都存在一個(gè)相應(yīng)的對(duì)象，這些對(duì)象提供了一些很有用的方法用于處理基本數(shù)據(jù)。在需要的時(shí)候，JavaScript會(huì)自動(dòng)將基本數(shù)據(jù)類(lèi)型轉(zhuǎn)換為與之相應(yīng)的對(duì)象。本節(jié)實(shí)例介紹提升基本類(lèi)型為對(duì)象的應(yīng)用方法。主要使用String對(duì)象的length屬性、link ()方法、big ()方法、bold ()方法、fontcolor ()方法、indexOf () 方法、lastIndexOf ()方法和charAt ()方法，另外，還應(yīng)用到了數(shù)組的定義與賦值，以及數(shù)組轉(zhuǎn)換為字符串的join()方法。
第2章　流程控制語(yǔ)句　13
2.1　if語(yǔ)句　13
　　本節(jié)實(shí)例給出if語(yǔ)句及其嵌套語(yǔ)句的使用方法。程序要求用戶輸入一個(gè)數(shù)字，根據(jù)輸入內(nèi)容的不同，給出不同的提示信息。主要使用if語(yǔ)句的嵌套和alert()方法。
2.2　switch語(yǔ)句　16
　　本節(jié)實(shí)例給出switch語(yǔ)句的使用方法。將上一節(jié)的代碼進(jìn)行改寫(xiě)。程序要求用戶輸入一個(gè)數(shù)字，根據(jù)輸入內(nèi)容的不同，給出不同的提示信息。
2.3　while循環(huán)　19
　　本節(jié)實(shí)例給出while語(yǔ)句的使用方法。程序要求用戶輸入行數(shù)和列數(shù)，根據(jù)用戶輸入的內(nèi)容，畫(huà)出相應(yīng)行數(shù)和列數(shù)的表格。本節(jié)代碼主要使用while語(yǔ)句和document.write()方法。
2.4　do-while循環(huán)　22
　　本節(jié)實(shí)例給出do-while循環(huán)語(yǔ)句的使用方法。將上一節(jié)的代碼進(jìn)行適當(dāng)改寫(xiě)，程序要求用戶輸入行數(shù)和列數(shù)，但程序不會(huì)輸出正確的結(jié)果。據(jù)此，讀者可以體會(huì)do-while循環(huán)和while循環(huán)語(yǔ)句的區(qū)別。
2.5　for循環(huán)　25
　　本節(jié)實(shí)例給出for循環(huán)語(yǔ)句及其嵌套的使用方法。將2.3節(jié)的代碼進(jìn)行了改寫(xiě)。程序要求用戶輸入表格的行列數(shù)，根據(jù)輸入內(nèi)容的不同，給出不同的信息。
第3章　數(shù)組　29
3.1　遍歷數(shù)組元素　29
　　數(shù)組是一種特殊的數(shù)據(jù)結(jié)構(gòu)，本節(jié)實(shí)例給出了數(shù)組定義與賦值的方法，同時(shí)給出了數(shù)組元素顯示輸出的方法。主要使用數(shù)組的定義與賦值、數(shù)組元素的顯示輸出，以及Array對(duì)象的length屬性。
3.2　改變數(shù)組元素　32
　　在代碼執(zhí)行過(guò)程中，隨著運(yùn)算環(huán)境的不同，數(shù)組元素會(huì)隨時(shí)進(jìn)行改變。本節(jié)實(shí)例給出了數(shù)組元素改變的方法。主要使用數(shù)組元素賦值、delete操作和數(shù)組長(zhǎng)度重置。
3.3　用對(duì)象的方式實(shí)現(xiàn)數(shù)組　35
　　除用傳統(tǒng)方式進(jìn)行數(shù)組定義與引用外，還可以使用對(duì)象的方式完成。本節(jié)實(shí)例給出了一個(gè)使用對(duì)象的方式實(shí)現(xiàn)數(shù)組的方法示例。主要使用this語(yǔ)句和專(zhuān)門(mén)用于對(duì)象的for...in語(yǔ)句。
3.4　將數(shù)組轉(zhuǎn)換為字符串　36
　　數(shù)組元素可以是多種類(lèi)型的數(shù)據(jù)，但都可以轉(zhuǎn)換為字符串。本節(jié)實(shí)例給出了將數(shù)組轉(zhuǎn)換為字符串的方法。主要使用Array對(duì)象的join ()方法。
3.5　操作數(shù)組元素　38
　　數(shù)組元素可以進(jìn)行多種操作，本節(jié)實(shí)例給出了數(shù)組元素排序、子數(shù)組查找、數(shù)組元素增刪等操作方法。主要使用Array對(duì)象的slice ()方法、sort ()方法和splice ()方法。
3.6　實(shí)現(xiàn)多維數(shù)組　40
　　JavaScript中并沒(méi)有多維數(shù)組的概念，但在實(shí)際應(yīng)用中，會(huì)經(jīng)常用到多維數(shù)組。本節(jié)實(shí)例給出了二維數(shù)組的一種實(shí)現(xiàn)方法，讀者可以將其推廣到多維數(shù)組。本節(jié)代碼中，不包含數(shù)組的更多內(nèi)容，主要使用了“或”運(yùn)算符(||)和isNaN ()方法。
第4章　數(shù)值處理對(duì)象　45
4.1　求平方根　45
　　本節(jié)給出一段求平方根的示例代碼，可以實(shí)現(xiàn)對(duì)整數(shù)、負(fù)數(shù)進(jìn)行求平方根。并且，當(dāng)用戶輸入的內(nèi)容不是數(shù)值時(shí)，還可以進(jìn)行驗(yàn)證。主要使用Math對(duì)象的sqrt(n)和abs(n)方法。
4.2　求質(zhì)數(shù)　47
　　本節(jié)給出一段求質(zhì)數(shù)的方法，可以求出用戶輸入數(shù)值以內(nèi)的所有質(zhì)數(shù)。當(dāng)用戶輸入的值較小或輸入非數(shù)值時(shí)，可以進(jìn)行驗(yàn)證。本節(jié)使用篩選法求質(zhì)數(shù)，主要使用NaN這一特殊的數(shù)值、isNaN()方法和Math對(duì)象的sqrt(n)方法。
4.3　簡(jiǎn)單數(shù)制轉(zhuǎn)換　50
　　本節(jié)給出一段數(shù)制轉(zhuǎn)換的示例代碼，可以實(shí)現(xiàn)JavaScript中任意數(shù)制之間的轉(zhuǎn)換。主要使用JavaScript中數(shù)制與數(shù)制轉(zhuǎn)換的相關(guān)方法。
4.4　數(shù)制轉(zhuǎn)換函數(shù)　53
　　本節(jié)給出一段數(shù)制轉(zhuǎn)換函數(shù)的示例代碼，可以實(shí)現(xiàn)將0～255之間的十進(jìn)制數(shù)轉(zhuǎn)換為十六進(jìn)制表示。
4.5　實(shí)現(xiàn)計(jì)算器　54
　　本節(jié)給出一段可實(shí)現(xiàn)四則運(yùn)算的計(jì)算器的示例代碼，可以實(shí)現(xiàn)基本的算術(shù)四則運(yùn)算。主要使用字符串連接的相關(guān)方法。
第5章　日期時(shí)間應(yīng)用　59
5.1　帶開(kāi)關(guān)的時(shí)鐘　59
　　本節(jié)實(shí)例給出一個(gè)帶開(kāi)關(guān)的時(shí)鐘的實(shí)現(xiàn)方法。通過(guò)按鈕，用戶可以控制時(shí)鐘的顯示與隱藏。主要使用Window對(duì)象的setTimeout()方法和clearTimeout()方法。
5.2　不同風(fēng)格的時(shí)間顯示　61
　　同樣是文本時(shí)鐘，也可以有多種不同的顯示方式。本節(jié)實(shí)例給出了文本時(shí)鐘的6種不同顯示方式。讀者可根據(jù)自己需求，選擇合適的樣式使用。主要使用Date對(duì)象的getYear方法、getMonth方法、getDate方法、getDay方法、getHours方法、getMinutes方法、getSeconds方法。
5.3　倒計(jì)時(shí)效果　64
　　本節(jié)實(shí)例給出一個(gè)倒計(jì)時(shí)效果的實(shí)現(xiàn)方法。可以根據(jù)預(yù)先設(shè)定的時(shí)間進(jìn)行以秒為單位的倒計(jì)時(shí)顯示。主要使用Date構(gòu)造函數(shù)和Math對(duì)象的floor(n)方法。
5.4　模擬時(shí)鐘　66
　　本節(jié)實(shí)例給出一個(gè)模擬時(shí)鐘的實(shí)現(xiàn)方法。由一幅畫(huà)有時(shí)鐘刻度的圖片做表盤(pán)，時(shí)鐘在表盤(pán)上走動(dòng)。主要使用Date對(duì)象的getYear方法、getMonth方法、getDate方法、getDay方法、getHours方法、getMinutes方法、getSeconds方法，以及Math對(duì)象的floor(n)方法和random()方法等。
5.5　顯示農(nóng)歷日期　70
　　本節(jié)實(shí)例給出一個(gè)顯示農(nóng)歷日期的實(shí)現(xiàn)方法。頁(yè)面中，除顯示當(dāng)前的公歷日期及星期外，還顯示當(dāng)前的農(nóng)歷日期。主要使用數(shù)組與字符串的定義、元素遍歷與引用、length屬性等。
5.6　溫度計(jì)樣式時(shí)鐘　74
　　本節(jié)實(shí)例給出一個(gè)溫度計(jì)樣式時(shí)鐘的實(shí)現(xiàn)方法。分別使用3個(gè)水平條來(lái)表示時(shí)、分、秒，本例中的時(shí)鐘是活動(dòng)的。主要使用Date對(duì)象的getHours方法、getMinutes方法、getSeconds方法和“?:”運(yùn)算符。
5.7　位置固定的時(shí)鐘　79
　　本節(jié)實(shí)例給出一個(gè)位置固定的時(shí)鐘的實(shí)現(xiàn)方法。無(wú)論如何調(diào)整窗口的大小，該時(shí)鐘時(shí)鐘位于當(dāng)前窗口的右下角。主要使用Date對(duì)象的getHours方法、getMinutes方法、getSeconds方法和Math.PI屬性、Math.sin()方法、Math.cos()方法，以及String對(duì)象的split方法。
第2部分　事件處理
第6章　事件綁定與事件觸發(fā)　87
6.1　HTML事件綁定　87
　　HTML支持對(duì)絕大多數(shù)元素進(jìn)行事件綁定，這些綁定通常作為元素的屬性使用，例如onclick與onmouseover，可以使用等號(hào)與JavaScript進(jìn)行連接。當(dāng)與之綁定的對(duì)象有事件發(fā)生時(shí)，就會(huì)執(zhí)行相應(yīng)的JavaScript代碼。本節(jié)實(shí)例實(shí)現(xiàn)了HTML事件綁定。
6.2　非標(biāo)準(zhǔn)事件綁定　91
　　在web頁(yè)面中，事件的綁定可以由多種方式實(shí)現(xiàn)，本節(jié)實(shí)例給出了非標(biāo)準(zhǔn)事件綁定的實(shí)現(xiàn)方法。主要使用IE中的非標(biāo)準(zhǔn)事件綁定。
6.3　事件處理器綁定　93
　　在事件處理過(guò)程中，可以直接將事件綁定到事件處理器。本節(jié)實(shí)例給出了直接將事件綁定到事件處理器的一個(gè)示例。
6.4　使用函數(shù)　94
　　使用JavaScript同樣可以綁定事件處理器。尤其對(duì)于較為復(fù)雜的事件，通常使用JavaScript函數(shù)完成，然后通過(guò)表單的某些事件調(diào)用該函數(shù)。本節(jié)實(shí)例給出了一個(gè)使用函數(shù)的示例。
6.5　直接在表單上調(diào)用事件　96
　　本節(jié)實(shí)例給出了在表單上直接調(diào)用事件的方法，同時(shí)使用單獨(dú)的JavaScript語(yǔ)句自動(dòng)調(diào)用事件。
第7章　DOM中的事件處理　99
7.1　事件流　99
　　本節(jié)給出一段DOM事件流的示例代碼，可以顯示事件流的實(shí)現(xiàn)過(guò)程，同時(shí)，還顯示完成該事件流所使用的JavaScript代碼。主要使用innerHTML 屬性、HTML的 pre 標(biāo)簽、HTML字符實(shí)體等內(nèi)容。
7.2　DOM2鼠標(biāo)事件　102
　　本節(jié)給出一段DOM2 鼠標(biāo)事件的示例代碼，可以實(shí)現(xiàn)對(duì)鼠標(biāo)單擊事件的捕獲，同時(shí)，還能對(duì)鍵盤(pán)功能鍵的變化進(jìn)行識(shí)別。主要使用Event對(duì)象及其附加屬性。
7.3　取消默認(rèn)動(dòng)作　105
　　本節(jié)給出一段取消默認(rèn)動(dòng)作的示例代碼，超級(jí)鏈接的不會(huì)跳轉(zhuǎn)，但其單擊事件仍然會(huì)被激活。主要使用Event對(duì)象的preventDefault方法和Window對(duì)象的document.get ElementById()方法。
7.4　創(chuàng)建DOM2事件　107
　　本節(jié)給出一段創(chuàng)建DOM2事件的示例代碼，可以檢測(cè)鼠標(biāo)位置，還可對(duì)當(dāng)前節(jié)點(diǎn)及其雙親節(jié)點(diǎn)與兄弟節(jié)點(diǎn)進(jìn)行判斷。主要使用document.createEvent()創(chuàng)建人工事件。
第8章　事件處理應(yīng)用　111
8.1　頁(yè)面預(yù)覽　111
　　在Web頁(yè)面中，可以在打開(kāi)一個(gè)鏈接頁(yè)面前對(duì)該頁(yè)面進(jìn)行預(yù)覽。本節(jié)實(shí)例給出一種頁(yè)面預(yù)覽的實(shí)現(xiàn)方法。使用了onMouseOver事件和src屬性。
8.2　圖像切換　114
　　本節(jié)實(shí)例給出一個(gè)圖像切換的方法，當(dāng)鼠標(biāo)移動(dòng)到某個(gè)圖像時(shí)，該圖像會(huì)切換為另一幅圖像；當(dāng)鼠標(biāo)離開(kāi)該圖像后，又換會(huì)原來(lái)的圖像。主要使用onMouseOver事件、onMouseOut事件和HTML中 img 標(biāo)簽src屬性。
8.3　點(diǎn)亮文本　115
　　當(dāng)鼠標(biāo)移動(dòng)到某段文字時(shí)，可以對(duì)該段文字進(jìn)行放大或縮小，以增強(qiáng)顯示效果。本節(jié)給出對(duì)文字進(jìn)行放大顯示的實(shí)例。主要使用了onMouseOver和onMouseOut事件，以及style.color屬性和style.fontsize屬性。
8.4　鼠標(biāo)跟隨　119
　　本節(jié)給出一幅gif動(dòng)畫(huà)圖像，當(dāng)鼠標(biāo)移動(dòng)時(shí)，該圖像會(huì)隨鼠標(biāo)移動(dòng)。移動(dòng)過(guò)程中，該gif動(dòng)畫(huà)仍將繼續(xù)活動(dòng)。
8.5　鼠標(biāo)感應(yīng)　122
　　鼠標(biāo)的移動(dòng)也可以觸發(fā)一定的事件發(fā)生。本節(jié)實(shí)例給出一個(gè)對(duì)鼠標(biāo)移動(dòng)進(jìn)行感應(yīng)的例子，完成顯示圖像和圖像清晰度變化的動(dòng)作。
8.6　禁用鼠標(biāo)按鍵　124
　　為了防止網(wǎng)頁(yè)內(nèi)容被復(fù)制，網(wǎng)上經(jīng)?？梢杂龅浇檬髽?biāo)右鍵的網(wǎng)頁(yè)。本節(jié)實(shí)例給出一個(gè)禁用鼠標(biāo)左鍵和右鍵的示例，不論單擊鼠標(biāo)的哪個(gè)按鍵，都將執(zhí)行預(yù)定的操作。主要使用了onmousedown事件和event.button屬性。
第3部分　文字處理
第9章　文字移動(dòng)　129
9.1　文字的垂直滾動(dòng)　129
　　本節(jié)給出一段文字垂直滾動(dòng)的示例代碼，頁(yè)面中，一段文字自下而上逐字滾動(dòng)顯示。在實(shí)際應(yīng)用中，也可去掉文字周?chē)娠@示的邊框。
9.2　文字的漸隱漸顯　132
　　本節(jié)給出一段文字漸隱漸顯的示例代碼，文字顏色逐漸由深變淺，隨后又由淺變深，給人漸隱漸顯的效果。主要使用了子字符串截取方法substring()和瀏覽器版本檢測(cè)navigator.appVersion。
9.3　文字的閃爍顯示　134
　　本節(jié)給出一段文字閃爍顯示的示例代碼，窗口中的文字在兩種不同狀態(tài)間不停轉(zhuǎn)換，給人閃爍的感覺(jué)。主要使用了CSS中設(shè)置文字濾鏡效果的方法。
9.4　文字的隨意拖動(dòng)　136
　　本節(jié)給出一段文字隨意拖動(dòng)的示例代碼，頁(yè)面中的一行文字作為一個(gè)整體，可以使用鼠標(biāo)，將該段文字在頁(yè)面窗口中隨意拖動(dòng)。主要使用了Style對(duì)象的pixelTop屬性和pixelLeft屬性。
9.5　文字的墜落顯示　138
　　本節(jié)給出一段文字墜落顯示的示例代碼，單擊“開(kāi)始顯示”按鈕后，文字逐個(gè)從上一行墜落到下一行。主要使用了子字符串截取方法substring()。
9.6　頁(yè)面內(nèi)飄動(dòng)的文字　140
　　本節(jié)給出一段文字在頁(yè)面內(nèi)飄動(dòng)的示例代碼，可以實(shí)現(xiàn)一行文字在頁(yè)面內(nèi)規(guī)則飄動(dòng)的顯示效果。主要使用了Math對(duì)象的floor()方法和String對(duì)象的length屬性。
9.7　漫天飛舞的文字　145
　　本節(jié)給出一段文字漫天飛舞的示例代碼，文字從頁(yè)面中心位置噴涌而出，隨后在頁(yè)面飛舞，持續(xù)不斷。主要使用了Math對(duì)象的sin(n)和cos(n)方法。
9.8　文字下落效果　149
　　本節(jié)給出一段實(shí)現(xiàn)文字下落效果的示例代碼，文字從瀏覽器頂端依次落下，落在瀏覽器窗口中的固定位置，最后排成一排。
第10章　文字色彩與形狀　155
10.1　霓虹燈文字　155
　　本節(jié)給出一段實(shí)現(xiàn)霓虹燈效果文字的示例代碼，頁(yè)面中的文字自左至右逐個(gè)先變紅再變藍(lán)，給人霓虹燈的感覺(jué)。主要使用了Navigator對(duì)象的appName屬性、String對(duì)象的charAt()方法和length屬性。
10.2　色彩漸變　158
　　本節(jié)給出一段實(shí)現(xiàn)文字色彩漸變的示例代碼，一行文本中的字符顏色由深變淺，再由淺變深。主要使用了String對(duì)象的substr方法和substring方法。
10.3　文字的漸大漸小　160
　　本節(jié)給出一段文字漸大漸小顯示的示例代碼，在同一行中，文本逐漸由小變大，再由大變小，如此反復(fù)。主要使用了String對(duì)象的substring方法和length屬性。
10.4　文字大小動(dòng)態(tài)變化　162
　　本節(jié)給出一段文字大小動(dòng)態(tài)變化的示例代碼，單行文本中的字符自左至右依次由大變小再變大。主要使用了String對(duì)象的substring方法和Math對(duì)象的sin(n)方法和abs(n)方法。
10.5　文字變色顯示　164
　　本節(jié)給出一段文字變色顯示的示例代碼，頁(yè)面自左至右滾動(dòng)顯示文本，滾動(dòng)過(guò)程中，文本中各文字的顏色不斷變化。主要使用了String對(duì)象的substring方法、length屬性和innerHTML屬性。
10.6　打字效果顯示　167
　　本節(jié)給出一段打字效果顯示文字的示例代碼，頁(yè)面出現(xiàn)類(lèi)似打字顯示的文本，顯示過(guò)程中，各文字的顏色不斷變化。主要使用了String對(duì)象的charAt()方法和slice()方法。
第11章　文字顯示　171
11.1　隨機(jī)顯示　171
　　本節(jié)實(shí)例給出隨機(jī)顯示文字的實(shí)現(xiàn)方法。當(dāng)用戶刷新頁(yè)面時(shí)，會(huì)顯示不同的文字。應(yīng)用在網(wǎng)頁(yè)中，可以實(shí)現(xiàn)隨機(jī)提示和提醒，或者隨頁(yè)面的刷新顯示不同的警句和格言等。主要使用了new運(yùn)算符以及Math對(duì)象的floor(n)方法和random()方法。
11.2　打字效果　173
　　本節(jié)實(shí)例實(shí)現(xiàn)頁(yè)面文字的打字輸出效果。當(dāng)載入頁(yè)面時(shí)，預(yù)先設(shè)定的文字就會(huì)以打字效果逐個(gè)輸出。每個(gè)字符輸出完畢，其后都緊跟一個(gè)光標(biāo)符號(hào)。主要用到數(shù)組元素的引用，String對(duì)象的substring ()方法，Window對(duì)象的setTimeout()方法，以及字符串的length屬性。
11.3　UBB代碼實(shí)例　176
　　本節(jié)實(shí)例給出一個(gè)通用的UBB代碼實(shí)例。讀者可以只簡(jiǎn)單修改網(wǎng)頁(yè)元素的布局，就可以直接應(yīng)用在自己的網(wǎng)頁(yè)中。本節(jié)代碼雖長(zhǎng)，但應(yīng)用的內(nèi)容不多。主要包括：字符串的連接操作、邏輯值直接作為判斷條件、多種HTML標(biāo)簽的JavaScript輸出。
11.4　從右至左排列的文字　188
　　有些文字，例如阿拉伯文、希伯來(lái)文等，文字是從右至左排列的，本節(jié)實(shí)例給出實(shí)現(xiàn)從右至左排列文字效果的方法。在實(shí)例中，讀者可以看到不同的“右－左”效果。既可用于制作外文網(wǎng)站，又可用于中文網(wǎng)頁(yè)，增強(qiáng)顯示效果。主要用到字符串以及HTML的 bdo 標(biāo)簽和“dir='rtl'”屬性。
11.5　古漢語(yǔ)文字排版　190
　　古漢語(yǔ)的書(shū)寫(xiě)習(xí)慣是：文字“上－下”排列，段落“右－左”排列。本節(jié)實(shí)例實(shí)現(xiàn)古漢語(yǔ)文字的這種排版方式。使用這種方式，可以作出古色古香的Web頁(yè)面。主要使用了JavaScript的數(shù)組以及HTML的“ pre ”標(biāo)簽和“writing-mode:tb-rl;”屬性。
11.6　從上到下、從左到右排列的文字排版　192
　　有的文字是自上而下書(shū)寫(xiě)，下一列文字書(shū)寫(xiě)在前一列文字的右側(cè)，與古漢語(yǔ)的書(shū)寫(xiě)習(xí)慣正好相反。這種排版，用高級(jí)語(yǔ)言中實(shí)現(xiàn)比較容易，但在Web頁(yè)面中有一定難度。本節(jié)實(shí)例實(shí)現(xiàn)了這種排版，希望對(duì)有興趣的讀者起到一定的幫助作用。
第4部分　頁(yè)面與表格
第12章　文檔處理　199
12.1　文檔顏色設(shè)置　199
　　本節(jié)允許用戶修改頁(yè)面背景、文字、超級(jí)鏈接等元素的顏色值。主要使用了與文檔顏色有關(guān)的Document屬性、with語(yǔ)句等。
12.2　上次修改時(shí)間　202
　　網(wǎng)頁(yè)設(shè)計(jì)中，出于某些應(yīng)用上的需求，經(jīng)常會(huì)用到“文檔上次修改時(shí)間”的信息。本節(jié)給出一個(gè)相關(guān)的實(shí)例。主要使用了Document對(duì)象的lastModified屬性。
12.3　DOM 1中的文檔屬性與聚集　204
　　本節(jié)給出一個(gè)DOM 1中文檔屬性與聚集應(yīng)用的示例，允許用戶向頁(yè)面中添加預(yù)定的HTML元素或內(nèi)容。主要使用了createElement()方法和document.getElementsByName()方法。
12.4　訪問(wèn)HTML元素屬性　207
　　本節(jié)給出一段訪問(wèn)HTML元素屬性的示例代碼，可以實(shí)現(xiàn)對(duì)文本對(duì)齊方式的動(dòng)態(tài)改變。
第13章　頁(yè)面處理　209
13.1　按位置訪問(wèn)元素　209
　　本節(jié)給出一段按位置訪問(wèn)頁(yè)面元素的示例代碼，可以實(shí)現(xiàn)對(duì)頁(yè)面表單元素及其內(nèi)容的動(dòng)態(tài)讀取。
13.2　按名稱(chēng)訪問(wèn)元素　211
　　本節(jié)給出一段按名稱(chēng)訪問(wèn)頁(yè)面元素的示例代碼，可以實(shí)現(xiàn)對(duì)頁(yè)面表單元素及其內(nèi)容的動(dòng)態(tài)讀取。
13.3　動(dòng)態(tài)修改元素內(nèi)容　214
　　本節(jié)給出一段動(dòng)態(tài)修改頁(yè)面元素內(nèi)容的示例代碼，可以實(shí)現(xiàn)對(duì)頁(yè)面元素內(nèi)容的動(dòng)態(tài)修改和顯示。
13.4　改變 div 的內(nèi)容　216
　　本節(jié)給出一段動(dòng)態(tài)改變頁(yè)面 div 內(nèi)容的示例代碼，可以通過(guò)對(duì)用戶選擇的響應(yīng)，在 div 中動(dòng)態(tài)顯示不同的內(nèi)容。
13.5　改變頁(yè)面樣式　218
　　本節(jié)給出一段動(dòng)態(tài)改變頁(yè)面樣式的示例代碼，通過(guò)對(duì)用戶不同選擇的響應(yīng)，動(dòng)態(tài)改變頁(yè)面元素的排列樣式。主要使用了with語(yǔ)句。
第14章　DOM中的節(jié)點(diǎn)操作　223
14.1　節(jié)點(diǎn)插入與追加　223
　　本節(jié)給出一段節(jié)點(diǎn)插入與追加的示例代碼，可以實(shí)現(xiàn)在頁(yè)面中某節(jié)點(diǎn)前或節(jié)點(diǎn)后插入新的節(jié)點(diǎn)。主要使用了Node(節(jié)點(diǎn))對(duì)象的insertBefore(newChild,referenceChild)方法和appendChild(newChild)方法。
14.2　節(jié)點(diǎn)復(fù)制　226
　　本節(jié)給出一段節(jié)點(diǎn)復(fù)制的示例代碼，可以實(shí)現(xiàn)對(duì)節(jié)點(diǎn)的復(fù)制和深度復(fù)制。主要使用了節(jié)點(diǎn)的復(fù)制和深度復(fù)制兩個(gè)概念。
14.3　節(jié)點(diǎn)刪除與替換　228
　　本節(jié)給出一段節(jié)點(diǎn)刪除與替換的示例代碼，可以實(shí)現(xiàn)對(duì)文檔中指定節(jié)點(diǎn)進(jìn)行替換或刪除等操作。主要使用了Node對(duì)象的removeChild(child)方法和replaceChild(newChild, oldChild)方法。
14.4　修改節(jié)點(diǎn)內(nèi)容　230
　　本節(jié)給出一段修改節(jié)點(diǎn)內(nèi)容的示例代碼，可以實(shí)現(xiàn)對(duì)文檔中的節(jié)點(diǎn)進(jìn)行插入、刪除、替換、修改等多種操作。
第15章　表格處理　233
15.1　HTML中的表格　233
　　本節(jié)給出一段HTML中的表格的示例代碼，幾乎用到了HTML表格的各種常見(jiàn)屬性。本節(jié)代碼并不涉及JavaScript代碼，但對(duì)于后面幾節(jié)的深入介紹是有幫助的。
15.2　設(shè)置表格屬性　236
　　本節(jié)給出一段設(shè)置表格屬性的示例代碼，可以實(shí)現(xiàn)對(duì)表格對(duì)齊方式、背景色、邊框粗細(xì)、邊框顯隱、內(nèi)外邊距等屬性的動(dòng)態(tài)設(shè)置。
15.3　操作表格元素　239
　　本節(jié)給出一段操作表格元素的示例代碼，可以實(shí)現(xiàn)對(duì)表格元素的任意刪除，還可以在表格中添加行。
15.4　操作表元　243
　　本節(jié)給出一段操作表元的示例代碼，除完成對(duì)表格行、列的刪除和插入操作外，還可以向表格的單元格中添加相應(yīng)的內(nèi)容。除使用了操作表格元素的相關(guān)方法外，主要使用了表元操作的方法。
第5部分　表單與窗口
第16章　簡(jiǎn)單的表單驗(yàn)證　251
16.1　驗(yàn)證輸入內(nèi)容是否為空　251
　　在Web頁(yè)面中，經(jīng)常需要驗(yàn)證用戶是否進(jìn)行了輸入。本節(jié)給出一個(gè)驗(yàn)證輸入內(nèi)容是否為空的實(shí)例，當(dāng)用戶未進(jìn)行輸入或輸入為空時(shí)，將給出提示信息。主要使用了null、“==”和“||”運(yùn)算符、轉(zhuǎn)義字符等內(nèi)容。
16.2　驗(yàn)證E-mail地址　253
　　E-mail地址包含特定的字符“@”和“.”，并且“@”出現(xiàn)在“.”之前。本節(jié)給出一個(gè)驗(yàn)證E-mail地址是否有效的實(shí)例。主要使用了字符串對(duì)象的charAt()方法、length()方法、indexOf()方法、lastIndexOf()方法。
16.3　電話號(hào)碼檢測(cè)　256
　　電話號(hào)碼由數(shù)字0～9、左右括號(hào)“(”和“)”、加號(hào)“+”和減號(hào)“-”等組成，本節(jié)給出一個(gè)電話號(hào)碼檢測(cè)的實(shí)例。主要使用了字符串對(duì)象的charAt()方法、length屬性、indexOf()方法。
第17章　表單驗(yàn)證高級(jí)應(yīng)用　259
17.1　混合表單驗(yàn)證　259
　　在實(shí)際應(yīng)用中，經(jīng)常綜合多種不同的表單進(jìn)行驗(yàn)證，例如：輸入是否為空、輸入是否數(shù)字、密碼是否太長(zhǎng)或太短等。本節(jié)給出一個(gè)混合表單驗(yàn)證的實(shí)例。主要使用了正則表達(dá)式進(jìn)行數(shù)據(jù)格式的驗(yàn)證、字符串對(duì)象的length屬性、非運(yùn)算符“!”。
17.2　onchange事件　263
　　要驗(yàn)證一個(gè)表單域，不必等到表單提交后再進(jìn)行。在用戶改變其內(nèi)容后，通過(guò)使用onchange事件處理器，可立即對(duì)域進(jìn)行驗(yàn)證。本節(jié)給出一個(gè)應(yīng)用onchange事件的示例。
17.3　按鍵屏蔽　264
　　在實(shí)際應(yīng)用中，往往需要屏蔽用戶的部分輸入。例如，在應(yīng)當(dāng)輸入數(shù)字的位置，只接收數(shù)字的輸入，對(duì)其他內(nèi)容的輸入，則進(jìn)行屏蔽。本節(jié)給出一個(gè)按鍵屏蔽的實(shí)例。主要使用了onkeypress事件。
第18章　打開(kāi)與關(guān)閉窗口　269
18.1　打開(kāi)窗口　269
　　打開(kāi)新的瀏覽器窗口的方法很多，本節(jié)給出一個(gè)打開(kāi)新窗口的實(shí)例，實(shí)現(xiàn)了用4種不同的方法打開(kāi)新的窗口。主要使用了Window對(duì)象的open()方法、 body 標(biāo)簽的onload屬性，以及HTML中的無(wú)序列表。
18.2　關(guān)閉窗口　271
　　本節(jié)給出一個(gè)關(guān)閉窗口的實(shí)例，不僅可以將已打開(kāi)的窗口關(guān)閉，還可對(duì)新窗口的各種不同狀態(tài)進(jìn)行檢測(cè)。主要使用了Window對(duì)象的close()方法和closed屬性。
18.3　窗口寫(xiě)入　273
　　本節(jié)給出一段窗口寫(xiě)入的示例代碼，可以打開(kāi)一個(gè)新的窗口，在其中顯示一些預(yù)先寫(xiě)入的內(nèi)容。主要使用了Window對(duì)象的document.writeln()方法。
18.4　窗口交互　275
　　在上一節(jié)的基礎(chǔ)上，本節(jié)給出一個(gè)窗口交互的實(shí)例，可以隨時(shí)手動(dòng)向新窗口中添加新的內(nèi)容。主要使用了DOM窗口寫(xiě)入的方法和Window對(duì)象的focus()方法。
18.5　提示與警告對(duì)話框　277
　　對(duì)話框是響應(yīng)用戶某種需求而彈出的小窗口，本節(jié)給出常見(jiàn)對(duì)話框使用的示例。主要使用了警告對(duì)話框、確認(rèn)對(duì)話框和提示對(duì)話框。
第19章　窗口控制　281
19.1　窗口移動(dòng)　281
　　本節(jié)給出一段窗口移動(dòng)的示例代碼，可以實(shí)現(xiàn)移動(dòng)窗口在屏幕上位置的改變。位置改變時(shí)，既可以逐漸位移，也可一步到位。主要使用了window.moveBy()方法和window.moveTo()方法。
19.2　改變大小　284
　　本節(jié)給出一段改變窗口大小的示例代碼，可以實(shí)現(xiàn)對(duì)窗口大小進(jìn)行調(diào)整。調(diào)整大小時(shí)，既可以逐漸改變，也可一步到位。主要使用了window.resizeBy()方法和window. resizeTo()方法。
19.3　窗口滾動(dòng)　287
　　窗口滾動(dòng)指的是對(duì)窗口滾動(dòng)條的滾動(dòng)。本節(jié)給出一段窗口滾動(dòng)的示例代碼，可以實(shí)現(xiàn)對(duì)窗口水平滾動(dòng)條和垂直滾動(dòng)條的控制。窗口滾動(dòng)時(shí)，既可以逐漸改變，也可一步到位。主要使用了window.scrollBy()方法和window.scrollTo()方法。
19.4　設(shè)置超時(shí)　290
　　可以設(shè)置一個(gè)窗口在某段時(shí)間后執(zhí)行何種操作，稱(chēng)為設(shè)置超時(shí)。本節(jié)給出一個(gè)設(shè)置超時(shí)的實(shí)例，可以在一定時(shí)間后關(guān)閉瀏覽器，也可取消超時(shí)設(shè)置。主要使用了Window對(duì)象的setTimeout()方法和clearTimeout()方法。
19.5　窗口事件　291
　　Window對(duì)象支持很多事件，但是絕大多數(shù)不是通用的。本節(jié)給出一個(gè)窗口事件的代碼實(shí)例，介紹通用窗口事件的用法。
19.6　IE窗口擴(kuò)展　293
　　IE支持一些特殊類(lèi)型的窗口。本節(jié)實(shí)例給出模式窗口、無(wú)模式窗口與彈出窗口的使用。同時(shí)還能夠?qū)棾龃翱谶M(jìn)行關(guān)閉或隱藏。
第20章　框架操作　297
20.1　訪問(wèn)框架　297
　　本節(jié)給出一個(gè)訪問(wèn)框架的實(shí)例?？蚣懿捎昧硕嗉?jí)嵌套形式，以便使讀者更好地理解框架的命名與引用。主要使用了框架命名與引用的相關(guān)方法。
20.2　內(nèi)聯(lián)框架　300
　　內(nèi)聯(lián)框架又稱(chēng)嵌入式框架，是框架和頁(yè)面內(nèi)容混排的一種方式。本節(jié)給出一個(gè)嵌入式框架的實(shí)例。主要使用了嵌入式框架命名與引用的相關(guān)方法。
20.3　框架間的交叉通信　302
　　在不同框架之間進(jìn)行交叉通信，是框架的高級(jí)應(yīng)用。本節(jié)給出一段框架間交叉通信的示例代碼，在一個(gè)框架中的運(yùn)算，其結(jié)果將顯示在另一個(gè)框架中。主要使用了框架之間的交叉引用方法。
20.4　嵌套框架交叉通信　304
　　本節(jié)給出一段求平方根的示例代碼，可以實(shí)現(xiàn)對(duì)整數(shù)、負(fù)數(shù)進(jìn)行求平方根。并且，當(dāng)用戶輸入的內(nèi)容不是數(shù)值時(shí)，還可以進(jìn)行驗(yàn)證。主要使用了Frame對(duì)象的相關(guān)屬性。
第6部分　圖像與視頻
第21章　圖像顯示　311
21.1　圖片的隨機(jī)顯示　311
　　本節(jié)給出一段圖片的隨機(jī)顯示的示例代碼。頁(yè)面出現(xiàn)一幅圖像，不斷刷新頁(yè)面，則頁(yè)面中的圖像不斷變化。主要使用了Math對(duì)象的random()方法和round()方法。
21.2　圖像顯隱　313
　　本節(jié)給出一段圖像顯示和隱藏的示例代碼，程序中出現(xiàn)一幅圖像，不斷刷新頁(yè)面，頁(yè)面中的圖像不斷顯隱交替變化。主要使用了setTimeout()方法、clearTimeout()方法、innerHtml屬性、length屬性和CSS濾鏡的alpha屬性。
21.3　圖像滾動(dòng)顯示　316
　　本節(jié)給出一段圖像滾動(dòng)顯示的示例代碼，頁(yè)面出現(xiàn)兩組圖像，兩組圖像分別沿水平方向和垂直方向滾動(dòng)顯示。主要使用了setTimeout()方法、onmouseover事件與onmouseout事件、Math對(duì)象的floor(n)方法、sin(n)方法、cos(n)方法、ceil(n)方法、random()方法，以及和網(wǎng)頁(yè)元素坐標(biāo)位置及尺寸等應(yīng)用。
21.4　探照燈掃描　323
　　本節(jié)給出一段探照燈掃描顯示圖像的示例代碼，頁(yè)面出現(xiàn)一幅圖像，圖像上有光圈左右晃動(dòng)，如同探照燈。主要使用了String對(duì)象的length屬性和CSS濾鏡中l(wèi)ight的相關(guān)屬性。
21.5　多幅圖像翻頁(yè)顯示　326
　　本節(jié)給出一段多幅圖像翻頁(yè)顯示的示例代碼，頁(yè)面出現(xiàn)幾幅圖像，右邊的圖像以翻書(shū)的效果依次轉(zhuǎn)到左邊顯示。主要使用了Window對(duì)象的setTimeout()方法和clearTimeout()方法、Location對(duì)象、onmouseover事件和onmouseout事件、Math對(duì)象的PI屬性、sin(n)方法、cos(n)方法、round(n)方法和abs(n)方法。
21.6　水紋效果顯示　331
　　本節(jié)給出一段水紋效果顯示圖像的示例代碼，頁(yè)面內(nèi)交替出現(xiàn)多幅圖像。圖像轉(zhuǎn)換過(guò)程中，出現(xiàn)類(lèi)似水紋的效果。主要使用了Window對(duì)象的setTimeout()方法和clearTimeout()方法、 innerHtml屬性、CSS濾鏡中wave的相關(guān)屬性。
21.7　全景圖效果　335
　　本節(jié)給出一段全景圖效果顯示圖像的示例代碼，頁(yè)面出現(xiàn)一個(gè)表格框，其中顯示多幅圖像，每幅圖像都自右至左滾動(dòng)，且都以全景圖形式顯示。主要使用了Marquee對(duì)象的相關(guān)屬性與方法。
21.8　手電效果　337
　　本節(jié)給出一段手電效果顯示圖像的示例代碼，頁(yè)面出現(xiàn)一幅較暗的圖像，鼠標(biāo)在圖像上移動(dòng)時(shí)，所到之處都會(huì)變亮，而離開(kāi)后又會(huì)變暗。主要使用了CSS中的cursor屬性、CSS濾鏡中l(wèi)ight的相關(guān)屬性。
21.9　雷達(dá)顯示效果　340
　　本節(jié)給出一段圖像雷達(dá)顯示效果的示例代碼，自圖像中心為圓心的一個(gè)扇形按順時(shí)針滑過(guò)圖像，所到之處，圖像變亮，離開(kāi)后又變暗。主要使用了document對(duì)象的cookie屬性、String對(duì)象的split()方法、length屬性、substring()方法、indexOf()方法。
第22章　圖像運(yùn)動(dòng)與事件　345
22.1　圖像拖動(dòng)　345
　　本節(jié)給出一段圖像拖動(dòng)的示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)兩幅圖像，使用鼠標(biāo)拖動(dòng)其中的一幅圖像，可以將其在窗口中拖動(dòng)。主要使用了onmouseMove事件和event.button屬性。
22.2　按鈕控制　347
　　本節(jié)給出一段按鈕控制圖像的示例代碼。運(yùn)行該程序后，頁(yè)面出現(xiàn)兩幅圖像，使用鼠標(biāo)拖動(dòng)其中的一幅圖像，可以將其在窗口中拖動(dòng)。主要使用了onclick事件和image對(duì)象的src屬性。
22.3　感應(yīng)鼠標(biāo)　348
　　本節(jié)給出一段感應(yīng)鼠標(biāo)的示例代碼，當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)，圖像發(fā)生變化；當(dāng)鼠標(biāo)離開(kāi)圖像時(shí)，圖像再次發(fā)生變化。主要使用了onmouseover事件和onmouseout事件。
22.4　花環(huán)效果　350
　　本節(jié)給出一段花環(huán)效果的示例代碼。運(yùn)行該程序后，頁(yè)面出現(xiàn)一個(gè)轉(zhuǎn)動(dòng)的花環(huán)，該花環(huán)一邊轉(zhuǎn)動(dòng)，一邊在頁(yè)面內(nèi)漂移。主要使用了Math對(duì)象的sin(n)方法和cos(n)方法、Style對(duì)象的glow屬性、Window對(duì)象的setTimeout()方法。
22.5　流星效果　354
　　本節(jié)給出一段流星效果的示例代碼，運(yùn)行該程序后，除頁(yè)面顯示的靜態(tài)內(nèi)容外，還有流星不斷從瀏覽器窗口四周飛進(jìn)。主要使用了Math對(duì)象的random()方法和round()方法、Style對(duì)象的glow屬性、網(wǎng)頁(yè)元素坐標(biāo)位置及尺寸等應(yīng)用。
22.6　圖像運(yùn)動(dòng)　359
　　本節(jié)給出一段帶陰影運(yùn)動(dòng)的圖像的示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)一幅圖像，使用鼠標(biāo)單擊該圖像，圖像將會(huì)拖著陰影在頁(yè)面內(nèi)滑動(dòng)。主要使用了Window對(duì)象的setTimeout()方法、Math對(duì)象的min()方法、Style對(duì)象的alpha屬性。
22.7　圖像顯示　366
　　本節(jié)給出一段帶鏈接的圖像的示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)一個(gè)超級(jí)鏈接，單擊該鏈接，頁(yè)面會(huì)出現(xiàn)一幅圖像，并且，該圖像還帶有超級(jí)鏈接。主要使用了Window對(duì)象的setTimeout()方法、和document.all屬性。
22.8　圖像飛行一　368
　　本節(jié)給出一段圖像飛行的示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)一幅圖像，該圖像分為一片一片，自右至左從屏幕外飛翔而至，最終組合為完整的圖像。主要使用了Window對(duì)象的setTimeout()方法和clearTimeout()方法、style對(duì)象的visibility屬性。
22.9　圖像飛行二　371
　　本節(jié)給出另一段圖像飛行的示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)一幅圖像，該圖像分為一塊一塊，從窗口右側(cè)和底部飛翔而至，最終組合為完整的圖像。主要使用了Math對(duì)象的floor(n)方法、random()方法、ceil(n)方法、innerHTML屬性。
第23章　背景效果　377
23.1　隨機(jī)更換頁(yè)面背景　377
　　本節(jié)給出一段隨機(jī)更換頁(yè)面背景的示例代碼，當(dāng)用戶每次刷新頁(yè)面時(shí)，都會(huì)出現(xiàn)與前一次不同的頁(yè)面背景。主要使用了Math對(duì)象的random()方法和floor()方法。
23.2　用戶自選背景之一　379
　　本節(jié)給出一段用戶自選背景色的示例代碼，當(dāng)鼠標(biāo)指向頁(yè)面中的色塊時(shí)，頁(yè)面背景隨之變?yōu)樯珘K所指示的顏色。主要使用了onmouseover事件、document.bgColor屬性、作為屬性值使用的JavaScript。
23.3　用戶自選背景之二　382
　　本節(jié)給出另外一段用戶自選背景的示例代碼，單擊頁(yè)面中的任意一個(gè)色塊，頁(yè)面背景即變?yōu)樯珘K所示的顏色，同時(shí)彈出一個(gè)對(duì)話框，提示當(dāng)前的頁(yè)面背景色。主要使用了數(shù)組的定義與引用和轉(zhuǎn)義字符。
23.4　用戶自選背景之三　385
　　本節(jié)給出另一段用戶自選背景的示例代碼，當(dāng)用戶鼠標(biāo)在頁(yè)面顯示的數(shù)值上移動(dòng)時(shí)，頁(yè)面背景會(huì)隨鼠標(biāo)移動(dòng)而不斷變化。主要使用了數(shù)組的length屬性和使用構(gòu)造函數(shù)創(chuàng)建數(shù)組的方法。
23.5　頁(yè)面背景的閃電效果　387
　　本節(jié)給出一段閃電效果頁(yè)面背景的示例代碼，單擊“開(kāi)始”按鈕，頁(yè)面在黑白之間連續(xù)閃爍，呈現(xiàn)閃電效果。主要使用了Window對(duì)象的setTimeout()方法。
第24章　視頻動(dòng)畫(huà)　391
24.1　有圖像的Media Player　391
　　本節(jié)給出一個(gè)使用Media Player的示例程序，同時(shí)打開(kāi)兩個(gè)Windows媒體文件，其中一個(gè)包含視頻，一個(gè)不包含視頻，兩個(gè)文件都顯示播放器窗口界面。
24.2　無(wú)圖像的Media Player　393
　　本節(jié)給出一個(gè)使用Media Player的示例程序，同時(shí)打開(kāi)兩個(gè)Windows媒體文件，其中一個(gè)包含視頻，一個(gè)不包含視頻，兩個(gè)文件都不顯示播放器窗口界面。
24.3　有圖像的Real Player　396
　　本節(jié)給出一個(gè)使用Real Player的示例程序，打開(kāi)一個(gè)包含視頻的Real媒體文件，播放過(guò)程中顯示播放窗口界面。
24.4　無(wú)圖像的Real Player　398
　　本節(jié)給出一個(gè)使用Real Player的示例程序，打開(kāi)一個(gè)不包含視頻的Real媒體文件，播放過(guò)程中不顯示播放窗口界面。
24.5　播放Flash文件　399
　　本節(jié)給出一個(gè)播放Flash文件的示例程序。除正常顯示Flash播放界面外，還建立了幾個(gè)按鈕，可以對(duì)該文件的播放進(jìn)行控制。
第25章　廣告效果　403
25.1　位置固定的對(duì)聯(lián)廣告　403
　　本節(jié)給出一個(gè)位置固定的對(duì)聯(lián)廣告，廣告圖片總是停留在頁(yè)面的固定位置，不隨頁(yè)面的滾動(dòng)而改變。主要使用了Style對(duì)象的visibility屬性和網(wǎng)頁(yè)元素坐標(biāo)位置及尺寸等應(yīng)用。
25.2　隨頁(yè)面滾動(dòng)的對(duì)聯(lián)廣告　406
　　本節(jié)給出一段隨頁(yè)面滾動(dòng)的對(duì)聯(lián)廣告示例代碼，運(yùn)行該程序后，頁(yè)面兩側(cè)各出現(xiàn)一幅帶鏈接的圖片，拉動(dòng)滾動(dòng)條時(shí)，圖片會(huì)隨頁(yè)面一起滾動(dòng)。主要使用了document.getElementById(id)方法、Math.ceil()方法、Math.abs()方法和網(wǎng)頁(yè)元素坐標(biāo)位置及尺寸等應(yīng)用。
25.3　全屏飄動(dòng)的廣告　409
　　本節(jié)給出一段全屏飄動(dòng)的廣告示例代碼，運(yùn)行該程序后，屏幕上出現(xiàn)一幅飄動(dòng)的圖像，圖像不局限在瀏覽器窗口內(nèi)，而是在整個(gè)屏幕上飄動(dòng)。主要使用了Window對(duì)象的setTimeout()方法和clearTimeout()方法、Location對(duì)象、onmouseover事件和onmouseout事件。
25.4　循環(huán)滾動(dòng)的多幅廣告　413
　　本節(jié)給出一段循環(huán)滾動(dòng)的多幅廣告示例代碼，運(yùn)行該程序后，頁(yè)面出現(xiàn)一系列圖片自右至左循環(huán)滾動(dòng)。主要使用了innerHTML屬性、onmouseover事件和onmouseout事件、網(wǎng)頁(yè)元素坐標(biāo)位置及尺寸等應(yīng)用。
25.5　漂浮3D廣告　416
　　本節(jié)實(shí)例給出一個(gè)漂浮3D廣告的實(shí)現(xiàn)方法。隨著3D餅圖的飄動(dòng)，其上的圖片也會(huì)不斷切換，且每幅圖片都帶有特定的超級(jí)鏈接。主要使用了document.getElementById(id)方法、Math對(duì)象的ceil()方法、abs()方法、random()方法和floor()方法、Window對(duì)象的setTimeout()方法和clearTimeout()方法。
第7部分　菜單應(yīng)用
第26章　基本菜單的設(shè)計(jì)　427
26.1　基本的下拉菜單　427
　　本節(jié)實(shí)例給出基本的下拉菜單的實(shí)現(xiàn)方法。用戶可以在下拉列表中選擇一個(gè)鏈接，單擊該鏈接后，將跳轉(zhuǎn)至相應(yīng)的鏈接頁(yè)面。主要使用了Document對(duì)象中一些文檔定位的屬性。
26.2　改進(jìn)的下拉菜單　429
　　本節(jié)實(shí)例同樣實(shí)現(xiàn)了一個(gè)下拉菜單，但與上節(jié)實(shí)例有所不同。在下拉列表中對(duì)可選項(xiàng)進(jìn)行了分類(lèi)，因此，處理的方式也會(huì)不同。主要使用了onchange事件和window.location屬性。
26.3　漸顯的下拉菜單　431
　　本節(jié)實(shí)例給出一個(gè)漸顯的下拉菜單的實(shí)現(xiàn)方法。當(dāng)用戶單擊菜單鏈接時(shí)，會(huì)彈出下拉菜單，菜單逐漸由模糊變清晰，實(shí)現(xiàn)漸顯的效果。
第27章　DHTML菜單　437
27.1　折疊菜單　437
　　本節(jié)實(shí)例給出一個(gè)折疊式下拉菜單的實(shí)現(xiàn)方法。用戶單擊菜單項(xiàng)時(shí)，會(huì)顯示其下一級(jí)菜單。當(dāng)用戶單擊其他菜單項(xiàng)時(shí)，原先的菜單項(xiàng)收回，再顯示其他子菜單項(xiàng)。主要使用了onmouseover事件和onmouseout事件。
27.2　遠(yuǎn)程菜單　440
　　本節(jié)實(shí)例給出一個(gè)遠(yuǎn)程菜單的示例程序?？刂撇藛魏捅豢貙?duì)象分處不同窗口之中，但仍可控制窗口內(nèi)容。主要使用了new運(yùn)算符以及Math對(duì)象的floor(n)方法和random()方法。
27.3　彈出菜單　442
　　本節(jié)實(shí)例給出一個(gè)左鍵彈出菜單的示例程序。當(dāng)用戶在頁(yè)面窗口內(nèi)單擊鼠標(biāo)時(shí)，會(huì)在單擊處彈出一個(gè)菜單。主要使用了Event對(duì)象的相關(guān)屬性。
第28章　特效樣式菜單　445
28.1　旋轉(zhuǎn)導(dǎo)航菜單　445
　　本節(jié)實(shí)例給出一個(gè)旋轉(zhuǎn)導(dǎo)航菜單的實(shí)現(xiàn)方法。運(yùn)行該程序后，頁(yè)面出現(xiàn)一圈旋轉(zhuǎn)的文字鏈接，這些鏈接組成頁(yè)面的菜單。主要使用了document.getElementsByTagName()方法、setTimeout()方法和style對(duì)象的visibility屬性。
28.2　隱藏滑動(dòng)菜單　453
　　本節(jié)實(shí)例給出一個(gè)隱藏滑動(dòng)菜單的實(shí)現(xiàn)方法。頁(yè)面打開(kāi)后，菜單是隱藏的，將鼠標(biāo)移動(dòng)到頁(yè)面左邊的“隱藏菜單”，就會(huì)顯示一個(gè)導(dǎo)航菜單。主要使用了onmouseover事件、onmouseout事件和document.all屬性。
28.3　仿QQ菜單　457
　　本節(jié)實(shí)例給出一個(gè)仿QQ樣式菜單的實(shí)現(xiàn)方法。頁(yè)面打開(kāi)后，出現(xiàn)一個(gè)收縮的二級(jí)菜單，單擊一級(jí)菜單中的任何一個(gè)鏈接，會(huì)出現(xiàn)下一級(jí)菜單。主要使用了parseInt()方法和setTimeout()方法。
28.4　觸發(fā)型導(dǎo)航菜單　462
　　本節(jié)實(shí)例給出一個(gè)觸發(fā)型導(dǎo)航菜單的實(shí)現(xiàn)方法。單擊菜單欄中的任何一個(gè)鏈接，會(huì)顯示該鏈接對(duì)應(yīng)的內(nèi)容。主要使用了String對(duì)象的length屬性和Style對(duì)象的display屬性。
28.5　下拉列表菜單　465
　　本節(jié)實(shí)例給出一個(gè)下拉列表菜單的實(shí)現(xiàn)方法。當(dāng)用戶單擊菜單欄中的任何一個(gè)鏈接時(shí)，會(huì)出現(xiàn)該級(jí)菜單的下一級(jí)菜單。主要使用了document.getElementById()方法以及style.visibility屬性。
28.6　樹(shù)型導(dǎo)航菜單　469
　　本節(jié)實(shí)例給出一個(gè)下拉列表菜單的實(shí)現(xiàn)方法。當(dāng)用戶單擊菜單欄中的任何一個(gè)鏈接時(shí)，會(huì)出現(xiàn)該級(jí)菜單的下一級(jí)菜單。主要使用了Style對(duì)象的visibility屬性和display屬性。
28.7　變色標(biāo)題菜單　473
　　本節(jié)實(shí)例給出一個(gè)下拉列表菜單的實(shí)現(xiàn)方法。當(dāng)用戶單擊菜單欄中的任何一個(gè)鏈接時(shí)，會(huì)出現(xiàn)該級(jí)菜單的下一級(jí)菜單。主要使用了getElementsByTagName()方法、Style對(duì)象的background屬性、border屬性和color屬性，以及onmouseover事件和onmouseout事件。
第8部分　樣式、性能與安全
第29章　網(wǎng)頁(yè)樣式與元素定位　479
29.1　獲取文本框中的內(nèi)容　479
　　本節(jié)實(shí)例給出一個(gè)使用DHML獲取網(wǎng)頁(yè)文本框中輸入內(nèi)容的實(shí)現(xiàn)方法。當(dāng)用戶單擊“確定”按鈕后，會(huì)彈出一個(gè)對(duì)話框，顯示文本框中的內(nèi)容。
29.2　顯示和修改文字內(nèi)容(DHTML)　481
　　本節(jié)實(shí)例給出一種使用DHTML對(duì)象模型方法顯示和修改文字內(nèi)容的實(shí)現(xiàn)方法。當(dāng)用戶單擊“顯示”按鈕時(shí)，可以顯示相應(yīng)文字的內(nèi)容，當(dāng)用戶單擊“改變”按鈕時(shí)，可以改變相應(yīng)文字的內(nèi)容。
29.3　處理網(wǎng)頁(yè)表格內(nèi)容(DHTML)　483
　　本節(jié)給出一段使用DHTML對(duì)象模型方法處理網(wǎng)頁(yè)中的表格內(nèi)容的示例代碼。用戶可以隨意添加或刪除表格內(nèi)容。
29.4　顯示和修改網(wǎng)頁(yè)內(nèi)容(W3C)　485
　　本節(jié)實(shí)例給出一種使用W3C對(duì)象模型方法顯示和修改文字內(nèi)容的實(shí)現(xiàn)方法。當(dāng)用戶單擊“顯示”按鈕時(shí)，可以顯示相應(yīng)文字的內(nèi)容，當(dāng)用戶單擊“改變”按鈕時(shí)，可以改變相應(yīng)文字的內(nèi)容。
29.5　處理網(wǎng)頁(yè)表格內(nèi)容(W3C)　488
　　本節(jié)給出一段使用了W3C對(duì)象模型方法處理網(wǎng)頁(yè)中的表格內(nèi)容的示例代碼。用戶可以隨意添加或刪除表格內(nèi)容。
29.6　綜合應(yīng)用　491
　　本節(jié)給出一段樣式與定位綜合應(yīng)用的示例代碼。用戶可以任意改變網(wǎng)頁(yè)中元素的位置、大小、層次、可見(jiàn)度、內(nèi)容等。
第30章　瀏覽器與性能檢測(cè)　499
30.1　顯示瀏覽器名稱(chēng)與版本　499
　　使用JavaScript還可以顯示用戶瀏覽器名稱(chēng)、版本號(hào)及其他信息。本節(jié)給出一個(gè)相關(guān)的實(shí)例。
30.2　JavaScript檢測(cè)　501
　　可以對(duì)瀏覽器是否支持JavaScript、支持何種版本的JavaScript進(jìn)行檢測(cè)，以便在編寫(xiě)代碼時(shí)采取相應(yīng)的措施。本節(jié)實(shí)例給出這樣的一個(gè)應(yīng)用。主要使用了 noscript   /noscript 標(biāo)簽和JavaScript版本檢測(cè)。
30.3　獲取瀏覽器窗口大小　503
　　本節(jié)實(shí)例給出一個(gè)獲取瀏覽器當(dāng)前窗口大小的方法。當(dāng)瀏覽器窗口大小變化時(shí)，顯示的值會(huì)隨時(shí)變化。
30.4　設(shè)置屏幕對(duì)象的尺寸　506
　　使用JavaScript可以調(diào)整屏幕對(duì)象的尺寸，本節(jié)實(shí)例中，給出一段文字，其大小可隨窗口尺寸變化而變化。
30.5　有選擇地顯示圖片　508
　　在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)該考慮到用戶屏幕分辨率較低或網(wǎng)速較慢的情況，根據(jù)不同情況顯示不同的媒體文件，以免給用戶瀏覽頁(yè)面造成不必要的麻煩。本節(jié)實(shí)例中，可以根據(jù)用戶屏幕分辨率顯示不同大小的圖片。
30.6　簡(jiǎn)單的性能檢測(cè)　510
　　本節(jié)給出一段求平方根的示例代碼，可以實(shí)現(xiàn)對(duì)整數(shù)、負(fù)數(shù)進(jìn)行求平方根。并且，當(dāng)用戶輸入的內(nèi)容不是數(shù)值時(shí)，還可以進(jìn)行驗(yàn)證。
30.7　模擬瀏覽器菜單　512
　　本節(jié)給出一段模擬瀏覽器菜單的示例代碼，可以通過(guò)在頁(yè)面中設(shè)置按鈕，起到瀏覽器窗口按鈕的作用。
第31章　加密算法　515
31.1　實(shí)現(xiàn)md5加密　515
　　md5加密是目前國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)中使用最多的口令加密方式，本節(jié)給出一段示例代碼，可以實(shí)現(xiàn)輸入內(nèi)容的md5加密。主要使用了位運(yùn)算和位移運(yùn)算。
31.2　編制自己的加密算法　522
　　在實(shí)際應(yīng)用中，有時(shí)候需要自己編制加密算法，本節(jié)給出一段編制自己的加密算法的示例代碼，以供讀者參考。本節(jié)代碼用到的知識(shí)點(diǎn)較少，主要使用了Window對(duì)象包含的Location對(duì)象。
第32章　惡意網(wǎng)頁(yè)　527
32.1　字符串翻倍　527
　　“字符串翻倍”方法，會(huì)使字符串長(zhǎng)度成指數(shù)增長(zhǎng)，可以在短短數(shù)秒內(nèi)造成大多數(shù)瀏覽器崩潰。本節(jié)介紹一個(gè)構(gòu)造“字符串翻倍”的實(shí)例。
32.2　函數(shù)循環(huán)交叉調(diào)用　529
　　在程序設(shè)計(jì)中，有時(shí)需要函數(shù)的交叉調(diào)用。但如果使用不當(dāng)，會(huì)造成調(diào)用無(wú)法中止，系統(tǒng)資源耗盡。本節(jié)代碼給出一個(gè)函數(shù)交叉循環(huán)調(diào)用的示例。
32.3　無(wú)限遞歸調(diào)用　531
　　遞歸是程序設(shè)計(jì)中經(jīng)常使用的方法，但如果未設(shè)置中止條件，遞歸將永遠(yuǎn)執(zhí)行下去，直至將系統(tǒng)資源耗盡。本節(jié)代碼給出了一個(gè)實(shí)現(xiàn)無(wú)限遞歸調(diào)用的例子。
32.4　構(gòu)造無(wú)限數(shù)組　532
　　另一種造成系統(tǒng)資源耗盡的方法是構(gòu)造無(wú)限數(shù)組。通過(guò)為該數(shù)組賦值或輸出其元素值達(dá)到消耗資源的目的。本節(jié)實(shí)例給出了一種構(gòu)造無(wú)限數(shù)組的方法。主要使用了Number對(duì)象的POSITIVE_INFINITY屬性。
32.5　載入超大圖像　534
　　當(dāng)瀏覽器試圖載入一幅非常大的圖像時(shí)，也會(huì)受到運(yùn)算速度、內(nèi)存容量等因素的制約，有可能造成系統(tǒng)資源耗盡。本節(jié)給出一個(gè)載入超大圖像的實(shí)例代碼。主要使用了“++”和“+=”運(yùn)算符。
32.6　關(guān)不掉的對(duì)話框　536
　　如果網(wǎng)頁(yè)總是彈出對(duì)話框，卻無(wú)論如何也無(wú)法關(guān)閉，也是很煩人的事情。本節(jié)給出一段關(guān)不掉的對(duì)話框的實(shí)例代碼。
32.7　一直彈出新窗口　538
　　惡意網(wǎng)頁(yè)的特征之一是不停打開(kāi)新的窗口，直至將用戶的系統(tǒng)資源耗盡。本節(jié)給出了一個(gè)一直彈出新窗口的實(shí)例。
第9部分　XML與Ajax
第33章　XML讀取與處理　543
33.1　使用IE處理XML　543
　　本節(jié)給出一段使用IE處理XML文檔的代碼，代碼中，可以對(duì)XML文檔內(nèi)容進(jìn)行讀取、顯示、添加和刪除等操作。
33.2　使用Mozilla處理XML　548
　　本節(jié)給出一段使用Mozilla Firefox處理XML文檔的代碼，代碼中，可以對(duì)XML文檔內(nèi)容進(jìn)行讀取、顯示、添加和刪除等操作。
33.3　XML文件內(nèi)容分頁(yè)顯示　553
　　對(duì)于較長(zhǎng)的XML文檔，在同一頁(yè)內(nèi)顯示會(huì)不方便。本節(jié)給出一段使用XML文件內(nèi)容分頁(yè)顯示的代碼，在顯示XML文件內(nèi)容的同時(shí)，實(shí)現(xiàn)了分頁(yè)顯示，可以在頁(yè)面中進(jìn)行翻頁(yè)。
第34章　IE XML數(shù)據(jù)島　561
34.1　格式化輸出　561
　　通過(guò)使用數(shù)據(jù)島，可以將XML文檔在HTML中調(diào)用并進(jìn)行格式化輸出。本節(jié)代碼給出了一個(gè)使用IE XML數(shù)據(jù)島對(duì)XML文檔進(jìn)行格式化輸出的示例。
34.2　動(dòng)態(tài)增刪記錄　564
　　除對(duì)XML文檔進(jìn)行格式化輸出之外，使用IE XML數(shù)據(jù)島還可以對(duì)XML文檔記錄進(jìn)行動(dòng)態(tài)增刪，本節(jié)給出一個(gè)動(dòng)態(tài)增刪記錄的實(shí)例。在程序中，所有的添加、刪除操作，都是在文本區(qū)層面上進(jìn)行的，不對(duì)XML文檔本身進(jìn)行任何寫(xiě)操作。
第35章　Ajax基礎(chǔ)　569
35.1　讀取XML文檔　569
　　本節(jié)給出一段使用Ajax讀取XML文檔的代碼，可以實(shí)現(xiàn)對(duì)XML文檔內(nèi)容的讀取與輸出。主要使用了XmlHttp對(duì)象的open()方法、send()方法、onreadystatechange屬性、responseXML屬性。
35.2　實(shí)現(xiàn)聯(lián)動(dòng)選擇　573
　　本節(jié)給出一段使用Ajax實(shí)現(xiàn)聯(lián)動(dòng)選擇的示例代碼。輸入郵政編碼后，使用Tab鍵進(jìn)行跳格，此時(shí)，所在城市和所在省份兩個(gè)文本框中會(huì)自動(dòng)出現(xiàn)相應(yīng)的內(nèi)容。
35.3　實(shí)現(xiàn)菜單特效　576
　　本節(jié)給出一段使用Ajax實(shí)現(xiàn)菜單特效的示例代碼。程序運(yùn)行后，頁(yè)面出現(xiàn)一個(gè)水平排列的菜單和一個(gè)垂直排列的菜單，鼠標(biāo)移動(dòng)至子菜單項(xiàng)目后，該子菜單項(xiàng)會(huì)被方框框住。
第36章　Ajax應(yīng)用　585
36.1　實(shí)現(xiàn)簡(jiǎn)單相冊(cè)　585
　　本節(jié)使用PHP環(huán)境，給出一段實(shí)現(xiàn)簡(jiǎn)單相冊(cè)的實(shí)例代碼。程序運(yùn)行后，可以看到圖像的縮略圖，單擊縮略圖，可以瀏覽圖像。不論是縮略圖還是原始圖像，在顯示過(guò)程中，都可以進(jìn)行前后的翻頁(yè)操作。
36.2　實(shí)現(xiàn)文本聊天室　606
　　本節(jié)給出一段實(shí)現(xiàn)文本聊天的示例代碼。除基本的聊天功能外，還需要維護(hù)一個(gè)已登錄用戶的列表，如果session已過(guò)期，則將用戶從列表中去除過(guò)期的用戶。另外，程序還支持清除聊天室和改變用戶昵稱(chēng)等功能。
附錄　JavaScript簡(jiǎn)介　635