1、16. JavaScript基礎(chǔ)基礎(chǔ)16.1 JavaScript語(yǔ)言概況語(yǔ)言概況16.2 第一個(gè)第一個(gè)JavaScript程序程序16.1 JavaScript語(yǔ)言概況語(yǔ)言概況16.1.1 JavaScript語(yǔ)言的特點(diǎn)語(yǔ)言的特點(diǎn)16.1.2 JavaScript常用元素常用元素16.1.1 JavaScript語(yǔ)言的特點(diǎn)語(yǔ)言的特點(diǎn)1安全性安全性： JavaScript是一種安全性高的語(yǔ)言，它只能通過(guò)瀏覽器實(shí)現(xiàn)網(wǎng)絡(luò)的訪問(wèn)和動(dòng)態(tài)交互，可以有效地防止通過(guò)訪問(wèn)本地硬盤(pán)或者將數(shù)據(jù)存入到服務(wù)器，而對(duì)網(wǎng)絡(luò)文檔或者重要數(shù)據(jù)進(jìn)行不正當(dāng)?shù)牟僮鳌?6.1.1 JavaScript語(yǔ)言的特點(diǎn)語(yǔ)言的特點(diǎn)2易用性易用

2、性： JavaScript是一種腳本的編程語(yǔ)言，沒(méi)有嚴(yán)格的數(shù)據(jù)類(lèi)型，同時(shí)是采用小段程序的編寫(xiě)方式來(lái)實(shí)現(xiàn)編程的。16.1.1 JavaScript語(yǔ)言的特點(diǎn)語(yǔ)言的特點(diǎn)3動(dòng)態(tài)交互性動(dòng)態(tài)交互性： 在HTML中嵌入JavaScript小程序后，提高了網(wǎng)頁(yè)的動(dòng)態(tài)性。JavaScript可以直接對(duì)用戶(hù)提交的信息在客戶(hù)端做出回應(yīng)。JavaScript的出現(xiàn)使用戶(hù)與信息之間不再是一種瀏覽與顯示的關(guān)系，而是一種實(shí)時(shí)、動(dòng)態(tài)、可交互式的關(guān)系。16.1.1 JavaScript語(yǔ)言的特點(diǎn)語(yǔ)言的特點(diǎn)4跨平臺(tái)性跨平臺(tái)性： 它的運(yùn)行環(huán)境與操作系統(tǒng)沒(méi)有關(guān)系，它是一種依賴(lài)瀏覽器本身運(yùn)行的編程語(yǔ)言，只要安裝了支持JavaScri

3、pt瀏覽器，并且能正常運(yùn)行瀏覽器的電腦，就可以正確地執(zhí)行JavaScript程序。16.1.2 JavaScript常用元素常用元素 表16-1 JavaScript常用元素及定義16.2 第一個(gè)第一個(gè)JavaScript程序程序 基本語(yǔ)法基本語(yǔ)法 16.2 第一個(gè)第一個(gè)JavaScript程序程序 語(yǔ)法說(shuō)明語(yǔ)法說(shuō)明 在HTML中嵌入JavaScript時(shí)，需要使用標(biāo)記。其中省略號(hào)部分可以嵌入更多的JavaScript語(yǔ)句。16.2 第一個(gè)第一個(gè)JavaScript程序程序 實(shí)例代碼實(shí)例代碼16.2 第一個(gè)第一個(gè)JavaScript程序程序 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果17. JavaScript基本語(yǔ)法

4、基本語(yǔ)法17.1 基本數(shù)據(jù)類(lèi)型基本數(shù)據(jù)類(lèi)型17.2 運(yùn)算符運(yùn)算符17.3 程序結(jié)構(gòu)程序結(jié)構(gòu)17.4 函數(shù)函數(shù)17.5 小實(shí)例小實(shí)例修改密碼修改密碼17.1 基本數(shù)據(jù)類(lèi)型基本數(shù)據(jù)類(lèi)型 數(shù)值數(shù)值 字符字符 布爾布爾 空值空值17.2 運(yùn)算符運(yùn)算符17.2.1 算術(shù)運(yùn)算符算術(shù)運(yùn)算符17.2.2 邏輯運(yùn)算符邏輯運(yùn)算符17.2.3 比較運(yùn)算符比較運(yùn)算符17.2.1 算術(shù)運(yùn)算符算術(shù)運(yùn)算符 表17-1 具體算術(shù)運(yùn)算符17.2.1 算術(shù)運(yùn)算符算術(shù)運(yùn)算符 實(shí)例代碼17.2.1 算術(shù)運(yùn)算符算術(shù)運(yùn)算符 接上頁(yè)17.2.1 算術(shù)運(yùn)算符算術(shù)運(yùn)算符 網(wǎng)頁(yè)效果17.2.2 邏輯運(yùn)算符邏輯運(yùn)算符 表17-2 具體運(yùn)算符17.

5、2.2 邏輯運(yùn)算符邏輯運(yùn)算符 實(shí)例代碼17.2.2 邏輯運(yùn)算符邏輯運(yùn)算符 接上頁(yè)17.2.3 比較運(yùn)算符比較運(yùn)算符 表17-3 具體運(yùn)算符17.2.3 比較運(yùn)算符比較運(yùn)算符 實(shí)例代碼17.2.3 比較運(yùn)算符比較運(yùn)算符 接上頁(yè)17.2.3 比較運(yùn)算符比較運(yùn)算符 網(wǎng)頁(yè)效果17.3 程序結(jié)構(gòu)程序結(jié)構(gòu)17.3.1 If語(yǔ)句語(yǔ)句17.3.2 For語(yǔ)句語(yǔ)句17.3.3 Switch語(yǔ)句語(yǔ)句17.3.4 While與與DoWhile17.3.1 If語(yǔ)句語(yǔ)句 基本語(yǔ)法基本語(yǔ)法if 條件條件 或者或者 if 條件條件 Else 條件條件 17.3.1 If語(yǔ)句語(yǔ)句 語(yǔ)法說(shuō)明語(yǔ)法說(shuō)明 If語(yǔ)句后面的條件可以是

6、表達(dá)式也可以是一個(gè)其他值，但條件返回的結(jié)果的數(shù)據(jù)類(lèi)型只能是布爾型，要么為真，要么為假。17.3.1 If語(yǔ)句語(yǔ)句 實(shí)例代碼實(shí)例代碼17.3.1 If語(yǔ)句語(yǔ)句 接上頁(yè)接上頁(yè)17.3.1 If語(yǔ)句語(yǔ)句 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果17.3.2 For語(yǔ)句語(yǔ)句 基本語(yǔ)法基本語(yǔ)法for (初始化值初始化值;條件條件;求新值求新值)17.3.2 For語(yǔ)句語(yǔ)句 語(yǔ)法說(shuō)明語(yǔ)法說(shuō)明 For后面的條件一個(gè)都不能省略，同時(shí)初始化值、條件、求新值三者之間必須使用分號(hào)（；）隔開(kāi)。只有當(dāng)For語(yǔ)句中的條件部分為真時(shí)，才執(zhí)行后面的程序部分，否則不執(zhí)行。17.3.2 For語(yǔ)句語(yǔ)句 實(shí)例代碼17.3.2 For語(yǔ)句語(yǔ)句 網(wǎng)頁(yè)效果網(wǎng)頁(yè)

7、效果17.3.3 Switch語(yǔ)句語(yǔ)句 基本語(yǔ)法基本語(yǔ)法switch() Case1: 語(yǔ)句語(yǔ)句1； Case2：語(yǔ)句：語(yǔ)句2 Case3: 語(yǔ)句語(yǔ)句3 Default: 語(yǔ)句語(yǔ)句 17.3.3 Switch語(yǔ)句語(yǔ)句 語(yǔ)法說(shuō)明 使用Switch語(yǔ)句時(shí)，必須賦初始條件，程序?qū)⒏鶕?jù)給出的初始條件，在Switch語(yǔ)句中進(jìn)行判斷，如果Case條件符合初始條件，則執(zhí)行該Case后面的語(yǔ)句，否則向下繼續(xù)判斷，繼續(xù)執(zhí)行。17.3.3 Switch語(yǔ)句語(yǔ)句 實(shí)例代碼17.3.3 Switch語(yǔ)句語(yǔ)句 接上頁(yè)17.3.3 Switch語(yǔ)句語(yǔ)句 接上頁(yè)17.3.3 Switch語(yǔ)句語(yǔ)句 網(wǎng)頁(yè)效果17.3.4 Wh

8、ile與與DoWhile 基本語(yǔ)法While 語(yǔ)法：語(yǔ)法：While（）（） 程序段程序段 變量更新變量更新 Do .While 語(yǔ)法：語(yǔ)法：Do 程序段程序段 變量更新變量更新 While（）（）17.3.4 While與與DoWhile 語(yǔ)法說(shuō)明 While與DoWhile都是用于循環(huán)結(jié)構(gòu)的，但兩者的明顯區(qū)別是：前者必須在滿(mǎn)足條件的情況下才執(zhí)行該條件下的程序段，后者是不管條件是否滿(mǎn)足While語(yǔ)句后面的條件，都至少會(huì)執(zhí)行一次。17.3.4 While與與DoWhile 實(shí)例代碼17.3.4 While與與DoWhile 網(wǎng)頁(yè)效果17.3.4 While與與DoWhile 實(shí)例代碼17.3.

9、4 While與與DoWhile 網(wǎng)頁(yè)效果17.4 函數(shù)函數(shù)1有參函數(shù)有參函數(shù) 基本語(yǔ)法“Function 函數(shù)名（函數(shù)名（參數(shù)參數(shù)1 參數(shù)參數(shù)2參數(shù)參數(shù)n）函數(shù)體函數(shù)體return 表達(dá)式表達(dá)式”17.4 函數(shù)函數(shù)1有參函數(shù)有參函數(shù) 語(yǔ)法說(shuō)明 前面講解程序結(jié)構(gòu)時(shí)，例子中已經(jīng)使用到了函數(shù)，定義的Function rec(form),這是一個(gè)帶有參數(shù)的函數(shù)。通過(guò)單擊“面積”按鈕，調(diào)用函數(shù)rec(form).17.4 函數(shù)函數(shù)1有參函數(shù)有參函數(shù) 實(shí)例代碼17.4 函數(shù)函數(shù)1有參函數(shù)有參函數(shù) 接上頁(yè)17.4 函數(shù)函數(shù)1有參函數(shù)有參函數(shù) 網(wǎng)頁(yè)效果17.4 函數(shù)函數(shù)2無(wú)參函數(shù)無(wú)參函數(shù) 基本語(yǔ)法“Func

10、tion 函數(shù)名（）函數(shù)名（）”17.4 函數(shù)函數(shù)1無(wú)參函數(shù)無(wú)參函數(shù) 語(yǔ)法說(shuō)明 在JavaScript中，還可以通過(guò)調(diào)用一些無(wú)參函數(shù)來(lái)實(shí)現(xiàn)一些功能。函數(shù)名后面的括號(hào)中無(wú)參數(shù)，稱(chēng)該函數(shù)為無(wú)參函數(shù)。17.4 函數(shù)函數(shù)1無(wú)參函數(shù)無(wú)參函數(shù) 實(shí)例代碼17.4 函數(shù)函數(shù)1無(wú)參函數(shù)無(wú)參函數(shù) 網(wǎng)頁(yè)效果17.5 小實(shí)例小實(shí)例修改密碼修改密碼 實(shí)例代碼17.5 小實(shí)例小實(shí)例修改密碼修改密碼 接上頁(yè)17.5 小實(shí)例小實(shí)例修改密碼修改密碼 接上頁(yè)17.5 小實(shí)例小實(shí)例修改密碼修改密碼 接上頁(yè)17.5 小實(shí)例小實(shí)例修改密碼修改密碼 網(wǎng)頁(yè)效果18. JavaScript事件分析事件分析18.1 事件概述事件概述18.2

11、主要事件分析主要事件分析18.3 其他常用事件其他常用事件18.1 事件概述事件概述JavaScript是一門(mén)腳本語(yǔ)言，也是一門(mén)基于面向?qū)ο蟮木幊陶Z(yǔ)言，雖然沒(méi)有專(zhuān)業(yè)面向?qū)ο缶幊陶Z(yǔ)言那樣規(guī)范的類(lèi)的繼承、封裝等，但有面向?qū)ο蟮木幊瘫仨氁惺录尿?qū)動(dòng)，才能執(zhí)行程序。18.2 主要事件分析主要事件分析 表18-1 主要事件18.2.1 鼠標(biāo)單擊事件onClick易用性易用性： JavaScript是一種腳本的編程語(yǔ)言，沒(méi)有嚴(yán)格的數(shù)據(jù)類(lèi)型，同時(shí)是采用小段程序的編寫(xiě)方式來(lái)實(shí)現(xiàn)編程的。18.2.1 鼠標(biāo)單擊事件onClick 基本語(yǔ)法基本語(yǔ)法 18.2.1 鼠標(biāo)單擊事件onClick 語(yǔ)法說(shuō)明語(yǔ)法說(shuō)明 在H

12、TML文件中，onClick常常與表單中的按鈕一起使用。18.2.1 鼠標(biāo)單擊事件onClick 實(shí)例代碼18.2.1 鼠標(biāo)單擊事件onClick 接上頁(yè)接上頁(yè)18.2.1 鼠標(biāo)單擊事件onClick 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.2 文本框內(nèi)容改變文本框內(nèi)容改變onChange 實(shí)例代碼18.2.2 文本框內(nèi)容改變文本框內(nèi)容改變onChange 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.3 內(nèi)容選中事件內(nèi)容選中事件onSelect 實(shí)例代碼18.2.3 內(nèi)容選中事件內(nèi)容選中事件onSelect 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.4 聚焦事件聚焦事件onFocus 實(shí)例代碼18.2.4 聚焦事件聚焦事件onFocus 網(wǎng)

13、頁(yè)效果網(wǎng)頁(yè)效果18.2.5 裝載事件裝載事件onLoad 實(shí)例代碼實(shí)例代碼18.2.5 裝載事件裝載事件onLoad 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.6 卸載事件卸載事件onUnload 實(shí)例代碼實(shí)例代碼18.2.6 卸載事件卸載事件onUnload 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.7 失焦事件失焦事件onBlur 實(shí)例代碼實(shí)例代碼18.2.7 失焦事件失焦事件onBlur 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.8 鼠標(biāo)事件鼠標(biāo)事件onMouseOver 實(shí)例代碼實(shí)例代碼18.2.8 鼠標(biāo)事件鼠標(biāo)事件onMouseOver 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.2.9 鼠標(biāo)移開(kāi)事件鼠標(biāo)移開(kāi)事件onMouseOut 實(shí)例代碼實(shí)例代碼1

14、8.2.9 鼠標(biāo)移開(kāi)事件鼠標(biāo)移開(kāi)事件onMouseOut 網(wǎng)頁(yè)效果網(wǎng)頁(yè)效果18.3 其他常用事件其他常用事件 表18-2 其他常用事件22. JavaScript對(duì)象的應(yīng)用對(duì)象的應(yīng)用22.1 對(duì)象概述對(duì)象概述22.2 瀏覽器內(nèi)部對(duì)象瀏覽器內(nèi)部對(duì)象22.3 內(nèi)置對(duì)象和方法內(nèi)置對(duì)象和方法22.1 對(duì)象概述對(duì)象概述1封裝2繼承3多態(tài)22.2 瀏覽器內(nèi)部對(duì)象瀏覽器內(nèi)部對(duì)象22.2.1 Navigator對(duì)象對(duì)象22.2.2 Location對(duì)象對(duì)象22.2.3 Window對(duì)象對(duì)象22.2.4 Document對(duì)象對(duì)象22.2.5 History對(duì)象對(duì)象22.2.1 Navigator對(duì)象對(duì)象 Nav

15、igator對(duì)象屬性說(shuō)明22.2.1 Navigator對(duì)象對(duì)象 實(shí)例代碼22.2.1 Navigator對(duì)象對(duì)象 接上頁(yè)22.2.1 Navigator對(duì)象對(duì)象 網(wǎng)頁(yè)效果22.2.2 Location對(duì)象對(duì)象 Location對(duì)象屬性說(shuō)明22.2.2 Location對(duì)象對(duì)象 實(shí)例代碼22.2.2 Location對(duì)象對(duì)象 網(wǎng)頁(yè)效果22.2.2 Location對(duì)象對(duì)象 效果說(shuō)明 程序運(yùn)行后，會(huì)顯示當(dāng)前網(wǎng)頁(yè)的主機(jī)名稱(chēng)，如果地址欄上顯示的是網(wǎng)頁(yè)文件的絕對(duì)路徑，如：E:CDROMHTML 2222-2-2.html，將不會(huì)顯示網(wǎng)頁(yè)的主機(jī)名稱(chēng)。22.2.3 Window對(duì)象對(duì)象 Window對(duì)象屬

16、性說(shuō)明22.2.3 Window對(duì)象對(duì)象 Window對(duì)象方法說(shuō)明22.2.3 Window對(duì)象對(duì)象 實(shí)例代碼22.2.3 Window對(duì)象對(duì)象 網(wǎng)頁(yè)效果22.2.3 Window對(duì)象對(duì)象 效果說(shuō)明 當(dāng)程序運(yùn)行后，通過(guò)window對(duì)象的open方法會(huì)打開(kāi)一個(gè)新的網(wǎng)頁(yè)文件。22.2.4 Document對(duì)象對(duì)象 實(shí)例代碼22.2.4 Document對(duì)象對(duì)象 網(wǎng)頁(yè)效果22.2.5 History對(duì)象對(duì)象 History對(duì)象屬性說(shuō)明22.2.5 History對(duì)象對(duì)象 實(shí)例代碼22.2.5 History對(duì)象對(duì)象 網(wǎng)頁(yè)效果22.3 內(nèi)置對(duì)象和方法內(nèi)置對(duì)象和方法 格式 對(duì)象名對(duì)象名.屬性名稱(chēng)屬性名稱(chēng)

17、 對(duì)象名對(duì)象名.方法名稱(chēng)（參數(shù)）方法名稱(chēng)（參數(shù)）22.3 內(nèi)置對(duì)象和方法內(nèi)置對(duì)象和方法 內(nèi)置對(duì)象屬性說(shuō)明23. DOM模型模型23.1 DOM模型框架模型框架23.2 DOM模型中的節(jié)點(diǎn)模型中的節(jié)點(diǎn)23.3 使用使用DOM23.4 獲取表單數(shù)據(jù)獲取表單數(shù)據(jù)23.5 Inner HTML23.1 DOM模型框架模型框架文檔對(duì)象模型（DOM）是指W3C定義的標(biāo)準(zhǔn)文檔對(duì)象模型。利用DOM中的對(duì)象，開(kāi)發(fā)人員可以對(duì)文檔（XML或HTML）進(jìn)行讀取、搜索、修改、添加和刪除等操作。根據(jù)樹(shù)結(jié)構(gòu)以節(jié)點(diǎn)形式對(duì)文檔進(jìn)行操作是DOM的工作原理。DOM將文檔中的每個(gè)項(xiàng)目看做節(jié)點(diǎn)，如元素、屬性、注釋等。一般情況下，支持J

18、avascript的所有瀏覽器都支持DOM。23.1 DOM模型框架模型框架htmlheadbodymetah1Pullililiatitle23.2 DOM模型中的節(jié)點(diǎn)模型中的節(jié)點(diǎn)元素節(jié)點(diǎn)文本節(jié)點(diǎn)屬性節(jié)點(diǎn)標(biāo)題一a標(biāo)題一href=“#23.3 使用使用DOM根節(jié)點(diǎn)document，根元素節(jié)點(diǎn)html遍歷childNodes，parentNode訪問(wèn)文檔對(duì)象getElementsByTagName(), getElementsByTagName(), getElementById(), getElementsByName() Firebug：父子兄弟關(guān)系nexElementSibling，off

19、setLeft，offsetTop節(jié)點(diǎn)的屬性：，oa1.attributes0.nodeValue，oa1.getAttribute(“href”)，oa1.href創(chuàng)建新節(jié)點(diǎn)：createElement(“l(fā)i”)，createTextNode(“dom”)，oli.setAttribute(“id”,“l(fā)i4”)，appendChild(oli)刪除節(jié)點(diǎn)：oli.parentNode.removeChild(oli)23.4 獲取表單數(shù)據(jù)獲取表單數(shù)據(jù)訪問(wèn)表單 document.form表單名字, document.forms0獲取信息alert(do

20、cument.forms0.text1.value)舉例E-mail地址檢查if(address=)|(address.indexOf()=-1)|(address.indexOf(.)=-1)23.5 innerHTML這個(gè)屬性由于使用方便，得到了當(dāng)今主流瀏覽器的支持。該屬性表示某個(gè)標(biāo)記之間的所有內(nèi)容，包括代碼本身。該屬性可以讀、寫(xiě) op.innerHTML=“”舉例17-3-3.html24. 事件驅(qū)動(dòng)與事件對(duì)象事件驅(qū)動(dòng)與事件對(duì)象24.1 事件驅(qū)動(dòng)及處理事件驅(qū)動(dòng)及處理24.2 事件監(jiān)聽(tīng)事件監(jiān)聽(tīng)24.3 事件對(duì)象事件對(duì)象24.4 舉例鼠標(biāo)定位舉例鼠標(biāo)定位24.1 事件驅(qū)動(dòng)及處理事件驅(qū)動(dòng)及處理 onload=function ()op=document.getElementById(p1);op.onclick=fn1;24.2 事件監(jiān)聽(tīng)事件監(jiān)聽(tīng) 標(biāo)準(zhǔn)DOM瀏覽器onload=function () op=document.getElementById(p1); op.addEventL