第10章 JavaScript程序基礎_第1頁
第10章 JavaScript程序基礎_第2頁
第10章 JavaScript程序基礎_第3頁
第10章 JavaScript程序基礎_第4頁
第10章 JavaScript程序基礎_第5頁
已閱讀5頁,還剩113頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

第10章JavaScript程序基礎主要內容理解JavaScript語言的作用和執(zhí)行方式掌握在網(wǎng)頁中使用客戶端腳本的方法掌握JavaScript語言的基本語法認識核心語言對象,使用核心語言對象的方法和屬性掌握對頁面中的不同種類的事件響應編程能夠利用JavaScript語言完成對文檔內容的交互了解客戶端常見JavaScript特效程序的編程掌握JavaScript程序的一般調試技術10.1JavaScript起步

JavaScript可以做什么作為一個運行于瀏覽器環(huán)境中的語言,JavaScript被設計用來向HTML頁面添加交互行為,利用它可以完成以下任務??梢詫⑽谋緞討B(tài)的放入HTML頁面。類似于這樣的一段JavaScript聲明可以將一段可變的文本放入HTML頁面:document.write("<h1>"+name+"</h1>")可以對事件做出響應。例如頁面載入完成或者當用戶單擊某個HTML元素時,調用指定的JavaScript程序??梢宰x寫HTML元素。JavaScript程序可以讀取及改變當前HTML頁面內某個元素的內容,如文本框中的輸入內容??杀挥脕眚炞C用戶輸入的數(shù)據(jù)。在數(shù)據(jù)被提交到服務器之前,JavaScript可被用來驗證這些數(shù)據(jù)??杀挥脕頇z測訪問者的瀏覽器,并根據(jù)所檢測到的瀏覽器,為這個瀏覽器載入相應的頁面??杀挥脕韯?chuàng)建cookies,用來存儲和取回位于訪問者的計算機中的信息。可利用Ajax技術來完成和服務器的直接通信,無刷新的修改當前HTML頁面內容。10.1JavaScript起步一個實例<!--程序10-1--><html><title>這是我的第一個JavaScript程序</title><body><scripttype="text/javascript">document.write("歡迎進入JavaScript學習之旅!");</script></body></html>10.1JavaScript起步基本語法:<scripttype="text/javascript">…</script>語法說明:script:腳本標記。它必須以<scripttype="text/javascript">開頭,以<script>結束,界定程序開始的位置和結束的位置。script頁面中的位置決定了什么時候裝載它們,如果希望在其他所有內容之前裝載腳本,就要確保腳本在head部分。10.1.3JavaScript放置和運行

代碼的位置位于HEAD部分的腳本如果把腳本放置到head部分,在頁面載入的時候,就同時載入了代碼。通常這個區(qū)域的JavaScript代碼是為body區(qū)域程序代碼所調用的事件處理函數(shù)。位于BODY部分的腳本當你把腳本放置于body部分后,在頁面載入時不屬于某個函數(shù)的腳本就會被執(zhí)行,執(zhí)行后的輸出就成為頁面的內容。JavaScript程序本身不能獨立存在,它是依附于某個HTML頁面,在瀏覽器端運行的。10.1.3JavaScript放置和運行(cont.)位于Head部分的代碼實例<html><title>這是我的第一個JavaScript程序</title><head><scripttype="text/javascript">functionshow(){ alert("歡迎進入JavaScript學習之旅!");}</script></head> <bodyonload="show()"></body></html>10.1.3JavaScript放置和運行(cont.)代碼的位置(cont.)直接位于事件處理部分的代碼中<html><title>這是我的第一個JavaScript程序</title><bodyonload='alert("歡迎進入JavaScript學習之旅!");'></body></html>代碼的位置(cont.)位于網(wǎng)頁之外的單獨腳本文件優(yōu)點:復用、共享<html><head> <scriptsrc="xxx.js"></script></head><body></body></html>10.2JavaScript程序作為一種嵌入到html頁面內的解釋型程序設計語言,JavaScript腳本語言的基本構成是由語句、函數(shù)、對象、方法、屬性等來實現(xiàn)編程的,在程序結構上同樣是有順序、分支和循環(huán)三種基本結構。

10.2.1語句和語句塊

1.語句JavaScript語句是發(fā)給瀏覽器的命令,這些命令的作用是告訴瀏覽器要做的事情。例如:document.write("歡迎進入JavaScript學習之旅!");語句類型變量聲明語句;輸入輸出語句;表達式語句;程序流向控制語句;返回語句。10.2.1語句和語句塊(cont.)2.語句塊語句塊就是用“{”和“}”封閉起來的若干條語句。<scripttype="text/javascript">varcolor=”red”;if(color==”red”){document.write("現(xiàn)在顏色是紅色!");alert("現(xiàn)在顏色是紅色!");}</script>10.2.1語句和語句塊(cont.)3.代碼代碼就是由若干條語句或語句塊構成的執(zhí)行體。瀏覽器按照代碼編寫的邏輯順序逐行執(zhí)行,直至碰到結束符號或者返回語句。10.2.3函數(shù)1.函數(shù)的構成函數(shù)代表了一種特定的功能,一般是由若干條語句構成的。函數(shù)的基本語法如下面一樣?;菊Z法:function函數(shù)名(參數(shù)1,參數(shù)2,...參數(shù)N){函數(shù)體;}語法說明:組成一個函數(shù)必須有“function”關鍵字、自定義的函數(shù)名、放在小括號中的可選參數(shù)(可以沒有參數(shù),但括號必須保留)、以及包含在大括號內的由若干條語句構成的函數(shù)體。注意:不能在其他語句或其自身中嵌套function語句,也就是說,每個函數(shù)聲明都是獨立的。10.2.3函數(shù)(cont.)<!--程序10-4--><html><head><scripttype="text/javascript"> functionwelcome(name){ alert(name+",歡迎您進入函數(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ù)變量的作用就是用來接收函數(shù)調用者傳遞過來的參數(shù)。實參:括號里的“李小璐”就是實際參數(shù)值,簡稱“實參”;形參:在函數(shù)聲明時的“name”就是對應的“形參”,函數(shù)運行時,就用變量名name來代表實際的值“李小璐”參與到函數(shù)體代碼中的語句。函數(shù)聲明時的參數(shù)代表了函數(shù)在執(zhí)行時需要這些參數(shù)接收傳過來的值,并在代碼中具體應用,因此,聲明函數(shù)的形式參數(shù)時應該事先明確每個參數(shù)的作用。10.2.3函數(shù)(cont.)具體來講,Javascript函數(shù)的參數(shù)是可選的。它有下面幾個特點:javascript本身是弱類型,所以,它的函數(shù)參數(shù)也沒有類型檢查和類型限定,一切都要靠編程者自己去進行檢查;一般情況下,實參和形參要一一對應;實參的個數(shù)可以和形參的個數(shù)不匹配。盡管在函數(shù)聲明時,可以定義要有3個參數(shù),而在實際的使用中,可以傳任意個參數(shù)給這個函數(shù)。它的識別僅僅是依靠函數(shù)名,這與其他語言中的函數(shù)調用有很大的不同。如果函數(shù)在執(zhí)行時,發(fā)現(xiàn)參數(shù)不夠,不夠的參數(shù)被設置為undefined類型。10.2.3函數(shù)(cont.)利用arguments處理實參每一個函數(shù)體內都內置地存在著一個對象arguments,它是一個類似數(shù)組的對象,通過它可以查看函數(shù)當前有幾個傳遞來的參數(shù)(并非定義的形式參數(shù)),各個參數(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.調用函數(shù)函數(shù)必須被調用才能發(fā)揮作用,程序10-3已經(jīng)展示了函數(shù)的調用過程。具體調用規(guī)則是:函數(shù)必須通過名字加上括號才能調用,如程序10-4中welcome(),括號必不可少;函數(shù)調用時,必須滿足參數(shù)傳遞的要求,按照形式參數(shù)的聲明要求,保證類型、順序和個數(shù)的統(tǒng)一。10.2.3函數(shù)(cont.)用return返回函數(shù)的計算結果函數(shù)可以在執(zhí)行后返回一個值來代表執(zhí)行后的結果,當然有些函數(shù)基于功能的需要并不需要返回任何值。函數(shù)返回一個值非常簡單,一般在一個函數(shù)代碼的最后一行是return語句,return的作用有兩點:結束程序的執(zhí)行,也就是說return之后的語句就不會再執(zhí)行了;利用return可以返回一個結果。return語句后可以跟上一個具體的值,也可以是簡單的變量,還可以是一個復雜的表達式。當然,一個函數(shù)也可以沒有返回值,但并不妨礙最后添加一條return語句,明確表示函數(shù)執(zhí)行結束,如show函數(shù)一樣。10.2.3函數(shù)(cont.)functioncompute(radius){ vararea=0; area=pi*radius*radius; returnarea;}functionshow(){//利用document對象,獲得頁面中半徑文本框中的輸入值varradius=document.getElementById('radius').value;//調用compute函數(shù)計算對應的面積vararea=compute(radius);

//將計算出的面積值顯示到面積文本框中document.getElementById('area').value=area;return;//此句可以不要}帶返回值的return語句不帶返回值的return語句注:參見程序10-610.2.3函數(shù)(cont.)5.函數(shù)變量的作用域局部變量當代碼在函數(shù)內聲明了一個變量后,就只能在該函數(shù)中訪問該變量,它們被稱為“局部變量”。當退出該函數(shù)后,這個變量會被撤銷??梢栽诓煌暮瘮?shù)中使用名稱相同的局部變量而互不影響,這是因為一個函數(shù)能夠識別它自己內部定義的每個變量。全局變量如果程序在函數(shù)之外聲明了一個變量,則頁面上的所有函數(shù)都可以訪問該變量,它們被稱為“全局變量”。這些變量的生存期從聲明它們之后開始,在頁面關閉時結束。10.2.3函數(shù)(cont.)示例:程序10-6圖10-6變量生存期示意圖10.2.4常用系統(tǒng)函數(shù)系統(tǒng)函數(shù)JavaScript中的系統(tǒng)函數(shù)又稱內部方法,它與任何對象無關,使用這些函數(shù)不需創(chuàng)建任何實例,可直接使用。1.返回字符串表達式中的值方法名:eval(字符串表達式)例:result=eval(“8+9+5/2”);

eval接受一個字符串類型的參數(shù),將這個字符串作為代碼在上下文環(huán)境中執(zhí)行,并返回執(zhí)行的結果。使用eval函數(shù)需要注意:它是有返回值的,如果參數(shù)字符串是一個表達式,就會返回表達式的值。如果參數(shù)字符串不是表達式,沒有值,那么返回“undefined”;參數(shù)字符串作為代碼執(zhí)行時,是和調用eval函數(shù)的上下文相關的,即其中出現(xiàn)的變量或函數(shù)調用必須在調用eval的上下文環(huán)境中可用。10.2.4常用系統(tǒng)函數(shù)(cont.)2.返回字符的編碼方法名:escape(字符串)這里的參數(shù),字符串是以ISO-Latin-1字符集書寫的字符串。escape函數(shù)將參數(shù)字符串中的特定字符進行編碼,并返回一個編碼后的字符串。它可以對空格、標點符號及其他不位于ASCII字母表的字符進行編碼,除了以下字符:“*@-_+./”。例如:result=escape("&");上句中result的結果是“%26”result=escape("mynameis張華");上句中result的結果是“my%20name%20is%20%u5F20%u534E”,20是空格的16進制編碼,%u5F20%u534E是漢字“張華”的Unicode編碼。10.2.4常用系統(tǒng)函數(shù)(cont.)3.返回字符串ASCII碼方法名:unescape(string)和escape函數(shù)相反,這里的參數(shù)string是一個包含形如“%xx”的字符的字符串,此處xx為兩位十六進制數(shù)值。unescape函數(shù)返回的字符串是一系列ISO-Latin-1字符集的字符。例如:result=unescape("%26");上句中,result的結果是“&”;result=unescape("my%20name%20is%20%u5F20%u534E");上句中result的結果是“mynameis張華”。10.2.4常用系統(tǒng)函數(shù)(cont.)4.返回實數(shù)方法名:parseFloat(string);parseFloat將把其參數(shù)(一個字符串)處理后返回浮點數(shù)值。如果遇到了不是符號(+、-、數(shù)碼(0-9)、小數(shù)點),也不是指數(shù)的字符,就會停止處理,忽略該字符及其以后的所有字符。如果第一個字符就不能轉換為數(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.返回不同進制的數(shù)方法名:parseInt(numbestring,radix);parseInt函數(shù)返回參數(shù)numbestring的第一組連續(xù)數(shù)字。其中radix是數(shù)的進制:如16、10,8、2;numbestring則是一個數(shù)值字符串,允許該字符串包含空格。例如,下面的例子都返回15:parseInt("F",16),parseInt("17",8),parseInt(15.99,10),parseInt("1111",2),parseInt("15*3",10)在解析時,如果字符串的第一個字符不能被轉換成數(shù)字,將返回NaN。下面的例子,都返回“NaN”。parseInt("Hello",8)如果沒有指定轉換基數(shù)radix這個參數(shù),parseInt將依照下列規(guī)則進行:如果字符串以"0x"開始,視為16進制;如果字符串以"0"開始,視為8進制;其他的視為10進制。10.2.4常用系統(tǒng)函數(shù)(cont.)6.判斷是否為數(shù)值方法名:isNaN(testValue);方法對參數(shù)值進行判斷,如果是“NaN”則返回true,否則為false。例如:isNaN("h78");//結果為true;isNaN(78);//結果為false;isNaN("78");//結果為false;10.2.5消息對話框1.alert()Alert("文本");實現(xiàn)了一個簡單的信息告知的功能。2.confirm()方法:confirm("文本");確認框是一個帶有顯示信息和“ok/確認”及“cancel/取消”兩個按鈕對話框,用于使用戶可以驗證或者接受某些信息。當確認框出現(xiàn)后,用戶需要單擊確定或者取消按鈕才能繼續(xù)進行操作。如果用戶單擊確認,那么返回值為true。如果用戶單擊取消,那么返回值為false。10.2.5消息對話框(cont.)Prompt()方法名:prompt("文本","默認值");提示框經(jīng)常用于提示用戶在進入頁面前輸入某個值。當提示框出現(xiàn)后,用戶需要輸入某個值,然后單擊“ok/確認”或“cancel/取消”按鈕才能繼續(xù)操縱。如果用戶單擊確認,那么返回值為輸入的值。如果用戶單擊取消,那么返回值為null。10.2.6注釋程序代碼中添加注釋是為了讓代碼閱讀起來更容易理解,良好的編碼習慣其中就包括及時為自己編寫的代碼加上明確清晰的閱讀說明。1.單行注釋行的注釋以//開始,一般對語句的含義進行說明,可以單獨放在一行,也可以跟在代碼后,放在同一行中。<scripttype="text/javascript">、

//函數(shù)show()是在頁面加載時被調用的。

functionshow(){ alert("歡迎進入JavaScript學習之旅!");//一個執(zhí)行時彈出的信息框

}</script>10.2.6注釋(cont.)2.多行注釋多行注釋以/*開頭,以*/結尾,經(jīng)常用來對一個函數(shù)或者語句塊進行說明。3.使用注釋防止代碼執(zhí)行注釋的作用是為代碼添加閱讀說明,但有時也會用來屏蔽某些語句行的執(zhí)行。例如,<scripttype="text/javascript">、

//函數(shù)show()是在頁面加載時被調用的。

functionshow(){ //alert("歡迎進入JavaScript學習之旅!");

}</script>10.3標識符和變量10.3.1關于命名的規(guī)定1.標識符標識符是計算機語言關于命名的規(guī)定。例如程序10-5中函數(shù)名show,變量名radius和area,這些名字都是標識符的實例。JavaScript關于標識符的規(guī)定有:必須使用字母或者下劃線開始;必須使用英文字母、數(shù)字、下劃線組成,不能出現(xiàn)空格或制表符;不能使用JavaScript關鍵詞與JavaScript保留字;不能使用JavaScript語言內部的單詞,比如Infinity,NaN,undefined;大小寫敏感,也就是說x和X是不一樣的兩個標識符。10.3.1關于命名的規(guī)定(cont.)2.關鍵字關鍵字對于JavaScript程序有著特別的含義,它們可標識程序的結構和功能,所以,在編寫代碼時,不能用它們作為自定義的變量名或者函數(shù)名。表10-1列出了JavaScript的關鍵字。10.3.1關于命名的規(guī)定(cont.)3. 保留字除了關鍵字,JavaScript還有一些可能未來擴展時使用的保留字,同樣不能用于標識符的定義,表10-2列出了這些保留字。10.3.2JavaScript的數(shù)據(jù)類型JavaScript不是一種強類型的語言雖然JavaScript變量表面上沒有類型,但是JavaScript內部還是會為變量賦予相應的類型,在將來的版本會增加變量類型。JavaScript有六種數(shù)據(jù)類型。主要的類型有number、String、object以及Boolean類型,其他兩種類型為null和undefined。10.3.2JavaScript的數(shù)據(jù)類型(cont.)1.String字符串類型字符串是用單引號或雙引號來說明的(可以使用單引號來輸入包含引號的字符串),如"張華"、'張華'或者"'張華'"。字符串中每個字符都有特定的位置,首字符從位置0開始,第二個字符在位置1,依此類推。這意味著字符串中的最后一個字符的位置一定是字符串的長度減1。10.3.2JavaScript的數(shù)據(jù)類型(cont.)2.數(shù)值數(shù)據(jù)類型JavaScript支持整數(shù)和浮點數(shù)。整數(shù)可以為正數(shù)、0或者負數(shù);浮點數(shù)可以包含小數(shù)點、也可以包含一個“e”(大小寫均可,在科學記數(shù)法中表示“10的冪”)、或者同時包含這兩項,下面是一些關于數(shù)的表示。正數(shù):1、30、10.3負數(shù)、-1、-30、-10.3有理數(shù):0,正數(shù),負數(shù)統(tǒng)稱為有理數(shù)指數(shù):2e3表示2*10*10*10,5.1e4表示5.1*10*10*10*10八進制數(shù):八進制數(shù)是以0開頭的數(shù),如070代表10進制的56十六進制數(shù):16進制數(shù)是以0x開頭的數(shù),如0x1f代表10進制的31Infinity表示無窮大,這是一個特殊的Number類型NaN,表示非數(shù)(NotaNumber),這是一個特殊的Number類型10.3.2JavaScript的數(shù)據(jù)類型(cont.)3.Boolean類型可能的Boolean值有true和false。這是兩個特殊值,不能用作1和0。4.undefined數(shù)據(jù)類型一個為undefined的值就是指在變量被創(chuàng)建后,但未給該變量賦值之以前所具有的值。5.null數(shù)據(jù)類型null值就是沒有任何值,什么也不表示。6.object類型除了上面提到的各種常用類型外,對象也是JavaScript中的重要組成部分,這部分將在后面介紹。10.3.3變量一個示例vararea=0;area=3.14*radius*radius;這種可以保存執(zhí)行時變化的值的名字,被稱為“變量”,變量相當于是值的容器。var的作用就是聲明(創(chuàng)建)變量,如“vararea=0”就表示聲明一個名字為“area”的變量,該變量的初始值為0。10.3.3變量(cont.)1.聲明變量在使用一個變量保存值之前要做的一個重要的事情就是要事先聲明一下這個變量?;菊Z法:var變量名[=初值][,變量名[=初值]…]語法說明:var是關鍵字,聲明變量時至少要有一個變量,每個變量要起一個合適的名字;變量的起名應該符合標識符的規(guī)定,好的名字應該做到見名知意;可以同時聲明多個變量;可以在聲明變量的同時,直接給變量賦予一個合適的初值。以下是變量聲明的實例。varaccount;vararea=0;varname="張華";varstatus=true;vara,b,c;10.3.3變量(cont.)2.向變量賦值在前面已經(jīng)多次出現(xiàn)向變量賦值的語句。例如,上面在聲明area變量時直接賦了初值0。具體在為變量賦值時,需要注意:變量名在賦值運算符“=”符號的左邊,而需要向變量賦的值在“=”的右側;一個變量在聲明后,可以多次被賦值或使用;可以向一個變量隨時賦值,而且可以賦以不同類型的值。聲明一個變量vartest;定義一個數(shù)字類型的變量areavararea=0;定義一個字符串類型的變量namevarname="張華";另外一種方法來定義一個字符串類型的變量namevarstr=newstring("張華");定義一個邏輯類型的變量statusvarstatus=true;將一個表達式的計算結果賦值給變量areaarea=3.14*radius*radius;用一個var語句定義兩個或多個變量,它們的類型不必一定相同vararea=0,name="張華";注意:雖然一個變量在一個代碼段中可以被賦予不同類型的值,但實際中要杜絕這樣賦值,因為容易導致對代碼理解上的混亂。向未聲明的變量賦值如果在賦值時所賦值的變量還未進行過聲明,該變量會自動聲明。例如:area=0;name="張華";等價于:vararea=0;varname="張華";

這種事先沒有賦值卻直接使用的情況,并不是一個優(yōu)秀程序員的習慣。作為一種良好的編碼規(guī)則,所有的程序員都認為,任何變量都要“先聲明,后使用”。10.3.4轉義字符

轉義字符就是在字符串中無法直接表示的一種字符表示方式,例如:\u后面加4個十六進制數(shù)字可以表示一個字符,如:\u03c6表示Φ。\r表示回車,而\n表示換行,\t表示光標移到下一個輸出位。vars="Hello,\"Mike\"";則變量s的值是:Hello,"Mike"。課堂練習可以在下列哪個HTML元素中放置javascript代碼?()A.<script>B.<javascript>C.<js>D.<scripting>輸出“HelloWorld”的正確javascript語法是?()A.document.write("HelloWorld")B."HelloWorld“C.response.write("HelloWorld")D.("HelloWorld")引用名為“xxx.js”的外部腳本的正確語法是?()A.<scriptsrc="xxx.js">B.<scripthref="xxx.js">C.<scriptname="xxx.js">課堂練習(cont.)外部腳本必須包含<script>標簽嗎?()是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()如何調用名為“myFunction”的函數(shù)?()A.callfunctionmyFunctionB.callmyFunction()C.myFunction()10.4運算符和表達式JavaScript運算符包括:算術運算符、賦值運算符、自增、自減運算符、逗號運算符、關系運算符、邏輯運算符、條件運算符、位運算符,也可以根據(jù)運算符需要操作數(shù)的個數(shù),可以把運算符分為一元運算符、二元運算符或者三元運算符。由操作數(shù)(變量、常量、函數(shù)調用等)和運算符結合在一起構成的式子稱為“表達式”。對應的表達式包括:算術表達式、賦值表達式、自增、自減表達式、逗號表達式、關系表達式、邏輯表達式、條件表達式、位表達式。10.4.1算術數(shù)運算符和表達式JavaScript算術運算符負責算術運算,如表10-4所示。用算術運算符和運算對象(操作數(shù))連接起來符合規(guī)則的式子,稱為算術表達式?;菊Z法:雙元運算符:op1operatorop2單元運算符:opoperatoroperatorop課堂練習varx=26%5;結果?varresult1=5+5; 結果?varresult2=5+"5";結果?varresult3=5+5+"5";結果?vara=10;varb=++a;結果?vara=10;varb=a--;結果?10.4.2賦值運算符和表達式

簡單的賦值運算符由等號(=)實現(xiàn),只是把等號右邊的值賦予等號左邊的變量?;菊Z法:簡單賦值運算:<變量>=<變量>operator<表達式>復合賦值運算:<變量>operator=<表達式>語法說明:賦值運算是最常用的一種運算符,通過賦值,可以把一個值用一個變量名來表示。例如,area=3.14*radius*radius;等號右側的表達式在復合賦值表達式中被認為是一個整體。10.4.3關系運算符和表達式關系運算符和表達式關系運算符負責判斷兩個值是否符合給定的條件,包括的運算符見表10-6。用關系運算符和運算對象(操作數(shù))連接起來,符合規(guī)則的式子,稱”關系表達式”關系表達式返回的結果為“true”或“false”,分別代表符合給定的條件或者不符合。關系表達式一般用于分支和循環(huán)控制語句中,根據(jù)邏輯值的真假來決定程序的執(zhí)行流向,一個簡單的判斷最大值的例子見程序10-7?;菊Z法:op1operatorop2語法說明:1.不同類型間的比較當兩個操作數(shù)的類型不同進行比較時,遵循以下規(guī)則:無論何時比較一個數(shù)字和一個字符串,都會把字符串轉換成數(shù)字,然后按照數(shù)字順序比較它們,如果字符串不能轉換成數(shù)字,則比較結果為false;如果一個運算數(shù)是Boolean值,在檢查相等性之前,把它轉換成數(shù)字值。false轉換成0,true為1;如果一個運算數(shù)是對象,另一個是字符串,在檢查相等性之前,要嘗試把對象轉換成字符串;如果一個運算數(shù)是對象,另一個是數(shù)字,在檢查相等性之前,要嘗試把對象轉換成數(shù)字。2.=與==的區(qū)別“=”是賦值運算符,用來把一個值賦予一個變量,比如vari=5;“==”是相等運算符,用來判斷兩個操作數(shù)是否相等,并且會返回true或false,比如a==b。3.===與!==“===”代表恒等于,不僅判斷數(shù)值,而且判斷類型。比如:vara=5,b="5";varresult1=(a==b);//結果是truevarresult2=(a===b);//結果是false這里,a是數(shù)值類型,b是字符串類型,雖然數(shù)值相等但是類型不等,同樣的“!==”代表恒不等于,也是要判斷數(shù)值與類型。4.相等性判斷的特殊情況10.4.4邏輯運算符和表達式

基本語法:雙元運算符:boolean_expressionoperatorboolean_expression邏輯非運算符:!boolean_expression語法說明:邏輯運算符包括兩個雙元運算符邏輯或(||)和邏輯與(&&),要求兩端的操作數(shù)類型均為邏輯值,邏輯非!則是一個單元運算符,它們的運算結果還是邏輯值,其使用的場合和關系表達式類似,一般都用于控制程序的流向,如分支條件、循環(huán)條件等等。10.4.5條件運算符和表達式條件運算符是一個3元運算符,也就是該運算涉及到了3個操作數(shù)?;菊Z法:variable=boolean_expression?true_value:false_value;語法說明:該條件表達式表示,如果boolean_expression的結果為true,則variable的值取true_value,否則取false_value。例如,在程序10-7程序showMax()函數(shù)中if(v1>v2)那個判斷,可以改為如下代碼:varmax=(v1>v2)?v1:v2;document.getElementById('max').value=max;10.4.6其他運算符和表達式

逗號運算符逗號運算符負責連接多個JavaScript表達式,允許在一條語句中執(zhí)行多個表達式,例如:varx=1,y=2,z=3;x=y+z,y=x+z;一元加法和一元減法一元加法和一元減法和數(shù)學上的用法是一致的,如:varx=10;x=+10;//x的值還是10,沒有影響x=-10;//x的值是-10,對值求反但是當操作數(shù)是字符串時,其功能卻有一些特別之處,如:vars="20";varx=+s;//這條語句把字符串s轉換成了數(shù)值類型,賦值給變量xvary=-s;//這條語句把字符串s轉換成了數(shù)值類型,賦值給變量y,其值為-2010.4.6其他運算符和表達式

位運算符位運算是在數(shù)的二進制位的基礎上進行的操作,具體的位運算符見表10-9所示。10.5JavaScript程序控制結構從形式上看,程序就是為了達到某種目的而將若干條語句組合在一起的指令集。JavaScript程序的主要特點是解決人機交互問題。編寫任何程序首先應該弄明白要解決的問題是什么,為了解決問題,需要對什么樣的數(shù)據(jù)進行處理,這些數(shù)據(jù)是如何在程序中出現(xiàn)的(也就是如何獲得它們),又該用什么樣的語句(也就是算法)來處理它們,最后達到預期的目的。JavaScript程序設計分為兩種方式面向過程程序設計與面向對象程序設計。每種方法都是對數(shù)據(jù)結構與算法的描述。數(shù)據(jù)結構包括前面介紹的各種數(shù)據(jù)類型以及后面將要介紹的更復雜的引用類型,而算法則比較簡單,任何算法都可以由最基本的順序、分支和循環(huán)三種結構組成。10.5.1順序程序順序程序是最基本的程序設計思路。順序程序執(zhí)行是按照語句出現(xiàn)的順序一步一步從上到下運行,直到最后一條語句。從總體上看,任何程序都是按照語句出現(xiàn)的先后順序,被逐句執(zhí)行。圖10-7程序10-6的show()函數(shù)語句執(zhí)行順序課堂練習寫一段代碼,定義三個整數(shù)變量并任意賦初值,求它們的平均值并用alert語句輸出。信函的重量不超過100g時,每20g付郵資80分,即信函的重量不超過20g時,付郵資80分,信函的重量超過20g,不超過40克時,付郵資160分,編寫程序輸入信函的重量,輸出應付的郵資(注意:本題不使用分支結構,使用順序結構,假設輸入的信函重量不超過100克)。10.5.2分支程序在編寫代碼時,經(jīng)常需要根據(jù)不同的條件完成不同的行為??梢栽诖a中使用條件語句來完成這個任務。在JavaScript中,可以使用下面幾種條件語句:if語句:在一個指定的條件成立時執(zhí)行代碼。if...else語句:在指定的條件成立時執(zhí)行代碼,當條件不成立時執(zhí)行另外的代碼。if...elseif....else語句:使用這個語句可以選擇執(zhí)行若干塊代碼中的一個。switch語句:使用這個語句可以選擇執(zhí)行若干塊代碼中的一個。10.5.2分支程序(cont.)if語句如果希望指定的條件成立時執(zhí)行代碼,就可以使用這個語句?;菊Z法:if(條件){條件成立時執(zhí)行代碼;}語法說明:假如條件成立,即條件的值為true,則執(zhí)行大括號里面的語句,如果不成立,則跳過括號里面的語句,繼續(xù)執(zhí)行大括號后面的其他語句。這里的條件可以是一個關系表達式,如a>b,也可以是一個邏輯表達式,如a>b&&a<c,或者其他能夠表示為真的表達式或值。課堂練習如何編寫當i等于5時執(zhí)行某些語句的條件語句?()A.if(i==5)B.ifi=5thenC.ifi=5D.ifi==5then如何編寫當i不等于5時執(zhí)行某些語句的條件語句?()A.if=!5thenB.if<>5C.if(i<>5)D.if(i!=5)10.5.2分支程序(cont.)if...else語句基本語法:if(條件){條件成立時執(zhí)行此代碼;}else{條件不成立時執(zhí)行此代碼;}語法說明:假如條件成立,即條件的值為true,則執(zhí)行其后大括號里面的語句,如果不成立,則執(zhí)行else大括號中的語句。課堂練習信函的重量不超過100g時,每20g付郵資80分,即信函的重量不超過20g時,付郵資80分,信函的重量超過20g,不超過40克時,付郵資160分,編寫程序輸入信函的重量,輸出應付的郵資10.5.2分支程序(cont.)3.多重if...else語句if(條件1){條件1成立時執(zhí)行代碼;}elseif(條件2){條件2成立時執(zhí)行代碼;}……elseif(條件x){條件x成立時執(zhí)行代碼;}else{所有條件均不成立時執(zhí)行代碼;}10.5.2分支程序(cont.)4.嵌套的if...else語句有時候,在一種判斷條件下的語句中,根據(jù)情況可以繼續(xù)使用if語句,這種情況成為if的嵌套。if(條件1){if(條件2){語句1;}else{語句2;}}else{//隱含的條件3if(條件4){

語句4;}else{

語句5;}}10.5.2分支程序(cont.)5.switch語句switch語句也是用于分支的語句,和if語句不同的是,它是用于對多種可能相等情況的判斷,解決了if…else語句使用過多,邏輯不清的弊端。語法說明:在switch語句執(zhí)行時,各個case判斷后需要執(zhí)行的語句都應該放在緊隨的一對大括號內,當switch的"變量或表達式"的值與某個case后面的常量相等時,就執(zhí)行常量后面的語句,碰到“break”之后跳出switch分支選擇語句,當所有的case后面的常量都不符合"條件表達式"時,執(zhí)行default后面的語句n。switch(變量或表達式){case常量:{

語句a;}break;...case常量:{

語句f;}break;default:{

語句n;}}10.5.2分支程序(cont.)具體在使用switch語句時,還需要注意:順序執(zhí)行case后面的每個語句,最后執(zhí)行default下面的語句n;每個case后面的語句可以是一條,也可以是多條,但要使用{}包括起來;每個case后面的值必須互不相同;關鍵字break會使代碼結束一個case后的語句執(zhí)行,跳出switch語句。如果沒有關鍵字break,代碼執(zhí)行就會繼續(xù)進入下一個case,并且不會再對照判斷,依次執(zhí)行后續(xù)所有case的語句,直到switch語句結束,或者碰到一個break;default語句并不是不可缺少的,而且default語句也不必總在最后,但建議放在最后。default語句表示其他情況都不匹配后,默認執(zhí)行的語句。一般在使用switch語句時,case后面總跟一個常量,但有時可以是一個有值的變量,10.5.3循環(huán)程序1.for循環(huán)for(初始化表達式;判斷表達式;循環(huán)表達式){

需循環(huán)執(zhí)行的代碼}語法說明初始化表達式在循環(huán)開始前執(zhí)行,一般用來定義循環(huán)變量;判斷表達式就是循環(huán)的條件,當表達式結果為true,循環(huán)繼續(xù)執(zhí)行,否則,結束循環(huán),跳至循環(huán)后的語句繼續(xù)執(zhí)行程序;循環(huán)表達式在每次循環(huán)執(zhí)行后都將被執(zhí)行,然后再進行判斷表達式的計算,來決定是否進行下次循環(huán)。當循環(huán)體只有一條語句時,可以不用大括號括起來(建議使用),但有一條以上時,必須用大括號括起來,以表示一個完整的循環(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時循環(huán)執(zhí)行代碼?;菊Z法:while(表達式){需執(zhí)行的代碼;}語法說明:while為不確定性循環(huán),當表達式的結果為真true時,執(zhí)行循環(huán)中的語句;表達式為假false時不執(zhí)行循環(huán),跳至循環(huán)語句后,繼續(xù)執(zhí)行其他語句,其執(zhí)行流程見圖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)程序在初次運行時會首先執(zhí)行一遍其中的代碼,然后當指定的條件為true時,它會繼續(xù)這個循環(huán),其執(zhí)行流程見圖10-10所示?;菊Z法:do{

需執(zhí)行的代碼;}while(表達式)語法說明:和while一樣,在利用do...while構建循環(huán)時,同樣需要注意:應該使用大括號{}將循環(huán)體語句包含起來(一條語句也應使用大括號);在循環(huán)體中應該包含使循環(huán)退出的語句,比如上例的i++(否則循環(huá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í)行到尾,然而情況并不都是如此,有時在循環(huán)中,可能碰到一些需要提前中止循環(huán)的情況,或者放棄某次循環(huán)的情況,程序10-14,綜合顯示了它們的作用。break語句在函數(shù)searchFirst()中,可以看到循環(huán)中的break語句一旦被碰到,無論循環(huán)還有多少次,都不會再執(zhí)行了,break語句的作用就是立即結束循環(huán),轉到循環(huán)后的語句繼續(xù)執(zhí)行。continue語句而在total()函數(shù),continue語句的作用則是本次循環(huán)結束了,后面的語句本次不再執(zhí)行,開始下一次的循環(huán),如果還有的話。10.5.3循環(huán)程序(cont.)for...in循環(huán)for...in循環(huán)是另外一種特殊用途的循環(huán)?;菊Z法:for(變量in對象){

執(zhí)行代碼;}語法說明:該循環(huán)用來對數(shù)組或者對象的屬性進行操作。例如:程序10-15的代碼逐個將window對象的每個屬性進行了輸出。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)的嵌套一個循環(huán)內又包含著另一個完整的循環(huán)結構,稱為循環(huán)的嵌套。內嵌的循環(huán)中還可以繼續(xù)嵌套循環(huán),這就是多層循環(huán)了。課堂練習程序10-16,通過雙重循環(huán)在頁面上輸出了一個九九乘法表。課堂練習下面那個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對象JavaScript既支持傳統(tǒng)的結構化編程,同時也支持面向對象的編程(OOP),用戶在編程時可以定義自己的對象類型。本節(jié)將重點介紹內建的JavaScript對象,使用瀏覽器的內部對象系統(tǒng),可實現(xiàn)與HTML文檔乃至瀏覽器本身進行交互。建立對象的目的是將圍繞對象的屬性和方法,封裝在一起提供給程序設計人員使用,從而減輕編程人員的勞動,提高設計Web頁面的能力。例如,通過document對象,可以獲得頁面表單內的輸入內容,也可以直接用程序更改一個表格的顯示樣式。10.6.1對象簡介1.訪問對象的屬性和方法訪問一個對象的屬性和方法都可以通過下面的方式進行?;菊Z法:對象名稱.屬性名對象名稱.方法名()語法說明:訪問一個對象的屬性和方法時,一定要指明是哪一個對象,通過圓點運算符來訪問。訪問對象的方法時,括號是必須有的,無論是否需要提供參數(shù)值。例如:vars=“Welcometoyou!”;這條語句創(chuàng)建了一個字符串對象,通過變量名s來引用它。要想知道它的字符個數(shù),可以這樣:varlen=s.length;如果希望獲得一個字符串某個位置的字符,可以這樣:varch=s.charAt(3);10.6.1對象簡介(cont.)2.JavaScript的對象類型簡單的來分,JavaScript的對象類型可以分為四類:JavaScript本地對象(native

object),本身提供的類型,如Math等,這種對象無需具體定義,直接就可以通過名稱引用它們的屬性和方法,如Math.Random();JavaScript的內建對象(built-inobject),如Array,String等。這些對象獨立于宿主環(huán)境,在JavaScript程序內有程序員定義具體對象,并可以通過對象名來使用;宿主對象(hostobject)是被瀏覽器支持的,目的是為了能和被瀏覽的文檔乃至瀏覽器環(huán)境交互,如document,window和frames等;自定義對象,是程序員基于需要自己定義的對象類型。10.6.2核心對象JavaScript的核心對象包括:Array,Boolean,Date,F(xiàn)unction,Math,Number,Object和String等。這些對象同時在客戶端和服務器端的JavaScript中使用。1.Array數(shù)組對象用來在單獨的變量名中存儲一系列的值,避免了同時聲明很多變量使得程序結構變得復雜,導致難于理解和維護。數(shù)組一般用在需要對一批同類的數(shù)據(jù)逐個進行一樣的處理中。通過聲明一個數(shù)組,將相關的數(shù)據(jù)存入數(shù)組,使用循環(huán)等結構對數(shù)組中的每個元素進行操作(使用循環(huán)體的語句體)。1)定義數(shù)組并直接初始化數(shù)組元素varcourse=newArray("Java程序設計","HTML開發(fā)基礎","數(shù)據(jù)庫原理","計算機網(wǎng)絡");或者:varcourse=["Java程序設計","HTML開發(fā)基礎","數(shù)據(jù)庫原理","計算機網(wǎng)絡"];1.Array(cont.)2)先定義數(shù)組,后初始化數(shù)組元素varcourse=newArray();course[0]="Java程序設計";course[1]="HTML開發(fā)基礎";course[2]="數(shù)據(jù)庫原理";course[3]="計算機網(wǎng)絡";3)數(shù)組的長度可以通過“數(shù)組名.length”來獲得指定數(shù)組的實際長度數(shù)組的元素4)一般而言,數(shù)組中存放的應該都是同類型的數(shù)據(jù),例如字符串、整數(shù)、實數(shù)、同樣類型的對象等,但由于JavaScript語言是一個弱類型的語言,JavaScript同樣不檢查存入數(shù)組的每個元素的類型是否一致,也就是說,可以不一樣。

1.Array(cont.)5)訪問/修改數(shù)組元素訪問數(shù)組的元素可以通過下標(也就是元素在數(shù)組中存放的順序)來訪問。數(shù)組的下標總是從0開始,也就是說,數(shù)組的第一個元素放在下標為0的位置,訪問第一個元素的代碼可以這樣寫:varcn=course[0];同樣,訪問第3個元素的代碼可以是:varcn=course[2];最大的數(shù)組元素下標總是“數(shù)組長度數(shù)-1”,通常可以用類似下面的方式獲得:varlast_position=course.length-1;下標可以用變量替代,例如:vari=3;varcn=course[i];如果指定的下標超出了數(shù)組的邊界,則返回值為“undefined”??梢杂迷儋x值的方式來修改數(shù)組對應位置的元素,如:course[2]="數(shù)據(jù)庫原理與應用";1.Array(cont.)使用數(shù)組對象的屬性和方法length就是數(shù)組對象的一個屬性,通過它可以獲得一個數(shù)組的長度。join(separator):把數(shù)組各個項用某個字符(串)連接起來,但并不修改原來的數(shù)組,如果省略了分隔符,默認用逗號分隔。例如:varcn=course.join('-');//這里用一個短橫線作為分隔符則變量cn獲得的值是“Java程序設計-HTML開發(fā)基礎-數(shù)據(jù)庫原理-計算機網(wǎng)絡”。pop():刪除并返回數(shù)組的最后一個元素。例如:varcn=course.pop();則變量cn獲得的值是“計算機網(wǎng)絡”。push(newelement1,newelement2,....,newelementX):可向數(shù)組的末尾添加一個或多個元素,并返回新的長度。例如:varlength=course.push("軟件工程","人工智能");則變量length獲得的值6。shift()和unshift()則是在數(shù)組的第一個元素之前刪除和插入元素。2.DateDate對象用來處理和日期時間相關的事情。例如,兩個日期間的前后比較等等。1)定義日期對象有這么幾種定義日期對象的方法: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)具體應用如下:vartoday=newDate();//自動使用當前的日期和時間作為其初始值varbirthday=newDate(“December17,199103:24:00”);//按照日期字符串設置對象birthday=newDate(1991,11,17);//根據(jù)指定的年月日設置對象birthday=newDate(1991,11,17,3,24,0);//根據(jù)指定的年月日時分秒設置對象2.Date(cont.)2)獲得日期對象的各個時間元素根據(jù)定義對象的方法,可以看出日期對象包括年月日時分秒等各種信息,Date對象提供了獲得這些內容的方法。例如:getDate():從Date對象返回一個月中的某一天(1~31)getDay():從Date對象返回一周中的某一天(0~6)getMonth():從Date對象返回月份(0~11)getFullYear(): 從Date對象以四位數(shù)字返回年份getHours():返回Date對象的小時(0~23)getMinutes():返回Date對象的分鐘(0~59)getSeconds():返回Date對象的秒數(shù)(0~59))getMilliseconds():返回Date對象的毫秒(0~999)2.Date(cont.)3)兩個日期對象的比較vartoday=newDate();varoneDay=newDate(2007,10,1);if(today>oneDay){document.write("todayisafter2007-10-1");}else{document.write("todayisbefore2007-10-1");}4)調整日期對象的日期和時間vartoday=newDate();today.setDate(today.getDate()+5);//將日期調整到5天以后,如果碰到跨年月,自動調整。today.setFullYear(2007,10,1);//調整today對象到2007-10-1,月和日期參數(shù)可以省略。3.MathMath對象提供多種算數(shù)常量和函數(shù),執(zhí)行普通的算數(shù)任務。使用Math對象無需像數(shù)組和日期對象一樣要首先定義一個變量,可以直接通過“Math”名來使用它提供的屬性和方法??梢允褂玫腗ath常量,如Math.PI,見見表10-10。生成介于0.0~1.0之間的一個偽隨機數(shù)隨機數(shù),如:varr=Math.random();

平方根函數(shù)sqrt()方法可返回一個數(shù)的平方根,如果給定的值小于0,則返回NaN。例如:varx=Math.sqrt(100);//返回10其他函數(shù),如max()和min()函數(shù)、取整函數(shù)ceil()、floor()和round(),exp(),log(),pw()等。4.String字符串是JavaScript程序中使用非常普遍的一種類型。JavaScript為String提供豐富的屬性和方法,來完成各種各樣的要求。兩種不同的定義字符串對象的方式vars1="Welcometoyou!";vars2=newString("Welcometoyou!");1)獲取字符串的長度每個字符串都有一個length屬性來說明該字符串的字符個數(shù),例如:vars1="Welcometoyou!";varlen=s1.length;//s1.length返回15,也就是s1所指向的字符串中有15個字符4.String(cont.)2)獲取字符串中指定位置的字符通過charAt()方法可以獲得一個字符串指定位置上的字符,例如要想獲得"Welcometoyou!"這個字符串中第四個字符c,可以這樣:varch=s1.charAt(3);之所以取第四個字符,卻給charAt()方法傳遞了3這樣的數(shù)值,是因為字符串的字符位置是從0開始的。3)字串查找字符串對象提供了在字符串內查找一個字串是否存在的方法,它們是:indexOf(searchvalue,fromindex):返回某個指定的字符串值在字符串中首次出現(xiàn)的位置,在一個字符串中的指定位置從前向后搜索,如果沒有發(fā)現(xiàn),返回-1。lastIndexOf():可返回一個指定的字符串值最后出現(xiàn)的位置,在一個字符串中的指定位置從后向前搜索,如果沒有發(fā)現(xiàn),返回-1。4.String(cont.)4)字符串的分割split()方法用于把一個字符串分割成字符串數(shù)組。例如“Welcometoyou!”中的三個單詞之間都用空格間隔,就可以把這個字符串按照空格分成三個字符串。<scripttype=text/javascript>vars1="Welcometoyou!";varsub=s1.split("");//sub是一個數(shù)組for(vari=0;i<sub.length;i++){ document.write(sub[i]);document.write("<br>");}</script>4.String(cont.)其他函數(shù)字符串的顯示風格(程序10-17)big()small()bold()大小寫轉換toLocaleLowerCase():把字符串轉換為小寫toLocaleUpperCase():把字符串轉換為大寫toLowerCase():把字符串轉換為小寫toUpperCase():把字符串轉換為大寫課堂練習如何把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對一個html頁面中的各個元素進行控制是JavaScript程序最精彩的地方。Document對象代表了整個HTML文檔,可用來訪問頁面中的所有元素。Document對象是Window對象的一個部分,雖然可通過window.document屬性來訪問,但編程中,可以直接使用document名稱來訪問頁面元素。頁面就是按照規(guī)則由一系列如<html>、<body>、<form>和<input>等各種標簽組成的規(guī)范文檔這些標簽之間存在著一定的關系,例如<body>被<html>所包含,而<form>標簽又被包含在<body>內,這些頁面元素的關系好像倒垂的一棵樹一樣,而頂端就是<html>,圖10-10的文檔樹就是對程序10-18的結構說明。10.6.3文檔-Document(cont.)圖10-10程序10-18的文檔結構圖document10.6.3文檔-Document(cont.)1)通過ID訪問頁面元素語法:document.getElementById(id)參數(shù):id。必選項,為字符串(String)返回值:對象。返回相同id對象中的第一個,如果無符合條件的對象,則返回null。

例如:varuserName=document.getElementById("userName").value;使用該方法需要注意:在頁面開發(fā)時,最好給每一個需要交互的元素設定一個唯一的id便于查找;getElementById()返回的是一個頁面元素的引用,例如在圖10-8種出現(xiàn)的所有元素都可以通過它來獲得;如果頁面上出現(xiàn)了不同元素使用了同一個id,則該方法返回的只是第一個找到的頁面元素;10.6.3文檔-Document(cont.)2)通過Name訪問頁面元素除了通過一個頁面元素的id可以得到該對象的引用,程序也可以通過名字來訪問頁面元素。語法:document.getElementsByName(name)參數(shù):name:必選項為字符串(String)返回值:數(shù)組對象;如果無符合條件的對象,則返回空數(shù)組由于該方法的返回值是一個數(shù)組,所以可以通過位置下標來獲得頁面元素,例如:varuserNameInput=document.getElementsByName("userName");varuserName=userNameInput[0].value;10.6.3文檔-Document(cont.)使用該方法需要注意:哪怕一個名字指定的頁面元素確實只有一個,該方法也返回一個數(shù)組,所以在上面代碼段中,用位置下標0本來獲得“用戶名輸入框”元素,如userNameInput[0];如果指定名字,在頁面中沒有對應的元素存在,則返回一個長度為0的數(shù)組,程序中可以通過判斷數(shù)組的length屬性值是否為0來來判斷是否找到了對應的元素。10.6.3文檔-Document(cont.)3)通過標簽名訪問頁面元素除了通過id和name可以獲得對應的元素外,還可以通過指定的標簽名稱,來獲得頁面上所有這一類型的元素,如input元素。語法:document.getElementsByTagName(tagname)參數(shù):tagname:必選項為字符串(String)

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論