ASP程序設計第4章JavaScript腳本語言課件

1、ASP程序設計課件2008 年 12 月中國水利水電出版社第1頁，共71頁。本章導讀本章導讀： JavaScript是一種基于對象和事件驅動并具有安全性能的腳本描述語言。利用JavaScript可進一步增強網(wǎng)頁的人機交互性、方便操作和控制各種瀏覽器對象，實現(xiàn)控制瀏覽器外觀、狀態(tài)和運行方式的目的，從而減輕服務器端負擔。本章要點：數(shù)據(jù)類型常量和變量運算符內(nèi)置對象與函數(shù)程序結構瀏覽器對象第2頁，共71頁。4.1.1 JavaScript的語法特性 4.1.2 JavaScript腳本語法結構 4.1 JavaScript語言概述第3頁，共71頁。JavaScript的字母區(qū)分大小寫的；JavaScr

2、ipt語句一般以分號（;）作為結束符；一條語句可以寫在多行，一條語句寫在多行時用續(xù)行符斜杠（/）；多條語句也可以寫在一行，多條語句寫在一行時，每條語句一定要加結束符分號(;)JavaScript的注釋符號包括多行注釋符/*和*/和單行注釋符號/；分支結構、循環(huán)結構、自定義函數(shù)等程序段包含多條語句時稱為語句塊，應該置于一對大括號內(nèi)內(nèi)；JavaScript忽略程序中的空格、換行和制表符，除非這些符號是字符串或正則表達式中的一部分.4.1.1 JavaScript的語法特性第4頁，共71頁。JavaScript腳本的嵌入位置和運行方式都比較自由，既可以直接嵌入當前文檔，又可以獨立存放在外部文件中，運

3、行方式既可以直接運行，也可以根據(jù)需要伴隨事件運行。其基本格式如下：1直接嵌入，直接運行。通過標記對直接嵌入在當前文件中。2外部引入，直接運行。將JavaScript程序以擴展名“.js”的文件單獨存放，再利用標記的src屬性引入外部文件，其語法格式如下：4.1.2 JavaScript腳本語法結構第5頁，共71頁。3直接嵌入，事件觸發(fā)。通過事件觸發(fā)方式執(zhí)行JavaScript的方法或函數(shù)主要有兩種：一種是在HTML標記的屬性中設置JavaScript的事件處理函數(shù)，事件被視為HTML標記的屬性 。如下格式所示： 4.1.2 JavaScript腳本語法結構第6頁，共71頁。 另一種在JavaS

4、cript對象的屬性中設置JavaScript的事件處理函數(shù)，事件被視為JavaScrip對象的屬性。function showAlert()username=document.myform.text1.value;if (username=) alert(用戶名不能為空); document.myform.mybutton.onclick = showAlert;4.1.2 JavaScript腳本語法結構第7頁，共71頁。4.2.1 JavaScript數(shù)據(jù)類型4.2.2 JavaScript常量4.2.3 JavaScript變量4.2.4 JavaScript運算符4.2.5 運算符號

5、的優(yōu)先級4.2 JavaScript的數(shù)據(jù)結構第8頁，共71頁。JavaScript語言是一種弱類型的腳本語言，數(shù)據(jù)類型通常分為六種：數(shù)值型：即Number，由09的數(shù)字字符，正負號，小數(shù)點組成，如2.6、3.14等等。邏輯型：即Boolean，只包括true（真）和false（假）兩個值，在JavaScript中，整數(shù)0約定為false，非0整數(shù)約定為true。字符型：即String，是用單引號或雙引號定界的字符串序列，字符包括英文、漢字、空格或數(shù)字。4.2.1 JavaScript數(shù)據(jù)類型第9頁，共71頁。對象型：即Object，對象是方法和屬性的集合體。未定型：即Undefined，一個

6、已經(jīng)聲明但還沒有賦值的變量，或者表示一個對象的屬性根本不存在?？罩敌停杭碞ull，表示變量沒有值或不是一個對象，即什么也不是。在JavaScript中 typeof 運算符將報告 null 值為 Object 類型注：可用typeof運算符測試一個數(shù)據(jù)的類型。 4.2.1 JavaScript數(shù)據(jù)類型第10頁，共71頁。根據(jù)數(shù)據(jù)類型的不同，常量可分為:數(shù)值型常量字符型常量邏輯型常量轉義字符4.2.2 JavaScript常量第11頁，共71頁。對變量的聲明未作強制性規(guī)定?？梢圆宦暶?，而直接賦值使用；也可以先聲明，后賦值使用，聲明的同時還可以賦值。聲明多個變量時，變量名之間用逗號（,）隔開。Ja

7、vaScript用var命令聲明變量，并且無須指明數(shù)據(jù)類型，其數(shù)據(jù)類型由變量值的類型決定的，變量命名必須以字母（大小寫均可）、下劃線(_)或美元符 ($)開頭，變量名稱不能使用Javascript語法保留的關鍵字。4.2.3 JavaScript變量第12頁，共71頁。JavaScript腳本提供了極其豐富的運算符，包括賦值、條件、算術、字符連接、關系、邏輯和位運算符。1. 條件運算符4.2.4 JavaScript運算符第13頁，共71頁。2.賦值運算符4.2.4 JavaScript運算符第14頁，共71頁。3.算術運算符4.2.4 JavaScript運算符第15頁，共71頁。4.比較運

8、算符4.2.4 JavaScript運算符第16頁，共71頁。5.邏輯運算符4.2.4 JavaScript運算符第17頁，共71頁。6.位運算符4.2.4 JavaScript運算符第18頁，共71頁。7.其它運算符位4.2.4 JavaScript運算符第19頁，共71頁。JavaScript的運算符優(yōu)先級同其它編程語言一樣有一套規(guī)則，首先計算算術運算符，然后計算比較運算符，最后計算邏輯運算符。具有相同優(yōu)先級的運算符按從左至右的順序求值。各運算符優(yōu)先級順序如下表所示（自上而下，優(yōu)先級從高到低）： 4.2.5 運算符號的優(yōu)先級第20頁，共71頁。函數(shù)是由事件驅動的或者可被重復調用的，可執(zhí)行的

9、一段命名的代碼塊。函數(shù)是將程序塊的程序代碼隱藏起來，使用函數(shù)名稱進行調用和傳遞參數(shù)。JavaScript擁有兩種函數(shù)，一種是系統(tǒng)內(nèi)置函數(shù)，另一種是自定義函數(shù)。常用內(nèi)置函數(shù)見下表所示：4.3 內(nèi)置函數(shù)第21頁，共71頁。4.4.1 分支結構1.ifelse語句2.switch 語句4.4.2 循環(huán)結構4.4 3 break和continue語句4.4 程序結構第22頁，共71頁。1.ifelse語句單分支結構這是一種簡單分支結構，省略了else子句，條件為true 時執(zhí)行語句,語法結構如下：if (條件表達式)語句序列說明：先計算條件表達式的值，如果返回true就執(zhí)行語句序列，反之不執(zhí)行。當語句

10、序列只有一句時，還可以省略。4.4.1 分支結構第23頁，共71頁。二分支結構if.else 語句定義了兩個可執(zhí)行語句塊，條件為true 或false 時分別執(zhí)行其中一支語句塊。語法結構如下：if (條件表達式)語句序列1else語句序列2說明：先計算條件表達式的值，如果返回true時運行語句序列1，如果返回 false 時運行語句序列2。4.4.1 分支結構第24頁，共71頁。多分支結構if. else 語句還可以進行多分支選擇，實現(xiàn)對多個條件依次進行判斷選擇。語法結構如下：if(條件語句1)語句序列1else if(條件語句2)語句序列2else if(條件語句3 )語句序列3else語句

11、序列n4.4.1 分支結構第25頁，共71頁。說明：如果條件表達式1成立，那么就執(zhí)行語句序列1。如果條件表達式1不成立，那么就判斷條件語句2 是否成立，如果條件語句2成立，那么就執(zhí)行語句序列2。如果條件表達式2不成立，那么就判斷條件語句3 是否成立，如果條件語句3成立，那么就執(zhí)行語句序列3。依此類推，如果ifelse中的判斷條件都不成立，那么就執(zhí)行語句序列n。4.4.1 分支結構第26頁，共71頁。2.switch 語句使用多個else if 子句往往會使程序變得難以理解，在多個條件中進行選擇的更好方法是使用switch語句。switch語句是ifelse if 語句的一種變通形式，可以從多個

12、語句塊中選擇執(zhí)行其中的一個語句塊。switch語句提供的功能與if. else if 語句類似，但是可以使代碼更加簡練易讀。其語法格式如下：4.4.1 分支結構第27頁，共71頁。Switch(變量或表達式)case 值1:語句序列1;break;case值2:語句序列2;break;case值n:語句序列n;break;default:語句序列n+1;break;4.4.1 分支結構第28頁，共71頁。說明：switch語句在其開始處使用一個只計算一次的簡單測試表達式。表達式的結果將依次與分支結構中case值比較。如果匹配，則執(zhí)行該case 關聯(lián)的語句塊。Default子句指明例外情況，當表

13、達式和所有的case子句中值都不同時，則會執(zhí)行這些語句。4.4.1 分支結構第29頁，共71頁。循環(huán)結構用于重復執(zhí)行一組語句的結構，JavaScript提供了5種循環(huán)結構。現(xiàn)介紹如下：語法結構一：while (條件)語句序列說明：先判斷條件，當條件為 true 時才會執(zhí)行循環(huán)體語句 4.4.2 循環(huán)結構第30頁，共71頁。語法結構二：do語句序列while(條件)說明：先無條件執(zhí)行循環(huán)體一次，然后再判斷條件，當條件為 true時才會繼續(xù)執(zhí)行循環(huán)體。4.4.2 循環(huán)結構第31頁，共71頁。語法結構三：for (;)語句序列說明：指定循環(huán)次數(shù),使用計數(shù)器重復運行語句4.4.2 循環(huán)結構第32頁，共

14、71頁。語法結構四：for( in )語句序列說明：遍歷循環(huán)，遍歷對象中的每個屬性或者遍歷數(shù)組中每個元素，并重復執(zhí)行循環(huán)體語句。4.4.2 循環(huán)結構第33頁，共71頁。語法結構五：with對象名稱語句序列說明：針對對象執(zhí)行一組語句，所有這些語句都假定引用指定的對象。4.4.2 循環(huán)結構第34頁，共71頁。默認情況下，循環(huán)語句將進行無休止地循環(huán)執(zhí)行，除非循環(huán)條件表達式的值為假。如想提前中斷或跳過循環(huán)，需在句塊中添加break 或continue語句就可以了。break語句中斷所有循環(huán)，而continue語句則跳過本次循環(huán)的剩余語句，然后開始下一次循環(huán)。4.4 3 break和continue語句

15、第35頁，共71頁。4.5.1 函數(shù)定義4.5.2 函數(shù)的調用4.5.3 變量的作用域4.5.4 函數(shù)對象定義4.5 function函數(shù)第36頁，共71頁。function語句主要用來定義靜態(tài)函數(shù)，當然也可以定義函數(shù)對象，定義靜態(tài)函數(shù)的語法結構如下：function 函數(shù)名 (形參1,形參2)局部變量定義函數(shù)執(zhí)行部分return 表達式4.5.1 函數(shù)定義第37頁，共71頁。說明：函數(shù)以function 定義開始；形參可有可無，形參定義時不能賦值，多參數(shù)之間用逗號（,）隔開，如沒有形參，函數(shù)名后仍然包含空括號( )；一對大括號內(nèi)包含的程序行是函數(shù)主體，任何時候不能省略大括號，即使其內(nèi)部只有一

16、條程序；在函數(shù)的內(nèi)部，參數(shù)可以直接當作變量來使用，并可以用var語句來建立一些新的變量。4.5.1 函數(shù)定義第38頁，共71頁。return語句后表達式為函數(shù)所要的返回的值，若函數(shù)結束時沒有return語句，則函數(shù)為返回一個Undefined類型的數(shù)據(jù)；實參調用與形參定義有無沒有關系，即使沒有定義形參，仍然可以傳入?yún)?shù)，此時可以通過argumnets對象（Arguments Array，參數(shù)數(shù)組對象），來獲取參數(shù)的個數(shù)及其參數(shù)的值；還可以創(chuàng)建自定義函數(shù)對象。有關自定義函數(shù)對象請參閱4.5.4節(jié) 4.5.1 函數(shù)定義第39頁，共71頁。格式1：varname=函數(shù)名（實際參數(shù)） /有返回值時用格

17、式2：函數(shù)名（參數(shù)值） /無返回值時用說明：形參和實參可以同名。函數(shù)調用時，參數(shù)傳遞存在兩種方式：當實參是數(shù)值時，按值傳遞；4.5.2 函數(shù)的調用第40頁，共71頁。當實參是變量時，根據(jù)數(shù)據(jù)類型的不同，參數(shù)傳遞的方式有所不同。數(shù)據(jù)類型為數(shù)字，字符串和布爾型時執(zhí)行按值傳遞。數(shù)據(jù)類型為對象，數(shù)組，字符串對象，函數(shù)時執(zhí)行按地址傳遞。需要注意的是，如果將對象和數(shù)組傳入函數(shù)，雖然執(zhí)行按地址傳遞，但是不能在函數(shù)中改變對象和數(shù)組本身，只能更改對象和數(shù)組的元素。4.5.2 函數(shù)的調用第41頁，共71頁。變量的作用域是指變量起作用的范圍。按照變量作用的范圍，JavaScript變量有兩種，即局部變量和全局變量。

18、局部變量：在函數(shù)內(nèi)用var聲明的變量，其作用域僅局限于該函數(shù)內(nèi)全局變量：作用域是整個HTML文件，包括在函數(shù)外用var聲明的變量和在函數(shù)內(nèi)未用var聲明的變量4.5.3 變量的作用域第42頁，共71頁。使用function語句建立函數(shù)對象（建構函數(shù)）一般包括2到4個步驟，具體方法如下：1.定義函數(shù)對象，新增函數(shù)對象的方法和屬性；2.定義函數(shù)對象的方法，如果函數(shù)對象定義時，新增了方法，則定義此方法；3.建立對象實例（副本），用new命令建立對象實例，建立對象實例時，可以同時傳入屬性值，也可以建立對象實例后，再設置屬性值 。4.5.4 函數(shù)對象定義第43頁，共71頁。4.6.1 String對象4

19、.6.2 Math對象4.6.3 Array對象4.6.4 Date對象4.6.5 Number對象4.6.6 Boolean對象4.6.7 Function對象4.6.8 Object對象4.6 JavaScript內(nèi)置對象第44頁，共71頁。JavaScript語言的典型特性就是對象，一切皆對象，甚至連數(shù)據(jù)，數(shù)據(jù)類型等等都可以當作對象。將變量和相關處理函數(shù)封裝成對象，每個對象都有自己的屬性和方法。屬性可以訪問對象的數(shù)據(jù)，方法主要用來處理數(shù)據(jù)的函數(shù)。JavaScript支持4種對象：內(nèi)置對象、自定義對象、瀏覽器對象和ActiveX對象。JavaScript提供了11種內(nèi)置對象，其中常用內(nèi)置對

20、象如圖所示。4.6 JavaScript內(nèi)置對象第45頁，共71頁。在JavaScript中，內(nèi)置對象一般不能直接使用，需要使用new命令創(chuàng)建該對象的實例，然后通過對象實例間接使用該對象及其屬性和方法。JavaScript對象可以視為一個數(shù)組，對象屬性就是數(shù)組的元素，所以也可以使用數(shù)組索引序號或者索引名（屬性名）的方式訪問對象屬性，具體引用有下列三種方式：使用點（.）運算符university.Name=安徽省通過下標實現(xiàn)引用university0=安徽省通過字符串的形式實現(xiàn)universityName=安徽省4.6 JavaScript內(nèi)置對象第46頁，共71頁。格式：var 對象實例名=n

21、ew String(字符串);說明：建立字符串對象，使用時注意以下幾點：關鍵字new和String可同時省略，省略關鍵字時，隱性建立一個string對象，可以使用string對象的方法，但不可使用prototype和expando屬性；String對象提供了一個屬性，即length，用來返回字符串的長度，其用法為：對象實例名.length；4.6.1 String對象第47頁，共71頁。String對象提供了一組方法，用于對字符串的處理 JavaScript采用Unicode編碼，1個漢字和1個西文字符都是算一個字符。String對象還提供了一些格式字符方法使用時注意方法名、關鍵字的大小寫。

22、4.6.1 String對象第48頁，共71頁。格式：Math.方法|屬性說明：利用該對象的屬性和方法實現(xiàn)數(shù)學運算，使用時注意以下幾點：不能用new創(chuàng)建該對象而直接使用；數(shù)學常數(shù)被定義成該對象的屬性，其屬性名全部采用大寫， 常用的數(shù)學運算函數(shù)被定義成該對象的方法，其方法名全部采用小寫 4.6.2 Math對象第49頁，共71頁。格式：var 數(shù)組名=new Array(數(shù)組大小|數(shù)組元素列表);說明：建立數(shù)組對象，使用時注意以下幾點：數(shù)組對象提供了一個屬性，即length，用于取得數(shù)組的元素個數(shù)；數(shù)組大小具有自動擴展機制，可以指定數(shù)組的大小，也可以不指定數(shù)組的大?。煌ㄟ^索引下標可以引用數(shù)組元素

23、，下標起始值從0開始計數(shù)；4.6.3 Array對象第50頁，共71頁。數(shù)組中的各元素值的類型可以各不相同；建立數(shù)組對象時，也可同時指定數(shù)組元素的值；關鍵字new和Array可同時省略，省略關鍵字時，需將數(shù)組元素列表放在一個方括號中，多元素之間用逗號隔開；不能直接建立二維或多維數(shù)組對象，不過數(shù)組元素的內(nèi)容可以是數(shù)組對象，從而間接建立多維數(shù)組；4.6.3 Array對象第51頁，共71頁。格式：var 實例名=new Date(value);說明：創(chuàng)建日期和時間的對象實例，使用時注意以下幾點：缺省值時，自動保存當前系統(tǒng)的日期和時間；Date對象提供了很多方法用于設置和獲取日期和時間 也可以創(chuàng)建指

24、定日期的對象實例，如var thday=new Date(2008,9,1);；也可以創(chuàng)建指定時間的對象實例，如var thtime=new Date(2008,9,1,10,15,0,0);；4.6.4 Date對象第52頁，共71頁。格式：var 實例名=new Number(value) 說明：可以將數(shù)字作為Number對象訪問；可以通過為構造函數(shù)指定一個參數(shù)值來創(chuàng)建一個Number對象，如：myNum = new Number(100)也可以不用創(chuàng)建對象直接使用，如：document.write(NaN = + Number.NaN + )Number對象提供的3個屬性 和2個方法4.

25、6.5 Number對象第53頁，共71頁。格式：var 對象實例名= new Boolean(value)說明：可以將布爾值當作對象訪問；參數(shù)value可以是true或false，也可以是任意類型的值，但值null、（長度為0的字符串）、NaN、0將變成false，其它值變成true。4.6.6 Boolean對象第54頁，共71頁。格式：var 函數(shù)名 = new Function(參數(shù)1, 參數(shù)2, 參數(shù)3, 函數(shù)體);說明：自定義函數(shù)對象，使用時注意以下幾點：Functino()對象（又稱構造函數(shù)，不是function語句），可以定義多個形式參數(shù)，形參名以字符串形式出現(xiàn)，多參數(shù)之間用逗

26、號（,）隔開；4.6.7 Function對象第55頁，共71頁。函數(shù)體是可選的，可以包含任何JavaScript語句，多語句之間需用分號（;）隔開；如果定義的函數(shù)沒有參數(shù)，那么可以只需給構造函數(shù)傳遞一個字符串（即函數(shù)的主體）即可；Function()對象定義函數(shù)時并沒有定義函數(shù)名，因而用Function()創(chuàng)建的未命名函數(shù)有時被成為“匿名函數(shù)”。4.6.7 Function對象第56頁，共71頁。格式：var 對象實例名= new Object(value)說明：創(chuàng)建一個自定義對象實例或自定義對象，使用時注意以下幾點：Object對象是派生所有其他對象的對象，包括內(nèi)置對象；Object對象的

27、屬性和方法，及其擴展的方法和屬性可以派生給所有其他對象；Object對象提供了2個屬性 和2個方法4.6.8 Object對象第57頁，共71頁。4.7.1 Window對象4.7.2 Document對象4.7.3 History對象4.7.4 Navigator對象4.7.5 Location對象4.7.6 Link對象4.7.7 Screen對象4.7.8 External對象4.7.9 窗體驗證4.7 瀏覽器對象第58頁，共71頁。JavaScript將瀏覽器本身，網(wǎng)頁以及網(wǎng)頁的HTML元素等都用相應的對象來表示，這些對象及對象之間的層次關系統(tǒng)稱為DOM（Document Object

28、 Model，文檔對象模型又稱為瀏覽器對象），瀏覽器對象是一個上下包含關系的層次結構的對象模型，上層包含很多下層子對象，上下對象之間是一種從屬關系。在這種從屬關系結構模型中，Window（窗口）對象是瀏覽器對象層次結構中最高層，所有其他對象都可以視為Window對象的屬性。瀏覽器對象模型如圖所示。4.7 瀏覽器對象第59頁，共71頁。window（窗口）對象是瀏覽器對象層次結構中最高層，window對象代表瀏覽器的整個窗口。每個窗口都是window對象的實例，引用實例可以通過以下名稱表示：window或self：表示當前窗口；top：代表最頂層窗口；parent：代表當前窗口的父窗口；open

29、ner：由open打開的窗口。各從屬對象可采用如下方式進行訪問：window.子對象1.子對象2.屬性名或方法名4.7.1 Window對象第60頁，共71頁。1window對象的方法如圖所示：2window對象的屬性name屬性：用于指定窗口的名稱，可以使用a標記的target屬性指定窗口的名稱，也可以使用open方法打開一個指定名稱的新窗口。defaultstatus屬性：用于設置或讀取瀏覽器窗口狀態(tài)欄中的默認顯示信息。例如，可以在window對象的onload事件過程中編寫以下語句：status屬性：用于設置或讀取瀏覽器窗口狀態(tài)欄中顯示的臨時信息。例如，可以在某張圖片的onmouseov

30、er事件過程中編寫以下代碼：window.status = 這是一張圖片。screenLeft屬性：傳回左邊界的坐標。screenTop屬性：傳回上邊界的坐標 4.7.1 Window對象第61頁，共71頁。document對象表示在瀏覽器窗口或其中一個框架中顯示的HTML文檔，通過該對象的屬性和方法可以控制頁面的外觀和內(nèi)容。1. document對象方法2. document對象屬性4.7.2 Document對象第62頁，共71頁。history對象包含用戶已經(jīng)瀏覽過的url集合，提供了瀏覽器的導航按鈕功能，可以通過文檔的歷史記錄來瀏覽文檔。history對象擁有以下主要屬性和方法。 length屬性：返回歷史記錄表中的url數(shù)目。 back方法：從歷史記錄表中返回上一頁。 forward方法：從歷史記錄表中返回下一頁。 go(num)方法：在歷史記錄表中跳轉到指定的頁，num小于0為上一頁，反之下一頁。4.7.3 History對象第63頁，共71頁。navigator對象是存儲瀏覽器信息的對象，該對象沒