JavaScript項(xiàng)目式實(shí)例教程課件

1、項(xiàng)目一對話框和頁面輸出 初步體驗(yàn)第1頁，共339頁。有兩張網(wǎng)頁，每張網(wǎng)頁上都有一個(gè)”問候”按鈕。在第一張網(wǎng)頁上點(diǎn)擊該按鈕，彈出對話框“張三向您問好！”，點(diǎn)擊對話框上的“確定”按鈕后，緊接著在該網(wǎng)頁上打印“張三歡迎您光臨本站！”。在第二張網(wǎng)頁上做同樣的操作，顯示結(jié)果相同，只不過信息中把“張三”顯示為了“李四”。項(xiàng)目要求代碼的復(fù)用性和可維護(hù)性良好。項(xiàng)目情境第2頁，共339頁。熟悉JavaScript腳本內(nèi)嵌在HTML中的書寫方法熟悉JavaScript腳本的執(zhí)行時(shí)機(jī)。初步了解事件觸發(fā)的概念。初步了解函數(shù)和函數(shù)調(diào)用的方法。熟悉JavaScript腳本文件的編寫和引入的方法。學(xué)習(xí)目標(biāo)第3頁，共339頁

2、。打開頁面，立即彈出一個(gè)問候?qū)υ捒?。任?wù)1 彈出對話框第4頁，共339頁。1、在HTML中，任何標(biāo)簽都可以看成是一個(gè)對象，例如body就是一個(gè)對象。這些對象一般都有屬性、事件和方法。其相關(guān)內(nèi)容將在后面的章節(jié)闡述。2、如果要想在頁面被引導(dǎo)后執(zhí)行一個(gè)任務(wù)，可以給標(biāo)簽添加一個(gè)onload事件（關(guān)于事件將在后續(xù)章節(jié)詳細(xì)介紹），此事件在body對象被加載完成后被觸發(fā)，寫法形如：onload=要執(zhí)行的代碼;3、alert(參數(shù))功能是彈出一個(gè)對話框，對話框中的內(nèi)容就是該函數(shù)中設(shè)置的參數(shù)。4、JavaScript對大小寫是敏感的，所以alert()必須全部小寫?！鞠嚓P(guān)知識】第5頁，共339頁。在標(biāo)簽內(nèi)部輸入

3、以下代碼：【任務(wù)實(shí)現(xiàn)】第6頁，共339頁。在網(wǎng)頁上打印一串歡迎詞。任務(wù)2 在頁面上打印歡迎詞第7頁，共339頁。1、document表示的是文檔對象，每個(gè)載入瀏覽器的 HTML 文檔都會成為 Document 對象。（關(guān)于該對象在后續(xù)章節(jié)會詳細(xì)介紹）2、document對象有很多方法，write方法是其中之一，表示在文檔中打印信息內(nèi)容?！鞠嚓P(guān)知識】第8頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：【任務(wù)實(shí)現(xiàn)】第9頁，共339頁。先彈出問候?qū)υ捒蛟僭陧撁嫔洗蛴g迎詞任務(wù)3 先彈對話框再打印 第10頁，共339頁。在JavaScript中，如果功能塊有多個(gè)語句，這些語句中間用分號隔開。實(shí)際上，每一個(gè)完整

4、的功能語句結(jié)束處都應(yīng)該寫上分號，哪怕只有一條語句，也應(yīng)該寫上?！鞠嚓P(guān)知識】第11頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：【任務(wù)實(shí)現(xiàn)】第12頁，共339頁。頁面上有一個(gè)按鈕，點(diǎn)擊此按鈕后，彈出問候?qū)υ捒?，在頁面上打印歡迎詞。任務(wù)4 點(diǎn)擊按鈕執(zhí)行任務(wù)3第13頁，共339頁。document.write()執(zhí)行時(shí)，將重寫當(dāng)前頁面。所以，頁面上原有的內(nèi)容將全部消失，只留下document.write()寫下的內(nèi)容。在本任務(wù)中，頁面中最后看不到原來的“問候”按鈕就是這個(gè)原因?！鞠嚓P(guān)知識】第14頁，共339頁。在標(biāo)簽對中編寫按鈕代碼，并在按鈕代碼中添加onclick事件屬性，并編寫執(zhí)行任務(wù)代碼：【任務(wù)實(shí)現(xiàn)

5、】第15頁，共339頁。仍然實(shí)現(xiàn)任務(wù)4的需求，但是要求把任務(wù)執(zhí)行代碼模塊化，以便隨時(shí)調(diào)用。任務(wù)5 任務(wù)模塊化第16頁，共339頁。1、代碼模塊化。 將代碼“打包”為函數(shù)的形式2、Javascript與HTML混編 標(biāo)簽的使用3、注釋 /. 注釋單行 /*.*/ 注釋多行【相關(guān)知識】第17頁，共339頁。1、在標(biāo)簽對中編寫按鈕代碼：站！); /2、在頁面的標(biāo)簽內(nèi)部編寫代碼：/下面定義了一個(gè)函數(shù)hellofunction hello()alert(你好！); document.write(歡迎光臨本站!);【任務(wù)實(shí)現(xiàn)】第18頁，共339頁。仍然完成任務(wù)5的需求，但是要求增加代碼的靈活性。例如改變對

6、話框和頁面打印的信息，但是不需要修改函數(shù)模塊代碼。任務(wù)6 調(diào)用靈活化第19頁，共339頁。在任務(wù)4中，我們將代碼“打包”為一個(gè)函數(shù)，實(shí)現(xiàn)了模塊化，但是還不夠靈活。例如要改變顯示的內(nèi)容，就必須要修改函數(shù)體中的代碼。又例如，如果再增加一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕也需要調(diào)用函數(shù)hello(),但是要顯示的內(nèi)容又有不同，則無法實(shí)現(xiàn)，只能另外編寫一個(gè)函數(shù)供其調(diào)用。這樣的程序缺乏了可擴(kuò)展性，代碼的復(fù)用性也比較差。程序設(shè)計(jì)中常常通過在編寫函數(shù)模塊時(shí)定義參數(shù)（一般是用逗號隔開的變量列表），而在調(diào)用函數(shù)時(shí)傳入具體的數(shù)值的方法實(shí)現(xiàn)函數(shù)功能的靈活性和可擴(kuò)展性。有關(guān)變量的概念以及函數(shù)參數(shù)的具體內(nèi)容將在后面章節(jié)闡述。【相關(guān)知

7、識】第20頁，共339頁。1、在標(biāo)簽對中編寫按鈕代碼：2、在頁面的標(biāo)簽內(nèi)部編寫代碼：function hello(str1,str2)alert(str1);document.write(str2);【任務(wù)實(shí)現(xiàn)】第21頁，共339頁。任務(wù)7 “項(xiàng)目一”的實(shí)現(xiàn)第22頁，共339頁。1、js文件擴(kuò)展名為js的文件是用JavaScript編寫的客戶端腳本文件，它不是一般的網(wǎng)頁文件，一般不能直接運(yùn)行打開，而是配合網(wǎng)頁來使用。它常常用來實(shí)現(xiàn)某些功能，這些功能代碼可以被多個(gè)不同的網(wǎng)頁調(diào)用。在js文件中編寫JavaScript腳本時(shí)，不要用標(biāo)簽對包括。2、引用js文件在頁面中，只有引入js文件才能使用該文件

8、中的JavaScript代碼。方法是在標(biāo)簽中添加src屬性，其值就是該js文件的路徑?！鞠嚓P(guān)知識】第23頁，共339頁。1、建立一個(gè)文件hello.js（注意擴(kuò)展名為js）。2、在hello.js中編寫如下函數(shù)代碼并保存文件。function hello(str1,str2)alert(str1);document.write(str2);3、建立兩個(gè)頁面，分別為hello1.html和hello2.html（為簡單起見，將這三個(gè)文件放置在同一個(gè)目錄下）。4、在hello1.html中，在標(biāo)簽對內(nèi)部編寫按鈕代碼如下：5、在頁面的標(biāo)簽內(nèi)部編寫代碼如下：6、在hello2.html中做同樣的操作，

9、只是將“張三”改為“李四”【任務(wù)實(shí)現(xiàn)】第24頁，共339頁。項(xiàng)目二簡單計(jì)算器 判斷結(jié)構(gòu)第25頁，共339頁。設(shè)計(jì)一個(gè)簡單的計(jì)算器，能進(jìn)行加、減、乘、除四則運(yùn)算。當(dāng)用戶運(yùn)行網(wǎng)頁時(shí)，依次彈出三個(gè)輸入對話框，分別要求輸入兩個(gè)數(shù)和一個(gè)運(yùn)算符號（+、-、）。輸入無誤時(shí)，在頁面上打印計(jì)算算式。在進(jìn)行除法運(yùn)算時(shí)，除數(shù)不能為0，否則打印錯(cuò)誤信息。如果輸入數(shù)字格式錯(cuò)誤或者輸入的運(yùn)算符號錯(cuò)誤都提示相應(yīng)的不能運(yùn)算信息。項(xiàng)目情境第26頁，共339頁。熟悉變量和常量的概念和使用方法。熟悉基本數(shù)據(jù)類型的概念熟悉數(shù)據(jù)類型的轉(zhuǎn)換。熟悉關(guān)系運(yùn)算符、邏輯運(yùn)算符、算術(shù)運(yùn)算符的使用方法。熟悉判斷結(jié)構(gòu)的使用方法。熟悉幾個(gè)內(nèi)置函數(shù)的使用

10、方法。學(xué)習(xí)目標(biāo)第27頁，共339頁。打開頁面，打印程序中指定的姓名和性別。任務(wù)1 認(rèn)識變量和字符串第28頁，共339頁。1、變量的定義定義一個(gè)變量用關(guān)鍵字var，例如：var x;var y;一個(gè)var也可以同時(shí)定義多個(gè)變量，這些變量間用逗號隔開，例如：var x,y,z;【相關(guān)知識】第29頁，共339頁。2、變量的賦值變量的賦值就是把值存儲在變量所在的內(nèi)存單元中,方法是用“=”運(yùn)算符。賦值可以是在定義變量時(shí)，例如：var x=0;var y=1,z=2;也可以是在變量定義后使用時(shí)才賦值，例如：var x;x=0;【相關(guān)知識】第30頁，共339頁。3、變量的命名變量的名稱必須是由ASCII字符

11、或者下劃線（_）開頭，第一個(gè)字符不能是數(shù)字，但其后可以是數(shù)字或者其他字母。例如如下變量的命名是合法的：aA_aa_1注意：JavaScript語言對大小寫是敏感的，所以變量a和變量A是兩個(gè)不同的變量。變量名不能定義為JavaScript的保留字。例如不能定義一個(gè)變量的名稱為var或者function?！鞠嚓P(guān)知識】第31頁，共339頁。4、變量的類型【相關(guān)知識】數(shù)據(jù)類型具體類型基本數(shù)據(jù)類型字符串型、數(shù)字型、布爾型復(fù)合數(shù)據(jù)類型對象、數(shù)組其他數(shù)據(jù)類型函數(shù)、null（空）、undefined（未定義）第32頁，共339頁。5、常量與變量對應(yīng)的是常量。常量用來表示一個(gè)固定不變的值。比如下面這些這些都是常

12、量：12325.78張三true【相關(guān)知識】第33頁，共339頁。6、字符串型6.1、字符串的定義字符串必須用雙引號或者單引號包括起來。6.2、轉(zhuǎn)義符轉(zhuǎn)義符“”6.3、連接運(yùn)算符連接運(yùn)算符”+”【相關(guān)知識】第34頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：var name=張三;var sex=男; document.write(姓名：+name+性別：+sex);【任務(wù)實(shí)現(xiàn)】第35頁，共339頁。打開頁面，彈出一個(gè)輸入對話框，要求輸入姓名。輸入確定后再次彈出輸入對話框，要求輸入性別。輸入確定后，在頁面打印剛剛輸入的信息。任務(wù)2 輸入對話框第36頁，共339頁。1、Window對象window對象

13、表示瀏覽器窗口。任何一個(gè)全局函數(shù)或變量都是windowd對象的屬性，所以使用時(shí)，該對象常常省略不寫。【相關(guān)知識】第37頁，共339頁。2、prompt方法prompt方法的功能是彈出一個(gè)輸入對話框，格式是：prompt( ,默認(rèn)值)其返回的值就是用戶在對話框中輸入的值,返回值的類型是字符串型?！鞠嚓P(guān)知識】第38頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：var name=mpt(請輸入您的姓名：,);var sex=mpt(請輸入您的性別：,男);document.write(姓名：+name+性別：+sex);【任務(wù)實(shí)現(xiàn)】第39頁，共339頁。打開頁面，彈出一個(gè)輸入對話框，要求輸入一個(gè)整數(shù)。如果

14、輸入的不是一個(gè)整數(shù)，則給出錯(cuò)誤提示。任務(wù)3 判斷是否為整數(shù)第40頁，共339頁。1、表達(dá)式表達(dá)式可以是常量或者變量，也可以是由常量、變量和運(yùn)算符號組成的語句。比如下面這些都是合法的表達(dá)式：4.56trueaba+b。【相關(guān)知識】第41頁，共339頁。2、布爾數(shù)據(jù)類型布爾（boolean）是一種基本數(shù)據(jù)類型，表示真或者假，通俗的理解為是或者非，對或者錯(cuò)等。它常常用于判斷一個(gè)結(jié)果的是非性。它的值只有兩個(gè)：true（真）和false（假）。例如：84其結(jié)果就是false。再如：a大于ab小于a=大于或等于a=b=小于或等于a=b第43頁，共339頁。4、判斷語句4.1、if語句 if語句if()語句

15、塊 if.else語句if()語句塊1else語句塊2【相關(guān)知識】第44頁，共339頁。 if.else if.else語句if()語句塊1else if(條件2)語句塊2else if()語句塊nelse語句塊n+1【相關(guān)知識】第45頁，共339頁。 if語句的嵌套if語句允許嵌套，嵌套時(shí)注意if與else的匹配，不要出現(xiàn)交叉嵌套的現(xiàn)象?！鞠嚓P(guān)知識】第46頁，共339頁。4.2、switch語句switch()case ：語句塊1case ：語句塊2case ：語句塊ndefault:語句塊n+1【相關(guān)知識】第47頁，共339頁。5、三目運(yùn)算三目運(yùn)算是根據(jù)條件執(zhí)行兩個(gè)語句中的其中一個(gè)，格式如

16、下：布爾表達(dá)式?語句1 : 語句2當(dāng)“布爾表達(dá)式”值為真時(shí)，執(zhí)行“語句1”；當(dāng)“布爾表達(dá)式”值為假時(shí)，執(zhí)行“語句2”。【相關(guān)知識】第48頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：var num=mpt(請輸一個(gè)整數(shù)：,);if(parseInt(num) =num)document.write(num+是整數(shù));elsedocument.write(num+不是整數(shù));【任務(wù)實(shí)現(xiàn)】第49頁，共339頁。打開頁面， 彈出一個(gè)輸入對話框，要求輸入一個(gè)整數(shù)。如果輸入的為奇數(shù)，確認(rèn)后打印信息，提示該數(shù)為奇數(shù)。如果輸入的為偶數(shù)，確認(rèn)后打印信息，提示該數(shù)為偶數(shù)。如果輸入的信息為以下情況中的一種，就視為不合法

17、輸入，提示錯(cuò)誤。 輸入的不是數(shù)字。 輸入的是數(shù)字，但不是整數(shù)。 未做任何輸入。任務(wù)4 判斷奇偶數(shù)第50頁，共339頁。1、邏輯運(yùn)算符【相關(guān)知識】運(yùn)算符名稱舉例備注&邏輯與true & false(結(jié)果為false)98 & 78(結(jié)果為false)二元運(yùn)算符。只有兩個(gè)操作數(shù)的值都為true，結(jié)果才是true。|邏輯或true | false(結(jié)果為false)98 | 78(結(jié)果為false)二元運(yùn)算符。操作數(shù)中只要有一個(gè)值為true，結(jié)果就是true。只有兩個(gè)操作數(shù)的值都為false，結(jié)果才是false。!邏輯非!true(結(jié)果為false)!98(結(jié)果為false)一元運(yùn)算符。true的非

18、是false,false的非是true。第51頁，共339頁。2、算術(shù)運(yùn)算符【相關(guān)知識】運(yùn)算符名稱舉例備注+加a+b二元運(yùn)算符。加法運(yùn)算，運(yùn)算結(jié)果為數(shù)字型。-減a-b二元運(yùn)算符。減法運(yùn)算，運(yùn)算結(jié)果為數(shù)字型。*乘a*b二元運(yùn)算符。乘法運(yùn)算，運(yùn)算結(jié)果為數(shù)字型。/除a/b二元運(yùn)算符。除法運(yùn)算，運(yùn)算結(jié)果為數(shù)字型。%模a%b二元運(yùn)算符。取余數(shù)運(yùn)算，運(yùn)算結(jié)果為數(shù)字型。+遞增a+a一元運(yùn)算符。相當(dāng)于加1。要求操作數(shù)必須是變量。運(yùn)算結(jié)果為數(shù)字型。-遞減a-a一元運(yùn)算符。相當(dāng)于減1。要求操作數(shù)必須是變量。運(yùn)算結(jié)果為數(shù)字型。第52頁，共339頁。在標(biāo)簽輸入下列代碼：var num=mpt(請輸一個(gè)整數(shù)：,0);i

19、f(!isNaN(num) & num!= & parseInt(num)=num) var res=num % 2; if(res=0)document.write(num+是偶數(shù));elsedocument.write(num+是奇數(shù));elsedocument.write(輸入的數(shù)字格式不對，不能判斷奇偶數(shù));【任務(wù)實(shí)現(xiàn)】第53頁，共339頁。打開頁面，彈出輸入對話框，要求輸入一個(gè)被加數(shù)。輸入確定后，再次彈出輸入對話框，要求輸入一個(gè)加數(shù)。輸入確定后，打印這兩個(gè)數(shù)的和。如果這兩個(gè)數(shù)中只要有一個(gè)輸入格式不正確，或者未輸入任何值，都給出錯(cuò)誤信息。任務(wù)5 加法運(yùn)算器第54頁，共339頁。1、數(shù)字

20、型【相關(guān)知識】表現(xiàn)形式舉例涵義整數(shù)198、234072、0650 xAF9、0 x56E十進(jìn)制八進(jìn)制（0開頭）十六進(jìn)制（0 x開頭）浮點(diǎn)數(shù)1.0、3.489有小數(shù)點(diǎn)科學(xué)計(jì)數(shù)法2.45E72.45107特殊數(shù)字InfinityNaN無限大不是一個(gè)數(shù)字第55頁，共339頁。2、數(shù)據(jù)類型的轉(zhuǎn)換2.1、隱式類型轉(zhuǎn)換【相關(guān)知識】數(shù)據(jù)類型在數(shù)字環(huán)境下轉(zhuǎn)換在字符串環(huán)境下轉(zhuǎn)換在布爾環(huán)境下轉(zhuǎn)換數(shù)字無轉(zhuǎn)換為內(nèi)容為數(shù)字的字符串NaN轉(zhuǎn)換為NaN非0轉(zhuǎn)換為true,0轉(zhuǎn)換為falseNaN轉(zhuǎn)換為false字符串空字符串轉(zhuǎn)換為0非空字符串轉(zhuǎn)換為數(shù)字(字符內(nèi)容為數(shù)字時(shí))或者NaN(字符內(nèi)容不是數(shù)字時(shí))true轉(zhuǎn)換為1fa

21、lse轉(zhuǎn)換為0無空字符串轉(zhuǎn)換為false非空字符串轉(zhuǎn)換為truetrue轉(zhuǎn)換為truefalse轉(zhuǎn)換為false布爾true轉(zhuǎn)換為1false轉(zhuǎn)換為0轉(zhuǎn)換為true轉(zhuǎn)換為false無第56頁，共339頁。2.2、顯示類型轉(zhuǎn)換【相關(guān)知識】函數(shù)功能舉例結(jié)果Number(字符串)將字符串整體轉(zhuǎn)換為數(shù)字。Number(4.56)Number(1.23.56)4.56NaNparseInt(字符串)將字符串中第一個(gè)非數(shù)字字符前的字符轉(zhuǎn)換為整型數(shù)字。parseInt(12abc)parseInt(abc12)parseInt(1.8)12NaN1parseFloat(字符串)將字符串中第一個(gè)非數(shù)字字符前的

22、字符轉(zhuǎn)換為浮點(diǎn)型數(shù)字。parseFloat(1.2abc)parseFloat(abc1.2)parseFloat(1.2e3abc)1.2NaN1200第57頁，共339頁。在標(biāo)簽對中輸入如下代碼：var num1=mpt(請輸入被加數(shù)：,0);var num2=mpt(請輸入加數(shù)：,0);if(!isNaN(num1) & num1!= & !isNaN(num2) & num2!=)var res=parseFloat(num1)+parseFloat(num2);document.write(num1+num2+=+res);elsedocument.write(輸入的數(shù)格式不正確！)

23、;【任務(wù)實(shí)現(xiàn)】第58頁，共339頁。任務(wù)6 “項(xiàng)目二”的實(shí)現(xiàn)第59頁，共339頁。在標(biāo)簽對中輸入以下代碼：var num1=mpt(請輸入第一個(gè)數(shù)：,0);var num2=mpt(請輸入第二個(gè)數(shù)：,0);var op=mpt(請輸入一個(gè)運(yùn)算符號（+、-、）：,+);if(!isNaN(num1) & !isNaN(num2) & num1!= & num2!=)var n1=parseFloat(num1);var n2=parseFloat(num2);var flag=0;var res=0;switch(op)case +:res=n1+n2;break;case -:res=n1-n

24、2;break;【任務(wù)實(shí)現(xiàn)】第60頁，共339頁。case :res=n1*n2;break;case :if(n2!=0)/如果除數(shù)為0res=n1/n2;elseflag=1;res=除數(shù)不能為0！;break; default:/如果輸入的運(yùn)算符不是+、-、中的任何一個(gè)flag=1;res=輸入的運(yùn)算符號錯(cuò)誤！不能計(jì)算！;【任務(wù)實(shí)現(xiàn)】第61頁，共339頁。if(flag=0)document.write(n1+op+n2+=+res);elsedocument.write(res);elsedocument.write(輸入數(shù)字格式錯(cuò)誤！不能計(jì)算！);【任務(wù)實(shí)現(xiàn)】第62頁，共339頁。項(xiàng)

25、目三統(tǒng)計(jì)成績單 循環(huán)結(jié)構(gòu)第63頁，共339頁。設(shè)計(jì)一個(gè)程序，要求能不斷彈出輸入成績對話框。在輸入成績時(shí)，檢測輸入數(shù)據(jù)的合法性，如果輸入的不是數(shù)字或輸入內(nèi)容為空，給出錯(cuò)誤信息，繼續(xù)彈出成績對話框輸入成績，只到用戶輸入一個(gè)截止符號!為止。最后在頁面上打印所有輸入的有效成績，打印的格式為每行4個(gè)。統(tǒng)計(jì)所有成績的平均分、最高分、最低分并打印輸出。最后輸出一個(gè)鏈接“是否有不及格”。用戶點(diǎn)擊該鏈接，如果成績中有不及格的，則彈出對話框提示沒有不及格成績。若有不及格成績，則彈出對話框提示有不及格成績。項(xiàng)目情境第64頁，共339頁。初步了解數(shù)組的概念和使用方法。初步了解對象的概念。熟悉Math數(shù)學(xué)對象的應(yīng)用。熟

26、悉循環(huán)結(jié)構(gòu)的使用方法。熟悉變量的作用域?qū)W習(xí)目標(biāo)第65頁，共339頁。分別計(jì)算并打印輸出1+2+3+.+100和12 3. 100的值。任務(wù)1 累加和累乘第66頁，共339頁。1、循環(huán)結(jié)構(gòu)1.1、while語句while()1.2、do.while語句dowhile();2、死循環(huán)【相關(guān)知識】第67頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：var sum=0; /總和sumvar f=1;/總乘積fvar i=1;/計(jì)數(shù)iwhile(i=100) sum=sum+i;f=f*i;i+; document.write(1+2+3+.+100=+sum+12 3. 100=+f);【任務(wù)實(shí)現(xiàn)】第68頁

27、，共339頁。隨機(jī)的給出10個(gè)0到100之間（包含0和100）的整數(shù)，統(tǒng)計(jì)這10個(gè)數(shù)中的最大值和最小值。任務(wù)2 最大和最小值第69頁，共339頁。1、數(shù)組1.1、數(shù)組的概念數(shù)組是一些數(shù)據(jù)元素（element）的集合，每個(gè)數(shù)據(jù)元素在數(shù)組中都有一個(gè)編號，通過編號可以引用這些數(shù)據(jù)元素。這些數(shù)據(jù)元素可以是不同的數(shù)據(jù)類型，例如數(shù)字型、字符串型、布爾型等，設(shè)置還可以是一個(gè)數(shù)組。每個(gè)數(shù)組都有一個(gè)名稱，其命名規(guī)則和變量的命名規(guī)則相同。【相關(guān)知識】第70頁，共339頁。1.2、數(shù)組的定義1.2.1、使用構(gòu)造函數(shù)方式有三種，分別是：new Array()new Array()new Array(,數(shù)組元素2的值.

28、)1.2.2、直接定義方式有兩種，一種是用一對空的中括號定義一個(gè)空數(shù)組，然后再為數(shù)組元素賦值。另一種方式是在一對中括號中，放入數(shù)組元素值，并用逗號隔開。【相關(guān)知識】第71頁，共339頁。2、對象2.1、對象的概念對象有三要素：屬性、方法和事件。2.2、使用屬性和方法引用或修改對象的屬性：對象.對象的屬性調(diào)用對象的方法：對象.對象的方法名(參數(shù)列表)【相關(guān)知識】第72頁，共339頁。2.3、Math對象【相關(guān)知識】屬性描述E返回算術(shù)常量 e，即自然對數(shù)的底數(shù)（約等于2.718）。LN2返回 2 的自然對數(shù)（約等于0.693）。LN10返回 10 的自然對數(shù)（約等于2.302）。LOG2E返回以

29、2 為底的 e 的對數(shù)（約等于 1.414）。LOG10E返回以 10 為底的 e 的對數(shù)（約等于0.434）。PI返回圓周率（約等于3.14159）。SQRT1_2返回返回 2 的平方根的倒數(shù)（約等于 0.707）。SQRT2返回 2 的平方根（約等于 1.414）。第73頁，共339頁?！鞠嚓P(guān)知識】方法描述abs(x)返回?cái)?shù)的絕對值。acos(x)返回?cái)?shù)的反余弦值。asin(x)返回?cái)?shù)的反正弦值。atan(x)以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來返回 x 的反正切值。atan2(y,x)返回從 x 軸到點(diǎn) (x,y) 的角度（介于 -PI/2 與 PI/2 弧度之間）。cei

30、l(x)對數(shù)進(jìn)行上舍入。cos(x)返回?cái)?shù)的余弦。exp(x)返回 e 的指數(shù)。floor(x)對數(shù)進(jìn)行下舍入。log(x)返回?cái)?shù)的自然對數(shù)（底為e）。max(x,y)返回 x 和 y 中的最高值。min(x,y)返回 x 和 y 中的最低值。pow(x,y)返回 x 的 y 次冪。random()返回 0 1 之間的隨機(jī)數(shù)。round(x)把數(shù)四舍五入為最接近的整數(shù)。sin(x)返回?cái)?shù)的正弦。sqrt(x)返回?cái)?shù)的平方根。tan(x)返回角的正切。toSource()返回該對象的源代碼。valueOf()返回 Math 對象的原始值。第74頁，共339頁。3、for循環(huán)結(jié)構(gòu)for(初始化變量

31、;邏輯表達(dá)式;改變變量表達(dá)式)4、for.in循環(huán)結(jié)構(gòu)for(變量 in 對象或者數(shù)組)5、循環(huán)的嵌套無論哪種循環(huán)結(jié)構(gòu)，都可以相互之間使用嵌套，這與判斷結(jié)構(gòu)的嵌套類似。【相關(guān)知識】第75頁，共339頁。在標(biāo)簽對中輸入以下代碼：var ele=; for(var i=0;i10;i+) elei=Math.round(Math.random()*100); document.write(elei+ ); var e_max=ele1; var e_min=ele1; for(var i=0;ie_max)e_max=elei; if(eleie_min)e_min=elei; document.

32、write(最大值：+e_max+最小值：+e_min);【任務(wù)實(shí)現(xiàn)】第76頁，共339頁。有一個(gè)字符串I am a student,用循環(huán)語句查找第一個(gè)字母t在字符串中的位置。任務(wù)3 循環(huán)的跳轉(zhuǎn)第77頁，共339頁。1、字符串對象1.1、創(chuàng)建字符串對象使用構(gòu)造函數(shù)String()創(chuàng)建字符串對象，方式是：new String(str)或者String(str)其中str參數(shù)是字符串變量或者具體的字符串的值。【相關(guān)知識】第78頁，共339頁。1.2、屬性和方法【相關(guān)知識】屬性描述constructor對創(chuàng)建該對象的函數(shù)的引用length字符串的長度prototype允許您向?qū)ο筇砑訉傩院头椒ǖ?

33、9頁，共339頁。【相關(guān)知識】方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 編碼。concat()連接字符串。indexOf()檢索字符串。lastIndexOf()從后向前搜索字符串。localeCompare()用本地特定的順序來比較兩個(gè)字符串。match()找到一個(gè)或多個(gè)正則表達(dá)式的匹配。replace()替換與正則表達(dá)式匹配的子串。search()檢索與正則表達(dá)式相匹配的值。slice()提取字符串的片斷，并在新的字符串中返回被提取的部分。split()把字符串分割為字符串?dāng)?shù)組。strike()使用刪除線來顯示字符串。s

34、ubstr()從起始索引號提取字符串中指定數(shù)目的字符。substring()提取字符串中兩個(gè)指定的索引號之間的字符。toLocaleLowerCase()把字符串轉(zhuǎn)換為小寫。toLocaleUpperCase()把字符串轉(zhuǎn)換為大寫。toLowerCase()把字符串轉(zhuǎn)換為小寫。toUpperCase()把字符串轉(zhuǎn)換為大寫。toSource()代表對象的源代碼。toString()返回字符串。valueOf()返回某個(gè)字符串對象的原始值。第80頁，共339頁。2、循環(huán)的跳轉(zhuǎn)2.1、break語句在循環(huán)中，它的作用是結(jié)束循環(huán)的執(zhí)行。即使循環(huán)的次數(shù)還沒有執(zhí)行完，也不再執(zhí)行。2.2、continue語

35、句continue語句只能用于循環(huán)中，是結(jié)束當(dāng)前正在執(zhí)行的這次循環(huán)，跳入下一次循環(huán)?！鞠嚓P(guān)知識】第81頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：var str = I am a student;var str_len = str.length;var iPos = 0;for(var i=0;istr_len;i+) if(str.charAt(i)=t) iPos=i+1; break; document.write(字符串+str+中的第一個(gè)字母t的位置為+iPos);【任務(wù)實(shí)現(xiàn)】第82頁，共339頁。任務(wù)4 “項(xiàng)目三”的實(shí)現(xiàn)第83頁，共339頁。1、函數(shù)1.1、自定義函數(shù)function

36、函數(shù)名稱(參數(shù)列表)語句塊 return 【相關(guān)知識】第84頁，共339頁。1.2、函數(shù)參數(shù)函數(shù)名稱(參數(shù)值列表);對于形參和實(shí)參還需要注意以下幾點(diǎn)： 形參與實(shí)參要一一對應(yīng)，也就是傳遞的順序要一致。 形參的個(gè)數(shù)與實(shí)參的個(gè)數(shù)原則上要求一致。如果形參的個(gè)數(shù)大于實(shí)參的個(gè)數(shù)，則多余的形參的值將被賦予undefined(表示未定義)，如果形參的個(gè)數(shù)小于實(shí)參的個(gè)數(shù)，則多余的實(shí)參將被舍棄。 用于定義形參的變量不能添加關(guān)鍵字var,直接寫變量名即可。 形參只能是變量，不能是一個(gè)表達(dá)式?！鞠嚓P(guān)知識】第85頁，共339頁。1.3、系統(tǒng)函數(shù)也叫內(nèi)置函數(shù)，是JavaScript內(nèi)部定義好的函數(shù)，能完成一些特定的功能，

37、用戶不必知道它是如何實(shí)現(xiàn)的，只要直接調(diào)用就可以了。前面我們已經(jīng)學(xué)習(xí)的例如數(shù)學(xué)函數(shù)、parseInt()、parseFloat()、isNaN()等都是系統(tǒng)函數(shù)。【相關(guān)知識】第86頁，共339頁。2、變量的作用域變量的作用域就是變量的有效作用范圍。這個(gè)范圍有兩種：全局和局部。在函數(shù)定義之外聲明的變量是全局變量，該變量在整個(gè)持續(xù)范圍內(nèi)都可以訪問和修改。在函數(shù)定義內(nèi)聲明的變量是局部變量，它不能被該函數(shù)外的任何事物訪問。但是，必須注意的是，在函數(shù)內(nèi)部聲明一個(gè)局部變量時(shí)一定要使用關(guān)鍵字var，否則還是一個(gè)全局變量。一個(gè)局部變量的名稱可以與某個(gè)全局變量的名稱相同，但這是完全不同和獨(dú)立的兩個(gè)變量?！鞠嚓P(guān)知識

38、】第87頁，共339頁。1、要不斷彈出成績輸入對話框，沒有規(guī)定輸入次數(shù)，所以要使用while循環(huán)。2、當(dāng)輸入“!”就結(jié)束輸入，所以while循環(huán)的開始條件是輸入字符串不等于“!”。3、要對成績進(jìn)行打印和統(tǒng)計(jì)，每輸入一個(gè)成績就先存儲到數(shù)組中?！救蝿?wù)分析】第88頁，共339頁。1、在標(biāo)簽對中編寫超級鏈接“是否有不及格”的代碼，并為其添加onclick事件，在事件中調(diào)用一個(gè)自定義函數(shù)check()。此函數(shù)的功能是查找是否有不及格的成績：是否有不及格【任務(wù)實(shí)現(xiàn)】第89頁，共339頁。2、在標(biāo)簽對中輸入以下代碼：var score=0; /存放當(dāng)前輸入的成績var i=1; /輸入次數(shù)計(jì)數(shù)var ele

39、=; /存放最終的成績while(score!=!)score=prompt(請輸入第+i+個(gè)成績：,0);if(!isNaN(score) & score!= & score!=!)elei=Number(score);i+;else if(score!=!)alert(輸入的成績無效！);document.write(輸入的成績列表：);【任務(wù)實(shí)現(xiàn)】第90頁，共339頁。for(var i=1;iele.length;i+)document.write(elei+ );if(i % 4=0)document.write();var e_max=ele1; /存儲最高分var e_min=e

40、le1; /存儲最低分var sum=0; /存儲分?jǐn)?shù)總和，以便統(tǒng)計(jì)平均分for(var i=1;ie_max)e_max=elei; if(eleie_min)e_min=elei; 【任務(wù)實(shí)現(xiàn)】第91頁，共339頁。var everage=Math.round(sum/(ele.length-1)*10)/10;document.write(平均分?jǐn)?shù)：+everage+最高分：+e_max+最低分：+e_min);function check()var flag=0; /標(biāo)志，flag=0時(shí)無不及格，flag=1時(shí)有不及格for(var i=1;iele.length;i+)if(elei

41、60)flag=1;break;if(flag=0)alert(沒有不及格成績。);elsealert(有不及格成績。);【任務(wù)實(shí)現(xiàn)】第92頁，共339頁。項(xiàng)目四注冊頁面設(shè)計(jì) 事件第93頁，共339頁。設(shè)計(jì)一個(gè)簡單的用戶注冊頁面。頁面需求如下：填寫的信息有姓名、年齡、和城市，且都是必填信息，“城市”文本框只讀。當(dāng)鼠標(biāo)移入“姓名”或者“年齡”文本框時(shí)，光標(biāo)自動(dòng)落入文本框內(nèi)。當(dāng)鼠標(biāo)移入“城市”文本框時(shí)，文本框中顯示文字“請選擇城市”?！澳挲g”文本框中只能輸入數(shù)字，當(dāng)焦點(diǎn)落在此文本框中時(shí)，按非數(shù)字鍵無法鍵入。點(diǎn)擊“請選擇城市”下列列表框，可以選擇一個(gè)城市。當(dāng)選擇了一個(gè)城市后，在“城市”文本框中顯示該

42、城市。如果沒有填寫姓名，點(diǎn)擊“提交”按鈕提交表單時(shí)，會彈出提示框“姓名未填寫，不能提交！”。如果沒有填寫“年齡”，點(diǎn)擊“提交”按鈕提交表單時(shí)，會彈出提示框“年齡未填寫，不能提交！”。如果沒有選擇城市，點(diǎn)擊“提交”按鈕提交表單時(shí)，則彈出提示框“城市未選擇，不能提交！”。項(xiàng)目情境第94頁，共339頁。理解事件的概念。掌握事件的觸發(fā)機(jī)制。掌握常用事件的應(yīng)用。學(xué)習(xí)目標(biāo)第95頁，共339頁。點(diǎn)擊頁面上的“問候”按鈕，彈出兩個(gè)對話框，分別顯示“你好!”和“早上好”。要求不得將事件以及觸發(fā)代碼寫在“問候”按鈕的標(biāo)簽中，做到代碼與標(biāo)簽分離。任務(wù)1 在代碼中設(shè)置對象處理事件第96頁，共339頁。1、為對象事件賦

43、值屬性的設(shè)置方式：對象.屬性=屬性的值;為事件設(shè)置要觸發(fā)的行為動(dòng)作：對象.事件=函數(shù)名稱;或者對象.事件=function()函數(shù)體;【相關(guān)知識】第97頁，共339頁。2、瀏覽器與事件事件都是由瀏覽器產(chǎn)生的，而不是由javascript產(chǎn)生的。因此不同的瀏覽器產(chǎn)生的事件可能不同，就是相同的瀏覽器不同的版本所產(chǎn)生的事件也有可能不同。因此，對于某個(gè)事件在某個(gè)瀏覽器上能正常運(yùn)行，但在另一個(gè)瀏覽器上就無效。3、加載和卸載事件加載事件為onload，是指加載（打開）頁面完畢時(shí)產(chǎn)生的事件，卸載事件為onunload，是指卸載（關(guān)閉、刷新或者跳轉(zhuǎn)到其他頁面）網(wǎng)頁時(shí)產(chǎn)生的事件。另外在卸載頁面前還會觸發(fā)onbe

44、foreunload事件?！鞠嚓P(guān)知識】第98頁，共339頁。4、預(yù)加載對象處理事件window.onload=function()對象.事件=函數(shù)名稱;或者window.onload=function()對象.事件=function()函數(shù)體;【相關(guān)知識】第99頁，共339頁。在標(biāo)簽內(nèi)部輸入以下代碼：function hello()alert(你好！);alert(早上好！);bt1.onclick=hello;【任務(wù)實(shí)現(xiàn)】第100頁，共339頁。頁面上顯示一個(gè)“跳轉(zhuǎn)到百度”的超級鏈接，點(diǎn)擊該鏈接彈出一個(gè)詢問是否跳轉(zhuǎn)的對話框，如圖4.4所示。如果點(diǎn)擊“確定”按鈕，瀏覽器打開百度首頁，如果點(diǎn)擊“

45、取消”按鈕，瀏覽器不跳轉(zhuǎn)，仍舊停止本頁。任務(wù)2 事件處理中的返回值第101頁，共339頁。取消事件處理的默認(rèn)動(dòng)作【相關(guān)知識】元素事件描述onclick單擊跳轉(zhuǎn)到元素的href屬性指定的URLonsubmit、onreset提交表單、重置表單documentoncontextmenu單擊鼠標(biāo)右鍵可以顯示一個(gè)快捷菜單第102頁，共339頁。1、在頁面中制作一個(gè)超級鏈接，標(biāo)簽id為link。代碼如下：跳轉(zhuǎn)到百度【任務(wù)實(shí)現(xiàn)】第103頁，共339頁。2、在標(biāo)簽對中輸入如下JavaScript代碼：window.onload=function()link.onclick=function()var sel

46、=confirm(真的要跳轉(zhuǎn)嗎？)if(!sel)return false;【任務(wù)實(shí)現(xiàn)】第104頁，共339頁。頁面上有一個(gè)表單，內(nèi)部有一個(gè)文本框，一個(gè)“提交”按鈕。用戶必須在文本框中輸入姓名，點(diǎn)擊“提交”按鈕，表單才能提交跳轉(zhuǎn)到ok.html,否則表單不提交。任務(wù)3 表單提交事件第105頁，共339頁。對象層次模型【相關(guān)知識】第106頁，共339頁。1、在頁面上設(shè)計(jì)表單界面，HTML代碼如下： 姓名： 【任務(wù)實(shí)現(xiàn)】第107頁，共339頁。2、在標(biāo)簽對中輸入以下代碼：window.onload=function()form1.onsubmit=function()if(form1.txtNam

47、e.value=)alert(請?zhí)顚懶彰?;return false;【任務(wù)實(shí)現(xiàn)】第108頁，共339頁。頁面上有一張小狗的圖片，當(dāng)鼠標(biāo)放置到該圖片上時(shí)，變成另一張小狗的圖片；當(dāng)鼠標(biāo)移開時(shí)，圖片恢復(fù)成原來小狗圖片；當(dāng)在圖片上單擊鼠標(biāo)左鍵時(shí)，彈出對話框，提示信息“汪汪”。任務(wù)4 鼠標(biāo)事件第109頁，共339頁。鼠標(biāo)事件【相關(guān)知識】事件類型事件描述鼠標(biāo)移動(dòng)onmousemove當(dāng)鼠標(biāo)在對象上移動(dòng)時(shí)觸發(fā)onmouseout當(dāng)鼠標(biāo)離開對象時(shí)觸發(fā)onmouseover當(dāng)鼠標(biāo)移入到對象上時(shí)觸發(fā)鼠標(biāo)點(diǎn)擊onclick當(dāng)單擊鼠標(biāo)左鍵時(shí)觸發(fā)ondblclick當(dāng)雙擊鼠標(biāo)左鍵時(shí)觸發(fā)onmousedown當(dāng)鼠標(biāo)鍵

48、按下的瞬間觸發(fā)onmouseup當(dāng)鼠標(biāo)鍵按下然后又釋放的瞬間觸發(fā)第110頁，共339頁。1、在頁面上放置第一張小狗，HTML代碼如下：【任務(wù)實(shí)現(xiàn)】第111頁，共339頁。2、在標(biāo)簽對中輸入以下代碼：window.onload=function()dog1.onmouseover=function()dog1.src=images/dog2.jpg;dog1.onmouseout=function()dog1.src=images/dog1.jpg;dog1.onmousedown=function()alert(汪汪！);【任務(wù)實(shí)現(xiàn)】第112頁，共339頁。頁面上有兩個(gè)文本框，在第一個(gè)文本框中

49、每輸入一個(gè)字符，第二個(gè)文本框中就顯示該字符對應(yīng)在鍵盤上的鍵碼值。第一個(gè)文本框中只能輸入5個(gè)字符。任務(wù)5 鍵盤事件第113頁，共339頁。1、鍵盤事件【相關(guān)知識】事件描述onkeydown當(dāng)按下鍵盤鍵時(shí)觸發(fā)onkeyup當(dāng)釋放鍵盤鍵時(shí)觸發(fā)onkeypress當(dāng)按下并釋放鍵盤鍵時(shí)觸發(fā)第114頁，共339頁。2、event事件對象event(事件)對象代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕的狀態(tài)?！鞠嚓P(guān)知識】第115頁，共339頁。2.1 event對象兼容性處理IE瀏覽器有event對象，但是FF火狐瀏覽器沒有event對象，在該瀏覽器中，可以通過給函數(shù)的參數(shù)傳遞e

50、vent對象?？梢允褂靡韵路椒ǎ篺unction 函數(shù)名(ev)var oEvent=ev|event;/使用oEvent代替window.event或者對象=function(ev)var oEvent=ev|event;/使用oEvent代替window.event【相關(guān)知識】第116頁，共339頁。2.2 event對象屬性【相關(guān)知識】屬性描述 altKey設(shè)置或獲取Alt鍵的狀態(tài)。 altLeft設(shè)置或獲取左 Alt 鍵的狀態(tài)。 Button設(shè)置或獲取用戶所按的鼠標(biāo)按鈕。 clientX設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。 c

51、lientY設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 y 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。 ctrlKey設(shè)置或獲取 Ctrl 鍵的狀態(tài)。 ctrlLeft設(shè)置或獲取左 Ctrl 鍵的狀態(tài)。 fromElement設(shè)置或獲取事件發(fā)生時(shí)激活或鼠標(biāo)將要離開的對象。 keyCode設(shè)置或獲取與導(dǎo)致事件的按鍵關(guān)聯(lián)的 Unicode 按鍵代碼。 offsetX設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 x 坐標(biāo)。 offsetY設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的 y 坐標(biāo)。 propertyName設(shè)置或獲取對象上發(fā)生更改的屬性名稱。 第117頁，共339頁。（接上表）【相

52、關(guān)知識】repeat獲取 onkeydown 事件是否正在重復(fù)。 returnValue設(shè)置或獲取事件的返回值。 screenX設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的 x 坐標(biāo)。 screenY設(shè)置或獲取鼠標(biāo)指針位置相對于用戶屏幕的 y 坐標(biāo)。 shiftKey設(shè)置或獲取 Shift 鍵的狀態(tài)。 shiftLeft設(shè)置或獲取左 Shift 鍵的狀態(tài)。 srcElement設(shè)置或獲取觸發(fā)事件的對象。 toElement設(shè)置或獲取用戶要將鼠標(biāo)指針移動(dòng)指向的對象的引用。 type從 event 對象中獲取事件名稱。 wheelDelta設(shè)置或獲取滾輪按鈕滾動(dòng)的距離和方向。 x設(shè)置或獲取鼠標(biāo)指針位

53、置相對于父文檔的 x 像素坐標(biāo)。 y設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)。第118頁，共339頁。2.3 event.button的值及其含義【相關(guān)知識】值描述0沒按鍵1按左鍵2按右鍵3按左右鍵4按中間鍵5按左鍵和中間鍵6按右鍵和中間鍵7按所有的鍵第119頁，共339頁。1、在頁面上設(shè)置兩個(gè)文本框，HTML代碼如下：字符：鍵碼：【任務(wù)實(shí)現(xiàn)】第120頁，共339頁。2、在標(biāo)簽對中輸入以下代碼：window.onload=function()text1.onkeydown=function(ev)var oEvent=ev|event;text2.value=oEvent.keyCo

54、de;if(this.value.length=5)return false;【任務(wù)實(shí)現(xiàn)】第121頁，共339頁。任務(wù)6 “項(xiàng)目四”的實(shí)現(xiàn)第122頁，共339頁。this關(guān)鍵字JavaScript中，this關(guān)鍵字有很多用法，一般指的是當(dāng)前的對象。比如下列語句中的this指的就是文本框本身。【相關(guān)知識】第123頁，共339頁。在本項(xiàng)目中，表單控件得到焦點(diǎn)時(shí)，操作鼠標(biāo)或者敲擊鍵盤都需要檢查其中的值，所以需要用到鼠標(biāo)鍵盤事件。在年齡文本框中不允許輸入非數(shù)字的值以及在條件不符合時(shí)不允許提交表單都需要用到事件的返回值。檢查鍵入的年齡是否為數(shù)字還要用到event對象?！救蝿?wù)分析】第124頁，共339頁。

55、1、在標(biāo)簽對中編寫表單代碼：注冊 姓名：* 年齡：* 請選擇城市 北京 上海 廣州 * 【任務(wù)實(shí)現(xiàn)】第125頁，共339頁。2、在標(biāo)簽對中輸入以下代碼：window.onload=function()form1.username.onmouseover=function()this.focus();this.select();form1.age.onmouseover=function()this.focus();this.select();【任務(wù)實(shí)現(xiàn)】第126頁，共339頁。form1.age.onkeydown=function(ev)oEvent=ev|event;if( oEvent.

56、keyCode57)return false;form1.sel_city.onchange=function()if(this.value=0)alert(請選擇一個(gè)城市);elseform1.city.value=form1.sel_city.value;【任務(wù)實(shí)現(xiàn)】第127頁，共339頁。form1.onsubmit=function()if(form1.username.value=)alert(姓名未填寫，不能提交！);form1.username.focus();return false;else if(form1.age.value=)alert(年齡未填寫，不能提交！);for

57、m1.age.focus();return false;【任務(wù)實(shí)現(xiàn)】第128頁，共339頁。else if(form1.city.value= | form1.city.value=請選擇城市)alert(城市未選擇，不能提交);form1.sel_city.focus();return false;form1.city.onmouseover=function()if(this.value=)this.value=請選擇城市;【任務(wù)實(shí)現(xiàn)】第129頁，共339頁。項(xiàng)目五多窗體注冊頁面 窗口對象第130頁，共339頁。設(shè)計(jì)一個(gè)多窗體的用戶注冊頁面，具體需求如下：如圖5.1所示，在首頁上有一個(gè)“注

58、冊”按鈕，點(diǎn)擊可以進(jìn)入如圖5.2的注冊頁面。首頁窗體狀態(tài)欄上有一行文字“歡迎您光臨本站！”從右向左循環(huán)滾動(dòng)。項(xiàng)目情境 圖5.1 首頁 圖5.1 首頁 圖5.2 注冊頁面第131頁，共339頁。項(xiàng)目情境打開如圖5.2所示注冊頁面，默認(rèn)尺寸為280*400像素。點(diǎn)擊“注冊須知”按鈕打開一個(gè)對話框窗口（如圖5.3）,此對話框窗口尺寸為200*200像素，點(diǎn)擊其中的“關(guān)閉”鏈接，可以關(guān)閉此對話框窗口。 圖5.3 注冊須知第132頁，共339頁。項(xiàng)目情境在圖5.2的注冊頁面的簡介文本區(qū)域框中填入簡介信息，點(diǎn)擊“編輯”按鈕，打開如圖5.4所示的頁面，在該頁面中可以重新編輯簡介信息，編輯完成后，點(diǎn)擊“確定修

59、改并關(guān)閉本窗口”按鈕，將本窗口關(guān)閉，并且把重新編輯的簡介信息更新到注冊頁面的簡介文本區(qū)域框中。圖5.4 編輯簡介頁面第133頁，共339頁。項(xiàng)目情境點(diǎn)擊圖5.2注冊頁面中的“首頁”按鈕，頁面跳轉(zhuǎn)到圖5.1所示的首頁，點(diǎn)擊“關(guān)閉”按鈕，直接關(guān)閉注冊頁面。 第134頁，共339頁。掌握窗體對象Window的常用屬性和方法。掌握地址對象Location的常用屬性和方法。掌握歷史對象History的常用屬性和方法。掌握屏幕對象Screen的常用屬性和方法。掌握瀏覽器對象Navigator的常用屬性和方法。學(xué)習(xí)目標(biāo)第135頁，共339頁。在如圖5.5的頁面上有三個(gè)按鈕，點(diǎn)擊“關(guān)閉本窗口”按鈕，彈出如圖5

60、.6所示的關(guān)閉窗口選擇對話框，點(diǎn)擊“是”按鈕，當(dāng)前窗口關(guān)閉，點(diǎn)擊“否”，不關(guān)閉當(dāng)前窗口。點(diǎn)擊“立即關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對話框。點(diǎn)擊“打開子窗口”按鈕，打開如圖5.7所示的窗口，點(diǎn)擊該窗口上的“關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對話框。任務(wù)1 打開和關(guān)閉窗口圖5.5 主窗口圖5.6 關(guān)閉窗口選擇對話框圖5.7 子窗口第136頁，共339頁。1、窗口對象Window Window對象代表的是整個(gè)瀏覽器窗口?！鞠嚓P(guān)知識】屬性描述 closed獲取引用窗口是否已關(guān)閉。 defaultStatus設(shè)置或獲取要在窗口底部的狀態(tài)欄上顯示的缺省信息