HTML5網(wǎng)頁(yè)前端設(shè)計(jì)（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上、下)_第1頁(yè)
HTML5網(wǎng)頁(yè)前端設(shè)計(jì)（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上、下)_第2頁(yè)
HTML5網(wǎng)頁(yè)前端設(shè)計(jì)（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上、下)_第3頁(yè)
HTML5網(wǎng)頁(yè)前端設(shè)計(jì)（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上、下)_第4頁(yè)
HTML5網(wǎng)頁(yè)前端設(shè)計(jì)（第3版）- 微課視頻版 課件 CH04 JavaScript基礎(chǔ)(上、下)_第5頁(yè)
已閱讀5頁(yè)，還剩161頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第4章JavaScript基礎(chǔ)（上）主講人：XX老師本章學(xué)習(xí)目標(biāo)了解JavaScript的使用方式；了解JavaScript的基本語(yǔ)法規(guī)則；熟悉JavaScript的變量聲明與命名規(guī)范；掌握J(rèn)avaScript的基本數(shù)據(jù)類(lèi)型。目錄4.1JavaScript的使用4.2JavaScript語(yǔ)法4.3JavaScript變量4.4JavaScript基本數(shù)據(jù)類(lèi)型4.5JavaScript運(yùn)算符4.6JavaScript條件語(yǔ)句4.7JavaScript函數(shù)4.1.1內(nèi)部JavaScript4.1.2外部JavaScript4.1JavaScript的使用4.1JavaScript的使用JavaScript有兩種使用方式：一是在HTML文檔中直接添加代碼；二是將JavaScript腳本代碼寫(xiě)到外部的JavaScript文件中，再在HTML文檔中引用該文件的路徑地址。這兩種使用方式的效果完全相同，可以根據(jù)使用率和代碼量選擇相應(yīng)的開(kāi)發(fā)方式。例如有多個(gè)網(wǎng)頁(yè)文件需要引用同一段JavaScript代碼時(shí)，則可以寫(xiě)在外部文件中進(jìn)行引用，以減少代碼冗余。4.1.1內(nèi)部JavaScriptJavaScript代碼可以直接寫(xiě)在HTML頁(yè)面中，只需使用<script>首尾標(biāo)簽嵌套即可。4.1.1內(nèi)部JavaScript相關(guān)HTML代碼語(yǔ)法格式如下：使用JavaScript代碼中的alert()方法制作一段簡(jiǎn)單的示例：<script>//JavaScript代碼...</script><script>alert("HelloJavaScript!");</script>該語(yǔ)句表示打開(kāi)網(wǎng)頁(yè)后彈出警告對(duì)話框，顯示的文字內(nèi)容為"HelloJavaScript!"。4.1.1內(nèi)部JavaScript【例4-1】?jī)?nèi)部JavaScript的簡(jiǎn)單應(yīng)用4.1.2外部JavaScript如果選擇將JavaScript代碼保存到外部文件中，則只需要在HTML頁(yè)面的<script>標(biāo)簽中聲明src屬性即可。此時(shí)外部文件的類(lèi)型必須是JavaScript類(lèi)型文件（簡(jiǎn)稱(chēng)為JS文件），即文件后綴名為.js。4.1.2外部JavaScript相關(guān)HTML代碼語(yǔ)法格式如下：以在本地js文件夾中的myFirstScript.js文件為例，在HTML頁(yè)面中的引用方法如下：<scriptsrc="JavaScript文件URL"></script><scriptsrc="js/myFirstScript.js"></script>引用語(yǔ)句放在<head>或<body>首尾標(biāo)簽中均可，與在<script>標(biāo)簽中直接寫(xiě)腳本代碼的運(yùn)行效果完全一樣。4.1.2外部JavaScript【例4-2】外部JavaScript的簡(jiǎn)單應(yīng)用4.2.1JavaScript大小寫(xiě)4.2.2JavaScript分號(hào)4.2.3JavaScript注釋4.2.4JavaScript代碼塊4.2JavaScript語(yǔ)法4.2.1JavaScript大小寫(xiě)在JavaScript中大小寫(xiě)是嚴(yán)格區(qū)分的，無(wú)論是變量、函數(shù)名稱(chēng)、運(yùn)算符和其他語(yǔ)法都必須嚴(yán)格按照要求的大小寫(xiě)進(jìn)行聲明和使用。例如變量hello與變量HELLO會(huì)被認(rèn)為是完全不同的內(nèi)容。4.2.2JavaScript分號(hào)很多編程語(yǔ)言（例如C、Java和Perl等）都要求每句代碼結(jié)尾要使用分號(hào)（;）表示結(jié)束。而JavaScript的語(yǔ)法規(guī)則對(duì)此比較寬松，如果一行代碼結(jié)尾沒(méi)有分號(hào)也是可以被正確執(zhí)行的。4.2.3JavaScript注釋為了提高程序代碼的可讀性，JavaScript允許在代碼中添加注釋。注釋僅用于對(duì)代碼進(jìn)行輔助提示，不會(huì)被瀏覽器執(zhí)行。JavaScript有兩種注釋方式：?jiǎn)涡凶⑨尯投嘈凶⑨尅?.2.3JavaScript注釋單行注釋用雙斜杠（//）開(kāi)頭，可以自成一行也可以寫(xiě)在JavaScript代碼的后面。例如：//該提示語(yǔ)句自成一行alert("HelloJavaScript!");或alert("HelloJavaScript!");//該提示語(yǔ)句寫(xiě)在JavaScript代碼后面4.2.3JavaScript注釋多行注釋使用/*開(kāi)頭，以*/結(jié)尾，在這兩個(gè)符號(hào)之間的所有內(nèi)容都會(huì)被認(rèn)為是注釋內(nèi)容，均不會(huì)被瀏覽器所執(zhí)行。例如：/*這是一個(gè)多行注釋

在首尾符號(hào)之間的所有內(nèi)容都被認(rèn)為是注釋

均不會(huì)被瀏覽器執(zhí)行*/alert("HelloJavaScript!");4.2.3JavaScript注釋利用注釋內(nèi)容不會(huì)被執(zhí)行的特點(diǎn)，在調(diào)試JavaScript代碼時(shí)如果希望暫停某一句或幾句代碼的執(zhí)行，可使用單行或多行注釋符號(hào)將需要禁用的代碼做成注釋。例如：//alert("HelloJavaScript1");//alert("HelloJavaScript2");alert("HelloJavaScript3");此時(shí)第一、二行的JavaScript代碼由于最前面添加了單行注釋符號(hào)，因此不會(huì)被執(zhí)行。當(dāng)調(diào)試完成后去掉注釋符號(hào)，代碼即可恢復(fù)運(yùn)行。4.2.4JavaScript代碼塊和Java語(yǔ)言類(lèi)似，JavaScript語(yǔ)言也使用一對(duì)大括號(hào)標(biāo)識(shí)需要被執(zhí)行的多行代碼。4.2.4JavaScript代碼塊例如：varx=9;if(x<10){x=10;alert(x);}上述代碼在if條件成立時(shí)，會(huì)執(zhí)行大括號(hào)里面的所有代碼。4.3.1變量的聲明4.3.2變量的命名規(guī)范4.3.3JavaScript關(guān)鍵字和保留字4.3JavaScript變量4.3.1變量的聲明JavaScript是一種弱類(lèi)型的腳本語(yǔ)言，無(wú)論是數(shù)字、文本還是其他內(nèi)容，統(tǒng)一使用關(guān)鍵詞var加上變量名稱(chēng)進(jìn)行聲明，其中關(guān)鍵詞var來(lái)源于英文單詞variable（變量）的前三個(gè)字母。4.3.1變量的聲明可以在聲明變量的同時(shí)對(duì)其指定初始值；也可以先聲明變量，再另行賦值。例如：varx=2;varmsg="HelloJavaScript!";varname;常見(jiàn)變量的賦值為數(shù)字或文本形式。當(dāng)變量的賦值內(nèi)容為文本時(shí)，需要使用引號(hào)（單引號(hào)、雙引號(hào)均可）括住內(nèi)容；當(dāng)為變量賦值為數(shù)字的時(shí)候，內(nèi)容不要加引號(hào)，否則會(huì)被當(dāng)作字符串處理。4.3.1變量的聲明JavaScript也允許使用一個(gè)關(guān)鍵詞var同時(shí)定義多個(gè)變量。例如：同時(shí)定義的變量類(lèi)型可以不一樣，并且可為其中部分或全部變量進(jìn)行初始化。例如：varx1,x2,x3;//一次定義了三個(gè)變量名稱(chēng)varx1=2,x2="Hello",x3;4.3.1變量的聲明由于JavaScript變量是弱類(lèi)型的，因此同一個(gè)變量可以用于存放不同類(lèi)型的值。例如可以聲明一個(gè)變量初始化時(shí)用于存放數(shù)值，然后將其更改為存放字符串。代碼如下：varx=99;//初始化時(shí)變量x存放的是數(shù)值99x="Hello";//將變量x更改為存放字符串"Hello"這段代碼從語(yǔ)法上來(lái)說(shuō)沒(méi)有任何問(wèn)題，但是為了良好的編程習(xí)慣不建議此種做法。應(yīng)該將變量用于保存相同類(lèi)型的值。4.3.1變量的聲明變量的聲明不是必須的，可以不使用關(guān)鍵詞var聲明直接使用。例如：msg1="Hello"msg2="JavaScript";msg=msg1+""+msg2;alert(msg);//運(yùn)行結(jié)果為顯示HelloJavaScript上述代碼中的msg1、msg2和msg均沒(méi)有使用關(guān)鍵詞var事先聲明就直接使用了，這種寫(xiě)法也是有效的。當(dāng)程序遇到未聲明過(guò)的名稱(chēng)時(shí)，會(huì)自動(dòng)使用該名稱(chēng)創(chuàng)建一個(gè)變量并繼續(xù)使用。4.3.1變量的聲明【例4-3】JavaScript變量的簡(jiǎn)單應(yīng)用4.3.2變量的命名規(guī)范一個(gè)有效的變量命名需要遵守以下兩條規(guī)則：首位字符必須是字母（A-Za-z）、下劃線（_）或者美元符號(hào)（$）；其他位置上的字符可以是下劃線（_）、美元符號(hào)（$）、數(shù)字（0-9）或字母（A-Za-z）。4.3.2變量的命名規(guī)范例如：varhello;//正確var_hello;//正確var$hello;//正確var$x_$y;//正確var123;//不正確，首位字符必須是字母、下劃線或者美元符號(hào)var%x;//不正確，首位字符必須是字母、下劃線或者美元符號(hào)varx%x;//不正確，中間的字符不能使用下劃線、美元符號(hào)、數(shù)字或字母以外的內(nèi)容4.3.2變量的命名規(guī)范常用的變量命名方式有Camel標(biāo)記法、Pascal標(biāo)記法和匈牙利類(lèi)型標(biāo)記法等。Camel標(biāo)記法：又稱(chēng)為駝峰標(biāo)記法，該規(guī)則聲明的變量首字母為小寫(xiě)，其他單詞以大寫(xiě)字母開(kāi)頭。例如：varmyFirstScript、varmyTest等。Pascal標(biāo)記法：該規(guī)則聲明的變量所有單詞首字母均大寫(xiě)。例如：varMyFirstScript、varMyTest等。匈牙利類(lèi)型標(biāo)記法：該規(guī)則是在Pascal標(biāo)記法的基礎(chǔ)上為變量加一個(gè)小寫(xiě)字母的前綴，用于提示該變量的類(lèi)型，如i表示整數(shù)、s表示字符串等。例如：varsMyFirstScript、variMyTest等。4.3.3JavaScript關(guān)鍵字和保留字JavaScript遵循ECMA-262標(biāo)準(zhǔn)中規(guī)定的一系列關(guān)鍵字規(guī)則，這些關(guān)鍵字不能作為變量或者函數(shù)名稱(chēng)。4.3.3JavaScript關(guān)鍵字和保留字全部關(guān)鍵字共計(jì)25個(gè)，如表4-1所示。4.3.3JavaScript關(guān)鍵字和保留字在ECMA-262中還規(guī)定了一系列保留字，這些字是為將來(lái)的關(guān)鍵字而保留的單詞，同樣也不可以作為變量或者函數(shù)的名稱(chēng)。全部保留字共計(jì)31個(gè)，如表4-2所示。4.4.1Undefined類(lèi)型4.4.2Null類(lèi)型4.4.3String類(lèi)型4.4.4Number類(lèi)型4.4.5Boolean類(lèi)型4.4JavaScript基本數(shù)據(jù)類(lèi)型4.4JavaScript基本數(shù)據(jù)類(lèi)型JavaScript有五種原始類(lèi)型分別是：Number（數(shù)字）、Boolean（布爾值）、String（字符串）、Null（空值）和Undefined（未定義）。JavaScript提供了typeof方法用于檢測(cè)變量的數(shù)據(jù)類(lèi)型，該方法會(huì)根據(jù)變量本身的數(shù)據(jù)類(lèi)型給出對(duì)應(yīng)名稱(chēng)的返回值。語(yǔ)法格式如下：typeof變量名稱(chēng)4.4JavaScript基本數(shù)據(jù)類(lèi)型對(duì)于指定的變量使用typeof方法，其返回值是提示數(shù)據(jù)類(lèi)型的文本內(nèi)容。4.4.1Undefined類(lèi)型所有Undefined類(lèi)型的輸出值都是undefined。當(dāng)需要輸出的變量從未聲明過(guò)，或者使用關(guān)鍵詞var聲明過(guò)但是從未進(jìn)行賦值時(shí)會(huì)顯示undefined字樣。例如：alert(y);//返回值為undefined，因?yàn)樽兞縴之前從未使用關(guān)鍵詞var進(jìn)行聲明或varx;alert(x);//返回值也是undefined，因?yàn)槲唇o變量x進(jìn)行賦值4.4.1Undefined類(lèi)型【例4-4】JavaScript基礎(chǔ)數(shù)據(jù)類(lèi)型Undefined的簡(jiǎn)單應(yīng)用4.4.2Null類(lèi)型null值表示變量的內(nèi)容為空，可用于初始化變量，或者清空已經(jīng)賦值的變量。例如：varx=99;x=null;alert(x);//此時(shí)返回值是null而不是994.4.2Null類(lèi)型【例4-5】JavaScript基礎(chǔ)數(shù)據(jù)類(lèi)型Null的簡(jiǎn)單應(yīng)用4.4.3String類(lèi)型在JavaScript中String類(lèi)型用于存儲(chǔ)文本內(nèi)容，又稱(chēng)為字符串類(lèi)型。為變量進(jìn)行字符串賦值時(shí)需要使用引號(hào)(單引號(hào)或雙引號(hào)均可)括住文本內(nèi)容。例如：varcountry='China';或varcountry="China";4.4.3String類(lèi)型如果字符串內(nèi)容本身也需要帶上引號(hào)，則用于包圍字符串的引號(hào)不可以和文本內(nèi)容中的引號(hào)相同。例如字符串本身如果帶有雙引號(hào)，則使用單引號(hào)包圍字符串；反之亦然。例如：vardialog='Todayisagift,thatiswhyitiscalled"Present".';或vardialog="Todayisagift,thatiswhyitiscalled'Present'.";4.4.3String類(lèi)型String對(duì)象中包含了一系列方法，常用方法如表4-4所示。4.4.3String類(lèi)型1.字符串長(zhǎng)度在字符串中，每一個(gè)字符都有固定的位置，其位置從左往右進(jìn)行分配。以單詞hello為例，其位置規(guī)則如圖4-6所示。首字符H從位置0開(kāi)始，第二個(gè)字符L是位置1，以此類(lèi)推，直到最后一個(gè)字符O的位置是字符串的總長(zhǎng)度少1。4.4.3String類(lèi)型1.字符串長(zhǎng)度【例4-6】JavaScript獲取字符串長(zhǎng)度的簡(jiǎn)單應(yīng)用4.4.3String類(lèi)型2.獲取字符串中的單個(gè)字符在JavaScript中可以使用charAt()方法獲取字符串指定位置上的單個(gè)字符。其語(yǔ)法結(jié)構(gòu)如下：例如：charAt(index)其中index參數(shù)值填寫(xiě)需要獲取的字符所在位置。varmsg="HelloJavaScript";varx=msg.charAt(0);//表示獲取msg中的第一個(gè)字符，返回值為H4.4.3String類(lèi)型2.獲取字符串中的單個(gè)字符如果需要獲取指定位置上單個(gè)字符的字符代碼，可以使用charCodeAt()方法。其語(yǔ)法結(jié)構(gòu)如下：例如：charCodeAt(index)varmsg="HelloJavaScript";varx=msg.charCodeAt(0);//表示獲取msg中的第一個(gè)字符的字符代碼，返回值為72其中index參數(shù)值填寫(xiě)需要獲取的字符所在位置。4.4.3String類(lèi)型2.獲取字符串中的單個(gè)字符【例4-7】JavaScript獲取字符串中單個(gè)字符的應(yīng)用4.4.3String類(lèi)型3.連接字符串在JavaScript中可以使用concat()方法將新的字符串內(nèi)容連接到原始字符串上。其語(yǔ)法結(jié)構(gòu)如下：例如：concat(string1,string2...,stringN);varmsg="Hello";varnewMsg=msg.concat("JavaScript");alert(newMsg);//返回值為"HelloJavaScript"該方法允許帶有一個(gè)或多個(gè)參數(shù)，表示按照從左往右的依次連接這些字符串。4.4.3String類(lèi)型3.連接字符串也可以直接使用加號(hào)（+）進(jìn)行字符串的連接，其效果相同。因此上述示例代碼可改為：varmsg="Hello";varnewMsg=msg+"JavaScript";alert(newMsg);//返回值為"HelloJavaScript"4.4.3String類(lèi)型3.連接字符串【例4-8】JavaScript連接字符串的簡(jiǎn)單應(yīng)用4.4.3String類(lèi)型4.查找字符串是否存在使用indexOf()和lastIndexOf()方法可以查找原始字符串中是否包含指定的字符串內(nèi)容。其語(yǔ)法格式如下：indexOf(searchString,startIndex)或lastIndexOf(searchString,startIndex)其中searchString參數(shù)位置填入需要用于對(duì)比查找的字符串片段，startIndex參數(shù)用于指定搜索的起始字符，該參數(shù)內(nèi)容如果省略則按照默認(rèn)順序搜索全文。4.4.3String類(lèi)型4.查找字符串是否存在indexOf()和lastIndexOf()方法都可以用于查找指定內(nèi)容是否存在，如果存在，其返回值為指定內(nèi)容在原始字符串中的位置序號(hào)；如果不存在，則直接返回-1。區(qū)別在于，indexOf()是從序號(hào)0的位置開(kāi)始正序檢索字符串內(nèi)容的，而lastIndexOf()是從序號(hào)最大值的位置開(kāi)始倒序檢索字符串內(nèi)容。4.4.3String類(lèi)型4.查找字符串是否存在【例4-9】JavaScript檢查字符串是否存在的簡(jiǎn)單應(yīng)用P1354.4.4Number類(lèi)型在JavaScript中使用Number類(lèi)型表示數(shù)字，其數(shù)字可以是32位以?xún)?nèi)的整數(shù)或64位以?xún)?nèi)的浮點(diǎn)數(shù)。例如：varx=9;vary=3.14;Number類(lèi)型還支持使用科學(xué)計(jì)數(shù)法、八進(jìn)制和十六進(jìn)制的表示方式。4.4.4Number類(lèi)型1.科學(xué)計(jì)數(shù)法對(duì)于極大或極小的數(shù)字也可以使用科學(xué)記數(shù)法表示，寫(xiě)法格式如下：上述格式表示數(shù)字后面跟指數(shù)e再緊跟乘以的倍數(shù)，其中數(shù)值可以是整數(shù)或浮點(diǎn)數(shù)，倍數(shù)可以允許為負(fù)數(shù)。例如：數(shù)值e倍數(shù)varx1=3.14e8;varx2=3.14e-8;變量x1表示的數(shù)是3.14乘以10的8次方，即314000000；變量x2表示的數(shù)是3.14乘以10的-8次方，即0.0000000314。4.4.4Number類(lèi)型1.科學(xué)計(jì)數(shù)法【例4-10】JavaScript科學(xué)計(jì)數(shù)法的簡(jiǎn)單應(yīng)用4.4.4Number類(lèi)型2.八進(jìn)制與十六進(jìn)制數(shù)在JavaScript中，Number類(lèi)型也可以用于表示八進(jìn)制或十六進(jìn)制的數(shù)。八進(jìn)制的數(shù)需要用數(shù)字0開(kāi)頭，后面跟的數(shù)字只能是0-7（八進(jìn)制字符）之間的一個(gè)。例如：varx=010;//這里相當(dāng)于十進(jìn)制的84.4.4Number類(lèi)型2.八進(jìn)制與十六進(jìn)制數(shù)十六進(jìn)制的數(shù)需要用數(shù)字0和字母x開(kāi)頭，后面跟字符只能是0-9或A-F（十六進(jìn)制字符）之間的一個(gè)，大小寫(xiě)不限。例如：varx=0xA;//這里相當(dāng)于十進(jìn)制的10或varx=0xa;//等同于0xA雖然Number類(lèi)型可以使用八進(jìn)制或十六進(jìn)制的賦值方式，但是執(zhí)行代碼時(shí)仍然會(huì)將其轉(zhuǎn)換為十進(jìn)制結(jié)果。4.4.4Number類(lèi)型2.八進(jìn)制與十六進(jìn)制數(shù)【例4-11】八進(jìn)制與十六進(jìn)制的表達(dá)方式

4.4.4Number類(lèi)型3.浮點(diǎn)數(shù)要定義浮點(diǎn)數(shù)，必須使用小數(shù)點(diǎn)以及小數(shù)點(diǎn)后面至少跟一位數(shù)字。例如：如果浮點(diǎn)數(shù)類(lèi)型的小數(shù)點(diǎn)前面整數(shù)位為0可以省略。例如：varx=3.14;vary=5.0;varx=.15;//等同于0.154.4.4Number類(lèi)型3.浮點(diǎn)數(shù)浮點(diǎn)數(shù)可以使用toFixed()方法規(guī)定小數(shù)點(diǎn)后保留幾位數(shù)。其語(yǔ)法格式如下：其中參數(shù)digital換成小數(shù)點(diǎn)后需要保留的位數(shù)即可。例如：toFixed(digital)varx=3.1415926;varresult=x.toFixed(2);//返回值為3.144.4.4Number類(lèi)型3.浮點(diǎn)數(shù)該方法遵照四舍五入的規(guī)律，即使進(jìn)位后小數(shù)點(diǎn)后面只有0也會(huì)保留指定的位數(shù)。例如：varx=0.9999;varresult=x.toFixed(2);//返回值為1.004.4.4Number類(lèi)型3.浮點(diǎn)數(shù)需要注意的是，在JavaScript中使用浮點(diǎn)數(shù)進(jìn)行計(jì)算，有時(shí)會(huì)產(chǎn)生誤差。例如：varx=0.7+0.1;alert(x);//返回值會(huì)變成0.7999999999999999，而不是0.8這是由于表達(dá)式使用的是十進(jìn)制數(shù)，但是實(shí)際的計(jì)算是轉(zhuǎn)換成二進(jìn)制數(shù)計(jì)算再轉(zhuǎn)回十進(jìn)制結(jié)果的，在此過(guò)程中有時(shí)會(huì)損失精度。此時(shí)使用自定義函數(shù)將兩個(gè)加數(shù)都乘以10進(jìn)行計(jì)算后再除以10還原。4.4.4Number類(lèi)型3.浮點(diǎn)數(shù)【例4-12】JavaScript浮點(diǎn)數(shù)的簡(jiǎn)單應(yīng)用4.4.4Number類(lèi)型4.特殊Number值在JavaScript中，Number類(lèi)型還有一些特殊值，如表4-5所示。4.4.4Number類(lèi)型4.特殊Number值(1)InfinityInfinity表示無(wú)窮大的含義，有正負(fù)之分。當(dāng)數(shù)值超過(guò)了JavaScript允許的范圍就會(huì)顯示為Infinity（超過(guò)上限）或-Infinity（超過(guò)下限）。例如：varx=9e30000;alert(x);//因?yàn)樵摂?shù)字已經(jīng)超出上限，返回值為Infinity4.4.4Number類(lèi)型4.特殊Number值(1)Infinity在數(shù)字比較大小時(shí)，無(wú)論原數(shù)據(jù)值為多少，結(jié)果為Infinity的兩個(gè)數(shù)認(rèn)為相等，而同樣兩個(gè)-Infinity也是相等的。例如：varx1=3e9000;varx2=9e3000;alert(x1==x2);//判斷變量x1與x2是否相等，返回值為true上述代碼中變量x1與x2的實(shí)際數(shù)據(jù)值并不相等，但是由于它們均超出了JavaScript可以接受的數(shù)據(jù)范圍，因此返回值均為Infinity，從而判斷是否相等時(shí)會(huì)返回true（真）。4.4.4Number類(lèi)型4.特殊Number值(1)Infinity在JavaScript中使用數(shù)字0作為除數(shù)不會(huì)報(bào)錯(cuò)，如果正數(shù)除以0返回值就是Infinity，負(fù)數(shù)除以0返回值為-Infinity，特殊情況0除以0的返回值為NaN（非數(shù)字）。例如：varx1=5/0;//返回值是Infinityvarx2=-5/0;//返回值是-Infinityvarx3=0/0;//返回值是NaN4.4.4Number類(lèi)型4.特殊Number值(1)InfinityInfinity不可以與其他正常顯示的數(shù)字進(jìn)行數(shù)學(xué)計(jì)算，返回結(jié)果均會(huì)是NaN。例如：varx=Numer.POSITIVE_INFINITY;varresult=x+99;alert(result);//返回值為NaN4.4.4Number類(lèi)型4.特殊Number值(1)Infinity【例4-13】JavaScript特殊Number值Infinity的應(yīng)用4.4.4Number類(lèi)型4.特殊Number值(2)NaNNaN表示的是非數(shù)字（NotaNumber），該數(shù)值用于表示數(shù)據(jù)轉(zhuǎn)換成Number類(lèi)型失敗的情況，從而無(wú)需拋出異常錯(cuò)誤。例如將String類(lèi)型轉(zhuǎn)換為Number類(lèi)型。NaN因?yàn)椴皇钦嬲臄?shù)字，不能用于進(jìn)行數(shù)學(xué)計(jì)算。并且即使兩個(gè)數(shù)值均為NaN，它們也并不相等。例如將英文單詞轉(zhuǎn)換為Number類(lèi)型，就會(huì)導(dǎo)致轉(zhuǎn)換結(jié)果為NaN，具體代碼如下：varx="red";varresult=Number(x);//返回值為NaN，因?yàn)闆](méi)有對(duì)應(yīng)的數(shù)值可以轉(zhuǎn)換4.4.4Number類(lèi)型4.特殊Number值(2)NaNJavaScript還提供了用于判斷數(shù)據(jù)類(lèi)型是否為數(shù)值的方法isNaN()，其返回值是布爾值。當(dāng)檢測(cè)的數(shù)據(jù)無(wú)法正確轉(zhuǎn)換為Number類(lèi)型時(shí)返回真（true），其他情況返回假（false）。其語(yǔ)法規(guī)則如下：isNaN(變量名稱(chēng))4.4.4Number類(lèi)型4.特殊Number值(2)NaN例如：varx1="red";varresult1=isNaN(x1);//返回值是真（true）

varx2="999";varresult2=isNaN(x2);//返回值是假（false）4.4.4Number類(lèi)型4.特殊Number值(2)NaN【例4-14】JavaScript特殊Number值NaN的應(yīng)用4.4.5Boolean類(lèi)型布爾值（boolean）在很多程序語(yǔ)言中都被用于進(jìn)行條件判斷，其值只有兩種：true（真）或者false（假）。4.5.5Boolean類(lèi)型布爾類(lèi)型的值可以直接使用單詞true或false，也可以使用表達(dá)式。例如：varanswer=true;varanswer=false;varanswer=(1>2);其中1>2的表達(dá)式不成立，因此返回結(jié)果為false（假）。4.4.5Boolean類(lèi)型【例4-15】JavaScriptBoolean類(lèi)型的簡(jiǎn)單應(yīng)用Thankyou！第4章JavaScript基礎(chǔ)（下）主講人：某某老師本章學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript運(yùn)算符的使用；掌握J(rèn)avaScript條件語(yǔ)句的用法；掌握J(rèn)avaScript函數(shù)的使用；掌握J(rèn)avaScriptDOM的用法。目錄4.5JavaScript運(yùn)算符4.6JavaScript條件語(yǔ)句4.7JavaScript函數(shù)4.8文檔對(duì)象模型DOM4.5.1賦值運(yùn)算符4.5.2算術(shù)運(yùn)算符4.5.3邏輯運(yùn)算符4.5.4關(guān)系運(yùn)算符4.5.5相等性運(yùn)算符4.5JavaScript運(yùn)算符4.5.1賦值運(yùn)算符在JavaScript中，運(yùn)算符=專(zhuān)門(mén)用來(lái)為變量賦值，因此也稱(chēng)為賦值運(yùn)算符。在聲明變量時(shí)可以使用賦值運(yùn)算符對(duì)其進(jìn)行初始化，例如：varx1=9;//為變量x1賦值為整數(shù)9varx2="hello";//為變量x2賦值為字符串"hello"4.5.1賦值運(yùn)算符也可以使用賦值運(yùn)算符將已存在的變量值賦值給新的變量，例如：還可以使用賦值運(yùn)算符為多個(gè)變量連續(xù)賦值，例如：賦值運(yùn)算符的右邊還可以接受表達(dá)式，例如：varx1=9;//為變量x1賦值為整數(shù)9varx2=x1;//將變量x1的值賦值給新聲明的變量x2varx=y=z=99;//此時(shí)變量x、y、z的賦值均為整數(shù)99varx=100+20;//此時(shí)變量x將賦值為120這里使用了加法（+）運(yùn)算符形成的表達(dá)式，在運(yùn)行過(guò)程中會(huì)優(yōu)先對(duì)表達(dá)式進(jìn)行計(jì)算，然后再對(duì)變量x進(jìn)行賦值。4.5.2算術(shù)運(yùn)算符在JavaScript中所有的基本算術(shù)均可以使用對(duì)應(yīng)的算術(shù)運(yùn)算符完成，包括加減乘除和求余等。算術(shù)運(yùn)算符的常見(jiàn)用法如表4-6所示。4.5.2算術(shù)運(yùn)算符其中加號(hào)還有一個(gè)特殊用法：可用于連接文本內(nèi)容或字符串變量。例如：如果將字符串和數(shù)字用加號(hào)相加，則會(huì)先將數(shù)字轉(zhuǎn)換為字符串，再進(jìn)行連接。例如：vars1="Hello";vars2="JavaScript";vars3=s1+s2;//結(jié)果會(huì)是HelloJavaScriptvars="Hello";varx=2016;varresult=s+x;//結(jié)果會(huì)是Hello20164.5.2算術(shù)運(yùn)算符上述代碼中即使字符串本身也是數(shù)字內(nèi)容，使用加號(hào)連接仍然不會(huì)進(jìn)行數(shù)學(xué)運(yùn)算。例如：vars="2015";varx=2016;varresult=s+x;//結(jié)果會(huì)是20152016，而不是兩個(gè)數(shù)字相加的和4.5.2算術(shù)運(yùn)算符將賦值運(yùn)算符（等號(hào)）和算術(shù)運(yùn)算符（加、減、乘、除、求余數(shù)）結(jié)合使用，可以達(dá)到簡(jiǎn)寫(xiě)的效果。具體用法如表4-7所示。4.5.3邏輯運(yùn)算符邏輯運(yùn)算符有三種類(lèi)型：NOT（邏輯非）、AND（邏輯與）和OR（邏輯或）。邏輯運(yùn)算符使用的符號(hào)與對(duì)應(yīng)關(guān)系如表4-8所示。4.5.3邏輯運(yùn)算符在進(jìn)行邏輯運(yùn)算之前，JavaScript中自帶的抽象操作ToBoolean會(huì)將運(yùn)算條件轉(zhuǎn)換為邏輯值。轉(zhuǎn)換規(guī)則如表4-9所示。4.5.3邏輯運(yùn)算符1.邏輯非運(yùn)算符（NOT）在JavaScript中，邏輯非運(yùn)算符號(hào)與C語(yǔ)言和Java語(yǔ)言都相同，使用感嘆號(hào)（?。┎⒎胖迷谶\(yùn)算內(nèi)容左邊表示。邏輯非運(yùn)算符的返回值只能是布爾值，即true或者false。邏輯非的運(yùn)算規(guī)則如表4-10所示。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）在JavaScript中，邏輯與運(yùn)算符使用雙和符號(hào)（&&）表示，用于連接符號(hào)前后的兩個(gè)條件判斷，表示并列關(guān)系。當(dāng)兩個(gè)條件均為布爾值時(shí)，邏輯與的運(yùn)算結(jié)果也是布爾值（true或者false）。判斷結(jié)果如表4-11所示。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）還有一種特殊情況：當(dāng)條件1為假（false）時(shí)，無(wú)論條件2是任何內(nèi)容（例如null值、undefined、數(shù)字、對(duì)象等），最終返回值都是假（false）。原因是邏輯與有簡(jiǎn)便運(yùn)算的特性，即如果第一個(gè)條件為假（false）的話，直接判斷邏輯與的運(yùn)行結(jié)果為假（false），不再執(zhí)行第二個(gè)條件。例如：varx1=false;varresult=x1&&x2;//因?yàn)閤1為false，可以忽略x2直接判斷最終結(jié)果alert(result);//該語(yǔ)句執(zhí)行結(jié)果為false由于條件1為false，邏輯與會(huì)直接判定最終結(jié)果為false，直接忽略條件2。因此即使本例中條件2的變量未聲明都不影響代碼的運(yùn)行。4.5.3邏輯運(yùn)算符2.邏輯與運(yùn)算符（AND）如果存在某個(gè)條件是數(shù)字類(lèi)型，則先將其轉(zhuǎn)換為布爾值再繼續(xù)判斷。其中數(shù)字0對(duì)應(yīng)的是假（false），其他非0的數(shù)字對(duì)應(yīng)的都是真（true）。例如：varx1=0;//對(duì)應(yīng)的是falsevarx2=99;//對(duì)應(yīng)的是truevarresult=x1&&x2;//結(jié)果是false邏輯與運(yùn)算符的返回值不一定是布爾值，如果其中某個(gè)條件的返回值不是布爾值，有可能出現(xiàn)其他返回值。邏輯非的運(yùn)算規(guī)則如表4-12所示。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）在JavaScript中，邏輯或運(yùn)算符使用雙豎線符號(hào)（||）表示，用于連接符號(hào)前后的兩個(gè)條件判斷，表示二選一的關(guān)系。當(dāng)兩個(gè)條件均為布爾值時(shí)，邏輯或的運(yùn)算結(jié)果也是布爾值（true或者false）。判斷結(jié)果如表4-13所示。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）還有一種特殊情況：當(dāng)條件1為真（true）時(shí)，無(wú)論條件2是任何內(nèi)容（例如null值、undefined、數(shù)字、對(duì)象等），最終返回值都是真（true）。原因是邏輯或也具有簡(jiǎn)便運(yùn)算的特性，即如果第一個(gè)條件為真（true）的話，直接判斷邏輯或的運(yùn)行結(jié)果為真（true），不再執(zhí)行第二個(gè)條件。例如：varx1=true;varresult=x1||x2;//因?yàn)閤1為true，可以忽略x2直接判斷最終結(jié)果alert(result);//該語(yǔ)句執(zhí)行結(jié)果為true由于條件1為真（true），邏輯或會(huì)直接判定最終結(jié)果為真（true），直接忽略條件2。因此即使本例中條件2的變量未聲明都不影響代碼的運(yùn)行。4.5.3邏輯運(yùn)算符3.邏輯或運(yùn)算符（OR）和邏輯與運(yùn)算符類(lèi)似，如果存在某個(gè)條件是數(shù)字類(lèi)型，則先將其轉(zhuǎn)換為布爾值再繼續(xù)判斷。其中數(shù)字0對(duì)應(yīng)的是假（false），其他非0的數(shù)字對(duì)應(yīng)的都是真（true）。例如：varx1=0;//對(duì)應(yīng)的是falsevarx2=99;//對(duì)應(yīng)的是truevarresult=x1||x2;//結(jié)果是true邏輯或運(yùn)算符的返回值同樣不一定是布爾值，如果其中某個(gè)條件的返回值不是布爾值，有可能出現(xiàn)其他返回值。邏輯非的運(yùn)算規(guī)則如表4-23所示。4.5.4關(guān)系運(yùn)算符在JavaScript中，關(guān)系運(yùn)算符共有四種：大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。用于比較兩個(gè)值的大小，返回值一定是布爾值（true或false）。4.5.4關(guān)系運(yùn)算符1.數(shù)字之間的比較數(shù)字之間的比較完全依據(jù)數(shù)學(xué)中比大小的規(guī)律，當(dāng)條件成立時(shí)返回真（true），否則返回假（false）。例如：varresult1=99>0;//符合數(shù)學(xué)規(guī)律，返回truevarresult2=1>100;//不符合數(shù)學(xué)規(guī)律，返回false此時(shí)只要兩個(gè)運(yùn)算數(shù)都是數(shù)字即可，整數(shù)或小數(shù)都可以依據(jù)此規(guī)律進(jìn)行比較并且返回對(duì)應(yīng)的布爾值。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較當(dāng)兩個(gè)字符串進(jìn)行比大小時(shí)，是按照從左往右的順序依次比較相同位置上的字符，如果字符完全一樣則繼續(xù)比較下一個(gè)。如果兩個(gè)字符串在相同位置上都是數(shù)字則仍然按照數(shù)學(xué)上的大小進(jìn)行比較。例如：varx1="9";varx2="1";varresult=x1>x2;//返回true此時(shí)從數(shù)學(xué)概念上來(lái)說(shuō)，9大于1，因此返回值是真（true）。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較但是如果兩個(gè)數(shù)字的位數(shù)不一樣，仍然只對(duì)相同位置上的數(shù)字進(jìn)行比大小，不按照數(shù)學(xué)概念看整體數(shù)值大小。例如：varx1="9";varx2="10";varresult=x1>x2;//返回true此時(shí)雖然從數(shù)學(xué)概念上來(lái)說(shuō)10應(yīng)該大于9，但是由于字符串同位置比較原則，此時(shí)比較的是變量x1中的9和變量x2中的1，得出結(jié)論9大于1，因此返回值仍然是真（true）。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較由于JavaScript是一種大小寫(xiě)敏感的程序語(yǔ)言，所以如果相同位置上的字符大小寫(xiě)不同就可以直接作出判斷，因?yàn)榇髮?xiě)字母的代碼小于小寫(xiě)字母的代碼。例如：varx1="hello";varx2="HELLO";varresult=x1>x2;//返回true4.5.4關(guān)系運(yùn)算符2.字符串之間的比較如果大小寫(xiě)相同，則按照字母表的順序進(jìn)行比較，字母越往后越大。例如：varx1="hello";varx2="world";varresult=x1>x2;//返回false在上述示例中，同樣按照從左往右的順序先比較兩個(gè)字符串的第一個(gè)字符，即變量x1中的h和變量x2中的w。按照字母表的順序h在先w在后。因此返回值是假（false）。此時(shí)已判斷出結(jié)果因此不再繼續(xù)比較后續(xù)的字符。4.5.4關(guān)系運(yùn)算符2.字符串之間的比較如果不希望兩個(gè)字符串之間的比較受到大小寫(xiě)字母的干擾，而是無(wú)論大小寫(xiě)都按照字母表順序進(jìn)行比大小，可以將所有字母都轉(zhuǎn)換為小寫(xiě)或大寫(xiě)的形式，再進(jìn)行大小的比較。使用方法toLowerCase()可以將所有字母轉(zhuǎn)換為小寫(xiě)形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toLowerCase()>x2.toLowerCase();//返回false4.5.4關(guān)系運(yùn)算符2.字符串之間的比較使用方法toUpperCase()可以將所有字母轉(zhuǎn)換為大寫(xiě)形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toUpperCase()>x2.toUpperCase();//返回false本示例使用了toUpperCase()將所有字母轉(zhuǎn)換為大寫(xiě)再進(jìn)行比較，效果與之前使用方法toLowerCase()將所有字母轉(zhuǎn)換為小寫(xiě)的原理相同，不再贅述。4.5.5相等性運(yùn)算符在JavaScript中，相等性運(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）。在使用等于或非等于運(yùn)算符進(jìn)行比較時(shí)，如果兩個(gè)值均為數(shù)字類(lèi)型，則直接進(jìn)行數(shù)學(xué)邏輯上的比較判斷是否相等。例如：varx1=100;varx2=99;alert(x1==x2);//返回false4.5.5相等性運(yùn)算符若需要進(jìn)行比較的數(shù)據(jù)存在其他數(shù)據(jù)類(lèi)型（例如字符串、布爾值等），要先將運(yùn)算符前后的內(nèi)容嘗試轉(zhuǎn)換為數(shù)字再進(jìn)行比較判斷。轉(zhuǎn)換規(guī)則如表4-15所示。4.5.5相等性運(yùn)算符在進(jìn)行了數(shù)據(jù)類(lèi)型轉(zhuǎn)換后仍然不是數(shù)字類(lèi)型的特殊情況判斷規(guī)則如表4-16所示。4.6.1if語(yǔ)句4.6.2switch語(yǔ)句4.6JavaScript條件語(yǔ)句4.6.1if語(yǔ)句在各類(lèi)計(jì)算機(jī)程序語(yǔ)言中，最常見(jiàn)的條件語(yǔ)句就是if語(yǔ)句。1.if語(yǔ)句2.ifelse語(yǔ)句3.ifelse-ifelse語(yǔ)句4.6.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.6.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.6.1if語(yǔ)句2.ifelse語(yǔ)句例如同樣是判斷成績(jī)等級(jí)，如果大于等于60分則提示彈出對(duì)話框提示“考試通過(guò)！”，否則提示“不及格！”。修改后的代碼如下：varscore=99;if(score>=60){alert("考試通過(guò)!");}else{alert("不及格!");}4.6.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.6.1if語(yǔ)句【例4-16】JavaScriptif-else語(yǔ)句的簡(jiǎn)單應(yīng)用4.6.2switch語(yǔ)句當(dāng)對(duì)于同一個(gè)變量需要進(jìn)行多次條件判斷時(shí)，也可以使用switch語(yǔ)句代替多重if-elseif-else語(yǔ)句。4.6.2switch語(yǔ)句語(yǔ)法格式如下：switch(變量){case值1：

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

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

……case值n：

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

以上條件均不符合時(shí)的執(zhí)行代碼塊]}4.6.2switch語(yǔ)句【例4-17】JavaScriptswitch語(yǔ)句的簡(jiǎn)單應(yīng)用4.7.1函數(shù)的基本結(jié)構(gòu)4.7.2函數(shù)的調(diào)用4.7.3函數(shù)的返回值4.7JavaScript函數(shù)4.7.1函數(shù)的基本結(jié)構(gòu)函數(shù)是在調(diào)用時(shí)才會(huì)執(zhí)行的一段代碼塊，可以重復(fù)使用。其基本語(yǔ)法結(jié)構(gòu)如下：function函數(shù)名稱(chēng)(參數(shù)0,參數(shù)1,……參數(shù)N){

待執(zhí)行代碼塊}上述語(yǔ)法結(jié)構(gòu)是由關(guān)鍵詞function、函數(shù)名稱(chēng)、小括號(hào)內(nèi)的一組可選參數(shù)以及大括號(hào)內(nèi)的待執(zhí)行代碼塊組成的。其中函數(shù)名稱(chēng)和參數(shù)個(gè)數(shù)均可以自定義，待執(zhí)行的代碼塊可以是一句或多句JavaScript代碼組成。4.7.1函數(shù)的基本結(jié)構(gòu)例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代碼定義了一個(gè)名稱(chēng)為welcome的函數(shù)，該函數(shù)的參數(shù)個(gè)數(shù)為0。在待執(zhí)行的代碼部分只有一句alert()方法，用于在瀏覽器上彈出對(duì)話框并顯示雙引號(hào)內(nèi)的文本內(nèi)容。4.7.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.7.2函數(shù)的調(diào)用函數(shù)可以通過(guò)使用函數(shù)名稱(chēng)的方法進(jìn)行調(diào)用。例如：如果該函數(shù)存在參數(shù)，則調(diào)用時(shí)必須在函數(shù)的小括號(hào)內(nèi)傳遞對(duì)應(yīng)的參數(shù)值。welcome();welcome("HelloJavaScript!");4.7.2函數(shù)的調(diào)用函數(shù)可以在JavaScript代碼的任意位置進(jìn)行調(diào)用，也可以在指定的事件發(fā)生時(shí)調(diào)用。例如在按鈕的點(diǎn)擊事件中調(diào)用函數(shù)：【例4-18】JavaScript函數(shù)的簡(jiǎn)單調(diào)用<buttononclick="welcome()">點(diǎn)擊此處調(diào)用函數(shù)</button>上述代碼中的onclick屬性表示元素被鼠標(biāo)點(diǎn)擊的狀態(tài)觸發(fā)等號(hào)右邊的內(nèi)容。4.7.3函數(shù)的返回值相比Java而言，JavaScript函數(shù)更加簡(jiǎn)便，無(wú)需特別聲明返回值類(lèi)型。JavaScript函數(shù)如果存在返回值，直接在大括號(hào)內(nèi)的代碼塊中使用return關(guān)鍵詞后面緊跟需要返回的值即可。4.7.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.7.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.7.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.7.3函數(shù)的返回值【例4-19】JavaScript帶有返回值函數(shù)的應(yīng)用4.8.1查找HTML元素4.8.2DOMHTML4.8.3DOMCSS4.8.4DOM事件4.8.5DOM節(jié)點(diǎn)4.8文檔對(duì)象模型DOM4.8.1查找HTML元素在JavaScript中有三種方式可以查找HTML元素：通過(guò)HTML元素的id名稱(chēng)查找；通過(guò)HTML元素的標(biāo)簽名稱(chēng)查找；通過(guò)HTML元素的類(lèi)名稱(chēng)查找。4.8.1查找HTML元素1.通過(guò)id查找HTML元素一般默認(rèn)不同的HTML元素使用不一樣的id名稱(chēng)以示區(qū)別，因此通過(guò)id名稱(chēng)找到指定的單個(gè)元素。在JavaScript中語(yǔ)法如下：document.getElementById("id名稱(chēng)");其中g(shù)etElementById()方法是遵照駝峰命名法，即第一個(gè)單詞全小寫(xiě)，后面的每一個(gè)單詞首字母大寫(xiě)的方式。這種命名方法在JavaScript中比較普遍。如果未找到該元素，則返回值為null；如果找到該元素，則會(huì)以對(duì)象的形式返回。4.8.1查找HTML元素1.通過(guò)id查找HTML元素例如，查找id="test"的元素，并獲取該元素內(nèi)部的文本內(nèi)容：//根據(jù)id名稱(chēng)獲取元素對(duì)象vartest=document.getElementById("test");//獲取元素內(nèi)容varresult=test.innerHTML;為簡(jiǎn)便代碼閱讀效果，使用了與id名稱(chēng)同名的變量test來(lái)獲取指定元素，該變量名稱(chēng)也可以是其他自定義變量名，不影響運(yùn)行效果。innerHTML可以用于獲取元素內(nèi)部的HTML代碼，關(guān)于innerHTML更多用法請(qǐng)參考下一節(jié)4.12.2。4.8.1查找HTML元素2.通過(guò)標(biāo)簽名查找HTML元素HTML元素均有固定的標(biāo)簽名稱(chēng)，因此通過(guò)標(biāo)簽名稱(chēng)可以找到指定的單個(gè)或一系列元素。在JavaScript中語(yǔ)法如下：document.getElementsByTagName("標(biāo)簽名稱(chēng)");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。4.8.1查找HTML元素2.通過(guò)標(biāo)簽名查找HTML元素例如，查找所有的段落元素<p>，并獲取第一個(gè)段落標(biāo)簽內(nèi)部的文本內(nèi)容：vartest=document.getElementByTagName("p");

varresult=p[0].innerHTML;因?yàn)橛卸鄠€(gè)段落標(biāo)簽，因此變量返回值是數(shù)組的形式。其中第一個(gè)段落標(biāo)簽對(duì)應(yīng)的是p[0]，以此類(lèi)推，最后一個(gè)元素對(duì)應(yīng)的索引號(hào)為數(shù)組長(zhǎng)度減1。4.8.1查找HTML元素3.通過(guò)類(lèi)名查找HTML元素document.getElementsByClassName()方法可用于根據(jù)類(lèi)名稱(chēng)獲取HTML元素。在JavaScript中語(yǔ)法如下：document.getElementsByClassName("類(lèi)名稱(chēng)");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。注：該方法在IE5、6、7、8版本中使用均無(wú)效，為考慮各個(gè)版本瀏覽器的兼容性，如果不能保證用戶(hù)使用IE5、6、7、8版本以外的瀏覽器則不建議使用此方法來(lái)獲取HTML元素。4.8.1查找HTML元素【例4-20】JavaScriptDOM查找元素的應(yīng)用4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容2.改變HTML元素內(nèi)容3.改變HTML元素屬性4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容在JavaScript中，使用document.write()方法可以往HTML頁(yè)面動(dòng)態(tài)輸出內(nèi)容。例如：<body><script>document.write("Hello2016");</script></body>上述代碼片段表示將在空白頁(yè)面上動(dòng)態(tài)輸出字符串"Hello2016"。需要注意的是，alert()方法中的換行符\n在這里是無(wú)效的，如果需要輸出換行直接使用HTML換行標(biāo)簽<br>即可。4.8.2DOMHTML1.創(chuàng)建動(dòng)態(tài)的HTML內(nèi)容【例4-21】JavaScriptDOM動(dòng)態(tài)生成HTML內(nèi)容注：每次打開(kāi)生成的時(shí)間都是實(shí)時(shí)更新的。

4.8.2DOMHTML2.改變HTML元素內(nèi)容innerHTML可以用于獲取元素內(nèi)容，也可以改變?cè)貎?nèi)容。使用innerHTML屬性獲取或更改的元素內(nèi)容可以包括HTML標(biāo)簽本身。獲取元素內(nèi)容的語(yǔ)法結(jié)構(gòu)如下：更改元素內(nèi)容的語(yǔ)法結(jié)構(gòu)如下：var變量名=元素對(duì)象.innerHTML;元素對(duì)象.innerHTML=新的內(nèi)容;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱(chēng)")方法獲取。4.8.2DOMHTML2.改變HTML元素內(nèi)容【例4-22】JavaScriptDOM修改元素內(nèi)容4.8.2DOMHTML3.改變HTML元素屬性在JavaScript還可以根據(jù)屬性名稱(chēng)動(dòng)態(tài)地修改元素屬性。其語(yǔ)法結(jié)構(gòu)如下：例如，更改id="image"的圖片地址src屬性：元素對(duì)象.attribute=新的屬性值;varimg=document.getElementById("image");img.src="image/newpic.jpg";4.8.2DOMHTML3.改變HTML元素屬性也可以使用setAttribute()方法達(dá)到同樣的效果。其語(yǔ)法格式如下：例如，更改id="image"的圖片地址src屬性的代碼修改后如下：元素對(duì)象.setAttribute("屬性名稱(chēng)","新的屬性值");varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");4.8.2DOMHTML3.改變HTML元素屬性【例4-23】JavaScriptDOM修改元素屬性4.8.3DOMCSSJavaScript還可以改變HTML元素的CSS樣式。其語(yǔ)法結(jié)構(gòu)如下：元素對(duì)象.style.屬性=新的值;這里的元素對(duì)象可以使用document對(duì)象的getElementById("id名稱(chēng)")方法獲取。屬性指的是在CSS樣式中的屬性名稱(chēng)，等號(hào)右邊填寫(xiě)該屬性更改后的樣式值。4.8.3DOMCSS例如，更改id="test"的元素背景顏色為藍(lán)色：上述代碼也可以連成一句，寫(xiě)法如下：var

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論