《JavaScript與jQuery網(wǎng)頁(yè)前端開發(fā)與設(shè)計(jì)-第2版》課件 CH04 JavaScript語(yǔ)句和函數(shù)

JavaScript與jQuery

網(wǎng)頁(yè)前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第4章JavaScript語(yǔ)句和函數(shù)本章學(xué)習(xí)目標(biāo) 掌握J(rèn)avaScript條件語(yǔ)句的用法； 掌握J(rèn)avaScript循環(huán)語(yǔ)句的用法； 掌握J(rèn)avaScript函數(shù)的使用。目錄4.1JavaScript條件語(yǔ)句4.2JavaScript循環(huán)語(yǔ)句4.3JavaScript函數(shù)4.4階段案例：猜數(shù)字小游戲4.1JavaScript條件語(yǔ)句4.1.1if語(yǔ)句4.1.2switch語(yǔ)句4.1.1if語(yǔ)句在各類計(jì)算機(jī)程序語(yǔ)言中，最常見的條件語(yǔ)句就是if語(yǔ)句。1.if語(yǔ)句2.ifelse語(yǔ)句3.ifelse-ifelse語(yǔ)句4.1.1if語(yǔ)句1.if語(yǔ)句最簡(jiǎn)單的if語(yǔ)句由單個(gè)條件組成，語(yǔ)法規(guī)則如下：例如判斷成績(jī)等級(jí)，如果高于90分彈出對(duì)話框提示為Excellent，代碼如下：if(條件){

條件為真（true）時(shí)執(zhí)行的代碼}varscore=99;if(score>90){alert("Excellent!");}4.1.1if語(yǔ)句2.ifelse語(yǔ)句當(dāng)判斷條件成立與否都需要有對(duì)應(yīng)的處理時(shí)可以使用if-else語(yǔ)句。其語(yǔ)法格式如下：if(條件){

條件為真（true）時(shí)執(zhí)行的代碼}else{

條件為假（false）時(shí)執(zhí)行的代碼}如果條件成立則執(zhí)行緊跟if語(yǔ)句的代碼部分，否則執(zhí)行跟在else語(yǔ)句后面的代碼部分。這些代碼均可以是單行語(yǔ)句，也可以是一段代碼塊。4.1.1if語(yǔ)句2.ifelse語(yǔ)句例如同樣是判斷成績(jī)等級(jí)，如果大于等于60分則提示彈出對(duì)話框提示“考試通過(guò)！”，否則提示“不及格！”。修改后的代碼如下：varscore=99;if(score>=60){alert("考試通過(guò)!");}else{alert("不及格!");}4.1.1if語(yǔ)句3.ifelse-ifelse語(yǔ)句當(dāng)有多個(gè)條件分支需要分別判斷時(shí)，可以使用elseif語(yǔ)句。if(條件1){

條件1為真（true）時(shí)執(zhí)行的代碼}elseif(條件2){

條件2為真（true）時(shí)執(zhí)行的代碼}else{

所有條件都為假（false）時(shí)執(zhí)行的代碼}其中的elseif語(yǔ)句可以根據(jù)實(shí)際需要有一個(gè)或多個(gè)。4.1.1if語(yǔ)句【例4-1】JavaScriptif-else語(yǔ)句的簡(jiǎn)單應(yīng)用

4.1.2switch語(yǔ)句當(dāng)對(duì)于同一個(gè)變量需要進(jìn)行多次條件判斷時(shí)，也可以使用switch語(yǔ)句代替多重if-elseif-else語(yǔ)句。4.1.2switch語(yǔ)句語(yǔ)法格式如下：switch(變量){case值1：

執(zhí)行代碼塊1break;case值2：

執(zhí)行代碼塊2break;

……case值n：

執(zhí)行代碼塊nbreak;[default：

以上條件均不符合時(shí)的執(zhí)行代碼塊]}4.1.2switch語(yǔ)句【例4-2】JavaScriptswitch語(yǔ)句的簡(jiǎn)單應(yīng)用4.2JavaScript循環(huán)語(yǔ)句4.2.1for循環(huán)4.2.2for-in循環(huán)4.2.3while循環(huán)4.2.4do-while循環(huán)4.2.5break和continue4.2JavaScript循環(huán)語(yǔ)句

在JavaScript中有四種類型的循環(huán)語(yǔ)句。for：在指定的次數(shù)中循環(huán)執(zhí)行代碼塊。for-in：循環(huán)遍歷對(duì)象的屬性。while：當(dāng)條件為true時(shí)循環(huán)執(zhí)行代碼塊。do-while：與while循環(huán)類似，只不過(guò)是先執(zhí)行代碼塊再檢測(cè)條件是否為true。4.2.1for循環(huán)for循環(huán)的語(yǔ)法結(jié)構(gòu)如下：for(語(yǔ)句1;語(yǔ)句2;語(yǔ)句3){

代碼塊}

其中:語(yǔ)句1在循環(huán)開始之前執(zhí)行；語(yǔ)句2為循環(huán)的條件；語(yǔ)句3為代碼塊被執(zhí)行后需要執(zhí)行的內(nèi)容。4.2.1for循環(huán)例如：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)語(yǔ)句。4.2.1for循環(huán)通常情況下語(yǔ)句1都是用于聲明循環(huán)所需使用的變量初始值，例如i=0。該語(yǔ)句也可以在for循環(huán)之前就聲明完成，并在for循環(huán)條件中省略語(yǔ)句1的內(nèi)容。例如：vari=0;for(;i<10;i++){msg+="第"+i+"行\(zhòng)n";}alert(msg);上述代碼的運(yùn)行效果與前一段示例完全相同。4.2.1for循環(huán)【例4-3】JavaScriptfor循環(huán)的簡(jiǎn)單應(yīng)用

4.2.2for-in循環(huán)在JavaScript中，for-in循環(huán)可以用于遍歷對(duì)象的所有屬性和方法。其語(yǔ)法結(jié)構(gòu)如下：for(xinobject){

代碼塊}其中x是變量，每次循環(huán)將按照順序獲取對(duì)象中的一個(gè)屬性或方法名；object指的是被遍歷的對(duì)象。4.2.2for-in循環(huán)例如：varpeople=newObject();="Mary";people.age=20;people.major="ComputerScience";for(xinpeople){msg+=people[x];}alert(msg);其中變量x指的是people對(duì)象中的屬性名稱，而people[x]指的是對(duì)應(yīng)的屬性值。4.2.2for-in循環(huán)【例4-4】JavaScriptfor-in循環(huán)的簡(jiǎn)單應(yīng)用

4.2.3while循環(huán)while循環(huán)又稱為前測(cè)試循環(huán)，必須先檢測(cè)表達(dá)式的條件是否滿足，如果符合條件才開始執(zhí)行循環(huán)內(nèi)部的代碼塊。其語(yǔ)法結(jié)構(gòu)如下：while(條件表達(dá)式){

代碼塊}4.2.3while循環(huán)例如：vari=1;while(i<10){i++;}上述代碼表示將初始值為1的變量i進(jìn)行自增，在沒有超過(guò)10的情況下每次自增1。4.2.3while循環(huán)【例4-5】JavaScriptwhile循環(huán)的簡(jiǎn)單應(yīng)用4.2.4do-while循環(huán)do-while循環(huán)又稱為后測(cè)試循環(huán)，不論是否符合條件都先執(zhí)行一次循環(huán)內(nèi)的代碼塊，然后再判斷是否滿足表達(dá)式的條件，如果符合條件則進(jìn)入下一次循環(huán)，否則將終止循環(huán)。其語(yǔ)法結(jié)構(gòu)如下：do{

代碼塊}while(條件表達(dá)式)4.2.4do-while循環(huán)例如：vari=1;do{i++;}while(i<10)4.2.4do-while循環(huán)【例4-6】JavaScriptdo-while循環(huán)的簡(jiǎn)單應(yīng)用4.2.5break和continuebreak語(yǔ)句可以用于終止全部循環(huán)，continue語(yǔ)句用于中斷本次循環(huán)，但是會(huì)繼續(xù)運(yùn)行下一次循環(huán)語(yǔ)句。4.2.5break和continue【例4-7】JavaScriptbreak的簡(jiǎn)單應(yīng)用4.2.5break和continue【例4-8】JavaScriptcontinue的簡(jiǎn)單應(yīng)用4.3JavaScript函數(shù)4.3.1函數(shù)的基本結(jié)構(gòu)4.3.2函數(shù)的調(diào)用4.3.3函數(shù)的返回值4.3.1函數(shù)的基本結(jié)構(gòu)函數(shù)是在調(diào)用時(shí)才會(huì)執(zhí)行的一段代碼塊，可以重復(fù)使用。其基本語(yǔ)法結(jié)構(gòu)如下：function函數(shù)名稱(參數(shù)0,參數(shù)1,……參數(shù)N){

待執(zhí)行代碼塊}上述語(yǔ)法結(jié)構(gòu)是由關(guān)鍵詞function、函數(shù)名稱、小括號(hào)內(nèi)的一組可選參數(shù)以及大括號(hào)內(nèi)的待執(zhí)行代碼塊組成的。其中函數(shù)名稱和參數(shù)個(gè)數(shù)均可以自定義，待執(zhí)行的代碼塊可以是一句或多句JavaScript代碼組成。4.3.1函數(shù)的基本結(jié)構(gòu)例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代碼定義了一個(gè)名稱為welcome的函數(shù)，該函數(shù)的參數(shù)個(gè)數(shù)為0。在待執(zhí)行的代碼部分只有一句alert()方法，用于在瀏覽器上彈出對(duì)話框并顯示雙引號(hào)內(nèi)的文本內(nèi)容。4.3.1函數(shù)的基本結(jié)構(gòu)如果需要彈出的對(duì)話框每次顯示的文本內(nèi)容不同，可以使用參數(shù)傳遞的形式：functionwelcome(msg){alert(msg);}此時(shí)為之前的welcome函數(shù)方法傳遞了一個(gè)參數(shù)msg，在待執(zhí)行的代碼部分修改原先的alert()方法，用于在瀏覽器上彈出對(duì)話框并動(dòng)態(tài)顯示msg傳遞的文本內(nèi)容。4.3.2函數(shù)的調(diào)用函數(shù)可以通過(guò)使用函數(shù)名稱的方法進(jìn)行調(diào)用。例如：如果該函數(shù)存在參數(shù)，則調(diào)用時(shí)必須在函數(shù)的小括號(hào)內(nèi)傳遞對(duì)應(yīng)的參數(shù)值。welcome();welcome("HelloJavaScript!");4.3.2函數(shù)的調(diào)用函數(shù)可以在JavaScript代碼的任意位置進(jìn)行調(diào)用，也可以在指定的事件發(fā)生時(shí)調(diào)用。例如在按鈕的點(diǎn)擊事件中調(diào)用函數(shù)：<buttononclick="welcome()">點(diǎn)擊此處調(diào)用函數(shù)</button>上述代碼中的onclick屬性表示元素被鼠標(biāo)點(diǎn)擊的狀態(tài)觸發(fā)等號(hào)右邊的內(nèi)容。4.3.2函數(shù)的調(diào)用【例4-9】JavaScript函數(shù)的簡(jiǎn)單調(diào)用4.3.3函數(shù)的返回值相比Java而言，JavaScript函數(shù)更加簡(jiǎn)便，無(wú)需特別聲明返回值類型。JavaScript函數(shù)如果存在返回值，直接在大括號(hào)內(nèi)的代碼塊中使用return關(guān)鍵詞后面緊跟需要返回的值即可。4.3.3函數(shù)的返回值例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代碼對(duì)兩個(gè)數(shù)字進(jìn)行了求和運(yùn)算，使用自定義變量result獲取total函數(shù)的返回值。此時(shí)在total函數(shù)的參數(shù)位置填入了兩個(gè)測(cè)試數(shù)據(jù)，得到了正確的計(jì)算結(jié)果。4.3.3函數(shù)的返回值函數(shù)也可以帶有多個(gè)return語(yǔ)句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代碼對(duì)兩個(gè)數(shù)字進(jìn)行了比大小運(yùn)算，然后返回其中較大的數(shù)值。使用自定義變量result獲取maxNum函數(shù)的返回值。此時(shí)在maxNum函數(shù)的參數(shù)位置填入了兩個(gè)測(cè)試數(shù)據(jù)，得到了正確的計(jì)算結(jié)果。4.3.3函數(shù)的返回值單獨(dú)使用return語(yǔ)句可隨時(shí)終止函數(shù)代碼的運(yùn)行。例如測(cè)試數(shù)值是否為偶數(shù)，如果是奇數(shù)則不提示，如果是偶數(shù)則彈出對(duì)話框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶數(shù)！");}testEven(99);//不會(huì)彈出對(duì)話框testEven(100);//會(huì)彈出對(duì)話框顯示"100是偶數(shù)！"函數(shù)在執(zhí)行到return語(yǔ)句時(shí)就直接退出了代碼塊，即使后續(xù)還有代碼也不會(huì)被執(zhí)行。本例中如果參數(shù)為奇數(shù)才能符合if條件然后觸發(fā)return語(yǔ)句，因此后續(xù)的alert()方法不會(huì)被執(zhí)行到，從而做到只有在參數(shù)為偶數(shù)時(shí)才顯示對(duì)話框。4.3.3函數(shù)的返回值【例4-10】JavaScript帶有返回值函數(shù)的應(yīng)用4.4

階段案例：猜數(shù)字小游戲4.4.1案例需求 4.4.2案例分析 4.4.3案例制作 4.4.4案例思考 4.4.1案例需求制作一款猜數(shù)字小游戲，每輪游戲系統(tǒng)都隨機(jī)生成一個(gè)1-100之間的整數(shù)（包含1和100本身）讓玩家猜。玩家輸入猜的數(shù)字后系統(tǒng)會(huì)提示猜大了、小了或者猜中了。如果已經(jīng)猜了8個(gè)回合仍未猜對(duì)則強(qiáng)制結(jié)束游戲。刷新網(wǎng)頁(yè)后可以重新開始下一輪游戲。4.4.2案例分析1. 生成隨機(jī)數(shù)JavaScript中有一個(gè)Math.random()函數(shù)用于生成[0,1)之間的小數(shù)（即該數(shù)字大于等于0.0，但是小于1.0），并且可以通過(guò)Math.floor()函數(shù)向下取整。那么如果想隨機(jī)生成一個(gè)0和N之間的整數(shù)（包含0，但不包含N），js代碼如下：varx=Math.floor(Math.random()*N);4.4.2案例分析1. 生成隨機(jī)數(shù)cont.稍加修改，想隨機(jī)生成一個(gè)0和N之間的整數(shù)（既包含0，也包含N），js代碼如下：進(jìn)階思考，想隨機(jī)生成一個(gè)M和N之間的整數(shù)（既包含M，也包含N），js代碼如下：這里的隨機(jī)數(shù)其實(shí)是0和N-M之間的一個(gè)數(shù)字，再加上至少要生成的最小底數(shù)M。varx=Math.floor(Math.random()*(N+1));varx=Math.floor(Math.random()*(N-M+1))+M;4.4.2案例分析1. 生成隨機(jī)數(shù)cont.不妨封裝一個(gè)自定義函數(shù)用于隨機(jī)生成a-b之間的數(shù)字，參考js代碼如下：//隨機(jī)生成一個(gè)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(1,100)來(lái)獲取1-100之間的隨機(jī)整數(shù)（包含1和100本身）。4.4.2案例分析2. 判斷數(shù)字有效性本次案例要求玩家輸入的必須是數(shù)字，否則無(wú)法進(jìn)行比大小操作，判斷變量是否是數(shù)字的參考js代碼如下：varx1=99;varx2=3.14;varx3=“Hello!”;isNaN(x1)//返回值是falseisNaN(x2)//返回值是falseisNaN(x3)//返回值是true4.4.2案例分析2. 判斷數(shù)字有效性cont.在確定是數(shù)字后還需要判斷是否為整數(shù)，可以求數(shù)字與1的余數(shù)，參考js代碼如下：varx=99;vary=3.14;x%1//整數(shù)的返回值是0y%1//小數(shù)返回值不是0提示：以上內(nèi)容掌握之后也可用到第3章階段案例中來(lái)確保輸入數(shù)字的有效性。4.4.2案例分析2. 判斷數(shù)字有效性cont.最后就是確認(rèn)是整數(shù)后還得看下是否在游戲要求的0-100之間，參考js代碼如下：varx1=99;varx2=128;

x1<1||x1>100//返回false，未超出范圍x2<1||x2>100//返回true，超出范圍4.4.2案例分析3. 循環(huán)游戲回合這里不妨試試使用while(true)來(lái)制作一個(gè)永久循環(huán)，直到判斷出回合數(shù)超過(guò)8次再使用break強(qiáng)勢(shì)停止循環(huán)，參考js代碼如下：1. varcurrentRound=1;//當(dāng)前回合數(shù)2. varmaxRound=8;//允許猜的總回合數(shù)3. 4. while(true){5. //游戲過(guò)程（待補(bǔ)充）6. 7. //回合數(shù)增加18. currentRound++;9. //如果回合用光10. if(currentRound>maxRound){11. alert("機(jī)會(huì)已用光！請(qǐng)刷新后重新開始。");//提示游戲結(jié)束12. break;//強(qiáng)制停止游戲13. }14. }4.4.3案例制作創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如GuessGame.html。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.4.4.3案例制作18. //隨機(jī)生成一個(gè)a-b之間的數(shù)字（包含a和b本身）19. functiongetRandomNum(a,b){20. returnMath.floor(Math.random()*(b-a+1))+a;21. }22. 23. //隨機(jī)生成一個(gè)1到100之間的數(shù)字（包含1和100本身）24. varx=getRandomNum(minNum,maxNum);25. 26. while(true){27. //請(qǐng)玩家輸入數(shù)字varmyNum=prompt("請(qǐng)輸入您要猜的數(shù)字（1-100之間，包含1和100本身）");29. 4.4.3案例制作30. //判斷數(shù)字有效性31. if(isNaN(myNum)){//如果不是數(shù)字32. alert("您輸入的不是數(shù)字，請(qǐng)重新輸入！");33. continue;34. }35. elseif(myNum%1!==0){//如果不是整數(shù)36. alert("您輸入的不是整數(shù)，請(qǐng)重新輸入！");37. continue;38. }39. elseif(myNum<minNum||myNum>maxNum){//如果數(shù)字超出范圍40. alert("您輸入的數(shù)字超出范圍了，請(qǐng)重新輸入！");41. continue;42. }4.4.3案例制作43. /