第4章Web腳本語言JavaScript

第4章Web腳本語言JavaScript§1.JavaScript語言概述一、JavaScript語言的特點(diǎn)1、什么是JavaScript？JavaScript是一種腳本語言，可直接嵌入到HTML文檔中，瀏覽器能理解其中的JavaScript語句，并在網(wǎng)頁下載后對JavaScript語句進(jìn)行解釋執(zhí)行。JavaScript是在瀏覽器中解釋執(zhí)行的，具有平臺無關(guān)性，不認(rèn)什么操作系統(tǒng)，只要瀏覽器支持JavaScript即可。運(yùn)用JavaScript可控制HTML頁面，并對頁面事件做出響應(yīng)。

第4章Web腳本語言JavaScript2、JavaScript語言與Java語言Java是一種編譯型語言，先通過Java編譯器，將源程序編譯成class，從而創(chuàng)建JavaApplet或JavaApplication，然后客戶瀏覽器將JavaApplet下載后才能執(zhí)行。JavaApplet在頁面中占用了一塊區(qū)域，該區(qū)域與HTML其他部分完全獨(dú)立，JavaApplet在這塊區(qū)域內(nèi)完成它的功能。JavaScript是一種解釋型語言，它將源代碼直接寫入HTML頁面中，不需要預(yù)先編譯，瀏覽器將HTML下載后，則瀏覽器進(jìn)行解釋執(zhí)行，JavaScript并不在頁面中占用空間，而是對HTML頁面中的對象進(jìn)行控制處理，在整個頁面中完成它的功能。Java是一種強(qiáng)類型語言，語法十分嚴(yán)謹(jǐn)，變量必須進(jìn)行聲明并指定其數(shù)據(jù)類型。而JavaScript是一種弱類型的語言，比Java自由得多。第4章Web腳本語言JavaScript3、JavaScript組成部分：由三個部分組成⑴JavaScript核心語言：包括JavaScript的基本語法：操作符、語句、函數(shù)及一些JavaScript內(nèi)置的對象——Array對象、Date對象和Math對象，JavaScript核心語句中定義的是在客戶端和服務(wù)器端都會用到的基本語法。⑵JavaScript客戶端擴(kuò)展：在JavaScript核心語言基礎(chǔ)上，擴(kuò)展了控制瀏覽器的對象和文本對象模型DOM(DocumentObjectModel)。在客戶端腳本中，可對頁面上的對象進(jìn)行控制，完成許多功能，如處理鼠標(biāo)點(diǎn)擊、表單輸入等。⑶JavaScript服務(wù)器端擴(kuò)展：在核心語言基礎(chǔ)上擴(kuò)展了在服務(wù)器上運(yùn)行需要的對象，可與數(shù)據(jù)庫互聯(lián)，對服務(wù)器上文件進(jìn)行控制等。4、JavaScript的發(fā)展：P127

第4章Web腳本語言JavaScript二、JavaScript程序的編輯和調(diào)試在HTML代碼中加入<Scriptlanguage=javascript>標(biāo)簽，也可加入SRC屬性，使頁面能調(diào)用寫在源文件中的JavaScript函數(shù)，源文件中的函數(shù)可在多個頁面間共享。如：<scriptlanguage=javascriptSRC=””>使用源文件可使用兩種方式：⑴使用相對路徑，SRC屬性中是文件的相對路徑。⑵使用URL地址，SRC屬性中是文件的URL地址。使用SRC引用JavaScript源文件時，必須以.js為文件后綴名，并且在源文件中只能使用JavaScript代碼而不能包含任何HTML標(biāo)簽。第4章Web腳本語言JavaScript§2.JavaScript編程基礎(chǔ)一、數(shù)據(jù)類型1、變量：有名稱的單元就是變量。2、變量的定義方式：用關(guān)鍵字var定義變量。JavaScript沒有強(qiáng)制要求變量必須先定義才使用。在定義變量時，可將變量的定義和初始化分開完成，也可將變量的定義的初始化在一條語句中完成。如聲明一個變量但沒有對其賦值，該變量存在且為undefined類型。不能在沒有聲明變量的情況下使用一個變量，這樣會導(dǎo)致運(yùn)行時產(chǎn)生錯誤。第4章Web腳本語言JavaScript3、變量名稱⑴定義的變量不能和保留字沖突。保留字是JavaScript中已經(jīng)使用的單詞或保留在以后的版本中可能使用的單詞。⑵變量名必須以字母或下劃線開始。⑶變量名不能包含空格。⑷JavaScript是區(qū)分大小寫的。4、數(shù)據(jù)類型：JavaScript不要求預(yù)先確定變量的數(shù)據(jù)類型，但每個JavaScript變量對應(yīng)一個數(shù)據(jù)類型的值。JavaScript變量的數(shù)據(jù)類型可以發(fā)生變化。⑴字符串類型的變量所代表的值是處于引號內(nèi)的一組字符。第4章Web腳本語言JavaScript⑵數(shù)值類型：既可以代表整數(shù)又可代表小數(shù)。⑶布爾類型：只有真(true)和假(false)兩種取值。⑷空類型：null，意味著什么也沒有。注意JavaScript區(qū)分大小寫，不要將null和NULL混淆起來。⑸對象類型：JavaScript是基于對象的語言，如window等對象。這是對象類型的數(shù)據(jù)。5、變量的作用域：每個變量都作用域。要函數(shù)內(nèi)聲明的變量只能在聲明它們的函數(shù)中使用；函數(shù)外聲明的變量在同一頁內(nèi)的任何腳本命令均可訪問和修改該變量的值。

第4章Web腳本語言JavaScript二、常量1、整型常量：又稱字面常量，是不能改變的數(shù)據(jù)，可使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示。2、實(shí)型常量：由整數(shù)部分加小數(shù)部分表示的量，可使用科學(xué)表示法或標(biāo)準(zhǔn)方法表示。3、布爾值：只有true或false。4、字符型常量：使用單引號或雙引號括起來的若干個字符。5、空值：null，表示什么也沒有。6、特殊字符：以反斜杠(\)開頭的不可顯示的特殊字符。

第4章Web腳本語言JavaScript三、運(yùn)算符和表達(dá)式1、比較操作符：<、<=、>、>=、==、!=2、運(yùn)算操作符：+、-、*、/、%、++、--。3、邏輯操作符：&&、||、!。4、賦值操作符：=、+=、-=、*=、/=、%=。5、其他操作符

第4章Web腳本語言JavaScript⑴條件操作：形式是：(condition)?val1:val2。⑵new操作符：為用戶自定義對象類型或JavaScript內(nèi)置對象類型創(chuàng)建一個實(shí)例，如：vartheDate=newDate()。JavaScript是一種基于對象的語言，用戶可建立自定義對象類型。⑶delete操作符：可刪除對象、對象的屬性或數(shù)據(jù)中的元素。如：varcomputer=newArray(“mouse”,keyboard”,”cpu”,”harddisk”);deletecomputer[2];⑷this操作符：用來引用當(dāng)前的對象。

第4章Web腳本語言JavaScript§3.JavaScript中的對象1、數(shù)組對象(Array)JavaScript沒有數(shù)組數(shù)據(jù)類型，可使用數(shù)組對象完成數(shù)據(jù)的功能。⑴建立數(shù)組：有兩種方法①建立數(shù)組的同時，將數(shù)組中的元素賦值。如：varcomputer=newArray(“mouse”,keyboard”,”cpu”,”harddisk”);②建立數(shù)組時，需定義數(shù)組的長度。如varcomputer=newArray(3);⑵訪問數(shù)組中元素：通過數(shù)組下標(biāo)訪問數(shù)組元素。下標(biāo)從0開始，而數(shù)組的長度是數(shù)組中元素的個數(shù)。第4章Web腳本語言JavaScript⑶數(shù)組對象的屬性與方法數(shù)組對象的length屬性可獲得數(shù)組的長度。sort()方法：將數(shù)組元素排序。reverse()方法：將數(shù)組中元素顛倒順序，第一個元素和最后一個元素交換，第二個元素和倒數(shù)第二個元素交換，以此類推。2、字符串對象(String)JavaScript中有字符串類型數(shù)據(jù)和字符串對象，定義方法分別是：s=”hello”;和vars=newString(“hello”);但字符串變量和字符串對象在使用時沒有太大區(qū)別，字符串變量可使用字符串對象的屬性和方法。第4章Web腳本語言JavaScript字符串對象的length，用來求字符串的長度。方法有：⑴toUpperCase()和toLowerCase()方法：將字符串字母全部轉(zhuǎn)換成大寫字母和小寫字母。⑵indexOF(子字符串)方法：有一個參數(shù)“子字符串”，功能是返回子字符串在字符串對象中的位置。如字符串對象中存在子字符串，返回其位置(如在字符串對象中有多個子字符串，返回第一個所在的位置)；如不存在，返回-1。注意：位置的下標(biāo)是從0開始的。

第4章Web腳本語言JavaScript⑶charAt(位置)方法：有一個參數(shù)“位置”，功能是返回字符串對象中下標(biāo)位置的字母。⑷substring(位置1，位置2)方法：返回從“位置1”到“位置2”之間的字符串。注意：返回的字符串中位置2所在的字母不包括在內(nèi)。3、日期對象(Date)在JavaScript中，日期對象中存儲的不僅是日期數(shù)據(jù)，還包括時間數(shù)據(jù)。日期對象實(shí)際存儲的是對象的時間相對1970年1月1日0時0分0秒的毫秒數(shù)，如對象代表的時間在1970年前，存儲的是負(fù)數(shù)；如在1970年后，存儲的是正數(shù)。⑴創(chuàng)建日期對象：格式為：var對象名稱=newDate(參數(shù))

第4章Web腳本語言JavaScript根據(jù)參數(shù)的不同，可有多個方法生成日期對象：①沒有參數(shù)時，使日期對象獲得當(dāng)前的日期和時間，如：vartheDate=newDate();②創(chuàng)建日期對象時，指定其中的年、月、日，如：vartheDate=newDate(1999,1,1);日期對象是1999年2月1日，月份用0到11代表1月到12月。不指定時間，默認(rèn)為0時0分0秒。③創(chuàng)建日期對象時，還可指定時間，如：varthaDate=newDate(1999,1,1,15,30,27);

第4章Web腳本語言JavaScript⑵日期對象的方法：下面的方法獲得日期對象中各個部分：①getYear()：獲得日期對象的年份②getMonth()：獲得日期對象的月份③getDate()：獲得日期對象的日期④getHours()：獲得日期對象的小時數(shù)⑤getMinutes()：獲得日期對象的分種數(shù)⑥getSeconds()：獲得日期對象的秒數(shù)⑦getDay()：返回日期對象處于星期幾，返回值為0到6，代表星期日到星期六。

第4章Web腳本語言JavaScript設(shè)置日期對象的各個部分的方法有：①setYear(年份)：設(shè)置日期對象的年份②setMonth(月份)：設(shè)置日期對象的月份③setDate(日期)：設(shè)置日期對象的日期④setHours(小時數(shù))：設(shè)置日期對象的小時數(shù)⑤setMinutes(分鐘數(shù))：設(shè)置日期對象的分種數(shù)⑥setSeconds(秒數(shù))：設(shè)置日期對象的秒數(shù)⑦setDay(星期幾)：設(shè)置日期對象處于星期幾

第4章Web腳本語言JavaScript⑶getTime()方法與setTime(毫秒數(shù))方法getTime()方法獲得從1970年1月1日0時0分0秒開始的毫秒數(shù)。SetTime()方法將毫秒數(shù)存儲到日期對象中，在以后的運(yùn)算中將這個日期對象各部分取出分別處理。4、數(shù)學(xué)對象(Math)：數(shù)學(xué)對象不需使用new操作符創(chuàng)建對象，可直接使用Math調(diào)用數(shù)學(xué)對象。數(shù)學(xué)對象的PI屬性代表圓周率。方法有：⑴min(值1，值2)和max(值1，值2)方法：返回兩個數(shù)中較小或較大的數(shù)。⑵round(數(shù)值)、ceil(數(shù)值)和floor(數(shù)值)方法：功能都是將參數(shù)取整。區(qū)別是round將參數(shù)四舍五入后返回，ceil返回大于等于參數(shù)的最小整數(shù)，floor返回小于等于參數(shù)的最大整數(shù)。

第4章Web腳本語言JavaScript⑶random()方法：產(chǎn)生0～1的隨機(jī)數(shù)。產(chǎn)生m～n的隨機(jī)整數(shù)的格式為：Math.round(Math.random()*(n-m))+m⑷sqrt(數(shù)值)方法：返回數(shù)值的平方根。⑸abs(數(shù)值)方法：返回數(shù)值的絕對值。此外，還有sin(數(shù)值)、cos(數(shù)值)、tan(數(shù)值)、asin(數(shù)值)、acos(數(shù)值)和atan(數(shù)值)等方法，獲得正弦值、余弦值、正切值、反正弦值、反余弦值和反正切值。注意：這里角度的數(shù)值采用弧度進(jìn)行計算。

第4章Web腳本語言JavaScript§4.JavaScript程序流程控制JavaScript中，每條語句后應(yīng)以一個分號結(jié)尾，但JavaScript要求并不嚴(yán)格，語句后可加分號也可不加分號。一、條件控制語句1、if…else語句格式：if(條件)語句1else語句22、switch語句格式：switch(表達(dá)式){case標(biāo)簽1：代碼塊1；break；

case標(biāo)簽2：代碼塊2；break；……default：缺省代碼塊；}第4章Web腳本語言JavaScript二、循環(huán)控制語句1、for語句格式：for(初始表達(dá)式；循環(huán)表達(dá)式；遞增表達(dá)式){

代碼塊}2、while語句格式：while(循環(huán)條件){

代碼地段}3、do…while語句格式：do{

代碼塊遞增表達(dá)式}while(循環(huán)條件)第4章Web腳本語言JavaScript4、label語句格式：label：代碼塊label語句只是在代碼塊前加上一個標(biāo)識。5、break語句：跳出循環(huán)體或switch語句。Break語句還有一種使用方式：breaklabel，執(zhí)行到該語句時，立即跳出label標(biāo)識的代碼塊。6、continue語句：結(jié)束本次循環(huán)，開始下一輪循環(huán)。在while循環(huán)中，直接判斷循環(huán)條件；在for循環(huán)中，先執(zhí)行遞增表達(dá)式，然后判斷循環(huán)條件。countinue也有countinuelabel使用方式，可在多重循環(huán)嵌套中，不僅終止當(dāng)前循環(huán)的本輪循環(huán)，還能夠終止外層循環(huán)的本輪運(yùn)行，直接開始外層循環(huán)的下一輪運(yùn)行。第4章Web腳本語言JavaScript7、其他語句for…Internet語句格式：for(變量in對象){

代碼塊}該語句中變量將會列舉對象的每一個屬性。8、with語句格式：with(對象){代碼塊}with語句用于聲明代碼塊的默認(rèn)對象，代碼塊可直接使用with語句聲明對象的屬性和方法，不必寫出這個屬性和方法的完整引用。P147

第4章Web腳本語言JavaScript如在代碼塊中有許多語句需要使用同一個對象的屬性和方法，使用with語句后，只需寫一次這個對象的完整引用，然后可在代碼塊中直接編寫對象的屬性和方法，這樣可減少代碼編寫的工作量。9、注釋：可增強(qiáng)程序的可讀性，有兩種方式：⑴通過雙斜線(//)注釋一行，雙斜線后的字符不被執(zhí)行。⑵通過/*和*/來規(guī)定注釋語句，可進(jìn)行多行注釋，/*和*/之間的內(nèi)容就是注釋。10、return語句：用于函數(shù)中，通過該語句將函數(shù)處理的結(jié)果返回給調(diào)用函數(shù)的語句。第4章Web腳本語言JavaScript§5.函數(shù)在JavaScript中，函數(shù)是一種能夠完成某種功能的代碼塊，函數(shù)可在腳本中被事件處理或被其他語句調(diào)用。JavaScript中的函數(shù)同時具有其他語言中的函數(shù)和過程的功能。1、函數(shù)的定義格式：function函數(shù)名(參數(shù)列表){

代碼塊}第4章Web腳本語言JavaScript函數(shù)的定義由3部分組成：⑴函數(shù)名：調(diào)用函數(shù)時通過函數(shù)名進(jìn)行調(diào)用。⑵參數(shù)列表：是可選項。⑶代碼塊：包含在一對大括號{}中，通過代碼塊的執(zhí)行完成函數(shù)功能。如需要返回一個值給調(diào)用函數(shù)的語句，應(yīng)在代碼塊中使用return語句。一般情況下，函數(shù)的定義放在HTML頁面的HEAD部分，這樣在頁面中任何部分都可以直接使用這個函數(shù)，在頁面下載時也可以使用該函數(shù)。如在下頁下載時不需要使用這個函數(shù)，這個函數(shù)可在頁面的任何部分進(jìn)行定義，甚至可放在HTML頁面的</HTML>結(jié)束標(biāo)簽外。

第4章Web腳本語言JavaScript2、函數(shù)的調(diào)用3、JavaScript的全局函數(shù)：這些函數(shù)沒有和JavaScript中任何對象發(fā)生關(guān)聯(lián)，稱為全局函數(shù)。⑴eval(字符串)：包含一個字符串類型的參數(shù)，功能是執(zhí)行這個字符串，如參數(shù)代表了一個表達(dá)式，這個函數(shù)將對這個表達(dá)式進(jìn)行運(yùn)算，如果參數(shù)代表一條或多條語句，這個函數(shù)將執(zhí)行這些語句。⑵parseInt(字符串)和parseFloat(字符串)：將字符串轉(zhuǎn)化為整數(shù)或浮點(diǎn)數(shù)(小數(shù))。從文本框中獲得的值是一個字符串，需要先將這個字符串轉(zhuǎn)化為整數(shù)或浮點(diǎn)數(shù)，然后再對這些數(shù)據(jù)進(jìn)行處理。

第4章Web腳本語言JavaScript⑶isNaN(表達(dá)式)：判斷表達(dá)式是否是一個數(shù)值類型的數(shù)據(jù)。使用parseInt和parseFloat將字符串轉(zhuǎn)化為數(shù)據(jù)時，如這個字符串不代表一個數(shù)值，這兩個函數(shù)會返回NaN(notanumber)。⑷Number(對象)和String(對象)：參數(shù)是對象，Number函數(shù)將這個對象轉(zhuǎn)化成數(shù)值，String函數(shù)將這個對象轉(zhuǎn)化為字符串。如對象不能轉(zhuǎn)化為數(shù)值，Number函數(shù)返回NaN。⑸escape(字符串)和unescape(字符串)：是一對功能相反的函數(shù)，分別對字符串進(jìn)行編碼和解碼工作。有時在瀏覽器地址欄中有許多%加上數(shù)字，這是由于采用了ISO-Latin-1字符集進(jìn)行編碼的原因，可采用unescape函數(shù)進(jìn)行解碼，也可用escape函數(shù)進(jìn)行編碼。

第4章Web腳本語言JavaScript§6.事件和事件過程一、文檔對象模型用于腳本編寫1、window對象的open()方法應(yīng)用示例P151例3-162、window對象的close()方法應(yīng)用示例P152

3、window對象的confirm()方法：彈出一個確認(rèn)框，在確認(rèn)框內(nèi)顯示字符串文本；該函數(shù)返回一個布爾值，如用戶單擊“確定”按鈕返回true，單擊“取消”返回false。P152例3-174、window對象的prompt()方法：是彈出一個輸入框，在輸入框內(nèi)顯示字符串文本，在輸入框中有一個輸入的文本框，默認(rèn)值顯示在輸入文本框內(nèi)。如輸入后單擊“確定”按鈕，返回輸入的字符串；如單擊取消按鈕則返回null。P153例3-18第4章Web腳本語言JavaScript5、document對象的屬性示例P153例3-19：利用bgColor設(shè)置頁面背景顏色。6、document對象的anchors、applets、forms、images、frames屬性應(yīng)用示例P154例3-20：這些屬性存放著對象的數(shù)組，頁面中所有超鏈接存儲在anchors[]數(shù)組中，表單存儲在forms[]數(shù)組中，圖象存儲在image[]數(shù)組中，所有frame存儲在frames[]數(shù)組中。如頁面中只定義了一個表單，可用document.forms[0]引用該表單。7、location對象的屬性應(yīng)用示例P154例3-21：location對象將頁面的URL進(jìn)行分析，將各個URL地址的各個組成部分分析出來。

第4章Web腳本語言JavaScript8、location對象assign、reload、replace方法：assign()方法能將頁面導(dǎo)航到另一個地址上去；reload()方法將頁面全部刷新；replace()方法可使用URL將當(dāng)前頁面代替，它與assign()方法不同之處是：assign()方法將頁面導(dǎo)航到另一頁面，用戶在瀏覽器中運(yùn)用“后退”按鈕還能返回到這個頁面，replace()方法是用另一個頁面取代當(dāng)前頁面，用戶在瀏覽器中不能運(yùn)用“后退”按鈕返回當(dāng)前頁面。9、history對象的length屬性：記錄當(dāng)前瀏覽器訪問歷史記錄的數(shù)量。在Navigator瀏覽器中，還有previous、current、next屬性對應(yīng)瀏覽器訪問的前一條歷史記錄、當(dāng)前歷史記錄和后一條歷史記錄，還可通過history[i]獲得歷史記錄列表中的第i條歷史記錄。

第4章Web腳本語言JavaScript10、history對象的back()、forward()和go()方法：back()方法可載入歷史記錄中前一個歷史記錄的URL地址；forward()方法可載入歷史記錄中下一個歷史記錄的URL地址，go()方法可載入歷史記錄中任何一個歷史記錄的URL地址，該方法有一個參數(shù)，代表載入歷史記錄列表中相對位置的歷史記錄，go(-1)與back()功能一致；go(1)與forward()功能一致。P155例3-2211、navigator對象的appName屬性：獲得瀏覽器的名稱。12、JavaScript的表單對象應(yīng)用示例：一個表單隸屬于一個文檔，對于表單對象的引用通過使用隸屬文檔的表單數(shù)組進(jìn)行引用，即使在只有一個表單的文檔中，表單也是一個一元數(shù)組的元素，引用格式為：document.forms[0]

第4章Web腳本語言JavaScript對表單命名后，也可通過名稱引用，如：注意：表單數(shù)組引用采用form的復(fù)數(shù)形式forms，數(shù)組下標(biāo)從0開始。如在一個表單中有多個表單元素具有相同的名稱，JavaScript自動創(chuàng)建一個數(shù)組存放這些元素，數(shù)組中每個元素代表一個表單元素，數(shù)組下標(biāo)從0開始，表單元素的下標(biāo)和它們在表單中出現(xiàn)的順序是一致的。

13、表單的reset、submit方法：reset()方法將表單中所有元素值重新設(shè)置為默認(rèn)狀態(tài)，如在表單中定義了Reset按鈕，則reset()方法執(zhí)行后的效果與單擊Reset按鈕效果是相同的。submit()方法將表單數(shù)據(jù)發(fā)送給服務(wù)器的ASP程序處理，如在表單中定義了Submit按鈕，則submit()方法執(zhí)行后的效果與單擊Submit按鈕效果相同。應(yīng)用示例見P157例24。

第4章Web腳本語言JavaScript14、表單的OnReset、OnSubmit事件單擊Reset按鈕或執(zhí)行Reset()方法將表單中所有元素重新設(shè)置為默認(rèn)值前，JavaScript將調(diào)用OnReset事件處理函數(shù)進(jìn)行處理，當(dāng)事件處理函數(shù)返回值為true后，表單中所有元素重新設(shè)置為默認(rèn)狀態(tài)，如果返回值為false，則不進(jìn)行Reset操作。單擊Submit按鈕或執(zhí)行submit()方法將表單數(shù)據(jù)向服務(wù)器提交前，JavaScript將調(diào)用OnSubmit的事件處理函數(shù)進(jìn)行處理，當(dāng)事件處理函數(shù)返回值為true后，將表單數(shù)據(jù)向