版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
項(xiàng)目一對(duì)話框和頁(yè)面輸出——初步體驗(yàn)有兩張網(wǎng)頁(yè)，每張網(wǎng)頁(yè)上都有一個(gè)”問(wèn)候”按鈕。在第一張網(wǎng)頁(yè)上點(diǎn)擊該按鈕，彈出對(duì)話框“張三向您問(wèn)好！”，點(diǎn)擊對(duì)話框上的“確定”按鈕后，緊接著在該網(wǎng)頁(yè)上打印“張三歡迎您光臨本站！”。在第二張網(wǎng)頁(yè)上做同樣的操作，顯示結(jié)果相同，只不過(guò)信息中把“張三”顯示為了“李四”。項(xiàng)目要求代碼的復(fù)用性和可維護(hù)性良好。項(xiàng)目情境熟悉JavaScript腳本內(nèi)嵌在HTML中的書(shū)寫(xiě)方法熟悉JavaScript腳本的執(zhí)行時(shí)機(jī)。初步了解事件觸發(fā)的概念。初步了解函數(shù)和函數(shù)調(diào)用的方法。熟悉JavaScript腳本文件的編寫(xiě)和引入的方法。學(xué)習(xí)目標(biāo)打開(kāi)頁(yè)面，立即彈出一個(gè)問(wèn)候?qū)υ捒?。任?wù)1彈出對(duì)話框1、在HTML中，任何標(biāo)簽都可以看成是一個(gè)對(duì)象，例如body就是一個(gè)對(duì)象。這些對(duì)象一般都有屬性、事件和方法。其相關(guān)內(nèi)容將在后面的章節(jié)闡述。2、如果要想在頁(yè)面被引導(dǎo)后執(zhí)行一個(gè)任務(wù)，可以給<body>標(biāo)簽添加一個(gè)onload事件（關(guān)于事件將在后續(xù)章節(jié)詳細(xì)介紹），此事件在body對(duì)象被加載完成后被觸發(fā)，寫(xiě)法形如：onload="要執(zhí)行的代碼";3、alert("參數(shù)")功能是彈出一個(gè)對(duì)話框，對(duì)話框中的內(nèi)容就是該函數(shù)中設(shè)置的參數(shù)。4、JavaScript對(duì)大小寫(xiě)是敏感的，所以alert()必須全部小寫(xiě)。【相關(guān)知識(shí)】在<body>標(biāo)簽內(nèi)部輸入以下代碼：<bodyonload="alert('你好！')">【任務(wù)實(shí)現(xiàn)】在網(wǎng)頁(yè)上打印一串歡迎詞。任務(wù)2在頁(yè)面上打印歡迎詞1、document表示的是文檔對(duì)象，每個(gè)載入瀏覽器的HTML文檔都會(huì)成為Document對(duì)象。（關(guān)于該對(duì)象在后續(xù)章節(jié)會(huì)詳細(xì)介紹）2、document對(duì)象有很多方法，write方法是其中之一，表示在文檔中打印信息內(nèi)容。【相關(guān)知識(shí)】在<body>標(biāo)簽內(nèi)部輸入以下代碼：<bodyonload="document.write('歡迎光臨本站！')">【任務(wù)實(shí)現(xiàn)】先彈出問(wèn)候?qū)υ捒蛟僭陧?yè)面上打印歡迎詞任務(wù)3先彈對(duì)話框再打印
在JavaScript中，如果功能塊有多個(gè)語(yǔ)句，這些語(yǔ)句中間用分號(hào)隔開(kāi)。實(shí)際上，每一個(gè)完整的功能語(yǔ)句結(jié)束處都應(yīng)該寫(xiě)上分號(hào)，哪怕只有一條語(yǔ)句，也應(yīng)該寫(xiě)上?！鞠嚓P(guān)知識(shí)】在<body>標(biāo)簽內(nèi)部輸入以下代碼：<bodyonload="alert('你好！');document.write('歡迎光臨本站');">【任務(wù)實(shí)現(xiàn)】頁(yè)面上有一個(gè)按鈕，點(diǎn)擊此按鈕后，彈出問(wèn)候?qū)υ捒?，在?yè)面上打印歡迎詞。任務(wù)4點(diǎn)擊按鈕執(zhí)行任務(wù)3document.write()執(zhí)行時(shí)，將重寫(xiě)當(dāng)前頁(yè)面。所以，頁(yè)面上原有的內(nèi)容將全部消失，只留下document.write()寫(xiě)下的內(nèi)容。在本任務(wù)中，頁(yè)面中最后看不到原來(lái)的“問(wèn)候”按鈕就是這個(gè)原因?！鞠嚓P(guān)知識(shí)】在<body>標(biāo)簽對(duì)中編寫(xiě)按鈕代碼，并在按鈕代碼中添加onclick事件屬性，并編寫(xiě)執(zhí)行任務(wù)代碼：<inputtype="button"name="button"id="button"value="問(wèn)候"onclick="alert('你好！');document.write('歡迎光臨本站！');"/>【任務(wù)實(shí)現(xiàn)】仍然實(shí)現(xiàn)任務(wù)4的需求，但是要求把任務(wù)執(zhí)行代碼模塊化，以便隨時(shí)調(diào)用。任務(wù)5任務(wù)模塊化1、代碼模塊化。
將代碼“打包”為函數(shù)的形式2、Javascript與HTML混編
<script></script>標(biāo)簽的使用3、注釋
//……....注釋單行
/*…….*/注釋多行【相關(guān)知識(shí)】1、在<body>標(biāo)簽對(duì)中編寫(xiě)按鈕代碼：<inputtype="button"name="button"id="button"value="問(wèn)候"onclick="hello()"/>站！');"/>2、在頁(yè)面的<head></head>標(biāo)簽內(nèi)部編寫(xiě)代碼：<scripttype="text/javascript">//下面定義了一個(gè)函數(shù)hellofunctionhello(){ alert('你好！'); document.write('歡迎光臨本站!');}</script>【任務(wù)實(shí)現(xiàn)】仍然完成任務(wù)5的需求，但是要求增加代碼的靈活性。例如改變對(duì)話框和頁(yè)面打印的信息，但是不需要修改函數(shù)模塊代碼。任務(wù)6調(diào)用靈活化在任務(wù)4中，我們將代碼“打包”為一個(gè)函數(shù)，實(shí)現(xiàn)了模塊化，但是還不夠靈活。例如要改變顯示的內(nèi)容，就必須要修改函數(shù)體中的代碼。又例如，如果再增加一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕也需要調(diào)用函數(shù)hello(),但是要顯示的內(nèi)容又有不同，則無(wú)法實(shí)現(xiàn)，只能另外編寫(xiě)一個(gè)函數(shù)供其調(diào)用。這樣的程序缺乏了可擴(kuò)展性，代碼的復(fù)用性也比較差。程序設(shè)計(jì)中常常通過(guò)在編寫(xiě)函數(shù)模塊時(shí)定義參數(shù)（一般是用逗號(hào)隔開(kāi)的變量列表），而在調(diào)用函數(shù)時(shí)傳入具體的數(shù)值的方法實(shí)現(xiàn)函數(shù)功能的靈活性和可擴(kuò)展性。有關(guān)變量的概念以及函數(shù)參數(shù)的具體內(nèi)容將在后面章節(jié)闡述?！鞠嚓P(guān)知識(shí)】1、在<body>標(biāo)簽對(duì)中編寫(xiě)按鈕代碼：<inputtype="button"name="button"id="button"value="問(wèn)候"onclick="hello('你好','歡迎光臨本站！');"/>2、在頁(yè)面的<head></head>標(biāo)簽內(nèi)部編寫(xiě)代碼：<scripttype="text/javascript">functionhello(str1,str2){alert(str1);document.write(str2);}</script>【任務(wù)實(shí)現(xiàn)】任務(wù)7“項(xiàng)目一”的實(shí)現(xiàn)1、js文件擴(kuò)展名為js的文件是用JavaScript編寫(xiě)的客戶端腳本文件，它不是一般的網(wǎng)頁(yè)文件，一般不能直接運(yùn)行打開(kāi)，而是配合網(wǎng)頁(yè)來(lái)使用。它常常用來(lái)實(shí)現(xiàn)某些功能，這些功能代碼可以被多個(gè)不同的網(wǎng)頁(yè)調(diào)用。在js文件中編寫(xiě)JavaScript腳本時(shí)，不要用<script>標(biāo)簽對(duì)包括。2、引用js文件在頁(yè)面中，只有引入js文件才能使用該文件中的JavaScript代碼。方法是在<script>標(biāo)簽中添加src屬性，其值就是該js文件的路徑?！鞠嚓P(guān)知識(shí)】1、建立一個(gè)文件hello.js（注意擴(kuò)展名為js）。2、在hello.js中編寫(xiě)如下函數(shù)代碼并保存文件。functionhello(str1,str2){ alert(str1); document.write(str2);}3、建立兩個(gè)頁(yè)面，分別為hello1.html和hello2.html（為簡(jiǎn)單起見(jiàn)，將這三個(gè)文件放置在同一個(gè)目錄下）。4、在hello1.html中，在<body>標(biāo)簽對(duì)內(nèi)部編寫(xiě)按鈕代碼如下：<inputtype="button"name="button"id="button"value="問(wèn)候"onclick="hello('張三向您問(wèn)好','張三歡迎您光臨本站！');“/>5、在頁(yè)面的<head></head>標(biāo)簽內(nèi)部編寫(xiě)代碼如下：<scripttype="text/javascript"src="hello.js"></script>6、在hello2.html中做同樣的操作，只是將“張三”改為“李四”【任務(wù)實(shí)現(xiàn)】項(xiàng)目二簡(jiǎn)單計(jì)算器——判斷結(jié)構(gòu)設(shè)計(jì)一個(gè)簡(jiǎn)單的計(jì)算器，能進(jìn)行加、減、乘、除四則運(yùn)算。當(dāng)用戶運(yùn)行網(wǎng)頁(yè)時(shí)，依次彈出三個(gè)輸入對(duì)話框，分別要求輸入兩個(gè)數(shù)和一個(gè)運(yùn)算符號(hào)（+、-、×、÷）。輸入無(wú)誤時(shí)，在頁(yè)面上打印計(jì)算算式。在進(jìn)行除法運(yùn)算時(shí)，除數(shù)不能為0，否則打印錯(cuò)誤信息。如果輸入數(shù)字格式錯(cuò)誤或者輸入的運(yùn)算符號(hào)錯(cuò)誤都提示相應(yīng)的不能運(yùn)算信息。項(xiàng)目情境熟悉變量和常量的概念和使用方法。熟悉基本數(shù)據(jù)類(lèi)型的概念熟悉數(shù)據(jù)類(lèi)型的轉(zhuǎn)換。熟悉關(guān)系運(yùn)算符、邏輯運(yùn)算符、算術(shù)運(yùn)算符的使用方法。熟悉判斷結(jié)構(gòu)的使用方法。熟悉幾個(gè)內(nèi)置函數(shù)的使用方法。學(xué)習(xí)目標(biāo)打開(kāi)頁(yè)面，打印程序中指定的姓名和性別。任務(wù)1認(rèn)識(shí)變量和字符串1、變量的定義定義一個(gè)變量用關(guān)鍵字var，例如：varx;vary;一個(gè)var也可以同時(shí)定義多個(gè)變量，這些變量間用逗號(hào)隔開(kāi)，例如：varx,y,z;【相關(guān)知識(shí)】2、變量的賦值變量的賦值就是把值存儲(chǔ)在變量所在的內(nèi)存單元中,方法是用“=”運(yùn)算符。賦值可以是在定義變量時(shí)，例如：varx=0;vary=1,z=2;也可以是在變量定義后使用時(shí)才賦值，例如：varx;x=0;【相關(guān)知識(shí)】3、變量的命名變量的名稱(chēng)必須是由ASCII字符或者下劃線（_）開(kāi)頭，第一個(gè)字符不能是數(shù)字，但其后可以是數(shù)字或者其他字母。例如如下變量的命名是合法的：aA_aa_1注意：JavaScript語(yǔ)言對(duì)大小寫(xiě)是敏感的，所以變量a和變量A是兩個(gè)不同的變量。變量名不能定義為JavaScript的保留字。例如不能定義一個(gè)變量的名稱(chēng)為var或者function。【相關(guān)知識(shí)】4、變量的類(lèi)型【相關(guān)知識(shí)】數(shù)據(jù)類(lèi)型具體類(lèi)型基本數(shù)據(jù)類(lèi)型字符串型、數(shù)字型、布爾型復(fù)合數(shù)據(jù)類(lèi)型對(duì)象、數(shù)組其他數(shù)據(jù)類(lèi)型函數(shù)、null（空）、undefined（未定義）5、常量與變量對(duì)應(yīng)的是常量。常量用來(lái)表示一個(gè)固定不變的值。比如下面這些這些都是常量：12325.78"張三"true【相關(guān)知識(shí)】6、字符串型6.1、字符串的定義字符串必須用雙引號(hào)或者單引號(hào)包括起來(lái)。6.2、轉(zhuǎn)義符轉(zhuǎn)義符“\”6.3、連接運(yùn)算符連接運(yùn)算符”+”【相關(guān)知識(shí)】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varname="張三"; varsex="男"; document.write("姓名："+name+"<br/>性別："+sex); </script>【任務(wù)實(shí)現(xiàn)】打開(kāi)頁(yè)面，彈出一個(gè)輸入對(duì)話框，要求輸入姓名。輸入確定后再次彈出輸入對(duì)話框，要求輸入性別。輸入確定后，在頁(yè)面打印剛剛輸入的信息。任務(wù)2輸入對(duì)話框1、Window對(duì)象window對(duì)象表示瀏覽器窗口。任何一個(gè)全局函數(shù)或變量都是windowd對(duì)象的屬性，所以使用時(shí)，該對(duì)象常常省略不寫(xiě)?！鞠嚓P(guān)知識(shí)】2、prompt方法prompt方法的功能是彈出一個(gè)輸入對(duì)話框，格式是：prompt(<提示信息>[,默認(rèn)值])其返回的值就是用戶在對(duì)話框中輸入的值,返回值的類(lèi)型是字符串型?！鞠嚓P(guān)知識(shí)】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varname=mpt("請(qǐng)輸入您的姓名：",""); varsex=mpt("請(qǐng)輸入您的性別：","男"); document.write("姓名："+name+"<br/>性別："+sex);</script>【任務(wù)實(shí)現(xiàn)】打開(kāi)頁(yè)面，彈出一個(gè)輸入對(duì)話框，要求輸入一個(gè)整數(shù)。如果輸入的不是一個(gè)整數(shù)，則給出錯(cuò)誤提示。任務(wù)3判斷是否為整數(shù)1、表達(dá)式表達(dá)式可以是常量或者變量，也可以是由常量、變量和運(yùn)算符號(hào)組成的語(yǔ)句。比如下面這些都是合法的表達(dá)式：4.56truea>ba+b?！鞠嚓P(guān)知識(shí)】2、布爾數(shù)據(jù)類(lèi)型布爾（boolean）是一種基本數(shù)據(jù)類(lèi)型，表示真或者假，通俗的理解為是或者非，對(duì)或者錯(cuò)等。它常常用于判斷一個(gè)結(jié)果的是非性。它的值只有兩個(gè)：true（真）和false（假）。例如：8>4其結(jié)果就是false。再如：a<6如果a是一個(gè)比6小的值，則結(jié)果就是true,如果a是一個(gè)比6大或者等于6，結(jié)果就是false?！鞠嚓P(guān)知識(shí)】3、關(guān)系運(yùn)算符【相關(guān)知識(shí)】運(yùn)
算
符名
稱(chēng)舉
例==等于a==b!=不等于a!=b===全等于a===b!==不全等于a!==b>
大于a>b<
小于a<b>=大于或等于a>=b<=小于或等于a<=b4、判斷語(yǔ)句4.1、if語(yǔ)句①if語(yǔ)句if(<條件>)[語(yǔ)句塊]②if...else語(yǔ)句if(<條件>) [語(yǔ)句塊1]else [語(yǔ)句塊2]【相關(guān)知識(shí)】③if...elseif...else語(yǔ)句if(<條件1>) [語(yǔ)句塊1]elseif(條件2) [語(yǔ)句塊2]……elseif(<條件n>) [語(yǔ)句塊n]else [語(yǔ)句塊n+1]【相關(guān)知識(shí)】④if語(yǔ)句的嵌套if語(yǔ)句允許嵌套，嵌套時(shí)注意if與else的匹配，不要出現(xiàn)交叉嵌套的現(xiàn)象?！鞠嚓P(guān)知識(shí)】4.2、switch語(yǔ)句switch(<變量或表達(dá)式>){ case<數(shù)值1>：
[語(yǔ)句塊1] <break;> case<數(shù)值2>：
[語(yǔ)句塊2] <break;> …… case<數(shù)值n>：
[語(yǔ)句塊n] <break;> [default:] [語(yǔ)句塊n+1]}【相關(guān)知識(shí)】5、三目運(yùn)算三目運(yùn)算是根據(jù)條件執(zhí)行兩個(gè)語(yǔ)句中的其中一個(gè)，格式如下：布爾表達(dá)式?語(yǔ)句1:語(yǔ)句2當(dāng)“布爾表達(dá)式”值為真時(shí)，執(zhí)行“語(yǔ)句1”；當(dāng)“布爾表達(dá)式”值為假時(shí)，執(zhí)行“語(yǔ)句2”?！鞠嚓P(guān)知識(shí)】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varnum=mpt("請(qǐng)輸一個(gè)整數(shù)：","");if(parseInt(num)==num) { document.write(num+"是整數(shù)");}else{ document.write(num+"不是整數(shù)");}</script>【任務(wù)實(shí)現(xiàn)】打開(kāi)頁(yè)面，
彈出一個(gè)輸入對(duì)話框，要求輸入一個(gè)整數(shù)。如果輸入的為奇數(shù)，確認(rèn)后打印信息，提示該數(shù)為奇數(shù)。如果輸入的為偶數(shù)，確認(rèn)后打印信息，提示該數(shù)為偶數(shù)。如果輸入的信息為以下情況中的一種，就視為不合法輸入，提示錯(cuò)誤。①輸入的不是數(shù)字。
輸入的是數(shù)字，但不是整數(shù)。③未做任何輸入。任務(wù)4判斷奇偶數(shù)1、邏輯運(yùn)算符【相關(guān)知識(shí)】運(yùn)算符名稱(chēng)舉例備注&&邏輯與true&&false(結(jié)果為false)9>8&&7>8(結(jié)果為false)二元運(yùn)算符。只有兩個(gè)操作數(shù)的值都為true，結(jié)果才是true。||邏輯或true||false(結(jié)果為false)9>8||7>8(結(jié)果為false)二元運(yùn)算符。操作數(shù)中只要有一個(gè)值為true，結(jié)果就是true。只有兩個(gè)操作數(shù)的值都為false，結(jié)果才是false。!邏輯非!true(結(jié)果為false)!9>8(結(jié)果為false)一元運(yùn)算符。true的非是false,false的非是true。2、算術(shù)運(yùn)算符【相關(guān)知識(shí)】運(yùn)算符名稱(chēng)舉例備注+加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ù)字型。3、運(yùn)算符的優(yōu)先級(jí)【相關(guān)知識(shí)】?jī)?yōu)先級(jí)（從高到低）運(yùn)
算
符順
序1小括號(hào)()2一元運(yùn)算符++--!3算術(shù)運(yùn)算符先*/%，后+-4關(guān)系運(yùn)算符>>=<<=5關(guān)系運(yùn)算符==!====!==6邏輯運(yùn)算符先&&，后||7賦值運(yùn)算符=4、isNaN函數(shù)【相關(guān)知識(shí)】isNaN()函數(shù)接收一個(gè)參數(shù)，用于檢查這個(gè)參數(shù)是否“不是數(shù)值”。isNaN()函數(shù)在接收到一個(gè)值之后，會(huì)嘗試將這個(gè)值轉(zhuǎn)換為數(shù)值，如果能成功轉(zhuǎn)換，則返回false，否則返回true。該函數(shù)的基本語(yǔ)法是isNaN(value)，其中value就是要被檢查的值。需要注意的是，當(dāng)value為空格（或者由空格組成的字符串）、null值時(shí)，該函數(shù)返回的值也是false，原因是isNaN()函數(shù)將這些值轉(zhuǎn)換為了數(shù)字0。在<head>標(biāo)簽輸入下列代碼：<scripttype="text/javascript">varnum=mpt("請(qǐng)輸一個(gè)整數(shù)：",0);if(!isNaN(num)&&num!=""&&parseInt(num)==num){ varres=num%2;if(res==0) { document.write(num+"是偶數(shù)"); } else { document.write(num+"是奇數(shù)"); }}else{ document.write("輸入的數(shù)字格式不對(duì)，不能判斷奇偶數(shù)");}</script>【任務(wù)實(shí)現(xiàn)】打開(kāi)頁(yè)面，彈出輸入對(duì)話框，要求輸入一個(gè)被加數(shù)。輸入確定后，再次彈出輸入對(duì)話框，要求輸入一個(gè)加數(shù)。輸入確定后，打印這兩個(gè)數(shù)的和。如果這兩個(gè)數(shù)中只要有一個(gè)輸入格式不正確，或者未輸入任何值，都給出錯(cuò)誤信息。任務(wù)5加法運(yùn)算器1、數(shù)字型【相關(guān)知識(shí)】表現(xiàn)形式舉例涵義整數(shù)198、234072、0650xAF9、0x56E十進(jìn)制八進(jìn)制（0開(kāi)頭）十六進(jìn)制（0x開(kāi)頭）浮點(diǎn)數(shù)1.0、3.489有小數(shù)點(diǎn)科學(xué)計(jì)數(shù)法2.45E72.45×107特殊數(shù)字InfinityNaN無(wú)限大不是一個(gè)數(shù)字2、數(shù)據(jù)類(lèi)型的轉(zhuǎn)換2.1、隱式類(lèi)型轉(zhuǎn)換【相關(guān)知識(shí)】數(shù)據(jù)類(lèi)型在數(shù)字環(huán)境下轉(zhuǎn)換在字符串環(huán)境下轉(zhuǎn)換在布爾環(huán)境下轉(zhuǎn)換數(shù)字類(lèi)型無(wú)（1）轉(zhuǎn)換為內(nèi)容為數(shù)字的字符串（2）NaN轉(zhuǎn)換為"NaN"（1）非0轉(zhuǎn)換為true，0轉(zhuǎn)換為false（2）NaN轉(zhuǎn)換為false字符串類(lèi)型（1）空字符串轉(zhuǎn)換為0（2）非空字符串轉(zhuǎn)換為數(shù)字（當(dāng)字符串中的內(nèi)容為數(shù)字時(shí)）或NaN（當(dāng)字符串中的內(nèi)容不是數(shù)字時(shí)）無(wú)（1）空字符串轉(zhuǎn)換為false（2）非空字符串轉(zhuǎn)換為true布爾類(lèi)型（1）true轉(zhuǎn)換為1（2）false轉(zhuǎn)換為0（1）true轉(zhuǎn)換為"true"（2）false轉(zhuǎn)換為"false"無(wú)2.2、顯示類(lèi)型轉(zhuǎn)換【相關(guān)知識(shí)】函數(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ù)字字符前的字符轉(zhuǎn)換為浮點(diǎn)型數(shù)字。parseFloat("1.2abc")parseFloat("abc1.2")parseFloat("1.2e3abc")1.2NaN12003、查看數(shù)據(jù)類(lèi)型【相關(guān)知識(shí)】可以使用typeof運(yùn)算符查看一個(gè)數(shù)據(jù)的數(shù)據(jù)類(lèi)型。typeof運(yùn)算符有以下兩種使用方式：typeof(表達(dá)式)typeof變量名在<head>標(biāo)簽對(duì)中輸入如下代碼：<scripttype="text/javascript">varnum1=mpt("請(qǐng)輸入被加數(shù)：",0);varnum2=mpt("請(qǐng)輸入加數(shù)：",0);if(parseFloat(num1)==num1&&parseFloat(num2)==num2) { varres=parseFloat(num1)+parseFloat(num2); document.write(num1+"+"+num2+"="+res);}else{ document.write("輸入的數(shù)字格式不正確！");}</script>【任務(wù)實(shí)現(xiàn)】任務(wù)6“項(xiàng)目二”的實(shí)現(xiàn)在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">varnum1=mpt("請(qǐng)輸入第一個(gè)數(shù)：",0);varnum2=mpt("請(qǐng)輸入第二個(gè)數(shù)：",0);varop=mpt("請(qǐng)輸入一個(gè)運(yùn)算符號(hào)（+、-、×、÷）：","+");if(parseFloat(num1)==num1&&parseFloat(num2)==num2){ varn1=parseFloat(num1); varn2=parseFloat(num2); varflag=0; varres=0; switch(op) { case"+": res=n1+n2; break; case"-": res=n1-n2; break;【任務(wù)實(shí)現(xiàn)】 case"×": res=n1*n2; break; case"÷": if(n2!=0) //如果除數(shù)為0 { res=n1/n2; } else { flag=1; res="除數(shù)不能為0！"; } break; default: //如果輸入的運(yùn)算符不是+、-、×、÷中的任何一個(gè) flag=1; res="輸入的運(yùn)算符號(hào)錯(cuò)誤！不能計(jì)算！";
}【任務(wù)實(shí)現(xiàn)】
if(flag==0) { document.write(n1+op+n2+"="+res); } else { document.write(res); }}else{ document.write("輸入數(shù)字格式錯(cuò)誤！不能計(jì)算！");}</script>【任務(wù)實(shí)現(xiàn)】項(xiàng)目三統(tǒng)計(jì)成績(jī)單——循環(huán)結(jié)構(gòu)設(shè)計(jì)一個(gè)程序，要求能不斷彈出輸入成績(jī)對(duì)話框。在輸入成績(jī)時(shí)，檢測(cè)輸入數(shù)據(jù)的合法性，如果輸入的不是數(shù)字或輸入內(nèi)容為空，給出錯(cuò)誤信息，繼續(xù)彈出成績(jī)對(duì)話框輸入成績(jī)，只到用戶輸入一個(gè)截止符號(hào)"!"為止。最后在頁(yè)面上打印所有輸入的有效成績(jī)，打印的格式為每行4個(gè)。統(tǒng)計(jì)所有成績(jī)的平均分、最高分、最低分并打印輸出。最后輸出一個(gè)鏈接“是否有不及格”。用戶點(diǎn)擊該鏈接，如果成績(jī)中有不及格的，則彈出對(duì)話框提示沒(méi)有不及格成績(jī)。若有不及格成績(jī)，則彈出對(duì)話框提示有不及格成績(jī)。項(xiàng)目情境初步了解數(shù)組的概念和使用方法。初步了解對(duì)象的概念。熟悉Math數(shù)學(xué)對(duì)象的應(yīng)用。熟悉循環(huán)結(jié)構(gòu)的使用方法。熟悉變量的作用域?qū)W習(xí)目標(biāo)分別計(jì)算并打印輸出1+2+3+...+100和1×2
×3×...×100的值。任務(wù)1累加和累乘1、循環(huán)結(jié)構(gòu)1.1、while語(yǔ)句while(<邏輯表達(dá)式>)<語(yǔ)句塊>1.2、do...while語(yǔ)句do<語(yǔ)句塊>while(<邏輯表達(dá)式>);2、死循環(huán)【相關(guān)知識(shí)】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varsum=0; //總和sumvarf=1; //總乘積fvari=1; //計(jì)數(shù)iwhile(i<=100) { sum=sum+i; f=f*i; i++; } document.write("1+2+3+...+100="+sum+"<br/>1×2×3×...×100="+f);</script>【任務(wù)實(shí)現(xiàn)】隨機(jī)的給出10個(gè)0到100之間（包含0和100）的整數(shù)，統(tǒng)計(jì)這10個(gè)數(shù)中的最大值和最小值。任務(wù)2最大和最小值1、數(shù)組1.1、數(shù)組的概念數(shù)組是一些數(shù)據(jù)元素（element）的集合，每個(gè)數(shù)據(jù)元素在數(shù)組中都有一個(gè)編號(hào)，通過(guò)編號(hào)可以引用這些數(shù)據(jù)元素。這些數(shù)據(jù)元素可以是不同的數(shù)據(jù)類(lèi)型，例如數(shù)字型、字符串型、布爾型等，設(shè)置還可以是一個(gè)數(shù)組。每個(gè)數(shù)組都有一個(gè)名稱(chēng)，其命名規(guī)則和變量的命名規(guī)則相同?！鞠嚓P(guān)知識(shí)】1.2、數(shù)組的定義1.2.1、使用構(gòu)造函數(shù)方式有三種，分別是：newArray()newArray(<數(shù)組元素的個(gè)數(shù)>)newArray(<數(shù)組元素1的值>[,數(shù)組元素2的值]...)1.2.2、直接定義方式有兩種，一種是用一對(duì)空的中括號(hào)定義一個(gè)空數(shù)組，然后再為數(shù)組元素賦值。另一種方式是在一對(duì)中括號(hào)中，放入數(shù)組元素值，并用逗號(hào)隔開(kāi)?！鞠嚓P(guān)知識(shí)】2、for語(yǔ)句for(初始化變量;邏輯表達(dá)式;改變變量表達(dá)式)<語(yǔ)句塊>3、for...in語(yǔ)句for(變量in對(duì)象或者數(shù)組)<語(yǔ)句塊>4、循環(huán)的嵌套無(wú)論哪種循環(huán)結(jié)構(gòu)，都可以相互之間使用嵌套，這與判斷結(jié)構(gòu)的嵌套類(lèi)似?！鞠嚓P(guān)知識(shí)】5、對(duì)象5.1、對(duì)象的概念對(duì)象有三要素：屬性、方法和事件。5.2、使用屬性和方法引用或修改對(duì)象的屬性：對(duì)象.對(duì)象的屬性對(duì)象[對(duì)象的屬性]//其中，“對(duì)象的屬性”要使用雙引號(hào)或單引號(hào)括起來(lái)調(diào)用對(duì)象的方法：對(duì)象.對(duì)象的方法名([參數(shù)列表])【相關(guān)知識(shí)】5.3、Math對(duì)象【相關(guān)知識(shí)】屬性描述E返回算術(shù)常量e，即自然對(duì)數(shù)的底數(shù)（約等于2.718）。LN2返回2的自然對(duì)數(shù)（約等于0.693）。LN10返回10的自然對(duì)數(shù)（約等于2.302）。LOG2E返回以2為底的e的對(duì)數(shù)（約等于1.414）。LOG10E返回以10為底的e的對(duì)數(shù)（約等于0.434）。PI返回圓周率（約等于3.14159）。SQRT1_2返回返回2的平方根的倒數(shù)（約等于0.707）。SQRT2返回2的平方根（約等于1.414）?！鞠嚓P(guān)知識(shí)】方法描述abs(x)返回?cái)?shù)的絕對(duì)值。acos(x)返回?cái)?shù)的反余弦值。asin(x)返回?cái)?shù)的反正弦值。atan(x)以介于-PI/2與PI/2弧度之間的數(shù)值來(lái)返回x的反正切值。atan2(y,x)返回從x軸到點(diǎn)(x,y)的角度（介于-PI/2與PI/2弧度之間）。ceil(x)對(duì)數(shù)進(jìn)行上舍入。cos(x)返回?cái)?shù)的余弦。exp(x)返回e的指數(shù)。floor(x)對(duì)數(shù)進(jìn)行下舍入。log(x)返回?cái)?shù)的自然對(duì)數(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()返回該對(duì)象的源代碼。valueOf()返回Math對(duì)象的原始值。在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">varele=[];for(vari=0;i<10;i++){ ele[i]=Math.round(Math.random()*100); document.write(ele[i]+"");}vare_max=ele[1];vare_min=ele[1];for(vari=0;i<10;i++){ if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}document.write("<br/>最大值："+e_max+"<br/>最小值："+e_min);</script>【任務(wù)實(shí)現(xiàn)】有一個(gè)字符串"Iamastudent",用循環(huán)語(yǔ)句查找第一個(gè)字母"t"在字符串中的位置。任務(wù)3循環(huán)的跳轉(zhuǎn)1、字符串對(duì)象1.1、創(chuàng)建字符串對(duì)象使用構(gòu)造函數(shù)String()創(chuàng)建字符串對(duì)象，方式是：newString(str)或者String(str)其中str參數(shù)是字符串變量或者具體的字符串的值。【相關(guān)知識(shí)】1.2、屬性和方法【相關(guān)知識(shí)】屬性描述constructor對(duì)創(chuàng)建該對(duì)象的函數(shù)的引用length字符串的長(zhǎng)度prototype允許您向?qū)ο筇砑訉傩院头椒ā鞠嚓P(guān)知識(shí)】方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的Unicode編碼。concat()連接字符串。indexOf()檢索字符串。lastIndexOf()從后向前搜索字符串。localeCompare()用本地特定的順序來(lái)比較兩個(gè)字符串。match()找到一個(gè)或多個(gè)正則表達(dá)式的匹配。replace()替換與正則表達(dá)式匹配的子串。search()檢索與正則表達(dá)式相匹配的值。slice()提取字符串的片斷，并在新的字符串中返回被提取的部分。split()把字符串分割為字符串?dāng)?shù)組。strike()使用刪除線來(lái)顯示字符串。substr()從起始索引號(hào)提取字符串中指定數(shù)目的字符。substring()提取字符串中兩個(gè)指定的索引號(hào)之間的字符。toLocaleLowerCase()把字符串轉(zhuǎn)換為小寫(xiě)。toLocaleUpperCase()把字符串轉(zhuǎn)換為大寫(xiě)。toLowerCase()把字符串轉(zhuǎn)換為小寫(xiě)。toUpperCase()把字符串轉(zhuǎn)換為大寫(xiě)。toSource()代表對(duì)象的源代碼。toString()返回字符串。valueOf()返回某個(gè)字符串對(duì)象的原始值。2、循環(huán)的跳轉(zhuǎn)2.1、break語(yǔ)句在循環(huán)中，它的作用是結(jié)束循環(huán)的執(zhí)行。即使循環(huán)的次數(shù)還沒(méi)有執(zhí)行完，也不再執(zhí)行。2.2、continue語(yǔ)句continue語(yǔ)句只能用于循環(huán)中，是結(jié)束當(dāng)前正在執(zhí)行的這次循環(huán)，跳入下一次循環(huán)?！鞠嚓P(guān)知識(shí)】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varstr="Iamastudent";varstr_len=str.length;variPos=0;for(vari=0;i<str_len;i++){if(str.charAt(i)=="t"){iPos=i+1;break;}}document.write("字符串"+str+"中的第一個(gè)字母t的位置為"+iPos);【任務(wù)實(shí)現(xiàn)】任務(wù)4“項(xiàng)目三”的實(shí)現(xiàn)1、函數(shù)1.1、自定義函數(shù)function函數(shù)名稱(chēng)([參數(shù)列表]){ [語(yǔ)句塊][return<返回值>]}【相關(guān)知識(shí)】1.2、函數(shù)參數(shù)函數(shù)名稱(chēng)([參數(shù)值列表]);對(duì)于形參和實(shí)參還需要注意以下幾點(diǎn)：①形參與實(shí)參要一一對(duì)應(yīng)，也就是傳遞的順序要一致。②形參的個(gè)數(shù)與實(shí)參的個(gè)數(shù)原則上要求一致。如果形參的個(gè)數(shù)大于實(shí)參的個(gè)數(shù)，則多余的形參的值將被賦予undefined(表示未定義)，如果形參的個(gè)數(shù)小于實(shí)參的個(gè)數(shù)，則多余的實(shí)參將被舍棄。③用于定義形參的變量不能添加關(guān)鍵字var,直接寫(xiě)變量名即可。④形參只能是變量，不能是一個(gè)表達(dá)式。【相關(guān)知識(shí)】1.3、系統(tǒng)函數(shù)也叫內(nèi)置函數(shù)，是JavaScript內(nèi)部定義好的函數(shù)，能完成一些特定的功能，用戶不必知道它是如何實(shí)現(xiàn)的，只要直接調(diào)用就可以了。前面我們已經(jīng)學(xué)習(xí)的例如數(shù)學(xué)函數(shù)、parseInt()、parseFloat()、isNaN()等都是系統(tǒng)函數(shù)?！鞠嚓P(guān)知識(shí)】2、變量的作用域變量的作用域就是變量的有效作用范圍。這個(gè)范圍有兩種：全局和局部。在函數(shù)定義之外聲明的變量是全局變量，該變量在整個(gè)持續(xù)范圍內(nèi)都可以訪問(wèn)和修改。在函數(shù)定義內(nèi)聲明的變量是局部變量，它不能被該函數(shù)外的任何事物訪問(wèn)。但是，必須注意的是，在函數(shù)內(nèi)部聲明一個(gè)局部變量時(shí)一定要使用關(guān)鍵字var，否則還是一個(gè)全局變量。一個(gè)局部變量的名稱(chēng)可以與某個(gè)全局變量的名稱(chēng)相同，但這是完全不同和獨(dú)立的兩個(gè)變量?！鞠嚓P(guān)知識(shí)】1、要不斷彈出成績(jī)輸入對(duì)話框，沒(méi)有規(guī)定輸入次數(shù)，所以要使用while循環(huán)。2、當(dāng)輸入“!”就結(jié)束輸入，所以while循環(huán)的開(kāi)始條件是輸入字符串不等于“!”。3、要對(duì)成績(jī)進(jìn)行打印和統(tǒng)計(jì)，每輸入一個(gè)成績(jī)就先存儲(chǔ)到數(shù)組中?！救蝿?wù)分析】1、在<body>標(biāo)簽對(duì)中編寫(xiě)超級(jí)鏈接“是否有不及格”的代碼，并為其添加onclick事件，在事件中調(diào)用一個(gè)自定義函數(shù)check()。此函數(shù)的功能是查找是否有不及格的成績(jī)：<ahref="#"onclick="check()">是否有不及格</a>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">varscore=0;//存放當(dāng)前輸入的成績(jī)vari=1;//輸入次數(shù)計(jì)數(shù)varele=[];//存放最終的成績(jī)while(score!="!"){ score=prompt("請(qǐng)輸入第"+i+"個(gè)成績(jī)：",0); if(!isNaN(score)&&score!=""&&score!="!") { ele[i]=Number(score); i++; } elseif(score!="!") { alert("輸入的成績(jī)無(wú)效！"); }}document.write("輸入的成績(jī)列表：<br/>");【任務(wù)實(shí)現(xiàn)】for(vari=1;i<ele.length;i++){ document.write(ele[i]+""); if(i%4==0) { document.write("<br/>"); }}vare_max=ele[1];//存儲(chǔ)最高分vare_min=ele[1];//存儲(chǔ)最低分varsum=0;//存儲(chǔ)分?jǐn)?shù)總和，以便統(tǒng)計(jì)平均分for(vari=1;i<ele.length;i++){ sum+=ele[i]; if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}【任務(wù)實(shí)現(xiàn)】vareverage=Math.round(sum/(ele.length-1)*10)/10;document.write("<br/>平均分?jǐn)?shù)："+everage+"<br/>最高分："+e_max+"<br/>最低分："+e_min);functioncheck(){ varflag=0;//標(biāo)志，flag=0時(shí)無(wú)不及格，flag=1時(shí)有不及格
for(vari=1;i<ele.length;i++) { if(ele[i]<60) { flag=1; break; } } if(flag==0) { alert("沒(méi)有不及格成績(jī)。"); } else { alert("有不及格成績(jī)。"); }}</script>【任務(wù)實(shí)現(xiàn)】項(xiàng)目四注冊(cè)頁(yè)面設(shè)計(jì)——事件設(shè)計(jì)一個(gè)簡(jiǎn)單的用戶注冊(cè)頁(yè)面。頁(yè)面需求如下：填寫(xiě)的信息有姓名、年齡、和城市，且都是必填信息，“城市”文本框只讀。當(dāng)鼠標(biāo)移入“姓名”或者“年齡”文本框時(shí)，光標(biāo)自動(dòng)落入文本框內(nèi)。當(dāng)鼠標(biāo)移入“城市”文本框時(shí)，文本框中顯示文字“請(qǐng)選擇城市”?！澳挲g”文本框中只能輸入數(shù)字，當(dāng)焦點(diǎn)落在此文本框中時(shí)，按非數(shù)字鍵無(wú)法鍵入。點(diǎn)擊“請(qǐng)選擇城市”下列列表框，可以選擇一個(gè)城市。當(dāng)選擇了一個(gè)城市后，在“城市”文本框中顯示該城市。如果沒(méi)有填寫(xiě)姓名，點(diǎn)擊“提交”按鈕提交表單時(shí)，會(huì)彈出提示框“姓名未填寫(xiě)，不能提交！”。如果沒(méi)有填寫(xiě)“年齡”，點(diǎn)擊“提交”按鈕提交表單時(shí)，會(huì)彈出提示框“年齡未填寫(xiě)，不能提交！”。如果沒(méi)有選擇城市，點(diǎn)擊“提交”按鈕提交表單時(shí)，則彈出提示框“城市未選擇，不能提交！”。項(xiàng)目情境理解事件的概念。掌握事件的觸發(fā)機(jī)制。掌握常用事件的應(yīng)用。學(xué)習(xí)目標(biāo)點(diǎn)擊頁(yè)面上的“問(wèn)候”按鈕，彈出兩個(gè)對(duì)話框，分別顯示“你好!”和“早上好”。要求不得將事件以及觸發(fā)代碼寫(xiě)在“問(wèn)候”按鈕的標(biāo)簽中，做到代碼與標(biāo)簽分離。任務(wù)1在代碼中設(shè)置對(duì)象處理事件1、為對(duì)象事件賦值屬性的設(shè)置方式：對(duì)象.屬性=屬性的值;為事件設(shè)置要觸發(fā)的行為動(dòng)作：對(duì)象.事件=函數(shù)名稱(chēng);或者對(duì)象.事件=function(){
[函數(shù)體];}【相關(guān)知識(shí)】2、瀏覽器與事件事件都是由瀏覽器產(chǎn)生的，而不是由javascript產(chǎn)生的。因此不同的瀏覽器產(chǎn)生的事件可能不同，就是相同的瀏覽器不同的版本所產(chǎn)生的事件也有可能不同。因此，對(duì)于某個(gè)事件在某個(gè)瀏覽器上能正常運(yùn)行，但在另一個(gè)瀏覽器上就無(wú)效。3、加載和卸載事件加載事件為onload，是指加載（打開(kāi)）頁(yè)面完畢時(shí)產(chǎn)生的事件，卸載事件為onunload，是指卸載（關(guān)閉、刷新或者跳轉(zhuǎn)到其他頁(yè)面）網(wǎng)頁(yè)時(shí)產(chǎn)生的事件。另外在卸載頁(yè)面前還會(huì)觸發(fā)onbeforeunload事件?！鞠嚓P(guān)知識(shí)】4、預(yù)加載對(duì)象處理事件window.onload=function(){
對(duì)象.事件=函數(shù)名稱(chēng);}或者window.onload=function(){
對(duì)象.事件=function(){ [函數(shù)體];}}【相關(guān)知識(shí)】在<body>標(biāo)簽內(nèi)部輸入以下代碼：<inputtype="button"name="bt1"id="bt1"value="問(wèn)候"/><scripttype="text/javascript">functionhello(){ alert('你好！'); alert('早上好！');}bt1.onclick=hello;</script>【任務(wù)實(shí)現(xiàn)】頁(yè)面上顯示一個(gè)“跳轉(zhuǎn)到百度”的超級(jí)鏈接，點(diǎn)擊該鏈接彈出一個(gè)詢(xún)問(wèn)是否跳轉(zhuǎn)的對(duì)話框，如圖4.4所示。如果點(diǎn)擊“確定”按鈕，瀏覽器打開(kāi)百度首頁(yè)，如果點(diǎn)擊“取消”按鈕，瀏覽器不跳轉(zhuǎn)，仍舊停止本頁(yè)。任務(wù)2事件處理中的返回值取消事件處理的默認(rèn)動(dòng)作【相關(guān)知識(shí)】元素事件描述<a>onclick單擊跳轉(zhuǎn)到元素的href屬性指定的URL<form>onsubmit、onreset提交表單、重置表單documentoncontextmenu單擊鼠標(biāo)右鍵可以顯示一個(gè)快捷菜單1、在頁(yè)面中制作一個(gè)超級(jí)鏈接，標(biāo)簽id為link。代碼如下：<aid="link"href="">跳轉(zhuǎn)到百度</a>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入如下JavaScript代碼：<scripttype="text/javascript">window.onload=function(){ link.onclick=function() { varsel=confirm("真的要跳轉(zhuǎn)嗎？") if(!sel) { returnfalse; } }}</script>【任務(wù)實(shí)現(xiàn)】頁(yè)面上有一個(gè)表單，內(nèi)部有一個(gè)文本框，一個(gè)“提交”按鈕。用戶必須在文本框中輸入姓名，點(diǎn)擊“提交”按鈕，表單才能提交跳轉(zhuǎn)到ok.html,否則表單不提交。任務(wù)3表單提交事件對(duì)象層次模型【相關(guān)知識(shí)】1、在頁(yè)面上設(shè)計(jì)表單界面，HTML代碼如下：<formname="form1"method="post"action="ok.html">
姓名：<inputtype="text"name="txtName"id="txtname"><inputtype="submit"name="button"id="button"value="提交"></form>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { if(form1.txtName.value=="") { alert("請(qǐng)?zhí)顚?xiě)姓名！"); returnfalse; } }}</script>【任務(wù)實(shí)現(xiàn)】頁(yè)面上有一張小狗的圖片，當(dāng)鼠標(biāo)放置到該圖片上時(shí)，變成另一張小狗的圖片；當(dāng)鼠標(biāo)移開(kāi)時(shí)，圖片恢復(fù)成原來(lái)小狗圖片；當(dāng)在圖片上單擊鼠標(biāo)左鍵時(shí)，彈出對(duì)話框，提示信息“汪汪”。任務(wù)4鼠標(biāo)事件鼠標(biāo)事件【相關(guān)知識(shí)】事件類(lèi)型事件描述鼠標(biāo)移動(dòng)onmousemove當(dāng)鼠標(biāo)在對(duì)象上移動(dòng)時(shí)觸發(fā)onmouseout當(dāng)鼠標(biāo)離開(kāi)對(duì)象時(shí)觸發(fā)onmouseover當(dāng)鼠標(biāo)移入到對(duì)象上時(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)鍵按下的瞬間觸發(fā)onmouseup當(dāng)鼠標(biāo)鍵按下然后又釋放的瞬間觸發(fā)1、在頁(yè)面上放置第一張小狗，HTML代碼如下：<body><imgid="dog1"src="images/dog1.jpg"></body>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ dog1.onmouseover=function() { dog1.src="images/dog2.jpg"; } dog1.onmouseout=function() { dog1.src="images/dog1.jpg"; } dog1.onmousedown=function() { alert("汪汪！"); }}</script>【任務(wù)實(shí)現(xiàn)】頁(yè)面上有兩個(gè)文本框，在第一個(gè)文本框中每輸入一個(gè)字符，第二個(gè)文本框中就顯示該字符對(duì)應(yīng)在鍵盤(pán)上的鍵碼值。第一個(gè)文本框中只能輸入5個(gè)字符。任務(wù)5鍵盤(pán)事件1、鍵盤(pán)事件【相關(guān)知識(shí)】事
件描
述onkeydown當(dāng)按下鍵盤(pán)上的鍵時(shí)觸發(fā)（能識(shí)別功能鍵，不區(qū)分大小寫(xiě)按鍵）onkeyup當(dāng)松開(kāi)鍵盤(pán)上的鍵時(shí)觸發(fā)（能識(shí)別功能鍵，不區(qū)分大小寫(xiě)按鍵）onkeypress當(dāng)按下鍵盤(pán)上的鍵時(shí)觸發(fā)（不能識(shí)別功能鍵，區(qū)分大小寫(xiě)按鍵）2、event事件對(duì)象event(事件)對(duì)象代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤(pán)狀態(tài)，鼠標(biāo)狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕的狀態(tài)。【相關(guān)知識(shí)】2.1event對(duì)象兼容性處理IE瀏覽器有event對(duì)象，但是FF火狐瀏覽器沒(méi)有event對(duì)象，在該瀏覽器中，可以通過(guò)給函數(shù)的參數(shù)傳遞event對(duì)象?？梢允褂靡韵路椒ǎ篺unction函數(shù)名(ev){varoEvent=ev||event;//使用oEvent代替window.event}或者對(duì)象=function(ev){varoEvent=ev||event;//使用oEvent代替window.event}【相關(guān)知識(shí)】2.2event對(duì)象屬性【相關(guān)知識(shí)】屬性描述
altKey設(shè)置或獲取Alt鍵的狀態(tài)。
altLeft設(shè)置或獲取左Alt鍵的狀態(tài)。
Button設(shè)置或獲取用戶所按的鼠標(biāo)按鈕。
clientX設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于窗口客戶區(qū)域的x坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。
clientY設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于窗口客戶區(qū)域的y坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動(dòng)條。
ctrlKey設(shè)置或獲取Ctrl鍵的狀態(tài)。
ctrlLeft設(shè)置或獲取左Ctrl鍵的狀態(tài)。
fromElement設(shè)置或獲取事件發(fā)生時(shí)激活或鼠標(biāo)將要離開(kāi)的對(duì)象。
keyCode設(shè)置或獲取與導(dǎo)致事件的按鍵關(guān)聯(lián)的Unicode按鍵代碼。
offsetX設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的x坐標(biāo)。
offsetY設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的y坐標(biāo)。
propertyName設(shè)置或獲取對(duì)象上發(fā)生更改的屬性名稱(chēng)。
（接上表）【相關(guān)知識(shí)】repeat獲取onkeydown事件是否正在重復(fù)。
returnValue設(shè)置或獲取事件的返回值。
screenX設(shè)置或獲取獲取鼠標(biāo)指針位置相對(duì)于用戶屏幕的x坐標(biāo)。
screenY設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于用戶屏幕的y坐標(biāo)。
shiftKey設(shè)置或獲取Shift鍵的狀態(tài)。
shiftLeft設(shè)置或獲取左Shift鍵的狀態(tài)。
srcElement設(shè)置或獲取觸發(fā)事件的對(duì)象。
toElement設(shè)置或獲取用戶要將鼠標(biāo)指針移動(dòng)指向的對(duì)象的引用。
type從event對(duì)象中獲取事件名稱(chēng)。
wheelDelta設(shè)置或獲取滾輪按鈕滾動(dòng)的距離和方向。
x設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于父文檔的x像素坐標(biāo)。
y設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于父文檔的y像素坐標(biāo)。2.3event.button的值及其含義【相關(guān)知識(shí)】值描
述0按下鼠標(biāo)左鍵1按下鼠標(biāo)中間鍵（滾輪）2按下鼠標(biāo)右鍵1、在頁(yè)面上設(shè)置兩個(gè)文本框，HTML代碼如下：<body>字符：<inputtype="text"id="text1">鍵碼：<inputtype="text"id="text2"></body>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ text1.onkeydown=function(ev) { varoEvent=ev||event; text2.value=oEvent.keyCode; if(this.value.length>=5) { returnfalse; } }}</script>【任務(wù)實(shí)現(xiàn)】頁(yè)面中有一個(gè)文本框，要求輸入正確格式的電子郵件地址，如果電子郵件地址格式不正確，則給出錯(cuò)誤提示信息，表單不能提交。任務(wù)6用正則表達(dá)式驗(yàn)證電子郵件地址格式1、正則表達(dá)式正則表達(dá)式又稱(chēng)規(guī)則表達(dá)式（RegularExpression），是一種文本模式，包括普通字符（如a～z之間的字母）和特殊字符（也叫元字符或限定符）。正則表達(dá)式使用單個(gè)字符串來(lái)描述、匹配一系列匹配某個(gè)句法規(guī)則的字符串，通常被用來(lái)檢索、替換那些符合某個(gè)模式（規(guī)則）的文本。正則表達(dá)式不是JavaScript語(yǔ)言特有的，它是獨(dú)立于語(yǔ)言之外的一種文本模式。許多程序設(shè)計(jì)語(yǔ)言（如PHP、Python、C#、Java等語(yǔ)言）都支持利用正則表達(dá)式進(jìn)行字符串操作?！鞠嚓P(guān)知識(shí)】2、RegExp對(duì)象RegExp對(duì)象表示正則表達(dá)式，是由普通字符和特殊字符（也叫元字符或限定符）組成的文字模板，用于對(duì)字符串執(zhí)行模式匹配。創(chuàng)建RegExp對(duì)象的方式：（1）使用字面量創(chuàng)建RegExp對(duì)象的語(yǔ)法格式如下：var變量=/正則表達(dá)式/匹配模式;（2）使用構(gòu)造函數(shù)創(chuàng)建RegExp對(duì)象的語(yǔ)法格式如下：var變量=newRegExp("正則表達(dá)式","匹配模式");【相關(guān)知識(shí)】3、RegExp對(duì)象的常用方法【相關(guān)知識(shí)】方
法描
述exec()檢索字符串中指定的值，返回找到的值，并確定其位置test()檢索字符串中指定的值，返回true或false4、支持正則表達(dá)式的String對(duì)象的方法【相關(guān)知識(shí)】方
法描
述search()在字符串中檢索指定的子字符串，或者檢索與正則表達(dá)式匹配的子字符串，并返回第1個(gè)匹配的子字符串在字符串中的起始位置match()在字符串中檢索指定的值，或者找到一個(gè)或多個(gè)正則表達(dá)式的匹配replace()替換與正則表達(dá)式匹配的子字符串split()把字符串分割為字符串?dāng)?shù)組1、在頁(yè)面中設(shè)置一個(gè)文本框和一個(gè)“提交”按鈕，HTML代碼如下：<body>輸入郵箱</br><formname="form1"method="post"action="ok.html">
郵箱：<inputname="email"type="text">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任務(wù)實(shí)現(xiàn)】2、在<head></head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { varreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/; if(!reg.test(form1.email.value)) { alert("郵箱地址格式不正確！"); returnfalse; } }}</script>【任務(wù)實(shí)現(xiàn)】任務(wù)7“項(xiàng)目四”的實(shí)現(xiàn)this關(guān)鍵字JavaScript中，this關(guān)鍵字有很多用法，一般指的是當(dāng)前的對(duì)象。比如下列語(yǔ)句中的this指的就是文本框本身。<inputtype="text"id="txtname"onMouseDown="this.value='點(diǎn)擊鼠標(biāo)'">【相關(guān)知識(shí)】在本項(xiàng)目中，當(dāng)表單控件得到鼠標(biāo)焦點(diǎn)時(shí)，操作鼠標(biāo)或敲擊鍵盤(pán)都需要檢查其中的值，所以需要用到鼠標(biāo)事件和鍵盤(pán)事件。在“年齡”文本框中不允許輸入非數(shù)字的值和在條件不符合時(shí)不允許提交表單都需要用到事件的返回值。檢查輸入的年齡值是否為數(shù)字還要用到Event對(duì)象?！救蝿?wù)分析】1、在<body>標(biāo)簽對(duì)中編寫(xiě)表單代碼：<body>注冊(cè)</br><formname="form1"method="post"action="ok.html">
姓名：<inputname="username"type="text">*
年齡：<inputname="age"type="text"id="age">* <selectname="sel_city"><optionvalue="0">請(qǐng)選擇城市</option><optionvalue="北京">北京</option><optionvalue="上海">上海</option><optionvalue="廣州">廣州</option> </select><inputname="city"type="text"size="12"readonly="readonly">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.username.onmouseover=function() { this.focus(); this.select(); } form1.age.onmouseover=function() { this.focus(); this.select(); }
【任務(wù)實(shí)現(xiàn)】
form1.age.onmouseover=function() { this.focus(); this.select(); } form1.age.onkeydown=function(ev) { oEvent=ev||event; if((oEvent.keyCode<48||oEvent.keyCode>57)&&oEvent.keyCode!=8) { returnfalse; } } form1.sel_city.onchange=function() { if(this.value==0) { alert("請(qǐng)選擇一個(gè)城市"); } else { form1.city.value=form1.sel_city.value; }
}
【任務(wù)實(shí)現(xiàn)】 form1.onsubmit=function() { varreg=/^([1-9][0-9]?)$/; if(form1.username.value=="") { alert("姓名未填寫(xiě)，不能提交！"); form1.username.focus(); returnfalse; } elseif(form1.age.value=="") { alert("年齡未填寫(xiě)，不能提交！"); form1.age.focus(); returnfalse; }
【任務(wù)實(shí)現(xiàn)】 elseif(!reg.test(form1.age.value)) { alert("年齡必須在1~99之間！"); form1.age.focus(); returnfalse; } elseif(form1.city.value==""||form1.city.value=="請(qǐng)選擇城市") { alert("城市未選擇，不能提交！"); form1.sel_city.focus(); returnfalse; } } form1.city.onmouseover=function() { if(this.value=="") { this.value="請(qǐng)選擇城市"; } }}</script>【任務(wù)實(shí)現(xiàn)】項(xiàng)目五多窗體注冊(cè)頁(yè)面——窗口對(duì)象設(shè)計(jì)一個(gè)多窗體的用戶注冊(cè)頁(yè)面，具體需求如下：①如圖5.1所示，在首頁(yè)上有一個(gè)“注冊(cè)”按鈕，點(diǎn)擊可以進(jìn)入如圖5.2的注冊(cè)頁(yè)面。首頁(yè)窗體狀態(tài)欄上有一行文字“歡迎您光臨本站！”從右向左循環(huán)滾動(dòng)。項(xiàng)目情境
圖5.1首頁(yè)
圖5.1首頁(yè)
圖5.2注冊(cè)頁(yè)面項(xiàng)目情境②打開(kāi)如圖5.2所示注冊(cè)頁(yè)面，默認(rèn)尺寸為280*400像素。點(diǎn)擊“注冊(cè)須知”按鈕打開(kāi)一個(gè)對(duì)話框窗口（如圖5.3）,此對(duì)話框窗口尺寸為200*200像素，點(diǎn)擊其中的“關(guān)閉”鏈接，可以關(guān)閉此對(duì)話框窗口。
圖5.3注冊(cè)須知項(xiàng)目情境③在圖5.2的注冊(cè)頁(yè)面的簡(jiǎn)介文本區(qū)域框中填入簡(jiǎn)介信息，點(diǎn)擊“編輯>>”按鈕，打開(kāi)如圖5.4所示的頁(yè)面，在該頁(yè)面中可以重新編輯簡(jiǎn)介信息，編輯完成后，點(diǎn)擊“確定修改并關(guān)閉本窗口”按鈕，將本窗口關(guān)閉，并且把重新編輯的簡(jiǎn)介信息更新到注冊(cè)頁(yè)面的簡(jiǎn)介文本區(qū)域框中。圖5.4編輯簡(jiǎn)介頁(yè)面項(xiàng)目情境④點(diǎn)擊圖5.2注冊(cè)頁(yè)面中的“首頁(yè)”按鈕，頁(yè)面跳轉(zhuǎn)到圖5.1所示的首頁(yè)，點(diǎn)擊“關(guān)閉”按鈕，直接關(guān)閉注冊(cè)頁(yè)面。掌握窗體對(duì)象Window的常用屬性和方法。掌握地址對(duì)象Location的常用屬性和方法。掌握歷史對(duì)象History的常用屬性和方法。掌握屏幕對(duì)象Screen的常用屬性和方法。掌握瀏覽器對(duì)象Navigator的常用屬性和方法。學(xué)習(xí)目標(biāo)在如圖5.5的頁(yè)面上有三個(gè)按鈕，點(diǎn)擊“關(guān)閉本窗口”按鈕，彈出如圖5.6所示的關(guān)閉窗口選擇對(duì)話框，點(diǎn)擊“是”按鈕，當(dāng)前窗口關(guān)閉，點(diǎn)擊“否”，不關(guān)閉當(dāng)前窗口。點(diǎn)擊“立即關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對(duì)話框。點(diǎn)擊“打開(kāi)子窗口”按鈕，打開(kāi)如圖5.7所示的窗口，點(diǎn)擊該窗口上的“關(guān)閉本窗口”按鈕，窗口立即關(guān)閉，不彈出如圖5.6所示的選擇對(duì)話框。任務(wù)1打開(kāi)和關(guān)閉窗口圖5.5主窗口圖5.6關(guān)閉窗口選擇對(duì)話框圖5.7子窗口1、窗口對(duì)象WindowWindow對(duì)象代表的是整個(gè)瀏覽器窗口。【相關(guān)知識(shí)】屬性描述
closed獲取引用窗口是否已關(guān)閉。
defaultStatus設(shè)置或獲取要在窗口底部的狀態(tài)欄上顯示的缺省信息。
dialogArguments設(shè)置或獲取傳遞給模式對(duì)話框窗口的變量或變量數(shù)組。
dialogHeight設(shè)置或獲取模式對(duì)話框的高度。
dialogLeft設(shè)置或獲取模式對(duì)話框的左坐標(biāo)。
dialogTop設(shè)置或獲取模式對(duì)話框的頂坐標(biāo)。
dialogWidth設(shè)置或獲取模式對(duì)話框的寬度。
frameElement獲取在父文檔中生成window的frame或iframe對(duì)象。
length設(shè)置或獲取集合中對(duì)象的數(shù)目。
name設(shè)置或獲取表明窗口名稱(chēng)的值。
offscreenBuffering設(shè)置或獲取對(duì)象在對(duì)用戶可見(jiàn)之前是否要先在屏幕外繪制。
opener設(shè)置或獲取創(chuàng)建當(dāng)前窗口的窗口的引用。
parent獲取對(duì)象層次中的父窗口。
returnValue設(shè)置或獲取從模式對(duì)話框返回的值。
screenLeft獲取瀏覽器客戶區(qū)左上角相對(duì)于屏幕左上角的x坐標(biāo)。
screenTop獲取瀏覽器客戶區(qū)左上角相對(duì)于屏幕左上角的y坐標(biāo)。
self獲取對(duì)當(dāng)前窗口或框架的引用。
status設(shè)置或獲取位于窗口底部狀態(tài)欄的信息。
top獲取最頂層的祖先窗口?！鞠嚓P(guān)知識(shí)】事件描述
onblur在對(duì)象失去輸入焦點(diǎn)時(shí)觸發(fā)。
onerror當(dāng)對(duì)象裝載過(guò)程中發(fā)生錯(cuò)誤時(shí)觸發(fā)。
onfocus當(dāng)對(duì)象獲得焦點(diǎn)時(shí)觸發(fā)。
onload在瀏覽器完成對(duì)象的裝載后立即觸發(fā)。
onmove當(dāng)對(duì)象移動(dòng)時(shí)觸發(fā)。
onmoveend當(dāng)對(duì)象停止移動(dòng)時(shí)觸發(fā)。
onmovestart當(dāng)對(duì)象開(kāi)始移動(dòng)時(shí)觸發(fā)。
onresize當(dāng)對(duì)象的大小將要改變時(shí)觸發(fā)。
onresizeend當(dāng)用戶更改完控件選中區(qū)中對(duì)象的尺寸時(shí)觸發(fā)。
onresizestart當(dāng)用戶開(kāi)始更改控件選中區(qū)中對(duì)象的尺寸時(shí)觸發(fā)。
onscroll當(dāng)用戶滾動(dòng)對(duì)象的滾動(dòng)條時(shí)觸發(fā)。
onunload在對(duì)象卸載前立即觸發(fā)?！鞠嚓P(guān)知識(shí)】方法描述
alert顯示包含由應(yīng)用程序自定義消息的對(duì)話框。
blur使元素失去焦點(diǎn)并觸發(fā)onblur事件。
clearInterval使用setInterval方法取消先前開(kāi)始的間隔事件。
clearTimeout取消先前用setTimeout方法設(shè)置的超時(shí)事件。
close關(guān)閉當(dāng)前瀏覽器窗口或HTML應(yīng)用程序(HTA)。
confirm顯示一個(gè)確認(rèn)對(duì)話框，其中包含一個(gè)可選的消息和確定取消按鈕。
focus使得元素得到焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。
moveBy將窗口的位置移動(dòng)指定x和y偏移值。
moveTo將窗口左上角的屏幕位置移動(dòng)到指定的x和y位置。
navigate在當(dāng)前窗口中裝入指定URL。
open打開(kāi)新窗口并裝入給定URL的文檔。
prompt顯示一個(gè)提示對(duì)話框，其中帶有一條消息
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 市場(chǎng)租賃合同范文全書(shū)
- 2024年家居裝修合同
- 房屋買(mǎi)賣(mài)過(guò)戶合同范例
- 專(zhuān)利權(quán)知識(shí)產(chǎn)權(quán)轉(zhuǎn)讓合同
- 2024年臨時(shí)派遣協(xié)議范本
- 技術(shù)咨詢(xún)合同樣本及制作方法
- 2024年養(yǎng)殖用地承包合同養(yǎng)殖業(yè)承包合同
- 廣告公司勞動(dòng)合同標(biāo)準(zhǔn)范本
- 個(gè)人汽車(chē)租賃協(xié)議
- 2024二手車(chē)買(mǎi)賣(mài)合同協(xié)議范本
- GB 31644-2018食品安全國(guó)家標(biāo)準(zhǔn)復(fù)合調(diào)味料
- 沙盤(pán)游戲心理治療培訓(xùn)課件
- 2022高中學(xué)業(yè)水平考試信息技術(shù)會(huì)考知識(shí)點(diǎn)歸納總結(jié)（復(fù)習(xí)必背）
- 2022秋國(guó)開(kāi)公共關(guān)系學(xué)形考任務(wù)3試題及答案
- 部編版三年級(jí)語(yǔ)文（上冊(cè)）標(biāo)點(diǎn)符號(hào)專(zhuān)項(xiàng)訓(xùn)練題（含答案）
- 對(duì)外漢語(yǔ)教學(xué)趨向補(bǔ)語(yǔ)練習(xí)題
- 油茶栽培(普通油茶)課件
- 高錳酸鉀安全使用說(shuō)明書(shū)
- 建筑廢棄材料回收利用公司創(chuàng)業(yè)項(xiàng)目計(jì)劃書(shū)
- 2021年12月醫(yī)院臨床藥師培訓(xùn)理論考核試題（呼吸專(zhuān)業(yè)）
- 圓管鋼立柱柱吊裝施工方案
評(píng)論
0/150
提交評(píng)論