《JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)》 課件 孫永林 項(xiàng)目1、2 創(chuàng)建JavaScript程序、制作二級(jí)聯(lián)動(dòng)效果

項(xiàng)目1.1環(huán)境搭配主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)1子項(xiàng)目項(xiàng)目1JavaScript的基礎(chǔ)2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)2學(xué)習(xí)任務(wù)

任務(wù)1環(huán)境搭配

任務(wù)2

第一個(gè)JavaScript腳本程序

任務(wù)3JavaScript語(yǔ)法（變量、數(shù)

據(jù)類型、運(yùn)算符）項(xiàng)目1JavaScript的基礎(chǔ)2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)3任務(wù)1環(huán)境搭配在網(wǎng)頁(yè)設(shè)計(jì)中，HTML、JavaScript和CSS文件必須是純文本格式的，JavaScript源程序是文本文件，因此可以使用任何文本編輯器來編寫程序源代碼，如Windows操作系統(tǒng)里的“記事本”程序。為了更快速地編寫程序并且降低出錯(cuò)的概率，通常會(huì)選擇一些專業(yè)的代碼編輯工具。專業(yè)的代碼編輯器有代碼提示和自動(dòng)完成功能，比如AdobeDreamweaver（后面簡(jiǎn)稱DW）、notepad++、editplus，本文只介紹了DW的安裝。項(xiàng)目1JavaScript的基礎(chǔ)2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)4項(xiàng)目1JavaScript的基礎(chǔ)這里安裝用的是Dreamweaver_CS6，官方簡(jiǎn)體中文版的安裝文件及破解補(bǔ)丁都可以在官網(wǎng)下載：/cn/products/cs6/dreamweaver.html。（1）運(yùn)行Dreamweaver_CS6安裝程序，第一步是將其解壓縮到指定目錄，我這里就解壓到桌面，也可以點(diǎn)擊右邊的文件夾按鈕選擇指定位置。解壓完成后，會(huì)自動(dòng)運(yùn)行安裝程序。一、下載解壓安裝包2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)5項(xiàng)目1JavaScript的基礎(chǔ)（2）可能會(huì)彈出這個(gè)錯(cuò)誤提示，直接忽略就行；二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)6項(xiàng)目1JavaScript的基礎(chǔ)（3）因?yàn)槲覀儧]有安裝序列號(hào)，是使用破解補(bǔ)丁破解，所以這里選擇“作為試用版安裝”；二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)7項(xiàng)目1JavaScript的基礎(chǔ)（4）選擇”接受“；二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)8項(xiàng)目1JavaScript的基礎(chǔ)（5）選擇安裝的路徑：如E:\軟件安裝列表；二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)9項(xiàng)目1JavaScript的基礎(chǔ)（6）點(diǎn)擊安裝。二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)10項(xiàng)目1JavaScript的基礎(chǔ)（7）安裝完畢后，先不要啟動(dòng)程序，現(xiàn)在的軟件還是試用期的，只能使用一個(gè)月，后面的步驟是進(jìn)行破解。二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)11項(xiàng)目1JavaScript的基礎(chǔ)（8）將破解補(bǔ)丁中的amtlib.dll替換安裝目錄的文件，這樣，軟件就可以永久使用了。二、安裝Dreamweaver軟件2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)12結(jié)束！項(xiàng)目1JavaScript的基礎(chǔ)項(xiàng)目2數(shù)組及其常用方法主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)13子項(xiàng)目2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)14學(xué)習(xí)任務(wù)

任務(wù)1數(shù)組的創(chuàng)建及賦值

任務(wù)2數(shù)組的訪問與修改

任務(wù)3常用數(shù)組操作函數(shù)2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)15任務(wù)1數(shù)組的創(chuàng)建及賦值

數(shù)組就是某類數(shù)據(jù)的集合，數(shù)組的類型可以是整形、字符串，甚至是對(duì)象。JavaScript不支持多維數(shù)組，因?yàn)閿?shù)組里面可以包含對(duì)象。數(shù)組對(duì)象的作用是：使用單獨(dú)的變量名來存儲(chǔ)一系列的值。數(shù)組有多種創(chuàng)建及賦值的方法，最常用的有以下三種：（1）使用構(gòu)造函數(shù)（2）對(duì)數(shù)組直接賦值（3）當(dāng)無法提前預(yù)知數(shù)組最終元素個(gè)數(shù)時(shí)，可聲明不知道個(gè)數(shù)的數(shù)組2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)161、使用構(gòu)造函數(shù)vararray1=newArray();//空數(shù)組vararray2=newArray(5);//指定數(shù)組長(zhǎng)度vararray3=newArray(“a”,“b”,“c”);//定義并賦值2、對(duì)數(shù)組直接賦值vararray4=["a","b","c"];3、當(dāng)無法提前預(yù)知數(shù)組最終元素個(gè)數(shù)時(shí)，可聲明不知道個(gè)數(shù)的數(shù)組varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)17任務(wù)2數(shù)組的訪問與修改1、通過指定數(shù)組名以及索引號(hào)碼，可以訪問某個(gè)特定的元素document.write(fruit[1]);即可輸出：Orange2、如需修改已有數(shù)組中的值，只要向指定下標(biāo)號(hào)添加一個(gè)新值即可fruit[1]="Cherry";此刻上面的語(yǔ)句：document.write(fruit[1]);將輸出：Cherry3、獲取數(shù)組長(zhǎng)度Javascript的數(shù)組不需要預(yù)先設(shè)定長(zhǎng)度，會(huì)自己進(jìn)行擴(kuò)展，“數(shù)組名.length”會(huì)返回元素個(gè)數(shù)。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)181、push():將一個(gè)或多個(gè)新元素添加到數(shù)組未尾，并返回?cái)?shù)組新長(zhǎng)度: arrayObj.push([item1[,item2[,...[,itemN]]]]);push()方法可以把它的參數(shù)順序添加到ayyayObj的尾部。它直接修改arrayObj,而不是創(chuàng)建一個(gè)新的數(shù)組。范例2-1：程序代碼如下：<script>vararrayNum=[1,2];varlen=arrayNum.push(3,4);alert("長(zhǎng)度為："+len+"--"+arrayNum);</script>運(yùn)行效果：任務(wù)3常用數(shù)組操作函數(shù)對(duì)數(shù)組操作的常用函數(shù)包括對(duì)數(shù)組元素的增加、刪除、截取和合并等操作。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)192、unshift():將一個(gè)或多個(gè)新元素添加到數(shù)組開始，數(shù)組中的元素自動(dòng)后移，返回?cái)?shù)組新長(zhǎng)度: arrayObj.unshift([item1[,item2[,...[,itemN]]]]);范例2-2：程序代碼如下：<script>vararrayNum=[1,2];varlen=arrayNum.unshift(3,4);alert("長(zhǎng)度為："+len+"--"+arrayNum);</script>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)203、shift():用于把數(shù)組的第一個(gè)元素從數(shù)組中刪除，并返回該元素的值： arrayObj.shift();如果數(shù)組是空的，那么shift()方法將不進(jìn)行任何操作，返回Undefined值。范例2-3：程序代碼如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.shift()+"\n"+fruit);</script>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)214、pop():用于把數(shù)組的最后一個(gè)元素從數(shù)組中刪除，并返回該元素的值： arrayObj.pop();范例2-4：程序代碼如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.pop()+"\n"+fruit);</script>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)22返回5、slice():以數(shù)組的形式返回?cái)?shù)組的一部分，即截取數(shù)組的一部分：arrayObj.slice(start,[end]);

注意：數(shù)組截取時(shí)不包括end對(duì)應(yīng)的元素，如果省略end將復(fù)制start之后的所有元素。范例2-5：程序代碼如下：<script>vararr1=newArray();arr1[0]="one";arr1[1]="two";arr1[2]="three";arr1[3]="four";arr1[4]="five";vartemp=arr1.slice(1,2);alert(temp);</script>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)236、concat():將多個(gè)數(shù)組（也可以是字符串，或者是數(shù)組和字符串的混合）連接為一個(gè)數(shù)組，返回連接好的新的數(shù)組:arrayObj.concat([item1[,item2[,...[,itemN]]]]);

該方法不會(huì)改變現(xiàn)有的數(shù)組，返回被連接數(shù)組的副本。該副本數(shù)組將所有item參數(shù)添加到arrayObj中，如果要進(jìn)行concat()操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素，而不是數(shù)組。范例2-6：程序代碼如下：<script>vararr1=newArray(3);arr1[0]="one";arr1[1]="two";arr1[2]="three";vararr2=newArray(3);arr2[0]="four";arr2[1]="five";arr2[2]="six";vartemp=arr1.concat(arr2);alert(temp);</script>2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)24運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)257、sort():字面上對(duì)數(shù)組元素排序： sort(item1,item2[,...[,itemN]]]]);范例2-7：程序代碼如下：<script>vararr=newArray(6);arr[0]="George";arr[1]="John";arr[2]="Thomas";arr[3]="James";arr[4]="Adrew";arr[5]="Martin";alert(arr+"\n"+arr.sort());</script>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)26結(jié)束！項(xiàng)目1.2我的第一個(gè)JavaScript腳本程序主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)27子項(xiàng)目項(xiàng)目1JavaScript的基礎(chǔ)腳本語(yǔ)言JavaScript第一個(gè)JavaScript程序JavaScript代碼編寫注意事項(xiàng)項(xiàng)目1JavaScript的基礎(chǔ)

如今成熟的腳本語(yǔ)言非常多，根據(jù)使用方式的不同分成嵌入式和非嵌入式兩類。嵌入式腳本語(yǔ)言，這類語(yǔ)言通常為了應(yīng)用程序的擴(kuò)展而開發(fā)出來。解釋器通常嵌入在被擴(kuò)展的應(yīng)用程序中，成為宿主程序的一部分。例如，Lua語(yǔ)言、Python語(yǔ)言的嵌入性也比較好，如今這兩者在游戲開發(fā)領(lǐng)域應(yīng)用較多，通常作為游戲軟件的腳本系統(tǒng)或配置文件。根據(jù)筆者的經(jīng)驗(yàn)，Lua語(yǔ)言無論在嵌入性和運(yùn)行效率上都遠(yuǎn)超過其他語(yǔ)言，將Python語(yǔ)言納入嵌入式語(yǔ)言分類中有些勉強(qiáng)，因?yàn)槠涓衿渌?dú)立運(yùn)行的語(yǔ)言。

非嵌入式腳本語(yǔ)言，這類語(yǔ)言無須嵌入其他程序中，如本書所講的JavaScript語(yǔ)言。這些語(yǔ)言主要應(yīng)用不是作為系統(tǒng)擴(kuò)展，而是實(shí)現(xiàn)一般的任務(wù)控制。一、腳本語(yǔ)言的分類項(xiàng)目1JavaScript的基礎(chǔ)

眾多Web瀏覽器對(duì)JavaScript的支持也很不一致，相同的語(yǔ)言特性在不同的瀏覽器中會(huì)有所差異。這種差異對(duì)開發(fā)者影響極大，開發(fā)時(shí)不得不為不同的瀏覽器編寫不同的代碼，這種難堪的局面一直持續(xù)到JavaScript標(biāo)準(zhǔn)的制定。1997年發(fā)布了ECMA-262語(yǔ)言規(guī)范，將JavaScript語(yǔ)言標(biāo)準(zhǔn)化并重命名為ECMAScript，現(xiàn)在各種瀏覽器都以該規(guī)范作為標(biāo)準(zhǔn)。

提示：語(yǔ)言和系統(tǒng)接口標(biāo)準(zhǔn)化后可以大大減輕應(yīng)用開發(fā)人員的負(fù)擔(dān)，不用為不同的語(yǔ)言特性或接口編寫不同的代碼，這也增強(qiáng)了軟件的可移植性。二、JavaScript的標(biāo)準(zhǔn)與歷史項(xiàng)目1JavaScript的基礎(chǔ)JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。與HTML標(biāo)識(shí)相結(jié)合，構(gòu)成了一個(gè)功能強(qiáng)大的Internet網(wǎng)上編程語(yǔ)言。使用特定的標(biāo)記可以直接將JavaScript腳本加入文檔：三、JavaScript在網(wǎng)頁(yè)中的應(yīng)用

項(xiàng)目1JavaScript的基礎(chǔ)腳本語(yǔ)言JavaScriptJavaScript在網(wǎng)頁(yè)中的應(yīng)用JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。與HTML標(biāo)識(shí)相結(jié)合，構(gòu)成了一個(gè)功能強(qiáng)大的Internet網(wǎng)上編程語(yǔ)言。使用特定的標(biāo)記可以直接將JavaScript腳本加入文檔：01 <html> <!--文檔開始-->02 <head></head> <!--文檔頭-->03 <body> <!--文檔體-->04 <scriptLanguage="JavaScript">05 JavaScript語(yǔ)言代碼；JavaScript語(yǔ)言代碼;....06 </script>07 </body> <!--文檔體結(jié)束-->08 </html> <!--文檔結(jié)束-->項(xiàng)目1JavaScript的基礎(chǔ)腳本語(yǔ)言JavaScriptJavaScript的發(fā)展趨勢(shì)語(yǔ)言永遠(yuǎn)被當(dāng)做工具，這一點(diǎn)從來都沒有被改變過，以后也不會(huì)。例如，在Windows平臺(tái)上，使用ADODB組件可以使JavaScript能處理支持SQL的數(shù)據(jù)庫(kù)中的數(shù)據(jù)，使用FSO組件可以實(shí)現(xiàn)本地文件IO功能。這一切都說明了JavaScript位于應(yīng)用開發(fā)的最頂端，其與低層技術(shù)的實(shí)現(xiàn)無關(guān)，層次結(jié)構(gòu)如圖1-2所示。盡管平臺(tái)技術(shù)不斷發(fā)生變化，JavaScript仍將以不變的形式去使用平臺(tái)提供的能力從而適應(yīng)新的需求。未來的一段時(shí)間內(nèi)，Web開發(fā)將是開發(fā)者眾聚之地，也是JavaScript變得紫紅的時(shí)代。項(xiàng)目1JavaScript的基礎(chǔ)第一個(gè)JavaScript程序?qū)W習(xí)每一門新語(yǔ)言，大致了解了它的背景之后，最想做的莫過于先寫一個(gè)最簡(jiǎn)單的程序并成功運(yùn)行。如果最初連續(xù)幾個(gè)程序都無法成功編譯或運(yùn)行，初學(xué)者學(xué)習(xí)的信心多少會(huì)受些打擊，這是正?，F(xiàn)象。本節(jié)將帶領(lǐng)讀者對(duì)JavaScript進(jìn)行第一次實(shí)踐嘗試，用它編寫一個(gè)最簡(jiǎn)單且流行了幾十年的“HelloWorld”程序。項(xiàng)目1JavaScript的基礎(chǔ)第一個(gè)JavaScript程序選擇JavaScript編輯器JavaScript源程序是文本文件，因此可以使用任何文本編輯器來編寫程序源代碼，如Windows操作系統(tǒng)里的“記事本”程序。為了更快速地編寫程序并且降低出錯(cuò)的概率，通常會(huì)選擇一些專業(yè)的代碼編輯工具。專業(yè)的代碼編輯器有代碼提示和自動(dòng)完成功能，筆者推薦使用AptanaStudio，它是一款很不錯(cuò)的JavaScript代碼編輯器。項(xiàng)目1JavaScript的基礎(chǔ)第一個(gè)JavaScript程序編寫HelloWorld程序01 <html> <!---------HTML文檔開始-------------------->02 <body> <!---------文檔體開始-------------------------->03 <scriptlanguage="JavaScript"> <!---------腳本程序----------------------------->04 document.write("HelloWorld!"); //輸出經(jīng)典的HelloWorld05 </script> <!---------腳本結(jié)束----------------------------->06 </body> <!---------文檔體結(jié)束-------------------------->07 </html> <!---------HTML文檔結(jié)束-------------------->項(xiàng)目1JavaScript的基礎(chǔ)第一個(gè)JavaScript程序運(yùn)行程序運(yùn)行JavaScript程序最簡(jiǎn)單的方法就是使用瀏覽器打開包含JavaScript代碼的網(wǎng)頁(yè)文件，通常網(wǎng)頁(yè)文件的擴(kuò)展名為htm或者h(yuǎn)tml。使用系統(tǒng)自帶的瀏覽器即可。項(xiàng)目1JavaScript的基礎(chǔ)JavaScript代碼編寫時(shí)的注意事項(xiàng)JavaScript程序的書寫有些許需要注意的地方，如大小寫敏感、單行和多行、分號(hào)的運(yùn)用等。初學(xué)者在編寫程序時(shí)通常會(huì)觸犯這些規(guī)則，應(yīng)該盡力避免。用戶自定義的標(biāo)識(shí)符不能與語(yǔ)言保留的關(guān)鍵字同名，通過使用一些專業(yè)的編輯器可以幫助消除語(yǔ)法錯(cuò)誤。項(xiàng)目1JavaScript的基礎(chǔ)JavaScript代碼編寫時(shí)的注意事項(xiàng)大小寫敏感空格與換行分號(hào)可有可無注釋形式項(xiàng)目1JavaScript的基礎(chǔ)2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)40結(jié)束！項(xiàng)目1JavaScript的基礎(chǔ)3.1條件控制語(yǔ)句主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)41子項(xiàng)目2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)42學(xué)習(xí)任務(wù)

任務(wù)1選擇結(jié)構(gòu)和條件判斷

任務(wù)2if-else條件控制語(yǔ)句

任務(wù)3switch-case條件控制語(yǔ)句2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)43

語(yǔ)句：和其他編程語(yǔ)言一樣，Javascript也具有各種語(yǔ)句來進(jìn)行流程上的判斷。從本質(zhì)上看，語(yǔ)句定義了ECMAScript中的主要語(yǔ)法，語(yǔ)句通常使用一或多個(gè)關(guān)鍵字來完成給定點(diǎn)任務(wù)。語(yǔ)句可以很簡(jiǎn)單，例如通知函數(shù)退出；也可以比較復(fù)雜，例如指定重復(fù)執(zhí)行某個(gè)命令的次數(shù)。

程序控制語(yǔ)句主要分成兩種：條件控制語(yǔ)句和循環(huán)控制語(yǔ)句。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)44任務(wù)1選擇結(jié)構(gòu)和條件判斷條件控制語(yǔ)句采用依照某種條件判斷該代碼段是否執(zhí)行。實(shí)際的生活中往往存在選擇分支的情況，一般來說，像拋硬幣之類的事件存在著正面和反面兩個(gè)分支，像選擇出行路徑之類的事件，往往存在多個(gè)分支，分支的數(shù)量不同將決定程序的不同行為表現(xiàn)。常用的有兩種選擇語(yǔ)句：（1）if語(yǔ)句，這種語(yǔ)句的作用場(chǎng)景為只有兩個(gè)分支的程序選擇中。（2）switch語(yǔ)句，這種語(yǔ)句的作用場(chǎng)景為具有多個(gè)分支的程序選擇中。

2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)45任務(wù)2if-else條件控制語(yǔ)句1、對(duì)程序流程進(jìn)行條件判斷時(shí)，最為常用的一個(gè)語(yǔ)句就是if-else語(yǔ)句。if-else語(yǔ)句的語(yǔ)法：if(condition)statement1elsestatement2其中的條件condition可以是任意的表達(dá)式，且該條件表達(dá)式的值不一定是布爾值。ECMAScript會(huì)自動(dòng)調(diào)用Boolean()轉(zhuǎn)換函數(shù)將這個(gè)表達(dá)式的結(jié)果轉(zhuǎn)換為一個(gè)布爾值。if語(yǔ)句的執(zhí)行過程為：如果對(duì)condition求值的結(jié)果是true,則執(zhí)行statement1（語(yǔ)句1）；如果condition的結(jié)果為false，則執(zhí)行statement2（語(yǔ)句2）。執(zhí)行體語(yǔ)句1和語(yǔ)句2既可以是一行代碼，也可以是一個(gè)代碼塊（以一對(duì)花括號(hào)括起來的多行代碼）。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)46if-else控制語(yǔ)句執(zhí)行流程圖如下：

2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)47【范例3-1】根據(jù)年齡顯示不同內(nèi)容。程序代碼如下：<body><script>varage=20;if(age>=18){//如果age>=18為true，則執(zhí)行if語(yǔ)句塊alert('成年人');}else{//否則執(zhí)行else語(yǔ)句塊alert('青少年');}</script></body>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)48<body><script>varage=20;if(age>=18)//如果age>=18為true，則執(zhí)行if語(yǔ)句塊alert(‘成年人’);else//否則執(zhí)行else語(yǔ)句塊alert('青少年');</script></body>執(zhí)行結(jié)果與例3-1完全一樣。在上面例3-1中，else語(yǔ)句是可選的，即可不包含else語(yǔ)句。

同時(shí)，如果語(yǔ)句塊只包含一條語(yǔ)句，那么可以省略大括號(hào){},則例3-1可以修改如下：是否所有大括號(hào){}都可以省略呢？？？2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)49<body><script>varage=20;if(age>=18)alert('成年人');elseconsole.log('年齡小于18歲');alert('青少年');</script></body>此刻程序的結(jié)果僅在控制臺(tái)里輸出：年齡小于18歲不可以！??！省略{}的危險(xiǎn)之處在于，如果后來想添加一些語(yǔ)句，卻忘了寫{}，就改變了if...else...的語(yǔ)義，比如在3-1例子中的else條件后需執(zhí)行兩條語(yǔ)句，修改如下：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)50上述代碼的else子句實(shí)際上只負(fù)責(zé)執(zhí)行語(yǔ)句console.log(“年齡小于18歲“)，原有的alert(“青少年”)語(yǔ)句已經(jīng)不屬于else的控制范圍了，當(dāng)條件判斷的表達(dá)式結(jié)果為假，它僅執(zhí)行到else后面的第一個(gè)分號(hào);處，因此語(yǔ)句alert(“青少年”)執(zhí)行不到。所以業(yè)界推崇的最佳實(shí)踐是始終使用代碼塊，即使要執(zhí)行的只有一行代碼。因?yàn)檫@樣可以消除人們的誤解，否則可能讓人分不清在不同條件下分別要執(zhí)行哪些語(yǔ)句。

以上代碼修改如下，則可得到預(yù)期的輸出結(jié)果：<body>