版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第10章JavaScript程序基礎(chǔ)主要內(nèi)容理解JavaScript語(yǔ)言的作用和執(zhí)行方式掌握在網(wǎng)頁(yè)中使用客戶端腳本的方法掌握J(rèn)avaScript語(yǔ)言的基本語(yǔ)法認(rèn)識(shí)核心語(yǔ)言對(duì)象,使用核心語(yǔ)言對(duì)象的方法和屬性掌握對(duì)頁(yè)面中的不同種類的事件響應(yīng)編程能夠利用JavaScript語(yǔ)言完成對(duì)文檔內(nèi)容的交互了解客戶端常見(jiàn)JavaScript特效程序的編程掌握J(rèn)avaScript程序的一般調(diào)試技術(shù)10.1JavaScript起步
JavaScript可以做什么作為一個(gè)運(yùn)行于瀏覽器環(huán)境中的語(yǔ)言,JavaScript被設(shè)計(jì)用來(lái)向HTML頁(yè)面添加交互行為,利用它可以完成以下任務(wù)??梢詫⑽谋緞?dòng)態(tài)的放入HTML頁(yè)面。類似于這樣的一段JavaScript聲明可以將一段可變的文本放入HTML頁(yè)面:document.write("<h1>"+name+"</h1>")可以對(duì)事件做出響應(yīng)。例如頁(yè)面載入完成或者當(dāng)用戶單擊某個(gè)HTML元素時(shí),調(diào)用指定的JavaScript程序??梢宰x寫HTML元素。JavaScript程序可以讀取及改變當(dāng)前HTML頁(yè)面內(nèi)某個(gè)元素的內(nèi)容,如文本框中的輸入內(nèi)容。可被用來(lái)驗(yàn)證用戶輸入的數(shù)據(jù)。在數(shù)據(jù)被提交到服務(wù)器之前,JavaScript可被用來(lái)驗(yàn)證這些數(shù)據(jù)??杀挥脕?lái)檢測(cè)訪問(wèn)者的瀏覽器,并根據(jù)所檢測(cè)到的瀏覽器,為這個(gè)瀏覽器載入相應(yīng)的頁(yè)面??杀挥脕?lái)創(chuàng)建cookies,用來(lái)存儲(chǔ)和取回位于訪問(wèn)者的計(jì)算機(jī)中的信息??衫肁jax技術(shù)來(lái)完成和服務(wù)器的直接通信,無(wú)刷新的修改當(dāng)前HTML頁(yè)面內(nèi)容。10.1JavaScript起步一個(gè)實(shí)例<!--程序10-1--><html><title>這是我的第一個(gè)JavaScript程序</title><body><scripttype="text/javascript">document.write("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");</script></body></html>10.1JavaScript起步基本語(yǔ)法:<scripttype="text/javascript">…</script>語(yǔ)法說(shuō)明:script:腳本標(biāo)記。它必須以<scripttype="text/javascript">開(kāi)頭,以<script>結(jié)束,界定程序開(kāi)始的位置和結(jié)束的位置。script頁(yè)面中的位置決定了什么時(shí)候裝載它們,如果希望在其他所有內(nèi)容之前裝載腳本,就要確保腳本在head部分。10.1.3JavaScript放置和運(yùn)行
代碼的位置位于HEAD部分的腳本如果把腳本放置到head部分,在頁(yè)面載入的時(shí)候,就同時(shí)載入了代碼。通常這個(gè)區(qū)域的JavaScript代碼是為body區(qū)域程序代碼所調(diào)用的事件處理函數(shù)。位于BODY部分的腳本當(dāng)你把腳本放置于body部分后,在頁(yè)面載入時(shí)不屬于某個(gè)函數(shù)的腳本就會(huì)被執(zhí)行,執(zhí)行后的輸出就成為頁(yè)面的內(nèi)容。JavaScript程序本身不能獨(dú)立存在,它是依附于某個(gè)HTML頁(yè)面,在瀏覽器端運(yùn)行的。10.1.3JavaScript放置和運(yùn)行(cont.)位于Head部分的代碼實(shí)例<html><title>這是我的第一個(gè)JavaScript程序</title><head><scripttype="text/javascript">functionshow(){ alert("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");}</script></head> <bodyonload="show()"></body></html>10.1.3JavaScript放置和運(yùn)行(cont.)代碼的位置(cont.)直接位于事件處理部分的代碼中<html><title>這是我的第一個(gè)JavaScript程序</title><bodyonload='alert("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");'></body></html>代碼的位置(cont.)位于網(wǎng)頁(yè)之外的單獨(dú)腳本文件優(yōu)點(diǎn):復(fù)用、共享<html><head> <scriptsrc="xxx.js"></script></head><body></body></html>10.2JavaScript程序作為一種嵌入到html頁(yè)面內(nèi)的解釋型程序設(shè)計(jì)語(yǔ)言,JavaScript腳本語(yǔ)言的基本構(gòu)成是由語(yǔ)句、函數(shù)、對(duì)象、方法、屬性等來(lái)實(shí)現(xiàn)編程的,在程序結(jié)構(gòu)上同樣是有順序、分支和循環(huán)三種基本結(jié)構(gòu)。
10.2.1語(yǔ)句和語(yǔ)句塊
1.語(yǔ)句JavaScript語(yǔ)句是發(fā)給瀏覽器的命令,這些命令的作用是告訴瀏覽器要做的事情。例如:document.write("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");語(yǔ)句類型變量聲明語(yǔ)句;輸入輸出語(yǔ)句;表達(dá)式語(yǔ)句;程序流向控制語(yǔ)句;返回語(yǔ)句。10.2.1語(yǔ)句和語(yǔ)句塊(cont.)2.語(yǔ)句塊語(yǔ)句塊就是用“{”和“}”封閉起來(lái)的若干條語(yǔ)句。<scripttype="text/javascript">varcolor=”red”;if(color==”red”){document.write("現(xiàn)在顏色是紅色!");alert("現(xiàn)在顏色是紅色!");}</script>10.2.1語(yǔ)句和語(yǔ)句塊(cont.)3.代碼代碼就是由若干條語(yǔ)句或語(yǔ)句塊構(gòu)成的執(zhí)行體。瀏覽器按照代碼編寫的邏輯順序逐行執(zhí)行,直至碰到結(jié)束符號(hào)或者返回語(yǔ)句。10.2.3函數(shù)1.函數(shù)的構(gòu)成函數(shù)代表了一種特定的功能,一般是由若干條語(yǔ)句構(gòu)成的。函數(shù)的基本語(yǔ)法如下面一樣?;菊Z(yǔ)法:function函數(shù)名(參數(shù)1,參數(shù)2,...參數(shù)N){函數(shù)體;}語(yǔ)法說(shuō)明:組成一個(gè)函數(shù)必須有“function”關(guān)鍵字、自定義的函數(shù)名、放在小括號(hào)中的可選參數(shù)(可以沒(méi)有參數(shù),但括號(hào)必須保留)、以及包含在大括號(hào)內(nèi)的由若干條語(yǔ)句構(gòu)成的函數(shù)體。注意:不能在其他語(yǔ)句或其自身中嵌套function語(yǔ)句,也就是說(shuō),每個(gè)函數(shù)聲明都是獨(dú)立的。10.2.3函數(shù)(cont.)<!--程序10-4--><html><head><scripttype="text/javascript"> functionwelcome(name){ alert(name+",歡迎您進(jìn)入函數(shù)世界!");}</script><title>函數(shù)的例子</title></head><body><form>姓名:<inputtype="text"name="title"id="title"><inputtype="button"value="Clickme!"onclick="welcome(document.getElementById('title').value)"/></form></body></html>10.2.3函數(shù)(cont.)2.函數(shù)的參數(shù)在10-3的程序中定義的函數(shù)是這樣聲明的:functionwelcome(name)這里的“name”就是參數(shù)變量,參數(shù)變量的作用就是用來(lái)接收函數(shù)調(diào)用者傳遞過(guò)來(lái)的參數(shù)。實(shí)參:括號(hào)里的“李小璐”就是實(shí)際參數(shù)值,簡(jiǎn)稱“實(shí)參”;形參:在函數(shù)聲明時(shí)的“name”就是對(duì)應(yīng)的“形參”,函數(shù)運(yùn)行時(shí),就用變量名name來(lái)代表實(shí)際的值“李小璐”參與到函數(shù)體代碼中的語(yǔ)句。函數(shù)聲明時(shí)的參數(shù)代表了函數(shù)在執(zhí)行時(shí)需要這些參數(shù)接收傳過(guò)來(lái)的值,并在代碼中具體應(yīng)用,因此,聲明函數(shù)的形式參數(shù)時(shí)應(yīng)該事先明確每個(gè)參數(shù)的作用。10.2.3函數(shù)(cont.)具體來(lái)講,Javascript函數(shù)的參數(shù)是可選的。它有下面幾個(gè)特點(diǎn):javascript本身是弱類型,所以,它的函數(shù)參數(shù)也沒(méi)有類型檢查和類型限定,一切都要靠編程者自己去進(jìn)行檢查;一般情況下,實(shí)參和形參要一一對(duì)應(yīng);實(shí)參的個(gè)數(shù)可以和形參的個(gè)數(shù)不匹配。盡管在函數(shù)聲明時(shí),可以定義要有3個(gè)參數(shù),而在實(shí)際的使用中,可以傳任意個(gè)參數(shù)給這個(gè)函數(shù)。它的識(shí)別僅僅是依靠函數(shù)名,這與其他語(yǔ)言中的函數(shù)調(diào)用有很大的不同。如果函數(shù)在執(zhí)行時(shí),發(fā)現(xiàn)參數(shù)不夠,不夠的參數(shù)被設(shè)置為undefined類型。10.2.3函數(shù)(cont.)利用arguments處理實(shí)參每一個(gè)函數(shù)體內(nèi)都內(nèi)置地存在著一個(gè)對(duì)象arguments,它是一個(gè)類似數(shù)組的對(duì)象,通過(guò)它可以查看函數(shù)當(dāng)前有幾個(gè)傳遞來(lái)的參數(shù)(并非定義的形式參數(shù)),各個(gè)參數(shù)的值是什么。(程序10-5)<scriptlanguage="javascript">functiontestparams(){varparams="";for(vari=0;i<arguments.length;i++){params=params+""+arguments[i];}alert(params);}</script>10.2.3函數(shù)(cont.)3.調(diào)用函數(shù)函數(shù)必須被調(diào)用才能發(fā)揮作用,程序10-3已經(jīng)展示了函數(shù)的調(diào)用過(guò)程。具體調(diào)用規(guī)則是:函數(shù)必須通過(guò)名字加上括號(hào)才能調(diào)用,如程序10-4中welcome(),括號(hào)必不可少;函數(shù)調(diào)用時(shí),必須滿足參數(shù)傳遞的要求,按照形式參數(shù)的聲明要求,保證類型、順序和個(gè)數(shù)的統(tǒng)一。10.2.3函數(shù)(cont.)用return返回函數(shù)的計(jì)算結(jié)果函數(shù)可以在執(zhí)行后返回一個(gè)值來(lái)代表執(zhí)行后的結(jié)果,當(dāng)然有些函數(shù)基于功能的需要并不需要返回任何值。函數(shù)返回一個(gè)值非常簡(jiǎn)單,一般在一個(gè)函數(shù)代碼的最后一行是return語(yǔ)句,return的作用有兩點(diǎn):結(jié)束程序的執(zhí)行,也就是說(shuō)return之后的語(yǔ)句就不會(huì)再執(zhí)行了;利用return可以返回一個(gè)結(jié)果。return語(yǔ)句后可以跟上一個(gè)具體的值,也可以是簡(jiǎn)單的變量,還可以是一個(gè)復(fù)雜的表達(dá)式。當(dāng)然,一個(gè)函數(shù)也可以沒(méi)有返回值,但并不妨礙最后添加一條return語(yǔ)句,明確表示函數(shù)執(zhí)行結(jié)束,如show函數(shù)一樣。10.2.3函數(shù)(cont.)functioncompute(radius){ vararea=0; area=pi*radius*radius; returnarea;}functionshow(){//利用document對(duì)象,獲得頁(yè)面中半徑文本框中的輸入值varradius=document.getElementById('radius').value;//調(diào)用compute函數(shù)計(jì)算對(duì)應(yīng)的面積vararea=compute(radius);
//將計(jì)算出的面積值顯示到面積文本框中document.getElementById('area').value=area;return;//此句可以不要}帶返回值的return語(yǔ)句不帶返回值的return語(yǔ)句注:參見(jiàn)程序10-610.2.3函數(shù)(cont.)5.函數(shù)變量的作用域局部變量當(dāng)代碼在函數(shù)內(nèi)聲明了一個(gè)變量后,就只能在該函數(shù)中訪問(wèn)該變量,它們被稱為“局部變量”。當(dāng)退出該函數(shù)后,這個(gè)變量會(huì)被撤銷??梢栽诓煌暮瘮?shù)中使用名稱相同的局部變量而互不影響,這是因?yàn)橐粋€(gè)函數(shù)能夠識(shí)別它自己內(nèi)部定義的每個(gè)變量。全局變量如果程序在函數(shù)之外聲明了一個(gè)變量,則頁(yè)面上的所有函數(shù)都可以訪問(wèn)該變量,它們被稱為“全局變量”。這些變量的生存期從聲明它們之后開(kāi)始,在頁(yè)面關(guān)閉時(shí)結(jié)束。10.2.3函數(shù)(cont.)示例:程序10-6圖10-6變量生存期示意圖10.2.4常用系統(tǒng)函數(shù)系統(tǒng)函數(shù)JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法,它與任何對(duì)象無(wú)關(guān),使用這些函數(shù)不需創(chuàng)建任何實(shí)例,可直接使用。1.返回字符串表達(dá)式中的值方法名:eval(字符串表達(dá)式)例:result=eval(“8+9+5/2”);
eval接受一個(gè)字符串類型的參數(shù),將這個(gè)字符串作為代碼在上下文環(huán)境中執(zhí)行,并返回執(zhí)行的結(jié)果。使用eval函數(shù)需要注意:它是有返回值的,如果參數(shù)字符串是一個(gè)表達(dá)式,就會(huì)返回表達(dá)式的值。如果參數(shù)字符串不是表達(dá)式,沒(méi)有值,那么返回“undefined”;參數(shù)字符串作為代碼執(zhí)行時(shí),是和調(diào)用eval函數(shù)的上下文相關(guān)的,即其中出現(xiàn)的變量或函數(shù)調(diào)用必須在調(diào)用eval的上下文環(huán)境中可用。10.2.4常用系統(tǒng)函數(shù)(cont.)2.返回字符的編碼方法名:escape(字符串)這里的參數(shù),字符串是以ISO-Latin-1字符集書(shū)寫的字符串。escape函數(shù)將參數(shù)字符串中的特定字符進(jìn)行編碼,并返回一個(gè)編碼后的字符串。它可以對(duì)空格、標(biāo)點(diǎn)符號(hào)及其他不位于ASCII字母表的字符進(jìn)行編碼,除了以下字符:“*@-_+./”。例如:result=escape("&");上句中result的結(jié)果是“%26”result=escape("mynameis張華");上句中result的結(jié)果是“my%20name%20is%20%u5F20%u534E”,20是空格的16進(jìn)制編碼,%u5F20%u534E是漢字“張華”的Unicode編碼。10.2.4常用系統(tǒng)函數(shù)(cont.)3.返回字符串ASCII碼方法名:unescape(string)和escape函數(shù)相反,這里的參數(shù)string是一個(gè)包含形如“%xx”的字符的字符串,此處xx為兩位十六進(jìn)制數(shù)值。unescape函數(shù)返回的字符串是一系列ISO-Latin-1字符集的字符。例如:result=unescape("%26");上句中,result的結(jié)果是“&”;result=unescape("my%20name%20is%20%u5F20%u534E");上句中result的結(jié)果是“mynameis張華”。10.2.4常用系統(tǒng)函數(shù)(cont.)4.返回實(shí)數(shù)方法名:parseFloat(string);parseFloat將把其參數(shù)(一個(gè)字符串)處理后返回浮點(diǎn)數(shù)值。如果遇到了不是符號(hào)(+、-、數(shù)碼(0-9)、小數(shù)點(diǎn)),也不是指數(shù)的字符,就會(huì)停止處理,忽略該字符及其以后的所有字符。如果第一個(gè)字符就不能轉(zhuǎn)換為數(shù)值,parseFloat將返回“NaN”。下面的例子都將返回3.14:parseFloat("3.14")parseFloat("314e-2")parseFloat("0.0314E+2")parseFloat("3.14ab")varx="3.14"parseFloat(x)下面的例子將返回“NaN”:parseFloat("FF2")10.2.4常用系統(tǒng)函數(shù)(cont.)5.返回不同進(jìn)制的數(shù)方法名:parseInt(numbestring,radix);parseInt函數(shù)返回參數(shù)numbestring的第一組連續(xù)數(shù)字。其中radix是數(shù)的進(jìn)制:如16、10,8、2;numbestring則是一個(gè)數(shù)值字符串,允許該字符串包含空格。例如,下面的例子都返回15:parseInt("F",16),parseInt("17",8),parseInt(15.99,10),parseInt("1111",2),parseInt("15*3",10)在解析時(shí),如果字符串的第一個(gè)字符不能被轉(zhuǎn)換成數(shù)字,將返回NaN。下面的例子,都返回“NaN”。parseInt("Hello",8)如果沒(méi)有指定轉(zhuǎn)換基數(shù)radix這個(gè)參數(shù),parseInt將依照下列規(guī)則進(jìn)行:如果字符串以"0x"開(kāi)始,視為16進(jìn)制;如果字符串以"0"開(kāi)始,視為8進(jìn)制;其他的視為10進(jìn)制。10.2.4常用系統(tǒng)函數(shù)(cont.)6.判斷是否為數(shù)值方法名:isNaN(testValue);方法對(duì)參數(shù)值進(jìn)行判斷,如果是“NaN”則返回true,否則為false。例如:isNaN("h78");//結(jié)果為true;isNaN(78);//結(jié)果為false;isNaN("78");//結(jié)果為false;10.2.5消息對(duì)話框1.alert()Alert("文本");實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的信息告知的功能。2.confirm()方法:confirm("文本");確認(rèn)框是一個(gè)帶有顯示信息和“ok/確認(rèn)”及“cancel/取消”兩個(gè)按鈕對(duì)話框,用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后,用戶需要單擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。如果用戶單擊確認(rèn),那么返回值為true。如果用戶單擊取消,那么返回值為false。10.2.5消息對(duì)話框(cont.)Prompt()方法名:prompt("文本","默認(rèn)值");提示框經(jīng)常用于提示用戶在進(jìn)入頁(yè)面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后,用戶需要輸入某個(gè)值,然后單擊“ok/確認(rèn)”或“cancel/取消”按鈕才能繼續(xù)操縱。如果用戶單擊確認(rèn),那么返回值為輸入的值。如果用戶單擊取消,那么返回值為null。10.2.6注釋程序代碼中添加注釋是為了讓代碼閱讀起來(lái)更容易理解,良好的編碼習(xí)慣其中就包括及時(shí)為自己編寫的代碼加上明確清晰的閱讀說(shuō)明。1.單行注釋行的注釋以//開(kāi)始,一般對(duì)語(yǔ)句的含義進(jìn)行說(shuō)明,可以單獨(dú)放在一行,也可以跟在代碼后,放在同一行中。<scripttype="text/javascript">、
//函數(shù)show()是在頁(yè)面加載時(shí)被調(diào)用的。
functionshow(){ alert("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");//一個(gè)執(zhí)行時(shí)彈出的信息框
}</script>10.2.6注釋(cont.)2.多行注釋多行注釋以/*開(kāi)頭,以*/結(jié)尾,經(jīng)常用來(lái)對(duì)一個(gè)函數(shù)或者語(yǔ)句塊進(jìn)行說(shuō)明。3.使用注釋防止代碼執(zhí)行注釋的作用是為代碼添加閱讀說(shuō)明,但有時(shí)也會(huì)用來(lái)屏蔽某些語(yǔ)句行的執(zhí)行。例如,<scripttype="text/javascript">、
//函數(shù)show()是在頁(yè)面加載時(shí)被調(diào)用的。
functionshow(){ //alert("歡迎進(jìn)入JavaScript學(xué)習(xí)之旅!");
}</script>10.3標(biāo)識(shí)符和變量10.3.1關(guān)于命名的規(guī)定1.標(biāo)識(shí)符標(biāo)識(shí)符是計(jì)算機(jī)語(yǔ)言關(guān)于命名的規(guī)定。例如程序10-5中函數(shù)名show,變量名radius和area,這些名字都是標(biāo)識(shí)符的實(shí)例。JavaScript關(guān)于標(biāo)識(shí)符的規(guī)定有:必須使用字母或者下劃線開(kāi)始;必須使用英文字母、數(shù)字、下劃線組成,不能出現(xiàn)空格或制表符;不能使用JavaScript關(guān)鍵詞與JavaScript保留字;不能使用JavaScript語(yǔ)言內(nèi)部的單詞,比如Infinity,NaN,undefined;大小寫敏感,也就是說(shuō)x和X是不一樣的兩個(gè)標(biāo)識(shí)符。10.3.1關(guān)于命名的規(guī)定(cont.)2.關(guān)鍵字關(guān)鍵字對(duì)于JavaScript程序有著特別的含義,它們可標(biāo)識(shí)程序的結(jié)構(gòu)和功能,所以,在編寫代碼時(shí),不能用它們作為自定義的變量名或者函數(shù)名。表10-1列出了JavaScript的關(guān)鍵字。10.3.1關(guān)于命名的規(guī)定(cont.)3. 保留字除了關(guān)鍵字,JavaScript還有一些可能未來(lái)擴(kuò)展時(shí)使用的保留字,同樣不能用于標(biāo)識(shí)符的定義,表10-2列出了這些保留字。10.3.2JavaScript的數(shù)據(jù)類型JavaScript不是一種強(qiáng)類型的語(yǔ)言雖然JavaScript變量表面上沒(méi)有類型,但是JavaScript內(nèi)部還是會(huì)為變量賦予相應(yīng)的類型,在將來(lái)的版本會(huì)增加變量類型。JavaScript有六種數(shù)據(jù)類型。主要的類型有number、String、object以及Boolean類型,其他兩種類型為null和undefined。10.3.2JavaScript的數(shù)據(jù)類型(cont.)1.String字符串類型字符串是用單引號(hào)或雙引號(hào)來(lái)說(shuō)明的(可以使用單引號(hào)來(lái)輸入包含引號(hào)的字符串),如"張華"、'張華'或者"'張華'"。字符串中每個(gè)字符都有特定的位置,首字符從位置0開(kāi)始,第二個(gè)字符在位置1,依此類推。這意味著字符串中的最后一個(gè)字符的位置一定是字符串的長(zhǎng)度減1。10.3.2JavaScript的數(shù)據(jù)類型(cont.)2.數(shù)值數(shù)據(jù)類型JavaScript支持整數(shù)和浮點(diǎn)數(shù)。整數(shù)可以為正數(shù)、0或者負(fù)數(shù);浮點(diǎn)數(shù)可以包含小數(shù)點(diǎn)、也可以包含一個(gè)“e”(大小寫均可,在科學(xué)記數(shù)法中表示“10的冪”)、或者同時(shí)包含這兩項(xiàng),下面是一些關(guān)于數(shù)的表示。正數(shù):1、30、10.3負(fù)數(shù)、-1、-30、-10.3有理數(shù):0,正數(shù),負(fù)數(shù)統(tǒng)稱為有理數(shù)指數(shù):2e3表示2*10*10*10,5.1e4表示5.1*10*10*10*10八進(jìn)制數(shù):八進(jìn)制數(shù)是以0開(kāi)頭的數(shù),如070代表10進(jìn)制的56十六進(jìn)制數(shù):16進(jìn)制數(shù)是以0x開(kāi)頭的數(shù),如0x1f代表10進(jìn)制的31Infinity表示無(wú)窮大,這是一個(gè)特殊的Number類型NaN,表示非數(shù)(NotaNumber),這是一個(gè)特殊的Number類型10.3.2JavaScript的數(shù)據(jù)類型(cont.)3.Boolean類型可能的Boolean值有true和false。這是兩個(gè)特殊值,不能用作1和0。4.undefined數(shù)據(jù)類型一個(gè)為undefined的值就是指在變量被創(chuàng)建后,但未給該變量賦值之以前所具有的值。5.null數(shù)據(jù)類型null值就是沒(méi)有任何值,什么也不表示。6.object類型除了上面提到的各種常用類型外,對(duì)象也是JavaScript中的重要組成部分,這部分將在后面介紹。10.3.3變量一個(gè)示例vararea=0;area=3.14*radius*radius;這種可以保存執(zhí)行時(shí)變化的值的名字,被稱為“變量”,變量相當(dāng)于是值的容器。var的作用就是聲明(創(chuàng)建)變量,如“vararea=0”就表示聲明一個(gè)名字為“area”的變量,該變量的初始值為0。10.3.3變量(cont.)1.聲明變量在使用一個(gè)變量保存值之前要做的一個(gè)重要的事情就是要事先聲明一下這個(gè)變量。基本語(yǔ)法:var變量名[=初值][,變量名[=初值]…]語(yǔ)法說(shuō)明:var是關(guān)鍵字,聲明變量時(shí)至少要有一個(gè)變量,每個(gè)變量要起一個(gè)合適的名字;變量的起名應(yīng)該符合標(biāo)識(shí)符的規(guī)定,好的名字應(yīng)該做到見(jiàn)名知意;可以同時(shí)聲明多個(gè)變量;可以在聲明變量的同時(shí),直接給變量賦予一個(gè)合適的初值。以下是變量聲明的實(shí)例。varaccount;vararea=0;varname="張華";varstatus=true;vara,b,c;10.3.3變量(cont.)2.向變量賦值在前面已經(jīng)多次出現(xiàn)向變量賦值的語(yǔ)句。例如,上面在聲明area變量時(shí)直接賦了初值0。具體在為變量賦值時(shí),需要注意:變量名在賦值運(yùn)算符“=”符號(hào)的左邊,而需要向變量賦的值在“=”的右側(cè);一個(gè)變量在聲明后,可以多次被賦值或使用;可以向一個(gè)變量隨時(shí)賦值,而且可以賦以不同類型的值。聲明一個(gè)變量vartest;定義一個(gè)數(shù)字類型的變量areavararea=0;定義一個(gè)字符串類型的變量namevarname="張華";另外一種方法來(lái)定義一個(gè)字符串類型的變量namevarstr=newstring("張華");定義一個(gè)邏輯類型的變量statusvarstatus=true;將一個(gè)表達(dá)式的計(jì)算結(jié)果賦值給變量areaarea=3.14*radius*radius;用一個(gè)var語(yǔ)句定義兩個(gè)或多個(gè)變量,它們的類型不必一定相同vararea=0,name="張華";注意:雖然一個(gè)變量在一個(gè)代碼段中可以被賦予不同類型的值,但實(shí)際中要杜絕這樣賦值,因?yàn)槿菀讓?dǎo)致對(duì)代碼理解上的混亂。向未聲明的變量賦值如果在賦值時(shí)所賦值的變量還未進(jìn)行過(guò)聲明,該變量會(huì)自動(dòng)聲明。例如:area=0;name="張華";等價(jià)于:vararea=0;varname="張華";
這種事先沒(méi)有賦值卻直接使用的情況,并不是一個(gè)優(yōu)秀程序員的習(xí)慣。作為一種良好的編碼規(guī)則,所有的程序員都認(rèn)為,任何變量都要“先聲明,后使用”。10.3.4轉(zhuǎn)義字符
轉(zhuǎn)義字符就是在字符串中無(wú)法直接表示的一種字符表示方式,例如:\u后面加4個(gè)十六進(jìn)制數(shù)字可以表示一個(gè)字符,如:\u03c6表示Φ。\r表示回車,而\n表示換行,\t表示光標(biāo)移到下一個(gè)輸出位。vars="Hello,\"Mike\"";則變量s的值是:Hello,"Mike"。課堂練習(xí)可以在下列哪個(gè)HTML元素中放置javascript代碼?()A.<script>B.<javascript>C.<js>D.<scripting>輸出“HelloWorld”的正確javascript語(yǔ)法是?()A.document.write("HelloWorld")B."HelloWorld“C.response.write("HelloWorld")D.("HelloWorld")引用名為“xxx.js”的外部腳本的正確語(yǔ)法是?()A.<scriptsrc="xxx.js">B.<scripthref="xxx.js">C.<scriptname="xxx.js">課堂練習(xí)(cont.)外部腳本必須包含<script>標(biāo)簽嗎?()是B.否如何在警告框中寫入“HelloWorld”?()A.alertBox="HelloWorld“B.msgBox("HelloWorld")C.alert("HelloWorld")D.alertBox("HelloWorld")如何創(chuàng)建名為myFunction的函數(shù)?()A.function:myFunction()B.functionmyFunction()C.function=myFunction()如何調(diào)用名為“myFunction”的函數(shù)?()A.callfunctionmyFunctionB.callmyFunction()C.myFunction()10.4運(yùn)算符和表達(dá)式JavaScript運(yùn)算符包括:算術(shù)運(yùn)算符、賦值運(yùn)算符、自增、自減運(yùn)算符、逗號(hào)運(yùn)算符、關(guān)系運(yùn)算符、邏輯運(yùn)算符、條件運(yùn)算符、位運(yùn)算符,也可以根據(jù)運(yùn)算符需要操作數(shù)的個(gè)數(shù),可以把運(yùn)算符分為一元運(yùn)算符、二元運(yùn)算符或者三元運(yùn)算符。由操作數(shù)(變量、常量、函數(shù)調(diào)用等)和運(yùn)算符結(jié)合在一起構(gòu)成的式子稱為“表達(dá)式”。對(duì)應(yīng)的表達(dá)式包括:算術(shù)表達(dá)式、賦值表達(dá)式、自增、自減表達(dá)式、逗號(hào)表達(dá)式、關(guān)系表達(dá)式、邏輯表達(dá)式、條件表達(dá)式、位表達(dá)式。10.4.1算術(shù)數(shù)運(yùn)算符和表達(dá)式JavaScript算術(shù)運(yùn)算符負(fù)責(zé)算術(shù)運(yùn)算,如表10-4所示。用算術(shù)運(yùn)算符和運(yùn)算對(duì)象(操作數(shù))連接起來(lái)符合規(guī)則的式子,稱為算術(shù)表達(dá)式?;菊Z(yǔ)法:雙元運(yùn)算符:op1operatorop2單元運(yùn)算符:opoperatoroperatorop課堂練習(xí)varx=26%5;結(jié)果?varresult1=5+5; 結(jié)果?varresult2=5+"5";結(jié)果?varresult3=5+5+"5";結(jié)果?vara=10;varb=++a;結(jié)果?vara=10;varb=a--;結(jié)果?10.4.2賦值運(yùn)算符和表達(dá)式
簡(jiǎn)單的賦值運(yùn)算符由等號(hào)(=)實(shí)現(xiàn),只是把等號(hào)右邊的值賦予等號(hào)左邊的變量?;菊Z(yǔ)法:簡(jiǎn)單賦值運(yùn)算:<變量>=<變量>operator<表達(dá)式>復(fù)合賦值運(yùn)算:<變量>operator=<表達(dá)式>語(yǔ)法說(shuō)明:賦值運(yùn)算是最常用的一種運(yùn)算符,通過(guò)賦值,可以把一個(gè)值用一個(gè)變量名來(lái)表示。例如,area=3.14*radius*radius;等號(hào)右側(cè)的表達(dá)式在復(fù)合賦值表達(dá)式中被認(rèn)為是一個(gè)整體。10.4.3關(guān)系運(yùn)算符和表達(dá)式關(guān)系運(yùn)算符和表達(dá)式關(guān)系運(yùn)算符負(fù)責(zé)判斷兩個(gè)值是否符合給定的條件,包括的運(yùn)算符見(jiàn)表10-6。用關(guān)系運(yùn)算符和運(yùn)算對(duì)象(操作數(shù))連接起來(lái),符合規(guī)則的式子,稱”關(guān)系表達(dá)式”關(guān)系表達(dá)式返回的結(jié)果為“true”或“false”,分別代表符合給定的條件或者不符合。關(guān)系表達(dá)式一般用于分支和循環(huán)控制語(yǔ)句中,根據(jù)邏輯值的真假來(lái)決定程序的執(zhí)行流向,一個(gè)簡(jiǎn)單的判斷最大值的例子見(jiàn)程序10-7?;菊Z(yǔ)法:op1operatorop2語(yǔ)法說(shuō)明:1.不同類型間的比較當(dāng)兩個(gè)操作數(shù)的類型不同進(jìn)行比較時(shí),遵循以下規(guī)則:無(wú)論何時(shí)比較一個(gè)數(shù)字和一個(gè)字符串,都會(huì)把字符串轉(zhuǎn)換成數(shù)字,然后按照數(shù)字順序比較它們,如果字符串不能轉(zhuǎn)換成數(shù)字,則比較結(jié)果為false;如果一個(gè)運(yùn)算數(shù)是Boolean值,在檢查相等性之前,把它轉(zhuǎn)換成數(shù)字值。false轉(zhuǎn)換成0,true為1;如果一個(gè)運(yùn)算數(shù)是對(duì)象,另一個(gè)是字符串,在檢查相等性之前,要嘗試把對(duì)象轉(zhuǎn)換成字符串;如果一個(gè)運(yùn)算數(shù)是對(duì)象,另一個(gè)是數(shù)字,在檢查相等性之前,要嘗試把對(duì)象轉(zhuǎn)換成數(shù)字。2.=與==的區(qū)別“=”是賦值運(yùn)算符,用來(lái)把一個(gè)值賦予一個(gè)變量,比如vari=5;“==”是相等運(yùn)算符,用來(lái)判斷兩個(gè)操作數(shù)是否相等,并且會(huì)返回true或false,比如a==b。3.===與!==“===”代表恒等于,不僅判斷數(shù)值,而且判斷類型。比如:vara=5,b="5";varresult1=(a==b);//結(jié)果是truevarresult2=(a===b);//結(jié)果是false這里,a是數(shù)值類型,b是字符串類型,雖然數(shù)值相等但是類型不等,同樣的“!==”代表恒不等于,也是要判斷數(shù)值與類型。4.相等性判斷的特殊情況10.4.4邏輯運(yùn)算符和表達(dá)式
基本語(yǔ)法:雙元運(yùn)算符:boolean_expressionoperatorboolean_expression邏輯非運(yùn)算符:!boolean_expression語(yǔ)法說(shuō)明:邏輯運(yùn)算符包括兩個(gè)雙元運(yùn)算符邏輯或(||)和邏輯與(&&),要求兩端的操作數(shù)類型均為邏輯值,邏輯非!則是一個(gè)單元運(yùn)算符,它們的運(yùn)算結(jié)果還是邏輯值,其使用的場(chǎng)合和關(guān)系表達(dá)式類似,一般都用于控制程序的流向,如分支條件、循環(huán)條件等等。10.4.5條件運(yùn)算符和表達(dá)式條件運(yùn)算符是一個(gè)3元運(yùn)算符,也就是該運(yùn)算涉及到了3個(gè)操作數(shù)。基本語(yǔ)法:variable=boolean_expression?true_value:false_value;語(yǔ)法說(shuō)明:該條件表達(dá)式表示,如果boolean_expression的結(jié)果為true,則variable的值取true_value,否則取false_value。例如,在程序10-7程序showMax()函數(shù)中if(v1>v2)那個(gè)判斷,可以改為如下代碼:varmax=(v1>v2)?v1:v2;document.getElementById('max').value=max;10.4.6其他運(yùn)算符和表達(dá)式
逗號(hào)運(yùn)算符逗號(hào)運(yùn)算符負(fù)責(zé)連接多個(gè)JavaScript表達(dá)式,允許在一條語(yǔ)句中執(zhí)行多個(gè)表達(dá)式,例如:varx=1,y=2,z=3;x=y+z,y=x+z;一元加法和一元減法一元加法和一元減法和數(shù)學(xué)上的用法是一致的,如:varx=10;x=+10;//x的值還是10,沒(méi)有影響x=-10;//x的值是-10,對(duì)值求反但是當(dāng)操作數(shù)是字符串時(shí),其功能卻有一些特別之處,如:vars="20";varx=+s;//這條語(yǔ)句把字符串s轉(zhuǎn)換成了數(shù)值類型,賦值給變量xvary=-s;//這條語(yǔ)句把字符串s轉(zhuǎn)換成了數(shù)值類型,賦值給變量y,其值為-2010.4.6其他運(yùn)算符和表達(dá)式
位運(yùn)算符位運(yùn)算是在數(shù)的二進(jìn)制位的基礎(chǔ)上進(jìn)行的操作,具體的位運(yùn)算符見(jiàn)表10-9所示。10.5JavaScript程序控制結(jié)構(gòu)從形式上看,程序就是為了達(dá)到某種目的而將若干條語(yǔ)句組合在一起的指令集。JavaScript程序的主要特點(diǎn)是解決人機(jī)交互問(wèn)題。編寫任何程序首先應(yīng)該弄明白要解決的問(wèn)題是什么,為了解決問(wèn)題,需要對(duì)什么樣的數(shù)據(jù)進(jìn)行處理,這些數(shù)據(jù)是如何在程序中出現(xiàn)的(也就是如何獲得它們),又該用什么樣的語(yǔ)句(也就是算法)來(lái)處理它們,最后達(dá)到預(yù)期的目的。JavaScript程序設(shè)計(jì)分為兩種方式面向過(guò)程程序設(shè)計(jì)與面向?qū)ο蟪绦蛟O(shè)計(jì)。每種方法都是對(duì)數(shù)據(jù)結(jié)構(gòu)與算法的描述。數(shù)據(jù)結(jié)構(gòu)包括前面介紹的各種數(shù)據(jù)類型以及后面將要介紹的更復(fù)雜的引用類型,而算法則比較簡(jiǎn)單,任何算法都可以由最基本的順序、分支和循環(huán)三種結(jié)構(gòu)組成。10.5.1順序程序順序程序是最基本的程序設(shè)計(jì)思路。順序程序執(zhí)行是按照語(yǔ)句出現(xiàn)的順序一步一步從上到下運(yùn)行,直到最后一條語(yǔ)句。從總體上看,任何程序都是按照語(yǔ)句出現(xiàn)的先后順序,被逐句執(zhí)行。圖10-7程序10-6的show()函數(shù)語(yǔ)句執(zhí)行順序課堂練習(xí)寫一段代碼,定義三個(gè)整數(shù)變量并任意賦初值,求它們的平均值并用alert語(yǔ)句輸出。信函的重量不超過(guò)100g時(shí),每20g付郵資80分,即信函的重量不超過(guò)20g時(shí),付郵資80分,信函的重量超過(guò)20g,不超過(guò)40克時(shí),付郵資160分,編寫程序輸入信函的重量,輸出應(yīng)付的郵資(注意:本題不使用分支結(jié)構(gòu),使用順序結(jié)構(gòu),假設(shè)輸入的信函重量不超過(guò)100克)。10.5.2分支程序在編寫代碼時(shí),經(jīng)常需要根據(jù)不同的條件完成不同的行為。可以在代碼中使用條件語(yǔ)句來(lái)完成這個(gè)任務(wù)。在JavaScript中,可以使用下面幾種條件語(yǔ)句:if語(yǔ)句:在一個(gè)指定的條件成立時(shí)執(zhí)行代碼。if...else語(yǔ)句:在指定的條件成立時(shí)執(zhí)行代碼,當(dāng)條件不成立時(shí)執(zhí)行另外的代碼。if...elseif....else語(yǔ)句:使用這個(gè)語(yǔ)句可以選擇執(zhí)行若干塊代碼中的一個(gè)。switch語(yǔ)句:使用這個(gè)語(yǔ)句可以選擇執(zhí)行若干塊代碼中的一個(gè)。10.5.2分支程序(cont.)if語(yǔ)句如果希望指定的條件成立時(shí)執(zhí)行代碼,就可以使用這個(gè)語(yǔ)句?;菊Z(yǔ)法:if(條件){條件成立時(shí)執(zhí)行代碼;}語(yǔ)法說(shuō)明:假如條件成立,即條件的值為true,則執(zhí)行大括號(hào)里面的語(yǔ)句,如果不成立,則跳過(guò)括號(hào)里面的語(yǔ)句,繼續(xù)執(zhí)行大括號(hào)后面的其他語(yǔ)句。這里的條件可以是一個(gè)關(guān)系表達(dá)式,如a>b,也可以是一個(gè)邏輯表達(dá)式,如a>b&&a<c,或者其他能夠表示為真的表達(dá)式或值。課堂練習(xí)如何編寫當(dāng)i等于5時(shí)執(zhí)行某些語(yǔ)句的條件語(yǔ)句?()A.if(i==5)B.ifi=5thenC.ifi=5D.ifi==5then如何編寫當(dāng)i不等于5時(shí)執(zhí)行某些語(yǔ)句的條件語(yǔ)句?()A.if=!5thenB.if<>5C.if(i<>5)D.if(i!=5)10.5.2分支程序(cont.)if...else語(yǔ)句基本語(yǔ)法:if(條件){條件成立時(shí)執(zhí)行此代碼;}else{條件不成立時(shí)執(zhí)行此代碼;}語(yǔ)法說(shuō)明:假如條件成立,即條件的值為true,則執(zhí)行其后大括號(hào)里面的語(yǔ)句,如果不成立,則執(zhí)行else大括號(hào)中的語(yǔ)句。課堂練習(xí)信函的重量不超過(guò)100g時(shí),每20g付郵資80分,即信函的重量不超過(guò)20g時(shí),付郵資80分,信函的重量超過(guò)20g,不超過(guò)40克時(shí),付郵資160分,編寫程序輸入信函的重量,輸出應(yīng)付的郵資10.5.2分支程序(cont.)3.多重if...else語(yǔ)句if(條件1){條件1成立時(shí)執(zhí)行代碼;}elseif(條件2){條件2成立時(shí)執(zhí)行代碼;}……elseif(條件x){條件x成立時(shí)執(zhí)行代碼;}else{所有條件均不成立時(shí)執(zhí)行代碼;}10.5.2分支程序(cont.)4.嵌套的if...else語(yǔ)句有時(shí)候,在一種判斷條件下的語(yǔ)句中,根據(jù)情況可以繼續(xù)使用if語(yǔ)句,這種情況成為if的嵌套。if(條件1){if(條件2){語(yǔ)句1;}else{語(yǔ)句2;}}else{//隱含的條件3if(條件4){
語(yǔ)句4;}else{
語(yǔ)句5;}}10.5.2分支程序(cont.)5.switch語(yǔ)句switch語(yǔ)句也是用于分支的語(yǔ)句,和if語(yǔ)句不同的是,它是用于對(duì)多種可能相等情況的判斷,解決了if…else語(yǔ)句使用過(guò)多,邏輯不清的弊端。語(yǔ)法說(shuō)明:在switch語(yǔ)句執(zhí)行時(shí),各個(gè)case判斷后需要執(zhí)行的語(yǔ)句都應(yīng)該放在緊隨的一對(duì)大括號(hào)內(nèi),當(dāng)switch的"變量或表達(dá)式"的值與某個(gè)case后面的常量相等時(shí),就執(zhí)行常量后面的語(yǔ)句,碰到“break”之后跳出switch分支選擇語(yǔ)句,當(dāng)所有的case后面的常量都不符合"條件表達(dá)式"時(shí),執(zhí)行default后面的語(yǔ)句n。switch(變量或表達(dá)式){case常量:{
語(yǔ)句a;}break;...case常量:{
語(yǔ)句f;}break;default:{
語(yǔ)句n;}}10.5.2分支程序(cont.)具體在使用switch語(yǔ)句時(shí),還需要注意:順序執(zhí)行case后面的每個(gè)語(yǔ)句,最后執(zhí)行default下面的語(yǔ)句n;每個(gè)case后面的語(yǔ)句可以是一條,也可以是多條,但要使用{}包括起來(lái);每個(gè)case后面的值必須互不相同;關(guān)鍵字break會(huì)使代碼結(jié)束一個(gè)case后的語(yǔ)句執(zhí)行,跳出switch語(yǔ)句。如果沒(méi)有關(guān)鍵字break,代碼執(zhí)行就會(huì)繼續(xù)進(jìn)入下一個(gè)case,并且不會(huì)再對(duì)照判斷,依次執(zhí)行后續(xù)所有case的語(yǔ)句,直到switch語(yǔ)句結(jié)束,或者碰到一個(gè)break;default語(yǔ)句并不是不可缺少的,而且default語(yǔ)句也不必總在最后,但建議放在最后。default語(yǔ)句表示其他情況都不匹配后,默認(rèn)執(zhí)行的語(yǔ)句。一般在使用switch語(yǔ)句時(shí),case后面總跟一個(gè)常量,但有時(shí)可以是一個(gè)有值的變量,10.5.3循環(huán)程序1.for循環(huán)for(初始化表達(dá)式;判斷表達(dá)式;循環(huán)表達(dá)式){
需循環(huán)執(zhí)行的代碼}語(yǔ)法說(shuō)明初始化表達(dá)式在循環(huán)開(kāi)始前執(zhí)行,一般用來(lái)定義循環(huán)變量;判斷表達(dá)式就是循環(huán)的條件,當(dāng)表達(dá)式結(jié)果為true,循環(huán)繼續(xù)執(zhí)行,否則,結(jié)束循環(huán),跳至循環(huán)后的語(yǔ)句繼續(xù)執(zhí)行程序;循環(huán)表達(dá)式在每次循環(huán)執(zhí)行后都將被執(zhí)行,然后再進(jìn)行判斷表達(dá)式的計(jì)算,來(lái)決定是否進(jìn)行下次循環(huán)。當(dāng)循環(huán)體只有一條語(yǔ)句時(shí),可以不用大括號(hào)括起來(lái)(建議使用),但有一條以上時(shí),必須用大括號(hào)括起來(lái),以表示一個(gè)完整的循環(huán)體。
示例:程序10-1310.5.3循環(huán)程序(cont.)圖10-8for循環(huán)的執(zhí)行流程10.5.3循環(huán)程序(cont.)while循環(huán)while循環(huán)用于在指定條件為true時(shí)循環(huán)執(zhí)行代碼?;菊Z(yǔ)法:while(表達(dá)式){需執(zhí)行的代碼;}語(yǔ)法說(shuō)明:while為不確定性循環(huán),當(dāng)表達(dá)式的結(jié)果為真true時(shí),執(zhí)行循環(huán)中的語(yǔ)句;表達(dá)式為假false時(shí)不執(zhí)行循環(huán),跳至循環(huán)語(yǔ)句后,繼續(xù)執(zhí)行其他語(yǔ)句,其執(zhí)行流程見(jiàn)圖10-9。10.5.3循環(huán)程序(cont.)圖10-9while循環(huán)的執(zhí)行流程10.5.3循環(huán)程序(cont.)do…while循環(huán)do...while循環(huán)是while循環(huán)的變種。該循環(huán)程序在初次運(yùn)行時(shí)會(huì)首先執(zhí)行一遍其中的代碼,然后當(dāng)指定的條件為true時(shí),它會(huì)繼續(xù)這個(gè)循環(huán),其執(zhí)行流程見(jiàn)圖10-10所示?;菊Z(yǔ)法:do{
需執(zhí)行的代碼;}while(表達(dá)式)語(yǔ)法說(shuō)明:和while一樣,在利用do...while構(gòu)建循環(huán)時(shí),同樣需要注意:應(yīng)該使用大括號(hào){}將循環(huán)體語(yǔ)句包含起來(lái)(一條語(yǔ)句也應(yīng)使用大括號(hào));在循環(huán)體中應(yīng)該包含使循環(huán)退出的語(yǔ)句,比如上例的i++(否則循環(huán)將無(wú)休止的運(yùn)行)。10.5.3循環(huán)程序(cont.)圖10-10do…while循環(huán)的執(zhí)行流程10.5.3循環(huán)程序(cont.)break和continue的作用前面介紹了三種類型的循環(huán),每次循環(huán)都是從頭執(zhí)行到尾,然而情況并不都是如此,有時(shí)在循環(huán)中,可能碰到一些需要提前中止循環(huán)的情況,或者放棄某次循環(huán)的情況,程序10-14,綜合顯示了它們的作用。break語(yǔ)句在函數(shù)searchFirst()中,可以看到循環(huán)中的break語(yǔ)句一旦被碰到,無(wú)論循環(huán)還有多少次,都不會(huì)再執(zhí)行了,break語(yǔ)句的作用就是立即結(jié)束循環(huán),轉(zhuǎn)到循環(huán)后的語(yǔ)句繼續(xù)執(zhí)行。continue語(yǔ)句而在total()函數(shù),continue語(yǔ)句的作用則是本次循環(huán)結(jié)束了,后面的語(yǔ)句本次不再執(zhí)行,開(kāi)始下一次的循環(huán),如果還有的話。10.5.3循環(huán)程序(cont.)for...in循環(huán)for...in循環(huán)是另外一種特殊用途的循環(huán)。基本語(yǔ)法:for(變量in對(duì)象){
執(zhí)行代碼;}語(yǔ)法說(shuō)明:該循環(huán)用來(lái)對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行操作。例如:程序10-15的代碼逐個(gè)將window對(duì)象的每個(gè)屬性進(jìn)行了輸出。10.5.3循環(huán)程序(cont.)<scripttype="text/javascript">
for(varpropinwindow){ document.write(prop);document.write("<br>");}</script>10.5.3循環(huán)程序(cont.)循環(huán)的嵌套一個(gè)循環(huán)內(nèi)又包含著另一個(gè)完整的循環(huán)結(jié)構(gòu),稱為循環(huán)的嵌套。內(nèi)嵌的循環(huán)中還可以繼續(xù)嵌套循環(huán),這就是多層循環(huán)了。課堂練習(xí)程序10-16,通過(guò)雙重循環(huán)在頁(yè)面上輸出了一個(gè)九九乘法表。課堂練習(xí)下面那個(gè)for循環(huán)是正確的?()A.for(i<=5;i++)B.for(i=0;i<=5;i++)C.for(i=0;i<=5)D.fori=1to510.6對(duì)象JavaScript既支持傳統(tǒng)的結(jié)構(gòu)化編程,同時(shí)也支持面向?qū)ο蟮木幊?OOP),用戶在編程時(shí)可以定義自己的對(duì)象類型。本節(jié)將重點(diǎn)介紹內(nèi)建的JavaScript對(duì)象,使用瀏覽器的內(nèi)部對(duì)象系統(tǒng),可實(shí)現(xiàn)與HTML文檔乃至瀏覽器本身進(jìn)行交互。建立對(duì)象的目的是將圍繞對(duì)象的屬性和方法,封裝在一起提供給程序設(shè)計(jì)人員使用,從而減輕編程人員的勞動(dòng),提高設(shè)計(jì)Web頁(yè)面的能力。例如,通過(guò)document對(duì)象,可以獲得頁(yè)面表單內(nèi)的輸入內(nèi)容,也可以直接用程序更改一個(gè)表格的顯示樣式。10.6.1對(duì)象簡(jiǎn)介1.訪問(wèn)對(duì)象的屬性和方法訪問(wèn)一個(gè)對(duì)象的屬性和方法都可以通過(guò)下面的方式進(jìn)行?;菊Z(yǔ)法:對(duì)象名稱.屬性名對(duì)象名稱.方法名()語(yǔ)法說(shuō)明:訪問(wèn)一個(gè)對(duì)象的屬性和方法時(shí),一定要指明是哪一個(gè)對(duì)象,通過(guò)圓點(diǎn)運(yùn)算符來(lái)訪問(wèn)。訪問(wèn)對(duì)象的方法時(shí),括號(hào)是必須有的,無(wú)論是否需要提供參數(shù)值。例如:vars=“Welcometoyou!”;這條語(yǔ)句創(chuàng)建了一個(gè)字符串對(duì)象,通過(guò)變量名s來(lái)引用它。要想知道它的字符個(gè)數(shù),可以這樣:varlen=s.length;如果希望獲得一個(gè)字符串某個(gè)位置的字符,可以這樣:varch=s.charAt(3);10.6.1對(duì)象簡(jiǎn)介(cont.)2.JavaScript的對(duì)象類型簡(jiǎn)單的來(lái)分,JavaScript的對(duì)象類型可以分為四類:JavaScript本地對(duì)象(native
object),本身提供的類型,如Math等,這種對(duì)象無(wú)需具體定義,直接就可以通過(guò)名稱引用它們的屬性和方法,如Math.Random();JavaScript的內(nèi)建對(duì)象(built-inobject),如Array,String等。這些對(duì)象獨(dú)立于宿主環(huán)境,在JavaScript程序內(nèi)有程序員定義具體對(duì)象,并可以通過(guò)對(duì)象名來(lái)使用;宿主對(duì)象(hostobject)是被瀏覽器支持的,目的是為了能和被瀏覽的文檔乃至瀏覽器環(huán)境交互,如document,window和frames等;自定義對(duì)象,是程序員基于需要自己定義的對(duì)象類型。10.6.2核心對(duì)象JavaScript的核心對(duì)象包括:Array,Boolean,Date,F(xiàn)unction,Math,Number,Object和String等。這些對(duì)象同時(shí)在客戶端和服務(wù)器端的JavaScript中使用。1.Array數(shù)組對(duì)象用來(lái)在單獨(dú)的變量名中存儲(chǔ)一系列的值,避免了同時(shí)聲明很多變量使得程序結(jié)構(gòu)變得復(fù)雜,導(dǎo)致難于理解和維護(hù)。數(shù)組一般用在需要對(duì)一批同類的數(shù)據(jù)逐個(gè)進(jìn)行一樣的處理中。通過(guò)聲明一個(gè)數(shù)組,將相關(guān)的數(shù)據(jù)存入數(shù)組,使用循環(huán)等結(jié)構(gòu)對(duì)數(shù)組中的每個(gè)元素進(jìn)行操作(使用循環(huán)體的語(yǔ)句體)。1)定義數(shù)組并直接初始化數(shù)組元素varcourse=newArray("Java程序設(shè)計(jì)","HTML開(kāi)發(fā)基礎(chǔ)","數(shù)據(jù)庫(kù)原理","計(jì)算機(jī)網(wǎng)絡(luò)");或者:varcourse=["Java程序設(shè)計(jì)","HTML開(kāi)發(fā)基礎(chǔ)","數(shù)據(jù)庫(kù)原理","計(jì)算機(jī)網(wǎng)絡(luò)"];1.Array(cont.)2)先定義數(shù)組,后初始化數(shù)組元素varcourse=newArray();course[0]="Java程序設(shè)計(jì)";course[1]="HTML開(kāi)發(fā)基礎(chǔ)";course[2]="數(shù)據(jù)庫(kù)原理";course[3]="計(jì)算機(jī)網(wǎng)絡(luò)";3)數(shù)組的長(zhǎng)度可以通過(guò)“數(shù)組名.length”來(lái)獲得指定數(shù)組的實(shí)際長(zhǎng)度數(shù)組的元素4)一般而言,數(shù)組中存放的應(yīng)該都是同類型的數(shù)據(jù),例如字符串、整數(shù)、實(shí)數(shù)、同樣類型的對(duì)象等,但由于JavaScript語(yǔ)言是一個(gè)弱類型的語(yǔ)言,JavaScript同樣不檢查存入數(shù)組的每個(gè)元素的類型是否一致,也就是說(shuō),可以不一樣。
1.Array(cont.)5)訪問(wèn)/修改數(shù)組元素訪問(wèn)數(shù)組的元素可以通過(guò)下標(biāo)(也就是元素在數(shù)組中存放的順序)來(lái)訪問(wèn)。數(shù)組的下標(biāo)總是從0開(kāi)始,也就是說(shuō),數(shù)組的第一個(gè)元素放在下標(biāo)為0的位置,訪問(wèn)第一個(gè)元素的代碼可以這樣寫:varcn=course[0];同樣,訪問(wèn)第3個(gè)元素的代碼可以是:varcn=course[2];最大的數(shù)組元素下標(biāo)總是“數(shù)組長(zhǎng)度數(shù)-1”,通常可以用類似下面的方式獲得:varlast_position=course.length-1;下標(biāo)可以用變量替代,例如:vari=3;varcn=course[i];如果指定的下標(biāo)超出了數(shù)組的邊界,則返回值為“undefined”??梢杂迷儋x值的方式來(lái)修改數(shù)組對(duì)應(yīng)位置的元素,如:course[2]="數(shù)據(jù)庫(kù)原理與應(yīng)用";1.Array(cont.)使用數(shù)組對(duì)象的屬性和方法length就是數(shù)組對(duì)象的一個(gè)屬性,通過(guò)它可以獲得一個(gè)數(shù)組的長(zhǎng)度。join(separator):把數(shù)組各個(gè)項(xiàng)用某個(gè)字符(串)連接起來(lái),但并不修改原來(lái)的數(shù)組,如果省略了分隔符,默認(rèn)用逗號(hào)分隔。例如:varcn=course.join('-');//這里用一個(gè)短橫線作為分隔符則變量cn獲得的值是“Java程序設(shè)計(jì)-HTML開(kāi)發(fā)基礎(chǔ)-數(shù)據(jù)庫(kù)原理-計(jì)算機(jī)網(wǎng)絡(luò)”。pop():刪除并返回?cái)?shù)組的最后一個(gè)元素。例如:varcn=course.pop();則變量cn獲得的值是“計(jì)算機(jī)網(wǎng)絡(luò)”。push(newelement1,newelement2,....,newelementX):可向數(shù)組的末尾添加一個(gè)或多個(gè)元素,并返回新的長(zhǎng)度。例如:varlength=course.push("軟件工程","人工智能");則變量length獲得的值6。shift()和unshift()則是在數(shù)組的第一個(gè)元素之前刪除和插入元素。2.DateDate對(duì)象用來(lái)處理和日期時(shí)間相關(guān)的事情。例如,兩個(gè)日期間的前后比較等等。1)定義日期對(duì)象有這么幾種定義日期對(duì)象的方法:newDate()newDate("monthday,yearhours:minutes:seconds")newDate(yr_num,mo_num,day_num)newDate(yr_num,mo_num,day_num,hr_num,min_num,sec_num)具體應(yīng)用如下:vartoday=newDate();//自動(dòng)使用當(dāng)前的日期和時(shí)間作為其初始值varbirthday=newDate(“December17,199103:24:00”);//按照日期字符串設(shè)置對(duì)象birthday=newDate(1991,11,17);//根據(jù)指定的年月日設(shè)置對(duì)象birthday=newDate(1991,11,17,3,24,0);//根據(jù)指定的年月日時(shí)分秒設(shè)置對(duì)象2.Date(cont.)2)獲得日期對(duì)象的各個(gè)時(shí)間元素根據(jù)定義對(duì)象的方法,可以看出日期對(duì)象包括年月日時(shí)分秒等各種信息,Date對(duì)象提供了獲得這些內(nèi)容的方法。例如:getDate():從Date對(duì)象返回一個(gè)月中的某一天(1~31)getDay():從Date對(duì)象返回一周中的某一天(0~6)getMonth():從Date對(duì)象返回月份(0~11)getFullYear(): 從Date對(duì)象以四位數(shù)字返回年份getHours():返回Date對(duì)象的小時(shí)(0~23)getMinutes():返回Date對(duì)象的分鐘(0~59)getSeconds():返回Date對(duì)象的秒數(shù)(0~59))getMilliseconds():返回Date對(duì)象的毫秒(0~999)2.Date(cont.)3)兩個(gè)日期對(duì)象的比較vartoday=newDate();varoneDay=newDate(2007,10,1);if(today>oneDay){document.write("todayisafter2007-10-1");}else{document.write("todayisbefore2007-10-1");}4)調(diào)整日期對(duì)象的日期和時(shí)間vartoday=newDate();today.setDate(today.getDate()+5);//將日期調(diào)整到5天以后,如果碰到跨年月,自動(dòng)調(diào)整。today.setFullYear(2007,10,1);//調(diào)整today對(duì)象到2007-10-1,月和日期參數(shù)可以省略。3.MathMath對(duì)象提供多種算數(shù)常量和函數(shù),執(zhí)行普通的算數(shù)任務(wù)。使用Math對(duì)象無(wú)需像數(shù)組和日期對(duì)象一樣要首先定義一個(gè)變量,可以直接通過(guò)“Math”名來(lái)使用它提供的屬性和方法??梢允褂玫腗ath常量,如Math.PI,見(jiàn)見(jiàn)表10-10。生成介于0.0~1.0之間的一個(gè)偽隨機(jī)數(shù)隨機(jī)數(shù),如:varr=Math.random();
平方根函數(shù)sqrt()方法可返回一個(gè)數(shù)的平方根,如果給定的值小于0,則返回NaN。例如:varx=Math.sqrt(100);//返回10其他函數(shù),如max()和min()函數(shù)、取整函數(shù)ceil()、floor()和round(),exp(),log(),pw()等。4.String字符串是JavaScript程序中使用非常普遍的一種類型。JavaScript為String提供豐富的屬性和方法,來(lái)完成各種各樣的要求。兩種不同的定義字符串對(duì)象的方式vars1="Welcometoyou!";vars2=newString("Welcometoyou!");1)獲取字符串的長(zhǎng)度每個(gè)字符串都有一個(gè)length屬性來(lái)說(shuō)明該字符串的字符個(gè)數(shù),例如:vars1="Welcometoyou!";varlen=s1.length;//s1.length返回15,也就是s1所指向的字符串中有15個(gè)字符4.String(cont.)2)獲取字符串中指定位置的字符通過(guò)charAt()方法可以獲得一個(gè)字符串指定位置上的字符,例如要想獲得"Welcometoyou!"這個(gè)字符串中第四個(gè)字符c,可以這樣:varch=s1.charAt(3);之所以取第四個(gè)字符,卻給charAt()方法傳遞了3這樣的數(shù)值,是因?yàn)樽址淖址恢檬菑?開(kāi)始的。3)字串查找字符串對(duì)象提供了在字符串內(nèi)查找一個(gè)字串是否存在的方法,它們是:indexOf(searchvalue,fromindex):返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置,在一個(gè)字符串中的指定位置從前向后搜索,如果沒(méi)有發(fā)現(xiàn),返回-1。lastIndexOf():可返回一個(gè)指定的字符串值最后出現(xiàn)的位置,在一個(gè)字符串中的指定位置從后向前搜索,如果沒(méi)有發(fā)現(xiàn),返回-1。4.String(cont.)4)字符串的分割split()方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。例如“Welcometoyou!”中的三個(gè)單詞之間都用空格間隔,就可以把這個(gè)字符串按照空格分成三個(gè)字符串。<scripttype=text/javascript>vars1="Welcometoyou!";varsub=s1.split("");//sub是一個(gè)數(shù)組for(vari=0;i<sub.length;i++){ document.write(sub[i]);document.write("<br>");}</script>4.String(cont.)其他函數(shù)字符串的顯示風(fēng)格(程序10-17)big()small()bold()大小寫轉(zhuǎn)換toLocaleLowerCase():把字符串轉(zhuǎn)換為小寫toLocaleUpperCase():把字符串轉(zhuǎn)換為大寫toLowerCase():把字符串轉(zhuǎn)換為小寫toUpperCase():把字符串轉(zhuǎn)換為大寫課堂練習(xí)如何把7.25四舍五入為最接近的整數(shù)?()A.round(7.25)B.rnd(7.25)C.Math.round(7.25)D.Math.rnd(7.25)如何求得2和4中最大的數(shù)?()A.Math.ceil(2,4)B.Math.max(2,4)C.ceil(2,4)D.top(2,4)定義JavaScript數(shù)組的正確方法是?()vartxt=newArray="tim","kim","jim"vartxt=newArray(1:"tim",2:"kim",3:"jim")vartxt=newArray("tim","kim","jim")vartxt=newArray:1=("tim")2=("kim")3=("jim")10.6.3文檔-Document對(duì)一個(gè)html頁(yè)面中的各個(gè)元素進(jìn)行控制是JavaScript程序最精彩的地方。Document對(duì)象代表了整個(gè)HTML文檔,可用來(lái)訪問(wèn)頁(yè)面中的所有元素。Document對(duì)象是Window對(duì)象的一個(gè)部分,雖然可通過(guò)window.document屬性來(lái)訪問(wèn),但編程中,可以直接使用document名稱來(lái)訪問(wèn)頁(yè)面元素。頁(yè)面就是按照規(guī)則由一系列如<html>、<body>、<form>和<input>等各種標(biāo)簽組成的規(guī)范文檔這些標(biāo)簽之間存在著一定的關(guān)系,例如<body>被<html>所包含,而<form>標(biāo)簽又被包含在<body>內(nèi),這些頁(yè)面元素的關(guān)系好像倒垂的一棵樹(shù)一樣,而頂端就是<html>,圖10-10的文檔樹(shù)就是對(duì)程序10-18的結(jié)構(gòu)說(shuō)明。10.6.3文檔-Document(cont.)圖10-10程序10-18的文檔結(jié)構(gòu)圖document10.6.3文檔-Document(cont.)1)通過(guò)ID訪問(wèn)頁(yè)面元素語(yǔ)法:document.getElementById(id)參數(shù):id。必選項(xiàng),為字符串(String)返回值:對(duì)象。返回相同id對(duì)象中的第一個(gè),如果無(wú)符合條件的對(duì)象,則返回null。
例如:varuserName=document.getElementById("userName").value;使用該方法需要注意:在頁(yè)面開(kāi)發(fā)時(shí),最好給每一個(gè)需要交互的元素設(shè)定一個(gè)唯一的id便于查找;getElementById()返回的是一個(gè)頁(yè)面元素的引用,例如在圖10-8種出現(xiàn)的所有元素都可以通過(guò)它來(lái)獲得;如果頁(yè)面上出現(xiàn)了不同元素使用了同一個(gè)id,則該方法返回的只是第一個(gè)找到的頁(yè)面元素;10.6.3文檔-Document(cont.)2)通過(guò)Name訪問(wèn)頁(yè)面元素除了通過(guò)一個(gè)頁(yè)面元素的id可以得到該對(duì)象的引用,程序也可以通過(guò)名字來(lái)訪問(wèn)頁(yè)面元素。語(yǔ)法:document.getElementsByName(name)參數(shù):name:必選項(xiàng)為字符串(String)返回值:數(shù)組對(duì)象;如果無(wú)符合條件的對(duì)象,則返回空數(shù)組由于該方法的返回值是一個(gè)數(shù)組,所以可以通過(guò)位置下標(biāo)來(lái)獲得頁(yè)面元素,例如:varuserNameInput=document.getElementsByName("userName");varuserName=userNameInput[0].value;10.6.3文檔-Document(cont.)使用該方法需要注意:哪怕一個(gè)名字指定的頁(yè)面元素確實(shí)只有一個(gè),該方法也返回一個(gè)數(shù)組,所以在上面代碼段中,用位置下標(biāo)0本來(lái)獲得“用戶名輸入框”元素,如userNameInput[0];如果指定名字,在頁(yè)面中沒(méi)有對(duì)應(yīng)的元素存在,則返回一個(gè)長(zhǎng)度為0的數(shù)組,程序中可以通過(guò)判斷數(shù)組的length屬性值是否為0來(lái)來(lái)判斷是否找到了對(duì)應(yīng)的元素。10.6.3文檔-Document(cont.)3)通過(guò)標(biāo)簽名訪問(wèn)頁(yè)面元素除了通過(guò)id和name可以獲得對(duì)應(yīng)的元素外,還可以通過(guò)指定的標(biāo)簽名稱,來(lái)獲得頁(yè)面上所有這一類型的元素,如input元素。語(yǔ)法:document.getElementsByTagName(tagname)參數(shù):tagname:必選項(xiàng)為字符串(String)
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 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ì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年四川貨運(yùn)從業(yè)資格考試模擬考試題目答案
- 2025加工承攬合同書(shū)
- 洛陽(yáng)文化旅游職業(yè)學(xué)院《電氣系統(tǒng)仿真》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025汽車及運(yùn)輸合同書(shū)
- 建筑加固灰工施工合同
- 2024年書(shū)畫(huà)藝術(shù)品交易合同3篇
- 環(huán)保公司水電節(jié)能措施
- 2024事業(yè)單位臨時(shí)工聘任合同模板:后勤保障服務(wù)2篇
- 知識(shí)產(chǎn)權(quán)投資與融資
- 2025捐贈(zèng)合同 標(biāo)準(zhǔn)版模板全
- 海警法智慧樹(shù)知到答案章節(jié)測(cè)試2023年大連海洋大學(xué)
- 手機(jī)號(hào)碼段歸屬地?cái)?shù)據(jù)庫(kù)(2016年3月)
- 《借貸記賬法》教學(xué)設(shè)計(jì)
- 【試題】人教版二年級(jí)下數(shù)學(xué)暑假每日一練
- 衛(wèi)生院關(guān)于開(kāi)展?jié)M意度調(diào)查工作的實(shí)施方案
- 紡織材料學(xué)選擇題
- YY/T 0916.1-2021醫(yī)用液體和氣體用小孔徑連接件第1部分:通用要求
- 醫(yī)務(wù)科工作思路(計(jì)劃)6篇
- GB/T 13912-2020金屬覆蓋層鋼鐵制件熱浸鍍鋅層技術(shù)要求及試驗(yàn)方法
- GA 614-2006警用防割手套
- 智慧購(gòu)物中心整體解決方案
評(píng)論
0/150
提交評(píng)論