《HTML5網(wǎng)頁前端設(shè)計(jì)》教案第4章JavaScript基礎(chǔ)一、教學(xué)目標(biāo)：了解JavaScript的使用方式；了解JavaScript的基本語法規(guī)則；熟悉JavaScript的變量聲明與命名規(guī)范；掌握J(rèn)avaScript的基本數(shù)據(jù)類型；掌握J(rèn)avaScript運(yùn)算符的使用；掌握J(rèn)avaScript條件語句的用法；掌握J(rèn)avaScript函數(shù)的使用；掌握J(rèn)avaScriptDOM的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：JavaScript的運(yùn)算符、條件語句和函數(shù)的用法；難點(diǎn)：JavaScriptDOM的用法。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：本章主要內(nèi)容是JavaScript基礎(chǔ)知識(shí)，包括JavaScript的使用、語法、變量等內(nèi)容。基本數(shù)據(jù)類型、運(yùn)算符、條件語句、函數(shù)以及DOM的用法。五、教學(xué)基本內(nèi)容：4.1JavaScript的使用 JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。4.2JavaScript語法 4.2.1JavaScript大小寫 在JavaScript中大小寫是嚴(yán)格區(qū)分的，無論是變量、函數(shù)名稱、運(yùn)算符和其他語法都必須嚴(yán)格按照要求的大小寫進(jìn)行聲明和使用。4.2.2JavaScript分號(hào) JavaScript的語法規(guī)則對(duì)此比較寬松，如果一行代碼結(jié)尾沒有分號(hào)也是可以被正確執(zhí)行的。4.2.3JavaScript注釋 JavaScript有兩種注釋方式：?jiǎn)涡凶⑨尯投嘈凶⑨尅涡凶⑨層秒p斜杠（//）開頭，可以自成一行也可以寫在JavaScript代碼的后面。多行注釋使用/*開頭，以*/結(jié)尾，在這兩個(gè)符號(hào)之間的所有內(nèi)容都會(huì)被認(rèn)為是注釋內(nèi)容，均不會(huì)被瀏覽器所執(zhí)行。4.2.4JavaScript代碼塊 和Java語言類似，JavaScript語言也使用一對(duì)大括號(hào)標(biāo)識(shí)需要被執(zhí)行的多行代碼。4.3JavaScript變量 4.3.1變量的聲明 JavaScript是一種弱類型的腳本語言，無論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱進(jìn)行聲明，其中關(guān)鍵詞var來源于英文單詞variable（變量）的前三個(gè)字母。可以在聲明變量的同時(shí)對(duì)其指定初始值；也可以先聲明變量，再另行賦值。4.3.2變量的命名規(guī)范 一個(gè)有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號(hào)（$）；其他位置上的字符可以是下劃線（_）、美元符號(hào)（$）、數(shù)字（0-9）或字母（A-Za-z）。4.3.3JavaScript關(guān)鍵字和保留字JavaScript關(guān)鍵字一覽表breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith JavaScript保留字一覽表abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile4.4JavaScript基本數(shù)據(jù)類型 4.4.1Undefined類型 所有Undefined類型的輸出值都是undefined。當(dāng)需要輸出的變量從未聲明過，或者使用關(guān)鍵詞var聲明過但是從未進(jìn)行賦值時(shí)會(huì)顯示undefined字樣。4.4.2Null類型null值表示變量的內(nèi)容為空，可用于初始化變量，或者清空已經(jīng)賦值的變量。 4.4.3String類型 在JavaScript中String類型用于存儲(chǔ)文本內(nèi)容，又稱為字符串類型。為變量進(jìn)行字符串賦值時(shí)需要使用引號(hào)(單引號(hào)或雙引號(hào)均可)括住文本內(nèi)容。在字符串中，每一個(gè)字符都有固定的位置，其位置從左往右進(jìn)行分配。首字符H從位置0開始，第二個(gè)字符L是位置1，以此類推，直到最后一個(gè)字符O的位置是字符串的總長(zhǎng)度少1。JavaScriptString對(duì)象常見方法一覽方法名解釋charAt()返回指定位置上的字符。charCodeAt()返回指定位置上的字符Unicode編碼。concat()連接字符串。indexOf()正序檢索字符串中指定內(nèi)容的位置。lastIndexOf()倒序檢索字符串中指定內(nèi)容的位置。match()返回匹配正則表達(dá)式的所有字符串。replace()替換字符串中匹配正則表達(dá)式的指定內(nèi)容。search()返回匹配正則表達(dá)式的索引值。slice()根據(jù)指定位置節(jié)選字符串片段。split()把字符串分割成字符串?dāng)?shù)組。substring()根據(jù)指定位置節(jié)選字符串片段toLowerCase()將字符串中所有字母都轉(zhuǎn)換為小寫。toUpperCase()將字符串中所有字母都轉(zhuǎn)換為大寫。4.4.4Number類型 在JavaScript中使用Number類型表示數(shù)字，其數(shù)字可以是32位以內(nèi)的整數(shù)或64位以內(nèi)的浮點(diǎn)數(shù)?？茖W(xué)計(jì)數(shù)法對(duì)于極大或極小的數(shù)字也可以使用科學(xué)記數(shù)法（數(shù)值e倍數(shù)）表示，例如3.14e8表示的數(shù)是3.14乘以10的8次方，即314000000；3.14e-8表示的數(shù)是3.14乘以10的-8次方，即0.0000000314。八進(jìn)制與十六進(jìn)制數(shù)八進(jìn)制的數(shù)需要用數(shù)字0開頭，后面跟的數(shù)字只能是0-7（八進(jìn)制字符）之間的一個(gè)。例如varx=010;//這里相當(dāng)于十進(jìn)制的8十六進(jìn)制的數(shù)需要用數(shù)字0和字母x開頭，后面跟字符只能是0-9或A-F（十六進(jìn)制字符）之間的一個(gè)，大小寫不限。例如varx=0xA;//這里相當(dāng)于十進(jìn)制的10浮點(diǎn)數(shù)要定義浮點(diǎn)數(shù)，必須使用小數(shù)點(diǎn)以及小數(shù)點(diǎn)后面至少跟一位數(shù)字。例如varx=3.14如果浮點(diǎn)數(shù)類型的小數(shù)點(diǎn)前面整數(shù)位為0可以省略。例如varx=.15;//等同于0.15浮點(diǎn)數(shù)可以使用toFixed()方法規(guī)定小數(shù)點(diǎn)后保留幾位數(shù)。例如：varx=3.1415926;varresult=x.toFixed(2);//返回值為3.14特殊Number值特殊值解釋Infinity正無窮大，在JavaScript使用Numer.POSITIVE_INFINITY表示。-Infinity負(fù)無窮大，在JavaScript使用Numer.NEGATIVE_INFINITY表示。NaN非數(shù)字，在JavaScript使用Numer.NaN表示。Number.MAX_VALUE數(shù)值范圍允許的最大值，大約等于1.8e308Number.MIN_VALUE數(shù)值范圍允許的最小值，大約等于5e-3244.4.5Boolean類型 布爾值（boolean）在很多程序語言中都被用于進(jìn)行條件判斷，其值只有兩種：true（真）或者false（假）。4.5JavaScript運(yùn)算符 4.5.1賦值運(yùn)算符 在JavaScript中，運(yùn)算符=專門用來為變量賦值，因此也稱為賦值運(yùn)算符。4.5.2算術(shù)運(yùn)算符 在JavaScript中所有的基本算術(shù)均可以使用對(duì)應(yīng)的算術(shù)運(yùn)算符完成，包括加減乘除和求余等。4.5.3邏輯運(yùn)算符 邏輯運(yùn)算符有三種類型：NOT（邏輯非）、AND（邏輯與）和OR（邏輯或）。運(yùn)算符解釋！邏輯非，表示對(duì)布爾值結(jié)果再次反轉(zhuǎn)。例如原先為true，加上！符號(hào)后返回值就變?yōu)閒alse。&&邏輯與，表示并列關(guān)系。必須在&&符號(hào)前后條件均為true，返回值才為true。只要有任何一個(gè)條件為false，返回值均為false。||邏輯或，表示二選一的關(guān)系。在||符號(hào)前后條件只要有一個(gè)為true，返回值就為true。如果兩個(gè)條件都為false，則返回值才為false。4.5.4關(guān)系運(yùn)算符 在JavaScript中，關(guān)系運(yùn)算符共有四種：大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。用于比較兩個(gè)值的大小，返回值一定是布爾值（true或false）。4.5.5相等性運(yùn)算符在JavaScript中，判斷兩個(gè)數(shù)值是否相等用雙等于符號(hào)（==）表示，只有兩個(gè)數(shù)值完全相等時(shí)返回真（true）；判斷兩個(gè)數(shù)值是否不相等使用感嘆號(hào)加等于號(hào)（!=）表示，在兩個(gè)數(shù)值不一樣的情況下返回真（true）。4.6JavaScript條件語句 4.6.1if語句 最簡(jiǎn)單的if語句由單個(gè)條件組成，語法規(guī)則如下：if(條件){條件為真（true）時(shí)執(zhí)行的代碼}當(dāng)判斷條件成立與否都需要有對(duì)應(yīng)的處理時(shí)可以使用if-else語句。其語法格式如下：if(條件){條件為真（true）時(shí)執(zhí)行的代碼}else{條件為假（false）時(shí)執(zhí)行的代碼}當(dāng)有多個(gè)條件分支需要分別判斷時(shí)，可以使用elseif語句。if(條件1){條件1為真（true）時(shí)執(zhí)行的代碼}elseif(條件2){條件2為真（true）時(shí)執(zhí)行的代碼}else{所有條件都為假（false）時(shí)執(zhí)行的代碼}4.6.2switch語句 當(dāng)對(duì)于同一個(gè)變量需要進(jìn)行多次條件判斷時(shí)，也可以使用switch語句代替多重if-elseif-else語句。語法格式如下：switch(變量){case值1：執(zhí)行代碼塊1break;case值2：執(zhí)行代碼塊2break;……case值n：執(zhí)行代碼塊nbreak;[default：以上條件均不符合時(shí)的執(zhí)行代碼塊]} 4.7JavaScript函數(shù) 4.7.1函數(shù)的基本結(jié)構(gòu)函數(shù)是在調(diào)用時(shí)才會(huì)執(zhí)行的一段代碼塊，可以重復(fù)使用。其基本語法結(jié)構(gòu)如下：function函數(shù)名稱(參數(shù)0,參數(shù)1,……參數(shù)N){待執(zhí)行代碼塊} 4.7.2函數(shù)的調(diào)用函數(shù)可以通過使用函數(shù)名稱的方法進(jìn)行調(diào)用。例如：welcome();如果該函數(shù)存在參數(shù)，則調(diào)用時(shí)必須在函數(shù)的小括號(hào)內(nèi)傳遞對(duì)應(yīng)的參數(shù)值。welcome("HelloJavaScript!"); 4.7.3函數(shù)的返回值 JavaScript函數(shù)無需特別聲明返回值類型，直接在大括號(hào)內(nèi)的代碼塊中使用return關(guān)鍵詞后面緊跟需要返回的值即可。4.8文檔對(duì)象模型DOM 4.8.1查找HTML元素在JavaScript中有三種方式可以查找HTML元素：通過HTML元素的id名稱查找；通過HTML元素的標(biāo)簽名稱查找；通過HTML元素的類名稱查找。 4.8.2DOMHTML創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容在JavaScript中，使用document.write()方法可以往HTML頁面動(dòng)態(tài)輸出內(nèi)容。例如：<body><script>document.write("Hello2016");</script></body>上述代碼片段表示將在空白頁面上動(dòng)態(tài)輸出字符串"Hello2016"。需要注意的是，alert()方法中的換行符\n在這里是無效的，如果需要輸出換行直接使用HTML換行標(biāo)簽<br>即可。改變HTML元素內(nèi)容innerHTML可以用于獲取元素內(nèi)容，也可以改變?cè)貎?nèi)容。使用innerHTML屬性獲取或更改的元素內(nèi)容可以包括HTML標(biāo)簽本身。獲取元素內(nèi)容的語法結(jié)構(gòu)如下：var變量名=元素對(duì)象.innerHTML;更改元素內(nèi)容的語法結(jié)構(gòu)如下：元素對(duì)象.innerHTML=新的內(nèi)容;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱")方法獲取。改變HTML元素屬性在JavaScript還可以根據(jù)屬性名稱動(dòng)態(tài)地修改元素屬性。其語法結(jié)構(gòu)如下：元素對(duì)象.attribute=新的屬性值;這里的attribute替換為真正的屬性名稱即可使用。4.8.3DOMCSS JavaScript還可以改變HTML元素的CSS樣式。其語法結(jié)構(gòu)如下：元素對(duì)象.style.屬性=新的值;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱")方法獲取。屬性指的是在CSS樣式中的屬性名稱，等號(hào)右邊填寫該屬性更改后的樣式值。4.8.4DOM事件 JavaScript還可以在HTML頁面狀態(tài)發(fā)生變化時(shí)執(zhí)行代碼，這種狀態(tài)的變化稱為DOM事件（Event）。HTML常用事件屬性一覽表事件屬性解釋onabort圖像加載過程被中斷onblur元素失去焦點(diǎn)onchange域的內(nèi)容被改變onclick元素被鼠標(biāo)左鍵點(diǎn)擊ondbclick元素被鼠標(biāo)左鍵雙擊onerror加載文檔或圖像時(shí)發(fā)送錯(cuò)誤onfocus元素獲得焦點(diǎn)onkeydown鍵盤按鍵被按下onkeypress鍵盤按鍵被按下并松開onkeyup鍵盤按鍵被松開onload頁面或圖像被加載完成onmousedown鼠標(biāo)按鈕被按下onmousemove鼠標(biāo)被移動(dòng)onmouseout鼠標(biāo)從當(dāng)前元素上移走onmouseover鼠標(biāo)移動(dòng)到當(dāng)前元素上onmouseup鼠標(biāo)按鍵被松開onreset重置按鈕被點(diǎn)擊onresize窗口或框架的大小被更改onselect文本被選中onsubmit提交按鈕被點(diǎn)擊onunload退出頁面4.8.5DOM節(jié)點(diǎn) 添加HTML元素添加HTML元素有兩個(gè)步驟，先要?jiǎng)?chuàng)建需要添加的HTML元素，然后將其追加在一個(gè)已存在的元素中去。使用document對(duì)象的createElement()方法可以創(chuàng)建新的元素，其語法結(jié)構(gòu)如下：document.createElement("元素標(biāo)簽名");例如，創(chuàng)建一個(gè)新的段落標(biāo)簽<p>：document.createElement("p");使用appendChild()方法可以將創(chuàng)建好的元素追加到已存在的元素中，其語法結(jié)構(gòu)如下：已存在的元素對(duì)象.appendChild(需要添加的新元素對(duì)象);這里已存在的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱")方法獲取。例如，將上一個(gè)示例中創(chuàng)建的段落標(biāo)簽<p>追加到id="test"的<div>標(biāo)簽中去：varp=document.createElement("p");vartest=document.getElementById("test");test.appendChild(p);刪除HTML元素刪除已存在的HTML元素也需要兩個(gè)步驟：首先使用document對(duì)象的getElementById("id名稱")方法獲取該元素，然后使用removeChild()方法將其從父元素中刪除。其父元素如果有明確的id名稱，同樣可以使用getElementById()方法獲取。例如，在知道父元素id名稱的情況下刪除其中id="p01"的子元素：vartest=document.getElementById("test");//獲取父元素varp=document.getElementById("p01");//獲取子元素test.removeChild(p);//刪除子元素若父元素?zé)o對(duì)應(yīng)的id名稱獲取，可以使用子元素的parentNode屬性獲取其父元素對(duì)象，效果相同。例如，在不知道父元素id名稱的情況下刪除其中id="p01"的子元素：varp=document.getElementById("p01");//獲取子元素vartest=p.parentNode;//獲取父元素test.removeChild(p);//刪除子元素4.9實(shí)驗(yàn)案例——數(shù)字時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)設(shè)計(jì)一款簡(jiǎn)單的數(shù)字時(shí)鐘，要求實(shí)現(xiàn)顯示當(dāng)前的時(shí)分秒，并且可以每秒更新一次實(shí)現(xiàn)動(dòng)態(tài)效果。4.10本章小結(jié)本章主要介紹了JavaScript的基礎(chǔ)知識(shí)，包括JavaScript的語法規(guī)則、變量聲明和數(shù)據(jù)類型等內(nèi)容。在JavaScript運(yùn)算符部分，根據(jù)運(yùn)算符的功能不同分別介紹了賦值運(yùn)算符、算術(shù)運(yùn)算符、邏輯運(yùn)算符、關(guān)系運(yùn)算符以及相等性運(yùn)算符。在JavaScript條件語句部分介紹了if和switch語句的用法；在JavaScript函數(shù)部分主要介紹了函數(shù)的基本結(jié)構(gòu)、調(diào)用方法與返回值處理；最后還介紹了JavaScript對(duì)于文檔對(duì)象模型DOM的使用方法包括如何查找、添加、刪除HTML元素、修改