第4章JavaScript腳本技術(shù)

本章目標(biāo)了解JavaScript的定義和基本概念了解JavaScript的基本語法了解基于對象編程方法了解事務(wù)驅(qū)動概念駕馭JavaScript中的對象駕馭JavaScript中的事務(wù)駕馭運(yùn)用JavaScript處理表單4.1JavaScript基本概念JavaScript的概念以及特點(diǎn)JavaScript和Java的區(qū)分程序運(yùn)行環(huán)境4.1.1JavaScript的概念以及特點(diǎn)JavaScript是一種基于對象(Object)和事務(wù)驅(qū)動(EventDriven)并具有平安性能的腳本語言。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，可以開發(fā)客戶端的應(yīng)用程序。JavaScript具有以下幾個(gè)基本特點(diǎn)：是一種腳本編寫語言基于對象的語言簡潔性平安性動態(tài)性跨平臺性4.1.2JavaScript和Java的區(qū)分兩種語言間的異同作如下比較：基于對象和面對對象說明和編譯強(qiáng)變量和弱變量代碼格式不一樣嵌入方式不一樣4.1.3程序運(yùn)行環(huán)境軟件環(huán)境：Windows95/98或WindowsNT。NetscapeNavigatorx.0或InternetExplorerx.0。用于編輯HTML文檔的字符編輯器(Notepad等)或HTML文檔編輯器。硬件環(huán)境：基本內(nèi)存32M。CRT至少須要256顏色，辨別率在640X480以上。CPU至少133以上。鼠標(biāo)和其它外部設(shè)備（依據(jù)須要選用）。4.2JavaScript的標(biāo)識和說明語句語法:<ScriptLanguage="JavaScript"></Script>說明:通過標(biāo)識<Script>...</Script>指明JavaScript腳本源代碼將放入其間。通過屬性Language=“JavaScript”說明標(biāo)識中是使用的何種語言。語法://語句說明:單行注釋，JavaScript將忽略這一行后面的語句。語法:/*語句集*/說明:注釋多行，JavaScript將忽略/*和*/之間的所有語句。4.3變量、變量類型、作用域、數(shù)組在JavaScript中四種基本的數(shù)據(jù)類型：數(shù)值（整數(shù)和實(shí)數(shù)）、字符串型（用“”號或‘’括起來的字符或數(shù)值）、布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數(shù)據(jù)可以是常量，也可以變量。由于JavaScript接受弱類型的形式，因而一個(gè)數(shù)據(jù)的變量或常量不必首先作聲明，而是在運(yùn)用或賦值時(shí)確定其數(shù)據(jù)的類型的。4.3變量、變量類型、作用域、數(shù)組（續(xù)）常量整型常量實(shí)型常量布爾值字符型常量空值特殊字符4.3變量、變量類型、作用域、數(shù)組（續(xù)）變量的定義變量的主要作用是存取數(shù)據(jù)、供應(yīng)存放信息的容器。變量的命名變量以字母開頭，中間可以出現(xiàn)數(shù)字除下劃線作為連字符外，變量名稱不能有空格、加號、減號、逗號或其它符號。不能運(yùn)用JavaScript中的關(guān)鍵字作為變量。變量的類型在JavaScript中，變量可以不作聲明，而在運(yùn)用時(shí)再依據(jù)數(shù)據(jù)的類型來確其變量的類型。變量的聲明及其作用域在JavaScript中同樣有全局變量和局部變量。全局變量是定義在全部函數(shù)體之外，其作用范圍是整個(gè)函數(shù)；而局部變量是定義在函數(shù)體之內(nèi)，只對其該函數(shù)是可見的，而對其它函數(shù)則是不行見的。4.3變量、變量類型、作用域、數(shù)組（續(xù)）數(shù)組的定義語法:數(shù)組名=newArray(數(shù)組元素個(gè)數(shù))說明:其中數(shù)組名表示程序中需要使用的數(shù)組引用，數(shù)組元素個(gè)數(shù)表示這個(gè)數(shù)組中有多少個(gè)元素。4.4函數(shù)函數(shù)為程序設(shè)計(jì)人員供應(yīng)了一個(gè)豐常便利的方法。通常在進(jìn)行一個(gè)困難的程序設(shè)計(jì)時(shí)，總是依據(jù)所要完成的功能，將程序劃分為一些相對獨(dú)立的部分，每部分編寫一個(gè)函數(shù)。從而，使各部分充分獨(dú)立，任務(wù)單一，程序清晰，易懂、易讀、易維護(hù)。4.4函數(shù)（續(xù)）語法:function函數(shù)名（參數(shù),變元）{函數(shù)體;return表達(dá)式;}說明:當(dāng)調(diào)用函數(shù)時(shí),所用變量或自變量均可作為變元傳遞。函數(shù)由關(guān)鍵字function定義。函數(shù)名：定義自己函數(shù)的名字。參數(shù)表，是傳遞給函數(shù)使用或操作的值，其值可以是常量，變量或其它表達(dá)式。在JavaScript中可通過arguments.length來檢查參數(shù)的個(gè)數(shù)。通過指定函數(shù)名（實(shí)參）來調(diào)用一個(gè)函數(shù)。必須使用return將值返回。函數(shù)名對大小寫是敏感的。4.5運(yùn)算符、表達(dá)式在定義完變量后，就可以對它們進(jìn)行賦值、變更、計(jì)算等一系列操作，這一過程通常由表達(dá)式來完成，可以說它是變量、常量、布爾及運(yùn)算符的集合。表達(dá)式可以分為算術(shù)表述式、字串表達(dá)式、賦值表達(dá)式以及布爾表達(dá)式等。4.5運(yùn)算符、表達(dá)式（續(xù)）JavaScript有雙目運(yùn)算符和單目運(yùn)算符兩種運(yùn)算符。雙目運(yùn)算符由下列組成：操作數(shù)１運(yùn)算符操作數(shù)２單目運(yùn)算符：只需一個(gè)操作數(shù)，其運(yùn)算符可在前或后。即：操作數(shù)運(yùn)算符或者運(yùn)算符操作數(shù)4.5運(yùn)算符、表達(dá)式（續(xù)）算術(shù)運(yùn)算符+（加）、-（減）、*（乘）、/（除）、%（取模）、-（取反）、++（遞加1）、--（遞減1）比較運(yùn)算符<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)、===（確定等于）布爾邏輯運(yùn)算符!（取反）、&&（邏輯與）、||（邏輯或）、^（邏輯異或）三目運(yùn)算符表達(dá)式？結(jié)果１：結(jié)果２4.6結(jié)構(gòu)化程序設(shè)計(jì)基礎(chǔ)結(jié)構(gòu)化程序設(shè)計(jì)的基本思想自頂向下，模塊化，逐步求精。3種基本結(jié)構(gòu)依次結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種基本結(jié)構(gòu)的共同特點(diǎn)只有一個(gè)入口。只有一個(gè)出口。結(jié)構(gòu)內(nèi)的每一部分都有機(jī)會被執(zhí)行到。結(jié)構(gòu)內(nèi)不存在“死循環(huán)”。4.6.1結(jié)構(gòu)化程序設(shè)計(jì)的基本思想結(jié)構(gòu)化程序設(shè)計(jì)的基本思想是：自頂向下，模塊化，逐步求精。任何程序都可以用三種基本結(jié)構(gòu)的組合來實(shí)現(xiàn)。這三種基本結(jié)構(gòu)是：依次結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。這三種結(jié)構(gòu)都具有也只具有一個(gè)入口和一個(gè)出口。4.6.2程序的三種基本結(jié)構(gòu)依次結(jié)構(gòu)流程圖畫法：4.6.2程序的三種基本結(jié)構(gòu)（續(xù)）分支結(jié)構(gòu)流程圖畫法：4.6.2程序的三種基本結(jié)構(gòu)（續(xù)）循環(huán)結(jié)構(gòu)流程圖畫法：4.6.2程序的三種基本結(jié)構(gòu)（續(xù)）三種基本結(jié)構(gòu)的共同特點(diǎn)：只有一個(gè)入口；只有一個(gè)出口；結(jié)構(gòu)內(nèi)的每一部分都有機(jī)會被執(zhí)行到；結(jié)構(gòu)內(nèi)不存在“死循環(huán)”。4.6.3程序流程圖N-S流程圖1973年美國學(xué)者提出了一種新型流程圖，也稱盒圖特點(diǎn)：簡潔明白，邏輯清晰，結(jié)構(gòu)嚴(yán)謹(jǐn)4.6.3程序流程圖（續(xù)）N-S圖依次結(jié)構(gòu)：4.6.3程序流程圖（續(xù)）N-S圖分支結(jié)構(gòu)：4.6.3程序流程圖（續(xù)）N-S圖循環(huán)結(jié)構(gòu)：4.7JavaScript的流程限制在任何一種語言中，程序限制是必需的，它能使得整個(gè)程序順當(dāng)?shù)陌闯绦蛟O(shè)計(jì)者希望的方式和依次執(zhí)行。下面是JavaScript常用的程序限制結(jié)構(gòu)及語句，因?yàn)槿笔顩r下，程序是依據(jù)語句的依次來依次執(zhí)行的，所以依次結(jié)構(gòu)就是通過語句的依次實(shí)現(xiàn)的。其他兩種結(jié)構(gòu)，分別是：分支結(jié)構(gòu)循環(huán)結(jié)構(gòu)4.7JavaScript的流程限制（續(xù)）分支結(jié)構(gòu)：語法:if（表述式）{ 語句段１；}else{ 語句段２；}說明:若表達(dá)式為true，則執(zhí)行語句段１；否則執(zhí)行語句段２。4.7JavaScript的流程限制（續(xù)）分支結(jié)構(gòu)：語法:Switch(變量名){ Case值1: 語句段1 Case值2: 語句段2 …… default: 語句段n}說明:Switch分支語句用來實(shí)現(xiàn)多支判斷，根據(jù)變量名指定的變量的變量值和case語句后面的值是否相等來決定是否執(zhí)行后面的語句，如果都不相等，則執(zhí)行default后面的語句。4.7JavaScript的流程限制（續(xù)）循環(huán)結(jié)構(gòu)：語法:while（條件）{ 語句段}說明:當(dāng)條件為真時(shí)，重復(fù)循環(huán)，否則退出循環(huán)。4.8對象的基礎(chǔ)學(xué)問對象的基本結(jié)構(gòu)JavaScript中的對象是由屬性(properties)和方法(methods)兩個(gè)基本的元素構(gòu)成的。引用對象的途徑一個(gè)對象要真正地被運(yùn)用，可接受以下幾種方式獲得：引用JavaScript內(nèi)部對象；由閱讀器環(huán)境中供應(yīng)；創(chuàng)建新對象。4.8對象的基礎(chǔ)學(xué)問（續(xù)）在JavaScript中供應(yīng)了幾個(gè)用于操作對象的語句和關(guān)鍵字及運(yùn)算符。語法:For（對象屬性名in已知對象名）{循環(huán)體}說明:該語句的功能是用于對已知對象的所有屬性進(jìn)行操作的控制循環(huán)。4.8對象的基礎(chǔ)學(xué)問（續(xù)）語法:With（對象名）{循環(huán)體} 說明:使用該語句的意思是：在該語句體內(nèi)，任何對變量的引用被認(rèn)為是這個(gè)對象的屬性。4.8對象的基礎(chǔ)學(xué)問（續(xù)）this關(guān)鍵字this是對當(dāng)前的引用，在JavaScript由于對象的引用是多層次，多方位的，往往一個(gè)對象的引用又須要對另一個(gè)對象的引用，而另一個(gè)對象有可能又要引用另一個(gè)對象，這樣有可能造成混亂，為此JavaScript供應(yīng)了一個(gè)用于將對象指定當(dāng)前對象的語句this。4.8對象的基礎(chǔ)學(xué)問（續(xù)）對象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：運(yùn)用點(diǎn)運(yùn)算符通過對象的下標(biāo)實(shí)現(xiàn)引用通過字符串的形式實(shí)現(xiàn)4.8對象的基礎(chǔ)學(xué)問（續(xù)）對象下標(biāo)：語法:Object[num]說明:其中Object是對象名稱，num是屬性在這個(gè)對象中是第幾個(gè)屬性的索引。4.8對象的基礎(chǔ)學(xué)問（續(xù)）字符串的形式：語法:Object[“屬性名稱”]說明:其中Object是對象名稱，num是屬性在這個(gè)對象中是第幾個(gè)屬性的索引。4.8對象的基礎(chǔ)學(xué)問（續(xù)）對象方法的運(yùn)用：語法:Object[“屬性名稱”]說明:其中Object是對象的名稱，Methods是對象方法的名稱。4.9JavaScript的內(nèi)置對象和方法JavaScript供應(yīng)了一些特別有用的常用內(nèi)部對象和方法。用戶不須要用腳原來實(shí)現(xiàn)這些功能。這正是基于對象編程的真正目的。在JavaScript供應(yīng)了String（字符串）、Math（數(shù)值計(jì)算）和Date（日期）三種對象和其他一些相關(guān)的方法。從而為編程人員快速開發(fā)強(qiáng)大的腳本程序供應(yīng)了特別有利的條件。4.9.1常用內(nèi)部對象常用內(nèi)部對象串對象該對象只有一個(gè)屬性，即length。string對象的方法共有１９個(gè)，主要用于有關(guān)字符串在Web頁面中的顯示、字體大小、字體顏色、字符的搜尋以及字符的大小寫轉(zhuǎn)換。算術(shù)函數(shù)的math對象math中供應(yīng)了６個(gè)屬性，它們是數(shù)學(xué)中常常用到的常數(shù)Ｅ、以１０為底的自然對數(shù)ＬＮ１０、以２為底的自然對數(shù)LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根為SQRT2。主要方法有：確定值：abs()、正弦余弦值：sin(),cos()、反正弦反余弦:asin(),acos()、正切反正切：tan(),atan()、四舍五入：round()、平方根：sqrt()、基于幾方次的值：Pow(base,exponent)。日期剛好間對象Date對象沒有供應(yīng)干脆訪問的屬性。只具有獲得和設(shè)置日期和時(shí)間的方法。4.9.2JavaScript中的系統(tǒng)函數(shù)JavaScript中的系統(tǒng)函數(shù)JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它供應(yīng)了與任何對象無關(guān)的系統(tǒng)函數(shù)，運(yùn)用這些函數(shù)不需創(chuàng)建任何實(shí)例,可干脆用。返回字符串表達(dá)式中的值返回字符串ASCI碼返回字符的編碼返回實(shí)數(shù)返回不同進(jìn)制的數(shù)4.10JavaScript可以運(yùn)用的閱讀器對象對象模型如下圖所示：4.10.1窗口對象JavaScript是基于對象的腳本編程語言，那么它的輸入輸出就是通過對象來完成的。其中有關(guān)輸入可通過窗口（window）對象來完成，而輸出可通過文檔（document）對象的方法來實(shí)現(xiàn)。窗口及輸入輸出窗口對象窗口對象的事務(wù)驅(qū)動窗口對象的方法窗口對象中的屬性輸出流及文檔對象4.10.2文檔對象文檔對象是特別重要的,它位于最低層,但對于我們實(shí)現(xiàn)Web頁面信息交互起作關(guān)鍵作用。因而它是對象系統(tǒng)的核心部分。document中三個(gè)主要的對象anchor錨對象鏈接links對象窗體（Form）對象文檔對象中的attribute屬性激活的鏈接顏色：alinkcolor鏈接顏色：linkcolor閱讀過后的顏色：VlinkColor背景顏色：bgcolor前景顏色：Fgcolor文檔對象的基本元素表單屬性錨屬性鏈接屬性4.11JavaScript的事務(wù)處理基本概念JavaScript是基于對象(object-based)的語言。而基于對象的基本特征，就是接受事務(wù)驅(qū)動(event-driven)。通常鼠標(biāo)或熱鍵的動作我們稱之為事務(wù)，而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動