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

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