《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》 第04章教案-JavaScript語句與函數(shù)

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計-第2版》教案第4章JavaScript入門一、教學(xué)目標(biāo)：掌握J(rèn)avaScript條件語句的用法；掌握J(rèn)avaScript循環(huán)語句的用法；掌握J(rèn)avaScript函數(shù)的使用。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：JavaScript語句；難點(diǎn)：JavaScript函數(shù)的使用。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript語句與函數(shù)，包括JavaScript的條件語句、循環(huán)語句的使用，以及JavaScript函數(shù)的應(yīng)用。五、教學(xué)基本內(nèi)容：4.1JavaScript條件語句4.1.1if語句在各類計算機(jī)程序語言中，最常見的條件語句就是if語句。1. if語句最簡單的if語句由單個條件組成，語法規(guī)則如下：if(條件){條件為真（true）時執(zhí)行的代碼}在if后面的括號中填入一個判斷條件，一般來說要求填入條件的運(yùn)算結(jié)果應(yīng)該為布爾值。如果填入其他數(shù)據(jù)類型的內(nèi)容，系統(tǒng)也會先將其轉(zhuǎn)換為布爾值再執(zhí)行后續(xù)操作。如果該條件的結(jié)果為真（true）則執(zhí)行大括號內(nèi)部的代碼，可以是單行代碼也可以是代碼塊；如果條件判斷結(jié)果為假（false）則直接跳過此段代碼不作任何操作。例如判斷成績等級，如果高于90分彈出對話框提示為Excellent，代碼如下：varscore=99;if(score>90){alert("Excellent!");}2. if-else語句當(dāng)判斷條件成立與否都需要有對應(yīng)的處理時可以使用if-else語句。其語法格式如下：if(條件){條件為真（true）時執(zhí)行的代碼}else{條件為假（false）時執(zhí)行的代碼}如果條件成立則執(zhí)行緊跟if語句的代碼部分，否則執(zhí)行跟在else語句后面的代碼部分。這些代碼均可以是單行語句，也可以是一段代碼塊。例如同樣是判斷成績等級，如果大于等于60分則提示彈出對話框提示“考試通過！”，否則提示“不及格！”。修改后的代碼如下：varscore=99;if(score>=60){alert("考試通過!");}else{alert("不及格!");}3. if-elseif-else語句當(dāng)有多個條件分支需要分別判斷時，可以使用elseif語句。if(條件1){條件1為真（true）時執(zhí)行的代碼}elseif(條件2){條件2為真（true）時執(zhí)行的代碼}else{所有條件都為假（false）時執(zhí)行的代碼}如果條件成立則執(zhí)行緊跟if語句的代碼部分，否則執(zhí)行elseif對應(yīng)的條件判斷，如果前面所有條件都不符合再執(zhí)行最后一個else條件對應(yīng)的代碼。其中的elseif語句可以根據(jù)實(shí)際需要有一個或多個?！纠?-1】JavaScriptif-else語句的簡單應(yīng)用【代碼說明】本示例使用了if-elseif-else語句判斷當(dāng)前日期為星期幾。首先創(chuàng)建Date對象，然后使用getDay()方法獲取當(dāng)前日期為一周內(nèi)的第幾天，最后使用if語句分別判斷返回值為0-6的每一種情況，并使用alert()方法輸出提示語句。4.1.2switch語句當(dāng)對于同一個變量需要進(jìn)行多次條件判斷時，也可以使用switch語句代替多重if-elseif-else語句。語法格式如下：switch(變量){case值1：執(zhí)行代碼塊1break;case值2：執(zhí)行代碼塊2break;……case值n：執(zhí)行代碼塊nbreak;[default：以上條件均不符合時的執(zhí)行代碼塊]}首先在switch后面的小括號中設(shè)置一個表達(dá)式（通常是一個變量），然后在每一個case語句中給出一個值與變量進(jìn)行比對，如果不一致則跳過該case語句，繼續(xù)對比下一個case中給出的值。當(dāng)變量與對比的值完全一致時執(zhí)行該case語句分支里面的代碼塊，然后使用break語句終止其余代碼的執(zhí)行。其中default分支用于執(zhí)行以上條件均不符合的情況，中括號表示該語句片段為可選內(nèi)容?！纠?-2】JavaScriptswitch語句的簡單應(yīng)用使用switch語句改寫上一個例題中的if-else語句，并達(dá)到同樣的最終效果。4.2JavaScript循環(huán)語句在JavaScript中有四種類型的循環(huán)語句。 for：在指定的次數(shù)中循環(huán)執(zhí)行代碼塊。 for-in：循環(huán)遍歷對象的屬性。 while：當(dāng)條件為true時循環(huán)執(zhí)行代碼塊。 do-while：與while循環(huán)類似，只不過是先執(zhí)行代碼塊再檢測條件是否為true。4.2.1for循環(huán)for循環(huán)的語法結(jié)構(gòu)如下：for(語句1;語句2;語句3){代碼塊}其中語句1在循環(huán)開始之前執(zhí)行；語句2為循環(huán)的條件；語句3為代碼塊被執(zhí)行后需要執(zhí)行的內(nèi)容。例如：varmsg="";for(vari=0;i<10;i++){msg+="第"+i+"行\(zhòng)n";}alert(msg);上述代碼表示從變量i=0開始執(zhí)行for循環(huán)，每次執(zhí)行前判斷變量i是否小于10，如果滿足條件則執(zhí)行for循環(huán)內(nèi)部的代碼塊，然后令變量i自增1。直到變量i不再小于10則終止該循環(huán)語句。通常情況下語句1都是用于聲明循環(huán)所需使用的變量初始值，例如i=0。該語句也可以在for循環(huán)之前就聲明完成，并在for循環(huán)條件中省略語句1的內(nèi)容。例如：vari=0;for(;i<10;i++){msg+="第"+i+"行\(zhòng)n";}alert(msg);上述代碼的運(yùn)行效果與前一段示例完全相同?！纠?-3】JavaScriptfor循環(huán)的簡單應(yīng)用4.2.2for-in循環(huán)在JavaScript中，for-in循環(huán)可以用于遍歷對象的所有屬性和方法。其語法結(jié)構(gòu)如下：for(xinobject){代碼塊}其中x是變量，每次循環(huán)將按照順序獲取對象中的一個屬性或方法名；object指的是被遍歷的對象。例如：varpeople=newObject();="Mary";people.age=20;people.major="ComputerScience";for(xinpeople){msg+=people[x];}alert(msg);其中變量x指的是people對象中的屬性名稱，而people[x]指的是對應(yīng)的屬性值。【例4-4】JavaScriptfor-in循環(huán)的簡單應(yīng)用4.2.3while循環(huán)while循環(huán)又稱為前測試循環(huán)，必須先檢測表達(dá)式的條件是否滿足，如果符合條件才開始執(zhí)行循環(huán)內(nèi)部的代碼塊。其語法結(jié)構(gòu)如下：while(條件表達(dá)式){代碼塊}例如：vari=1;while(i<10){i++;}上述代碼表示將初始值為1的變量i進(jìn)行自增，在沒有超過10的情況下每次自增1?！纠?-5】JavaScriptwhile循環(huán)的簡單應(yīng)用【代碼說明】本示例在JavaScript中使用while循環(huán)進(jìn)行1-100的數(shù)字求和。首先聲明變量i從1開始，只要變量i沒有超過100就將其與求和變量sum相加，然后自增1進(jìn)行下一次循環(huán)。直到變量i已經(jīng)增長到100了停止循環(huán)語句，此時的變量sum返回值5050便是計算結(jié)果。4.2.4do-while循環(huán)do-while循環(huán)又稱為后測試循環(huán)，不論是否符合條件都先執(zhí)行一次循環(huán)內(nèi)的代碼塊，然后再判斷是否滿足表達(dá)式的條件，如果符合條件則進(jìn)入下一次循環(huán)，否則將終止循環(huán)。其語法結(jié)構(gòu)如下：do{代碼塊}while(條件表達(dá)式)例如：vari=1;do{i++;}while(i<10)【例4-6】JavaScriptdo-while循環(huán)的簡單應(yīng)用【代碼說明】本示例在JavaScript中聲明了變量i的初始值為10，并在do-while循環(huán)的條件表達(dá)式中故意聲明了一個不符合的條件（i<10）以檢測運(yùn)行效果。由于do-while循環(huán)會在查看條件之前就先運(yùn)行一次，因此最終仍然會彈出提示框并顯示變量i的當(dāng)前值為10。4.2.5break和continuebreak語句可以用于終止全部循環(huán)，continue語句用于中斷本次循環(huán)，但是會繼續(xù)運(yùn)行下一次循環(huán)語句?！纠?-7】JavaScriptbreak的簡單應(yīng)用【代碼說明】本示例包含了一個for循環(huán)語句：從變量i=1開始執(zhí)行循環(huán)，每次i自增1直到取值變成10停止循環(huán)。當(dāng)符合if條件執(zhí)行到break語句時，會直接終止整個循環(huán)語句并忽略后面的代碼。因此在頁面輸出的內(nèi)容中只能顯示變量值為1-4的情況，當(dāng)變量i的值自增到5時符合if條件從而觸發(fā)break語句終止了整個循環(huán)?！纠?-8】JavaScriptcontinue的簡單應(yīng)用修改例4-7的內(nèi)容，將其中JavaScript代碼部分的break語句改為continue并查看效果?！敬a說明】本示例是將上一個示例中的break語句修改為continue語句的對比版本。當(dāng)符合if條件執(zhí)行到continue語句時，會直接跳過后續(xù)的代碼并跳轉(zhuǎn)到下一次循環(huán)。因此在頁面輸出的內(nèi)容中缺少了變量值為5的情況，但是后續(xù)變量值6-10均正常輸出，不會受到影響。4.3JavaScript函數(shù)4.3.1函數(shù)的基本結(jié)構(gòu)函數(shù)是在調(diào)用時才會執(zhí)行的一段代碼塊，可以重復(fù)使用。其基本語法結(jié)構(gòu)如下：function函數(shù)名稱(參數(shù)0,參數(shù)1,……參數(shù)N){待執(zhí)行代碼塊}上述語法結(jié)構(gòu)是由關(guān)鍵詞function、函數(shù)名稱、小括號內(nèi)的一組可選參數(shù)以及大括號內(nèi)的待執(zhí)行代碼塊組成的。其中函數(shù)名稱和參數(shù)個數(shù)均可以自定義，待執(zhí)行的代碼塊可以是一句或多句JavaScript代碼組成。例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代碼定義了一個名稱為welcome的函數(shù)，該函數(shù)的參數(shù)個數(shù)為0。在待執(zhí)行的代碼部分只有一句alert()方法，用于在瀏覽器上彈出對話框并顯示雙引號內(nèi)的文本內(nèi)容。如果需要彈出的對話框每次顯示的文本內(nèi)容不同，可以使用參數(shù)傳遞的形式：functionwelcome(msg){alert(msg);}此時為之前的welcome函數(shù)方法傳遞了一個參數(shù)msg，在待執(zhí)行的代碼部分修改原先的alert()方法，用于在瀏覽器上彈出對話框并動態(tài)顯示msg傳遞的文本內(nèi)容。4.3.2函數(shù)的調(diào)用函數(shù)可以通過使用函數(shù)名稱的方法進(jìn)行調(diào)用。例如：welcome();如果該函數(shù)存在參數(shù)，則調(diào)用時必須在函數(shù)的小括號內(nèi)傳遞對應(yīng)的參數(shù)值。welcome("HelloJavaScript!");函數(shù)可以在JavaScript代碼的任意位置進(jìn)行調(diào)用，也可以在指定的事件發(fā)生時調(diào)用。例如在按鈕的點(diǎn)擊事件中調(diào)用函數(shù)：<buttononclick="welcome()">點(diǎn)擊此處調(diào)用函數(shù)</button>上述代碼中的onclick屬性表示元素被鼠標(biāo)點(diǎn)擊的狀態(tài)觸發(fā)等號右邊的內(nèi)容?！纠?-9】JavaScript函數(shù)的簡單調(diào)用4.3.3函數(shù)的返回值相比Java而言，JavaScript函數(shù)更加簡便，無需特別聲明返回值類型。在Java語言中如果函數(shù)存在返回值則需要在函數(shù)名稱前面注明類型（例如int、String、double等），即使無返回值也需要在函數(shù)名稱前面加上void字樣，表示返回值為空值。JavaScript函數(shù)如果存在返回值，直接在大括號內(nèi)的代碼塊中使用return關(guān)鍵詞后面緊跟需要返回的值即可。例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代碼對兩個數(shù)字進(jìn)行了求和運(yùn)算，使用自定義變量result獲取total函數(shù)的返回值。此時在total函數(shù)的參數(shù)位置填入了兩個測試數(shù)據(jù)，得到了正確的計算結(jié)果。函數(shù)也可以帶有多個return語句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代碼對兩個數(shù)字進(jìn)行了比大小運(yùn)算，然后返回其中較大的數(shù)值。使用自定義變量result獲取maxNum函數(shù)的返回值。此時在maxNum函數(shù)的參數(shù)位置填入了兩個測試數(shù)據(jù)，得到了正確的計算結(jié)果。單獨(dú)使用return語句可隨時終止函數(shù)代碼的運(yùn)行。例如測試數(shù)值是否為偶數(shù)，如果是奇數(shù)則不提示，如果是偶數(shù)則彈出對話框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶數(shù)！");}testEven(99);//不會彈出對話框testEven(100);//會彈出對話框顯示"100是偶數(shù)！"函數(shù)在執(zhí)行到return語句時就直接退出了代碼塊，即使后續(xù)還有代碼也不會被執(zhí)行。本例中如果參數(shù)為奇數(shù)才能符合if條件然后觸發(fā)return語句，因此后續(xù)的alert()方法不會被執(zhí)行到，從而做到只有在參數(shù)為偶數(shù)時才顯示對話框?！纠?-10】JavaScript帶有返回值函數(shù)的應(yīng)用在JavaScript中創(chuàng)建自定義名稱的函數(shù)用于比較兩個數(shù)字之間的大小，并返回較大值。4.4階段案例：猜數(shù)字小游戲4.4.1案例需求制作一款猜數(shù)字小游戲，每輪游戲系統(tǒng)都隨機(jī)生成一個1-100之間的整數(shù)（包含1和100本身）讓玩家猜，玩家輸入猜的數(shù)字后系統(tǒng)會提示猜大了、小了或者猜中了，如果已經(jīng)猜了8個回合仍未猜對則強(qiáng)制結(jié)束游戲。刷新網(wǎng)頁后可以重新開始下一輪游戲。4.4.2案例分析1. 生成隨機(jī)數(shù)JavaScript中有一個Math.random()函數(shù)用于生成[0,1)之間的小數(shù)（即該數(shù)字大于等于0.0，但是小于1.0），并且可以通過Math.floor()函數(shù)向下取整。那么如果想隨機(jī)生成一個0和N之間的整數(shù)（包含0，但不包含N），js代碼如下：varx=Math.floor(Math.random()*N);稍加修改，想隨機(jī)生成一個0和N之間的整數(shù)（既包含0，也包含N），js代碼如下：varx=Math.floor(Math.random()*(N+1));進(jìn)階思考，想隨機(jī)生成一個M和N之間的整數(shù)（既包含M，也包含N），js代碼如下：varx=Math.floor(Math.random()*(N-M+1))+M;這里的隨機(jī)數(shù)其實(shí)是0和N-M之間的一個數(shù)字，再加上至少要生成的最小底數(shù)M。不妨封裝一個自定義函數(shù)用于隨機(jī)生成a-b之間的數(shù)字，參考js代碼如下：//隨機(jī)生成一個a-b之間的數(shù)字（包含a和b本身）functiongetRandomNum(a,b){returnMath.floor(Math.random()*(b-a+1))+a;}代入數(shù)字進(jìn)行嘗試，例如直接調(diào)用varx=getRandomNum(5,10)就可以隨機(jī)獲得5-10之間的整數(shù)（包含5和10本身），那么本題就應(yīng)該是調(diào)用getRandomNum(0,100)來獲取0-100之間的隨機(jī)整數(shù)（包含0和100本身）。2. 判斷數(shù)字有效性本次案例要求玩家輸入的必須是數(shù)字，否則無法進(jìn)行比大小操作，判斷變量是否是數(shù)字的參考js代碼如下：varx1=99;varx2=3.14;varx3=“Hello!”;isNaN(x1)//返回值是falseisNaN(x2)//返回值是falseisNaN(x3)//返回值是true在確定是數(shù)字后還需要判斷是否為整數(shù)，可以求數(shù)字與1的余數(shù)，參考js代碼如下：varx=99;vary=3.14;x%1//整數(shù)的返回值是0y%1//小數(shù)返回值不是0提示：以上內(nèi)容掌握之后也可用到第3章階段案例中來確保輸入數(shù)字的有效性。最后就是確認(rèn)是整數(shù)后還得看下是否在游戲要求的0-100之間，參考js代碼如下：varx1=99;varx2=128;x1<0||x1>100//返回false，未超出范圍x2<0||x2>100//返回true，超出范圍3. 循環(huán)游戲回合這里不妨試試使用while(true)來制作一個永久循環(huán)，直到判斷出回合數(shù)超過8次再使用break強(qiáng)勢停止循環(huán)，參考js代碼如下：1. varcurrentRound=1;//當(dāng)前回合數(shù)2. varmaxRound=8;//允許猜的總回合數(shù)3. 4. while(true){5. //游戲過程（待補(bǔ)充）6. 7. //回合數(shù)增加18. currentRound++;9. //如果回合用光10. if(currentRound>maxRound){11. alert("機(jī)會已用光！請刷新后重新開始。");//提示游戲結(jié)束12. break;//強(qiáng)制停止游戲13. }14. }4.4.3案例制作創(chuàng)建一個HTML文件，文件名可自定義，例如GuessGame.html。相關(guān)代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>猜數(shù)字小游戲</title>6. </head>7. <body>8. <!--標(biāo)題-->9. <h3>猜數(shù)字小游戲</h3>10. <!--水平線-->11. <hr>12. <script>13. varminNum=1;//允許猜的最小數(shù)14. varmaxNum=100;//允許猜的最大數(shù)15. varmaxRound=8;//允許猜的總回合數(shù)16. varcurrentRound=1;//當(dāng)前回合數(shù)17. 18. //隨機(jī)生成一個a-b之間的數(shù)字（包含a和b本身）19. functiongetRandomNum(a,b){20. returnMath.floor(Math.random()*(b-a+1))+a;21. }22. 23. //隨機(jī)生成一個1到100之間的數(shù)字（包含1和100本身）24. varx=getRandomNum(minNum,maxNum);25. 26. while(true){27. //請玩家輸入數(shù)字28. varmyNum=prompt("請輸入您要猜的數(shù)字（1-100之間，包含1和100本身）");29. 30. //判斷數(shù)字有效性31. if(isNaN(myNum)){//如果不是數(shù)字32. alert("您輸入的不是數(shù)字，請重新輸入！");33. continue;34. }35. elseif(myNum%1!==0){//如果不是整數(shù)36. alert("您輸入的不是整數(shù)，請重新輸入！");37. continue;38. }39. elseif(myNum<minNum||myNum>maxNum){//如果數(shù)字超出范圍40. alert("您輸入的數(shù)字超出范圍了，請重新輸入！");41. continue;42. }43. //正式比大小44. else{45. if(myNum>x){46. alert("猜大了！");//提示猜大了47. }48. elseif(myNum<x){49. alert("猜小了！");//提示猜小了50. }51. elseif(myNum==x){52. alert("猜對了！您一共用了"+currentRound+"回合。");53. break;//猜對了則停止游戲54. }55. }56. 57. //回合數(shù)增加158. currentRound++;59. //如果回合用光60. if(currentRound>maxRound){61. alert("機(jī)會已用光！請刷新后重新開始。");//提示游戲結(jié)束62. break;//強(qiáng)制停止游戲63. }64. }65. </script>66. </body>67. </html>4.4.4案例思考【拓展練習(xí)】可否改成猜0-1000之間的隨機(jī)數(shù)字？能否修改游戲回合數(shù)為10回合？【進(jìn)階改造】請在學(xué)習(xí)了本書第5章中JavaScriptDOM技術(shù)或第10章jQueryHTMLDOM技術(shù)后，分別用這兩種方式將每回合猜的數(shù)字以及提示大小的提示語句顯示到頁面上方便玩家查看。4.5本章小結(jié)本章主要介紹了JavaScript的基礎(chǔ)知識，包括JavaScript的語法規(guī)則、變量聲明和數(shù)據(jù)類型等內(nèi)容，并介紹了JavaScript不同類型之間的轉(zhuǎn)換方法。在JavaScript運(yùn)算符部分，根據(jù)運(yùn)算符的功能不同分別介紹了賦值運(yùn)算符、算術(shù)運(yùn)算符、邏輯運(yùn)算符、關(guān)系運(yùn)算符、相等性運(yùn)算符以及條件運(yùn)算符。在JavaScript條件語句部分介紹了if和switch語句的用法；在JavaScript循環(huán)語句部分介紹了for、for-in、while、do-while循環(huán)的用法。在JavaScript函數(shù)部分主要介紹了函數(shù)的基本結(jié)構(gòu)、調(diào)用方法與返回值處理。最后還介紹了JavaScript對于文檔對象模型DOM以及瀏覽器對象模型BOM的使用方法。其中DOM部分主要介紹了如何查找、添加、刪除HTML元素、修改元素的內(nèi)容或?qū)傩?、改變元素的CSS樣式、以及元素事件處理；BOM部分主要介紹了Window、Screen、Location、History和Navigator對象的用法。本章階段案例介紹了猜數(shù)字小游戲，系統(tǒng)隨機(jī)生成一個1-100之間的整數(shù)讓玩家猜，共計8個回合，系統(tǒng)會根據(jù)玩家輸入的數(shù)字提示猜大了、小了、猜中了或游戲回合用光。六、課后習(xí)題1.已知學(xué)生成績60分及以上為及格，試用if語句判斷某學(xué)生成績是否及格。答：varscore=99;//以99分為例，也可更換為其他分?jǐn)?shù)進(jìn)行測試if(score>=60)alert("及格！");elsealert("不及格！");2.已知1900年為鼠年，試用switch語句判斷1900-2017年之間的任意年份是十二生肖中的哪一年。答：已知1900年為鼠年，那么每過12年就都還是鼠年。