【正文】 第四章 DHTML動(dòng)態(tài)網(wǎng)頁制作 ?（學(xué)時(shí)數(shù)： 5學(xué)時(shí)） 學(xué)習(xí)要點(diǎn) ?掌握 JavaScript語言的數(shù)據(jù)結(jié)構(gòu)和流程控制 ?掌握 JavaScript語言的事件和對象 ?會(huì)使用 JavaScript瀏覽器對象、內(nèi)置對象和自建對象 ?了解 HTML DOM主要對象，掌握 HTML DOM編程技術(shù) DHTML動(dòng)態(tài)網(wǎng)頁制作 ? DHTML使網(wǎng)頁設(shè)計(jì)者可以動(dòng)態(tài)操縱網(wǎng)頁上的所有元素。利用 DHTML，網(wǎng)頁設(shè)計(jì)者可以動(dòng)態(tài)地隱藏或顯示內(nèi)容、修改樣式定義、激活元素以及為元素定位。此外，網(wǎng)頁設(shè)計(jì)者還可利用 DHTML在網(wǎng)頁上顯示外部信息，方法是將元素捆綁到外部數(shù)據(jù)源 (如文件和數(shù)據(jù)庫 )上。所有這些功能均可用瀏覽器完成而無需請求Web服務(wù)器，同時(shí)也無需重新裝載網(wǎng)頁 。 第 4章 DHTML動(dòng)態(tài)網(wǎng)頁制作 ? JavaScript編程技術(shù)及實(shí)例 ? HTML DOM程序設(shè)計(jì)初步 ? DHTML綜合編程實(shí)踐 JavaScript編程技術(shù)及實(shí)例 知識(shí)點(diǎn) JavaScript語言簡述 JavaScript特點(diǎn) ； JavaScript語言簡述與 Java區(qū)別 ； JavaScript編程基礎(chǔ) 將 JavaScript程序嵌入 HTML文件的方法 ； 數(shù)據(jù)類型 ； 常量和變量 運(yùn)算符和表達(dá)式 ； 函數(shù) ； 流程控制 ； 事件驅(qū)動(dòng)及事件處理 JavaScript對象編程技術(shù) JavaScript的對象 ； JavaScript常用的內(nèi)置對象 ； 用戶自定義對象 ActiveX編程技術(shù) JavaScript編程技術(shù)及實(shí)例 JavaScript特點(diǎn) JavaScript語言簡述 JavaScript是一種嵌入 HTML文件中的腳本語言，它是基于對象驅(qū)動(dòng)的，能對鼠標(biāo)點(diǎn)擊、表單輸入、頁面瀏覽等用戶事件做出反應(yīng)并進(jìn)行處理。 JavaScript具有以下特點(diǎn)： ? 簡單性。 JavaScript是簡化的編程語言，不像高級(jí)語言有嚴(yán)格的使用限制，使用簡潔靈活。例如在 JavaScript中可直接使用變量，不必事先聲明，變量類型規(guī)定也不十分嚴(yán)格。 ? 基于對象。 JavaScript是一種基于對象（ objectbased）的語言，允許用戶自定義對象，同時(shí)瀏覽器還提供大量的內(nèi)建對象，可以將瀏覽器中不同的元素作為對象處理，體現(xiàn)了面向?qū)ο缶幊痰乃枷?。?JavaScript并不完全面向?qū)ο螅恢С诸惡屠^承。 ? 可移植性。 JavaScript可在大多數(shù)瀏覽器上不經(jīng)修改直接運(yùn)行。 ? 動(dòng)態(tài)性。 JavaScript是 DHTML的重要組成部分，是設(shè)計(jì)交互式動(dòng)態(tài)特別是客戶端動(dòng)態(tài)頁面的重要工具。 ? 安全性。 JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失。 JavaScript與 Java在命名、結(jié)構(gòu)和語言上都很相似，兩者存在重要的差別： ?Java是 SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，支持類和繼承，主要應(yīng)用于網(wǎng)絡(luò)編程； JavaScript只是基于對象的，主要用于 Web頁面編寫腳本，是 Netscape公司的產(chǎn)品。 ?Java程序編譯后以類的形式存放在服務(wù)器上，由瀏覽器下載用 Java虛擬機(jī)去執(zhí)行它。 JavaScript源代碼嵌入 HTML文件中，使用時(shí)由瀏覽器對它進(jìn)行識(shí)別、解釋并執(zhí)行。 ?Java采用強(qiáng)變量檢查，即所有變量在編譯之前必須聲明。JavaScript中變量聲明，采用弱變量，在使用前不需作聲明，而是解釋器在運(yùn)行時(shí)檢查其數(shù)據(jù)類型。 ?Java程序可單獨(dú)執(zhí)行，而 JavaScript程序只能嵌入 HTML中，不能單獨(dú)執(zhí)行。 ? Java程序的編寫、編譯需要專門的開發(fā)工具，如 JDK（ Java Development Kit）、 Visual J++等；而 JavaScript程序只是作為網(wǎng)頁的一部分嵌入 HTML中，編寫 JavaScript程序只要用一般的文本編輯器即可。 JavaScript編程技術(shù)及實(shí)例 JavaScript語言簡述與 Java區(qū)別 JavaScript編程技術(shù)及實(shí)例 將 JavaScript程序嵌入 HTML文件的方法 JavaScript編程基礎(chǔ) 1. 將 JavaScript程序嵌入 HTML文件的方法 ? 在 HTML文件中使用 標(biāo)記加入JavaScript語句，可位于 HTML文件的任何位置。最好是將所有腳本程序放在 HEAD標(biāo)記內(nèi)，以確保容易維護(hù)。在Script標(biāo)記之間加上“ !”和“ //”表示如果瀏覽器不支持 JavaScript語言，這段代碼不執(zhí)行。 [例 ] ： 實(shí)現(xiàn)代碼： 運(yùn)行 效果： ? 將 JavaScript程序以擴(kuò)展名“ .js”單獨(dú)存放，再使用 script src=*.js嵌入到 HTML文件中，有利于實(shí)現(xiàn)代碼共享。 [例 ] ： 實(shí)現(xiàn)代碼： 運(yùn)行效果： ? 直接在 HTML標(biāo)記內(nèi)添加腳本 JavaScript編程技術(shù)及實(shí)例 數(shù)據(jù)類型 JavaScript有三種數(shù)據(jù)類型：字符型、數(shù)值型和布爾型。 ? 字符型 ：字符串?dāng)?shù)據(jù)類型用來表示 JavaScript 中的文本。腳本中的字符串文本放在一對匹配的的單引號(hào)或雙引號(hào)中。字符串中可以包含雙引號(hào)，該雙引號(hào)兩邊需加單引號(hào)，例如‘ 4“5?，也可以包含單引號(hào)，該單引號(hào)兩邊需加雙引號(hào)，例如” 1?5“。 [例 ]下面是字符串的示例 ： Happy am I。 from care I?m free!“ 39。Avast, ye lubbers! roared the technician.39。 42“ 39。c39。 JavaScript中沒有表示單個(gè)字符的類型（如 C++ 的 char）。要表示 JavaScript中的單個(gè)字符，應(yīng)創(chuàng)建一個(gè)只包含一個(gè)字符的字符串。包含零個(gè)字符（ ）的字符串是空（零長度）字符串。 ? 數(shù)值型 ：在 JavaScript中，整數(shù)和浮點(diǎn)值沒有差別； JavaScript數(shù)值可以是其中任意一種（ JavaScript內(nèi)部將所有的數(shù)值表示為浮點(diǎn)值）。 ? 整型值可以是正整數(shù)，負(fù)整數(shù)和 0?？梢杂?10進(jìn)制， 8進(jìn)制和 16進(jìn)制來表示。在 JavaScript 中大多數(shù)字是用十進(jìn)制表示的。浮點(diǎn)值為帶小數(shù)部分的數(shù)，也可以用科學(xué)計(jì)數(shù)法來表示。相關(guān)示例如表 41所示。 表 41 JavaScript中數(shù)據(jù)類型示例 JavaScript編程技術(shù)及實(shí)例 數(shù)據(jù)類型 JavaScript編程技術(shù)及實(shí)例 數(shù)據(jù)類型 JavaScript編程技術(shù)及實(shí)例 數(shù)據(jù)類型 ? 布爾型 ： boolean 數(shù)據(jù)類型只有兩個(gè)值，它們是文字 true 和 false。 Boolean值是一個(gè)真值，它表示一個(gè)狀態(tài)的有效性（說明該狀態(tài)為真或假）。 ? 腳本中的比較通常得到一個(gè) Boolean 結(jié)果?？紤]下一行 JavaScript 代碼。 ? y = (x == 2022)。 ? 這里要比較變量 x 的值是否與數(shù)字 2022 相等。如果相等，比較的結(jié)果為 Boolean 值 true，并將其賦給變量 y。如果 x與 2022不等，則比較的結(jié)果為 boolean值 false。 ? 另外，在 JavaScript 中數(shù)據(jù)類型 null 只有一個(gè)值： null，其含義是“無值”或“無對象”。當(dāng)某個(gè)變量返回 undefined 值表示對象屬性不存在或聲明了變量但從未賦值。 JavaScript編程技術(shù)及實(shí)例 常量和變量 ? 常量： JavaScript中的常量以直接量的形式出現(xiàn)，即在程序中直接引用，如”歡迎”、 26等。常量值可以為整型、實(shí)型、邏輯型及字符串型。 ? 變量 變量聲明。使用變量之前先進(jìn)行聲明?？梢允褂? var 關(guān)鍵字來進(jìn)行變量聲明 。 var count。 // 單個(gè)變量聲明。 var count, amount, level。 // 多個(gè)變量聲明。 var count = 0, amount = 100。 //變量聲明和初始化。 如果在 var 語句中沒有初始化變量，變量自動(dòng)取 JavaScript值 undefined。 變量命名。 JavaScript 是一種區(qū)分大小寫的語言。因此變量名稱 myCounter 和變量名稱 mYCounter 是不一樣的。變量的名稱可以是任意長度。創(chuàng)建合法的變量名稱應(yīng)遵循如下規(guī)則： JavaScript編程技術(shù)及實(shí)例 常量和變量 ? 第一個(gè)字符必須是一個(gè) ASCII 碼（大小寫均可），或一個(gè)下劃線 (_)。注意第一個(gè)字符不能是數(shù)字；后續(xù)的字符必須是字母、數(shù)字或下劃線；變量名稱一定不能是保留字。 ? [例 ]合法變量名稱示例。 ? pagecount ? Part9 ? Number_Items ? [例 ]無效變量名稱示例。 ? 99Balloons // 不能以數(shù)字開頭 ? Smithamp。Wesson // “amp?！狈?hào)不能用于變量名 ? 當(dāng)要聲明一個(gè)變量并進(jìn)行初始化，但又不想指定任何特殊值，可以賦值為 JavaScript 值 null。 ? null賦值示例： [例 ] ：實(shí)現(xiàn)代碼： 運(yùn)行效果： JavaScript編程技術(shù)及實(shí)例 常量和變量 ? 如果聲明了一個(gè)變量但沒有對其賦值，該變量存在，其值為 JavaScript 值 undefined。 undefined賦值示例 ： ? [例 ] ： 實(shí)現(xiàn)代碼： 運(yùn)行效果 ： 對比例 ， JavaScript 中 null 和 undefined 的主要區(qū)別是 null的操作如同數(shù)字 0，而 undefined 的操作如同特殊值 NaN （不是一個(gè)數(shù)字）。對 null 值和 undefined值作比較總是相等的。 JavaScript支持隱式聲明，即可以不用 var 關(guān)鍵字聲明變量，例如 ： noStringAtAll = 。 // 隱式聲明變量 noStringAtAll 不能使用未經(jīng)過聲明的變量。例如： var volume = length * width。 // 錯(cuò)誤！ length 和 width 不存在 JavaScript編程技術(shù)及實(shí)例 運(yùn)算符和表達(dá)式 ? 4 .運(yùn)算符和表達(dá)式 ? 運(yùn)算符 ： JavaScript運(yùn)算符包括算術(shù)、邏輯、位、賦值以及其它運(yùn)算符。運(yùn)算符描述如表 42所示 。 表 42 運(yùn)算符描述 JavaScript編程技術(shù)及實(shí)例 運(yùn)算符和表達(dá)式 ? 表達(dá)式。 JavaScript的表達(dá)式由常量、變量、運(yùn)算符和表達(dá)式組成，有 3類表達(dá)式： ? 算術(shù)表達(dá)式。值為一個(gè)數(shù)值型值，例如 。5+ax。 ? 字符串表達(dá)式。值為一個(gè)字符串，例如：“字符串 1”+str。 ? 布爾表達(dá)式。值為一個(gè)布爾值，例如： (x= =y)amp。amp。(y=5)。 相等（恒等）“ ==”與嚴(yán)格相等“ ===”的區(qū)別在于恒等運(yùn)算符在比較前強(qiáng)制轉(zhuǎn)換不同類型的值。例如，恒等對字符串 “ 1” 與數(shù)值 1 的比較結(jié)果將為 true。而嚴(yán)格相等不強(qiáng)制轉(zhuǎn)換不同類型的值，因此它認(rèn)為字符串 “ 1” 與數(shù)值 1 不相同。 字符串、數(shù)值和布爾值是按值比較的。如果它們的值相同，比較結(jié)果為相等。對象（包括 Array、 Function、 String、 Number、 Boolean、 Error、 Date以及 RegExp 對象）按引用比較。即使這些類型的兩個(gè)變量具有相同的值，只有在它們正好為同一對象時(shí)比較結(jié)果才為 true。 比較運(yùn)算符示例 ： [例 ] ： 實(shí)現(xiàn)代碼： 運(yùn)行效果： JavaScript編程技術(shù)及實(shí)例 運(yùn)算符和表達(dá)式 ? JavaScript 解釋器具有數(shù)據(jù)類型強(qiáng)制轉(zhuǎn)換功能。對于強(qiáng)類型語言，如C++、 C等，如果表達(dá)式不經(jīng)過強(qiáng)制轉(zhuǎn)換就試圖對兩個(gè)不同的數(shù)據(jù)類型（如一個(gè)為數(shù)字，另一個(gè)為字符串）執(zhí)行運(yùn)算，將產(chǎn)生錯(cuò)誤結(jié)果。但在 JavaScript 中情況就不同了。 ? JavaScript是