版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
Web程序設計(第4版)“十二五”普通高等教育本科國家級規(guī)劃教材目錄第1章
Web編程基礎知識
第2章Web應用程序開發(fā)與運行環(huán)境第3章HTML與XML第4章層疊樣式表CSS第5章Web客戶端程序設計第6章Web服務器端程序設計第7章Web數據庫程序設計第8章ASP.NET綜合應用實例
第5章Web客戶端程序設計
5.1腳本語言JavaScript5.2瀏覽器對象模型及應用5.3HTMLDOMWeb客戶端程序設計概述
網頁設計要使用多種技術，包括HTML語言、腳本程序設計、CSS樣式表以及美工技術等。
動態(tài)網頁，指的是按照訪問者的需要，對訪問者輸入的信息作出不同的響應，提供響應信息。更進一步，動態(tài)網頁設計技術又可分為客戶端和服務器端，客戶端動態(tài)網頁設計技術主要使用層疊樣式表（CSS）和在瀏覽器中執(zhí)行的腳本程序，而服務器端動態(tài)網頁設計技術主要使用ASP.NET、JSP、PHP等。
Web客戶端程序設計概述
隨著Web頁面的內容和表現手法越來越豐富，將其結構、表現和行為分離成為趨勢。構建精良的Web頁面一般有三個層次，分別是：結構（Structure）層表現（Presentation）層行為（Behavior）層對應的標準也分三方面：結構化標準語言（主要包括(X)HTML和XML）、表現標準語言（主要指CSS）和行為標準（主要包括對象模型和腳本語言）。Web客戶端程序設計的主要內容是腳本語言和瀏覽器對象模型。5.1腳本語言JavaScript
腳本（Script）語言的概念源于UNIX操作系統(tǒng)，在UNIX操作系統(tǒng)中，將主要以行命令組成的命令集稱為Shell腳本程序。Shell腳本程序具有一定的控制結構，可以帶參數，由系統(tǒng)解釋執(zhí)行。除了UNIXShellScript外，在UNIX環(huán)境下，具有強大的字符串處理能力的Perl語言也是腳本語言的典型代表。傳統(tǒng)腳本語言常用來編寫執(zhí)行一次性任務，通常以文本(如ASCII)保存，只在被調用時進行解釋或編譯。而現在腳本和傳統(tǒng)編程語言之間的界限越來越模糊。在一些腳本語言中，有經驗的程序員可以進行大量優(yōu)化工作。
本章所討論的腳本語言是指用于Web頁面及程序設計的腳本語言，它們通常是嵌入式（嵌入到HTML文件中）的、具有解釋執(zhí)行的特征。5.1.1什么是腳本語言
JavaScript是一種嵌入在HTML文件中的腳本語言，它是基于對象和事件驅動的，能對諸如鼠標單擊、表單輸入、頁面瀏覽等用戶事件做出反應并進行處理。
JavaScript特點：（1）簡單性（2）基于對象（3）可移植性（4）動態(tài)性5.1.2JavaScript語言概述
5.1腳本語言JavaScript1．JavaScript程序的編輯和調試5.1.3JavaScript編程基礎
可以用任何文本編輯器來編輯JavaScript程序例如：NotePad。需要將JavaScript程序嵌入HTML文件。程序的調試在瀏覽器中進行。5.1腳本語言JavaScript1．JavaScript程序的編輯和調試5.1.3JavaScript編程基礎
將JavaScript程序嵌入HTML文件的方法有兩種：①在HTML文件中使用<script>、</script>標識加入JavaScript語句，這樣HTML語句和JavaScript語句位于同一個文件中。其格式為：<scriptlanguage="JavaScript">其中，language屬性指明腳本語言的類型。通常有兩種腳本語言：JavaScript和VBScript，language的默認值為JavaScript。<script>標記可插入在HTML文件的任何位置。②將JavaScript程序以擴展名“.js”單獨存放，再利用以下格式的script標記嵌入HTML文件：<scriptsrc=JavaScript文件名>方法②將HTML代碼和JavaScript代碼分別存放，有利于程序的共享，即多個HTML文件可以共用相同的JavaScript程序。<script>標記通常加在HTML文件的頭部。5.1腳本語言JavaScript1．JavaScript程序的編輯和調試5.1.3JavaScript編程基礎
一個簡例：<html><head><title>JavaScript簡例</title></head><body><scriptlanguage="JavaScript">alert("世界，你好!");</script></body></html>5.1腳本語言JavaScript1．JavaScript程序的編輯和調試5.1.3JavaScript編程基礎
編寫JavaScript程序時還要注意以下三點：①JavaScript的大小寫是敏感的，這點與C++相似。②在JavaScript程序中，換行符是一個完整的語句的結束標志；若要將幾行代碼放在一行中，則各語句間要以分號（；）分隔（習慣上，也可像C++一樣，在每一個語句之后以一個分號結束）。③JavaScript的注釋標記是雙斜杠“//”之后的部分，或符號“/*”與符號“*/”之間的部分（與C++相同）。5.1腳本語言JavaScript2．數據類型
5.1.3JavaScript編程基礎
JavaScript有三種數據類型：數值型、邏輯型和字符型。（1）數值型。數值型數據包括整數和浮點數。整數可以是十進制、八進制和十六進制數，八進制值以0開頭，十六進制值以0x開頭。例如：100（十進制），021（八進制），0x5d（十六進制）。以下是浮點數例子：2.57，1.3e6，2，7e-10。（2）邏輯型。邏輯型數據有true和false兩種取值，分別表示邏輯真和邏輯假。（3）字符型。字符型數據的值是以雙引號""或單引號''括起來的任意長度的一連串字符。注意反斜杠“\”是轉義字符，常用的轉義序列有：\n——換行符 \t——水平制表符
\r——回車符\b——退格符5.1腳本語言JavaScript3．常量和變量
5.1.3JavaScript編程基礎
（1）常量常量是在程序中其值保持不變的量。JavaScript的常量以直接量的形式出現，即在程序中直接引用值，如“歡迎您”、28等。常量值可以為整型、實型、邏輯型及字符串型。另外，JavaScript中有一個空值null，表示什么也沒有，如試圖引用沒有定義的變量，則返回一個null值。
5.1腳本語言JavaScript3．常量和變量
5.1.3JavaScript編程基礎
（2）變量變量是在程序中值可以改變的量。JavaScript用關鍵字var聲明變量，或使用賦值的形式聲明變量。例如：var
str;/*聲明變量str*/num1=10;/*說明num1為整型，并將其值賦為10*/num2=3.02e10;str1="歡迎您";5.1腳本語言JavaScript3．常量和變量
5.1.3JavaScript編程基礎
（2）變量
JavaScript命名變量的規(guī)則是：①變量名必須以字母（大小寫均可）打頭，只能由字母（大小寫均可）、數字（0~9）和下劃線“_”組成；②變量名長度不能超過1行，并且不能使用JavaScript保留字作變量名；③變量名字母區(qū)分大小寫。5.1腳本語言JavaScriptJavaScript的保留字
5.1.3JavaScript編程基礎
abstractbooleanbreakbytecasecatchcharclassconstcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetryvarvoidwhilewith5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
運算符JavaScript的運算符包括：賦值運算符算術運算符字符串運算符邏輯運算符關系運算符位運算符5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
賦值運算符。JavaScript提供6個賦值運算符，它們是基本賦值運算符“=”，復合賦值運算符：+=、-=、*=、/=和%=，功能是將一個表達式的值賦予一個變量。
記
法含
義記
法含
義a+=ba=a+ba-=ba=a-ba*=ba=a*ba/=ba=a/ba%=ba=a%ba<<ba=a<<ba>>=ba=a>>ba>>>=ba=a>>>ba&=ba=a&ba^=ba=a^ba|=ba=a|b賦值運算符簡記形式表
5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
算術運算符。算術運算符的操作數和結果都是數值型值。算術運算符及位運算符可與賦值運算符結合形成簡記形式賦值運算符簡記形式表
運
算
符操
作運
算
符操
作+加法-（雙目）減法*乘法/除法%取模++遞增--遞減-（單目）取負5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
字符串運算符。字符串運算是JavaScript中使用最多的運算。字符串運算符只有一個“+”，即字符串連接運算。參與字符串連接運算的兩個操作數如果都是字符串，則直接合并；否則，操作數會先被轉變?yōu)樽址龠M行合并。例如：varstr1="歡迎您"+"訪問本頁";
//變量str1的值為“歡迎您訪問本頁”varstr2="現在是"+10+"月";
//變量str2的值為“現在是10月”5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
邏輯運算符。邏輯運算符的運算對象和結果都是邏輯值。邏輯運算符有三個：&&與運算是雙目運算。當兩個操作數都為true時，結果為true，其他情況下結果均為false。||或運算是雙目運算。當兩個操作數中至少有一個為true時，結果為true，否則結果為false。!非運算是單目運算。結果是操作數的值取反。5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
關系運算符。關系運算符用于數值及字符串值的比較，返回比較判斷的結果。關系運算符的運算結果是邏輯值。關系運算包括：==相等！=不等<小于>大于<=小于或等于>=大于或等于例如：x>=100，y==20利用關系運算符、邏輯運算符及括號可以組成復雜的表達式。例如：（?。╝==9）&&（x<=100））||（a!=9））
5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
位運算符。位運算符將操作數作為二進制值處理，返回JavaScript標準的數值型數據。位運算符都是雙目運算，包括：&按位與|按位或^按位異或<<左移>>右移>>>右移，零填充例如：15&8的結果為8（1111&1000）
15|8的結果為15（1111|1000）
15^8的結果為7（1111|1000）5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
JavaScript運算符的優(yōu)先級由高到低排列如下：[]() 高++--!*/%+-<<>>>>><><=>===!=&^|&&||?==+=-=*=/=%= 低5.1腳本語言JavaScript4．運算符和表達式
5.1.3JavaScript編程基礎
表達式表達式是由常量、變量、運算符、函數和表達式組成的式子，任何表達式都可求得單一值。根據表達式值的類型，JavaScript的表達式有三類：①算術表達式。其值是一個數值型值。例如：5+a-x。②字符串表達式。其值是一個字符串。例如："字符串1"+str。③邏輯表達式。其值是一個邏輯值。例如：(x==y)&&(y>=5)。特殊的表達式——條件表達式，其格式為：
(condition)?val1:val2其中，condition是邏輯表達式。該條件表達式的含義是：如果condition的值為true，則條件表達式的值為val1，否則條件表達式的值為val2。5.1腳本語言JavaScript5．函數
5.1.3JavaScript編程基礎
函數為程序設計人員提供了實現模塊化的工具。
將程序劃分為一些相對獨立的部分，每部分編寫一個函數，從而使各部分充分獨立，任務單一，程序清晰，易懂、易讀、易維護。JavaScript函數可以封裝那些在程序中可能要多次用到的功能塊。函數定義的語法格式為：function函數名(參數表){
函數體return表達式或return（表達式）}
5.1腳本語言JavaScript5．函數
5.1.3JavaScript編程基礎
【例5-1】設計一個如圖所示的頁面，顯示指定數的階乘值。<html><head><title>函數簡例</title><scriptlanguage="JavaScript">functionfactor(num){
var
i,fact=1;for(i=1;i<num+1;i++)fact=i*fact;returnfact;}</script></head><body><p><script>document.write("<br><br>調用factor函數，5的階乘等于：",factor(5),"。");</script></p></body></html>5.1腳本語言JavaScript5．函數
5.1.3JavaScript編程基礎
使用函數時要注意以下三點：①函數定義位置。推薦在HTML文件的頭部定義所有的函數，因為這樣可以保證函數的定義先于其調用語句載入瀏覽器，從而不會出現調用函數時由于函數定義尚未載入瀏覽器而引起的函數未定義錯。②函數的參數。函數的參數是在主調程序與被調用函數之間傳遞數據的主要手段。③變量的作用域。5.1腳本語言JavaScript5.1.3JavaScript編程基礎
在函數的定義時，可以給出一個或多個形式參數，而在調用函數時，卻不一定要給出同樣多的實參。JavaScript中，系統(tǒng)變量arguments.length中保存了調用者給出的實在參數的個數。
【例5-2】設計一個函數求累加和，默認時求1+2+…+1000，否則按照用戶所指定的開始值和終止值求和。functionsum(StartVal,EndVal){var
ArgNum=sum.arguments.length;
var
i,s=0;if(ArgNum==0){StartVal=1;EndVal=1000;}elseif(ArgNum==1)
EndVal=1000;for(i=StartVal;i<=EndVal;i++)s+=i;returns;}5.1腳本語言JavaScript5.1.3JavaScript編程基礎
變量的作用域。在函數內用var保留字聲明的變量是局部變量，其作用域僅局限于該函數；而在函數外用var保留字聲明的變量是全局變量，其作用域是整個HTML文件。在函數內未用var聲明的變量也是全局變量當函數內以var聲明的變量與全局變量同名時，它們就像不同名的兩個變量，其操作互不影響。
【例5-3】變量作用域示例。
<scriptlanguage="JavaScript">vari,j=10;//全局變量functionoutput(){
varj=0;//局部變量
i=100;//全局變量
j++;j++;document.write("j=",j);document.write("i=",i);
i++;}
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
JavaScript有順序、分支和循環(huán)三種控制結構。順序結構是最一般的控制結構，若沒有改變執(zhí)行順序的語句，則程序的各語句是按其出現的先后順序依次執(zhí)行的。可以改變程序執(zhí)行順序的是條件轉移語句和循環(huán)語句。
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
條件轉移語句：if(condition)statments1[elsestatments2]其中，condition表示條件，可以是邏輯或關系表達式，若是數值型數據，則將零和非零的數分別轉換成false和true。如果condition為true，則執(zhí)行語句體statments1；若省略else子句，則condition為false時什么也不做，否則執(zhí)行語句體statments2。若if及else后的語句體有多行，則必須使用花括號將其括起來。
if語句可以嵌套，格式為：if（condition1）statments1elseif（condition2）statments2elseif（condition3）statments3
elsestatmentsN；5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
while循環(huán)語句：while(condition){statments}當condition為true時，反復執(zhí)行循環(huán)體statements；否則，跳出循環(huán)體。要注意在循環(huán)體中必須含有改變循環(huán)條件的操作，使之離循環(huán)終止更近一步，否則會陷入死循環(huán)。
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
for循環(huán)語句：for(exp1；exp2；exp3){statments}其中，exp1是循環(huán)前的初始設置，通常設置循環(huán)計數器的初值；exp2是循環(huán)條件，當exp2為true時才執(zhí)行循環(huán)體statments；exp3是運算，它改變循環(huán)設置，通常會改變循環(huán)計數器的值，使之離循環(huán)終止更近一步。
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
【例5-4】使用for循環(huán)語句計算10！。<html><body><script>
var
i,factor;factor=1;for(i=1;i<=10;i++)factor*=i;document.write("10的階乘是：",factor);</script></body></html>
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
6.流程控制
continue和break語句continue語句強制本輪循環(huán)結束，進入下一輪循環(huán)；例如：while(i<100){if(j==0)continue;else{語句體}j++;}break語句強制結束循環(huán)。例如：while(i<100){if(j==0)break;else{語句體}j++;}5.1腳本語言JavaScript5.1.3JavaScript編程基礎
7.事件觸發(fā)和處理
JavaScript是基于對象（Object-based）的語言，而基于對象的基本特征，就是采用事件驅動（Event-driven）。事件（Events）是指對計算機進行一定的操作而得到的結果，例如將鼠標移到某個超鏈接上、按下鼠標按鈕等都是事件。由鼠標或熱鍵引發(fā)的一連串程序的動作，稱為事件驅動（EventDriver）。對事件進行處理的程序或函數，稱為事件處理程序（EventHandler）。
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
JavaScript常用事件表
事
件
名發(fā)生的對象說
明事件處理名Click表單的button，radio，checkbox，submit，reset，link（超鏈接）單擊了表單元素或超鏈接onClickLoadHTML的body元素在瀏覽器中載入頁面onLoadUnloadHTML的body元素退出當前頁面onUnloadMouseOverlink鼠標移到超鏈接上onMouseOverMouseOutlink鼠標移出超鏈接onMouseOutSubmitform用戶提交了表單onSubmit5.1腳本語言JavaScript5.1.3JavaScript編程基礎
【例5-5】MouseOver和MouseOut事件處理用法示例。
<html><head><title>事件觸發(fā)和事件處理</title><scriptlanguage="JavaScript">varImages=newArray();Images[0]=newImage();Images[0].src="dot1.jpg";Images[1]=newImage();Images[1].src="check.gif";functionchangeImg(ImgIndex){document.imgs.src=Images[ImgIndex].src;}</script></head><body><center><ahref="learn.html"onMouseOver="changeImg(1);returntrue"onMouseOut="changeImg(0);returntrue"><img
src="dot1.jpg"name="imgs"border=0width=30height=30><fontsize=5>軟件設計</font></a></center></body></html>
5.1腳本語言JavaScript5.1.3JavaScript編程基礎
【例5-6】簡易計算器設計。
首先，需要設置數字按鍵和功能按鍵：可使用表單按鈕（button）來表示。例如，使用如下語句：<inputtype=buttonvalue="1"onClick="SetVal('1')">顯示數字“1”的按鍵，當按下該按鍵時，將執(zhí)行SetVal('1')操作。<inputtype=buttonvalue="+"onClick="SetOpr('+')">顯示運算符“+”的按鍵，當按下該按鍵時，將執(zhí)行SetOpr('+')操作。又如以下語句：<inputtype=buttonvalue="="onClick="Compute(this.form)">顯示功能按鍵“=”，當按下該鍵時，將計算用戶輸入的表達式的值。5.1腳本語言JavaScript5.1.3JavaScript編程基礎
【例5-6】簡易計算器設計。
其次，需要一個顯示輸入計算式和結果的地方，可使用HTML表單的text（單行文本框）元素來表示，例如：<inputtype=textvalue=""name=OutText>最后，要考慮這些設置和計算任務如何來完成。①SetVal操作：將用戶按下的鍵所代表的數字連接到整個輸入串的尾部，并判斷這是第幾個操作數，將其存入相應的變量中；②SetOpr操作：將用戶按下的鍵所代表的運算連接到整個輸入串的尾部；③Compute操作：利用系統(tǒng)預定義函數eval()求出表達式的值；④Clear操作：清除輸入框的內容。
5.1腳本語言JavaScript5.1.4JavaScript對象
在JavaScript中，對象是對客觀事物或事物之間的關系的刻畫。
兩類JavaScript的對象：內建對象內建對象包含了對瀏覽器各成分的描述，是JavaScript程序設計中應用最多的部分；用戶自定義對象用戶自定義對象允許用戶根據需要創(chuàng)建自己的對象，從而進一步擴大JavaScript的應用范圍，增強編寫功能強大的Web文檔。
5.1腳本語言JavaScript5.1.4JavaScript對象
JavaScript中的對象是由屬性（Properties）和方法（Methods）兩個基本元素構成的：屬性成員是對象的數據；方法成員是對數據的操作。要使用一個對象，可采用以下三種方式：①引用JavaScript內建對象。②由瀏覽器環(huán)境提供，即引用瀏覽器對象。③創(chuàng)建自定義對象。注意：一個對象在被引用之前，這個對象必須存在，否則將出現錯誤。實際上，引用對象要么創(chuàng)建新的對象，要么利用現存的對象。1.JavaScript對象概述
5.1腳本語言JavaScript5.1.4JavaScript對象
用戶定義自己的對象包括兩部分：
構造對象的屬性定義對象的方法
定義對象的步驟是：首先定義對象的各個方法成員，每個方法成員就是一個普通函數。然后定義對象的構造函數，其中包含每個屬性成員的定義和初始化，以及每個方法成員的初始化。2.自定義對象
5.1腳本語言JavaScript5.1.4JavaScript對象
【例5-7】“書”對象的定義。
functionprint(){//方法成員定義，輸出各屬性成員值document.write("書名為"++"<br>");document.write("作者為"+this.author+"<br>");document.write("出版社為"+this.publisher+"<br>");document.write("出版時間為"+this.date+"<br>");document.write("印數為"+this.num+"<br>");}functionbook(name,author,publisher,date,num){//構造函數=name;//書名，屬性成員this.author=author;//作者，屬性成員this.publisher=publisher; //出版社，屬性成員this.date=date; //出版時間，屬性成員this.num=num; //印數，屬性成員this.print=print; //方法成員}5.1腳本語言JavaScript5.1.4JavaScript對象
構造函數特殊性：①構造函數的名字就是對象的名字；如例4-7所定義的對象的名字就是構造函數book的名字——book。②在構造函數中常使用關鍵字this來為對象的屬性成員和方法成員初始化，this本身是一個特殊對象，即當前構造函數正在創(chuàng)建的對象。③每個對象都必須定義構造函數。
2.自定義對象
5.1腳本語言JavaScript5.1.4JavaScript對象
引用對象的二件工作：先用保留字new創(chuàng)建對象的實例。創(chuàng)建了對象實例后，就可通過該實例引用對象的屬性和方法成員。創(chuàng)建對象實例的方法是：var對象實例名=new對象名（實在參數表）；創(chuàng)建對象實例時，要注意實在參數表與對象構造函數的形式參數表的對應關系。例如：對例4-7定義的book對象創(chuàng)建實例。varbook1=newbook("語文","集體編","人民教育出版社","1999",10000);對象屬性成員的引用格式是：對象實例名.屬性成員名對象方法成員的引用格式是：對象實例名.方法成員名3.對象的引用
5.1腳本語言JavaScript5.1.4JavaScript對象
兩條語句：（1）for..in語句。這是一條循環(huán)語句，格式如下：for（變量名in對象實例名）該語句用于對已有對象實例的所有屬性進行操作的控制循環(huán)，它將一個對象實例的所有屬性反復置給指定的變量來實現循環(huán)。該語句的優(yōu)點就是無須知道對象中屬性的個數即可進行操作。（2）with語句。其語法格式是：
withobject{//在其中引用object的成員時，可不加前綴}在該語句體內，任何對變量的引用被認為是這個對象的屬性，以節(jié)省一些代碼。
4.有關對象操作的語句5.1腳本語言JavaScript5.1.4JavaScript對象
functionShow(obj)//定義通用函數Show{varprop;for(propinobj)
document.write(obj[prop]+"");
document.write("<br>");}【例5-8】下列函數Show顯示其參數對象各屬性的值。
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
JavaScript的常用內建對象和方法如下：①Array（數組）對象。JavaScript的數組可通過該內建對象來實現。②String（字符串）對象。封裝了字符串及有關操作。③Math（數學）對象。封裝了一些常用的數學運算。④Date（日期時間）對象。封裝了對日期和時間的操作。⑤Number對象、Boolean對象、Function對象。5.1腳本語言JavaScript5.1.5常用的內建對象和函數
數組是若干元素的有序集合，每個數組有一個名字作為其標識。在幾乎所有的高級語言中，數組都是得到支持的數據類型，但在JavaScript中，沒有明顯的數組類型。在JavaScript中數組可通過對象來實現，具體有兩種實現方式：①
使用JavaScript的內建對象Array；②
使用自定義對象的方式創(chuàng)建數組對象。
1．數組5.1腳本語言JavaScript5.1.5常用的內建對象和函數
創(chuàng)建數組對象實例通過new保留字來進行，其語法格式如下：var
數組名=newArray([數組長度值]);其中，數組名是一個標識符。數組長度值是一個正整數。例如：vararr1=newArray(); //創(chuàng)建數組實例arr1，長度不定
vararr2=newArray(10);//創(chuàng)建數組實例arr2，長度為10若創(chuàng)建數組時不給出元素個數，則數組的大小由后面引用數組時確定。數組的下標從0開始，因此有10個元素的數組，其下標范圍是0～9。
數組元素的引用引用數組元素的語法格式為：數組名[下標值]
內建對象Array5.1腳本語言JavaScript5.1.5常用的內建對象和函數
內建對象Array的特點：
數組元素不要求數據類型相同。例如：
arr1[0]=10; //數值型arr1[1]="王林"; //字符串arr1[2]=false; //邏輯型數組長度可以動態(tài)變化例如，前面定義了有10個元素的數組arr2，若希望增加到18個元素，則只要用以下賦值語句即可：
arr2[17]=1; //可以為arr2[17]賦任意值
內建對象Array5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Array對象的屬性和方法
：
Array對象常用的屬性是length屬性，表示數組長度，其值等于數組元素個數。其常用方法有：join該方法返回由數組中所有元素連接而成的字符串。reverse該方法逆轉數組中各元素，即將第一個元素換為最后一個，將最后一個元素換為第一個。sort對數組中的元素進行排序。內建對象Array5.1腳本語言JavaScript5.1.5常用的內建對象和函數
5.1腳本語言JavaScript【例5-9】一個Array對象的應用示例。
按照用戶單擊的按鈕（A書、B書、C書或D書），分別在“當前書”、“書名”、“出版社”和“印數”框中顯示相應的書代號、書名、出版社名和印數，其運行結果如圖所示。5.1.5常用的內建對象和函數
5.1腳本語言JavaScript【例5-9】一個Array對象的應用示例。
<html><head><title>數組對象</title><scriptlanguage="JavaScript">functionupdateInfo(WhichBook)//對象book的方法成員，修改對象屬性值{document.BookForm.currbook.value=WhichBook;
document.BookForm.BookTitle.value=this.Title;
document.BookForm.BookPublisher.value=this.Publisher;
document.BookForm.BookAmount.value=this.Amount;}functionBook(title,publisher,amount)//對象book的構造函數{this.Title=title;
this.Publisher=publisher;
this.Amount=amount;
this.UpdateInfo=updateInfo;}</script></head>5.1.5常用的內建對象和函數
5.1腳本語言JavaScript【例5-9】一個Array對象的應用示例。
<body><scriptlanguage="JavaScript">varBooks=newArray();//創(chuàng)建數組，數組元素是book對象//為數組各元素賦值Books[0]=newBook("語文","少年兒童出版社",10000);Books[1]=newBook("數學","高等教育出版社",5000);Books[2]=newBook("普通物理","高等教育出版社",3000);Books[3]=newBook("計算機基礎","清華大學出版社",2000);</script><h2align=center>共有四本書，可選擇查看其信息</h2>5.1.5常用的內建對象和函數
5.1腳本語言JavaScript【例5-9】一個Array對象的應用示例。
<formname="BookForm">選擇當前所顯示的書： <inputtype=buttonvalue=A書onClick="Books[0].UpdateInfo('A書')"><inputtype=buttonvalue=B書onClick="Books[1].UpdateInfo('B書')"><inputtype=buttonvalue=C書onClick="Books[2].UpdateInfo('C書')"><inputtype=buttonvalue=D書onClick="Books[3].UpdateInfo('D書')"><br><br>當前書：<inputtype="text"name="currbook"value="A書"><br><br>書名：<inputtype="text"name="BookTitle"value="語文"><br><br>出版社：<inputtype="text"name="BookPublisher"value="少年兒童出版社"><br><br>印數：<inputtype="text"name="BookAmount"value="10000"></form></body></html>5.1.5常用的內建對象和函數
定義數組對象
functionarrayName(Size){//Size是數組的長度
this.length=Size;
for(vari=0;i<Size;i++)
this[i]=0;returnthis;}
自定義數組對象：自定義數組對象與一般的自定義對象的使用方法一樣：通過function定義一個數組的構造函數，并使用new對象操作符創(chuàng)建一個具有指定長度的數組。
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
創(chuàng)建數組實例一個數組對象定義完成以后，還不能馬上使用，必須使用new操作符為該數組創(chuàng)建一個數組實例。例如：MyArray=newarrayName(10);并為各元素賦初值：MyArray[0]=1；MyArray[1]=2；
MyArray[9]=10；
自定義數組對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
創(chuàng)建String對象實例
創(chuàng)建String對象實例的語法是：[var]String對象實例名=newString(string);或varString對象實例名=字符串值；例如：str1=newString("Thisisasample.");str2="Thisisasample.";
2．String對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
創(chuàng)建String對象實例
創(chuàng)建String對象實例的語法是：[var]String對象實例名=newString(string);或varString對象實例名=字符串值；例如：str1=newString("Thisisasample.");str2=“Thisisasample.”;
String對象的屬性String對象的屬性只有一個：length（長度），其值是字符串包含的字符個數。2．String對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
String對象的方法
①charAt(position)。返回String對象實例中位于position位置上的字符，其中position為正整數或0。注意字符串中字符位置從0開始計算。②indexOf(str)、indexOf(str,start-position)。字符串查找，str是待查找的字符串。在String對象實例中查找str，若給出start-position，則從start-position位置開始查找，否則從0開始查找；若找到，返回str在String對象實例中的起始位置，否則返回-1。③lastIndexOf(str)。該方法與indexOf()類似，區(qū)別在于它是從右往左查找。④substring(position)、substring(position1,position2)。返回String對象的子串。如果只給出position，返回從position開始至字符串結束的子串；如果給出position1和position2，則返回從二者中較小值處開始至較大值處結束的子串。2．String對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
String對象的方法
⑤toLowerCase()、toUpperCase()。分別將String對象實例中的所有字符改變?yōu)樾懟虼髮?。⑥有關字符顯示的控制方法。big用大字體顯示,Italics()為斜體字顯示，bold()為粗體字顯示，blink()為字符閃爍顯示，small()為字符用小體字顯示，fixed()為固定高亮字顯示，fontsize(size)為控制字體大小等。⑦錨點方法anchor()和超鏈接方法link()。錨點方法anchor返回一個字符串，該字符串是網頁中的一個錨點名。⑧fontcolor(color)、fontsize()。字號方法fontsize()的使用與fontcolor()基本相同。字體顏色方法fontcolor(color)返回一個字符串，此字符串可改變網頁中的文字顏色。語法格式為：str.fontcolor(FontColor)其中，FontColor是顏色值，可以是一個英文單詞，或一個十六進制數值
2．String對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Math對象封裝了常用的數學常數和運算，包括三角函數、對數函數、指數函數等。Math對象與其他對象不同，它本身就是一個實例，是由系統(tǒng)創(chuàng)建的，稱為“靜態(tài)對象”，不能用new創(chuàng)建Math對象實例。3．Math對象
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Math對象的屬性Math對象的屬性定義了一些常用的數學常數，它們是只讀的。
3．Math對象
屬
性
名含
義E常數e，自然對數的底，近似值為2.718LN22的自然對數，近似值為0.693LN1010的自然對數，近似值為2.302LOG2E以2為底，e的對數，即log2e，近似值為1.442LOG10E以10為底，e的對數，即log10e，近似值為0.434PI圓周率，近似值為3.142SQRT1_20.5的平方根，近似值為0.707SQRT22的平方根，近似值為1.4145.1腳本語言JavaScript5.1.5常用的內建對象和函數
Math對象的方法3．Math對象
方
法含
義sin(val)返回val的正弦值，val的單位是rad（弧度）cos(val)返回val的余弦值，val的單位是rad（弧度）tan(val)返回val的正切值，val的單位是rad（弧度）asin(val)返回val的反正弦值，val的單位是弧度exp(val)返回e的val次方log(val)返回val的自然對數pow(bv,ev)返回bv的ev次方sqrt(val)返回val的平方根abs(val)返回val的絕對值ceil(val)返回大于或等于val的最小整數值floor(val)返回小于或等于val的最小整數值round(val)返回val四舍五入得到的整數值random()返回0～1之間的隨機數max(val1,val2)返回val1和val2之間的大者min(val1,val2)返回val1和val2之間的小者5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Date對象封裝了有關日期和時間的操作，它有大量設置、獲得和處理日期和時間的方法，但沒有任何屬性。
4．Date對象
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
創(chuàng)建Date對象實例
[var]Date對象名=newDate([parameters]);參數可以是以下的任一種形式：無參數//獲得當前日期和時間形如“月日,年時：分：秒”的參數//創(chuàng)建指定日期和時間的實例
形如“年、月、日、時、分、秒”的整數值參數
//創(chuàng)建指定日期和時間的實例（省略時、分、秒，其值將設為0）例如：vartoday=newDate();birthday=newDate("September10,19905:50:20");birthday=newDate(90,9,20);birthday=newDate(90,9,20,5,50,20);4．Date對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Date對象的方法
①get方法組，在Date對象中獲取日期和時間值。主要包括以下9種。getYear()：返回對象實例的年份值。如果年份在1900年后，則返回后兩位，例如1998將返回98；如果年份在100～1900之間，則返回完全值。getMonth()：返回對象實例的月份值，其值在0～11之間。getDate()：返回對象實例日期中的天，其值在1～31之間。getDay()：返回對象實例日期是星期幾，其值在0～6之間，0代表星期日。getHours()：返回對象實例時間的小時值，其值在0～23之間。getMinutes()：返回對象實例時間的分鐘值，其值在0～59之間。getSeconds()：返回對象實例時間的秒值，其值在0～59之間。getTime()：返回一個整數值，該值等于從1970年1月1日00:00:00到該對象實例存儲的時間所經過的毫秒數。getTimezoneOffset()：返回當地時區(qū)與GMT標準時的差別，單位是min。（GMT時間是基于格林尼治時間的標準時間，也稱UTC時間）。
4．Date對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Date對象的方法
②set方法組，設置Date對象中的日期和時間值，包括setYear(year)、setMonth(month)、setDate(date)、setHours(hours)、setMinutes(minutes)、setSeconds(senconds)和setTime(time)，含義與get方法組相同。③to方法組，從Date對象中返回日期和時間的字符串值，包括toGMTString()、toLocalString()和toString()。④parse和UTC方法，用于分析Date字符串。
4．Date對象5.1腳本語言JavaScript5.1.5常用的內建對象和函數
【例5-10】一個有關Date對象的應用例子。該HTML文件在瀏覽器窗口顯示一個不斷刷新的數字時鐘。4．Date對象functionaClock(){
varnow=newDate();
varhour=now.getHours();
varmin=now.getMinutes();
varsec=now.getSeconds();
var
timeStr=""+hour;
timeStr+=((min<10)?":0":":")+min;timeStr+=((sec<10)?":0":":")+sec;
timeStr+=(hour>=12)?"P.M.":"A.M.";document.clock_form.clock_text.value=timeStr;
clockId=setTimeout("aClock()",1000);}5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Number對象給出了系統(tǒng)最大值、最小值以及非數字常量的定義
5．Number對象
屬
性含
義MAX_VALUE數值型最大值，值為1.7976931348623517e+308MIN_VALUE數值型最小值，值為5e-324NaN非合法數字值POSITIVE_INFINITY正無窮大NEGATIVE_INFINITY負無窮大Number對象屬性表
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Boolean對象的作用是將非布爾量轉換為布爾量。創(chuàng)建Boolean對象實例的語法：[var]BoolVal=newBoolean([參數])；其中，參數可以為空。當參數為空，或參數為0、null、false、空字符串時，所創(chuàng)建的對象實例為false；其他情況下，所創(chuàng)建的對象實例為true。例如：varBoolVal1=newBoolean(); //BoolVal1值為falsevarBoolVal2=newBoolean(""); //BoolVal2值為falsevarBoolVal3=newBoolean(8); //BoolVal3值為truevarBoolVal4=newBoolean("This");//BoolVal4值為true6．Boolean對象
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
Function對象提供了另一種定義和使用函數的方法。利用Fonction對象定義函數對象實例的語法為：var
FuncName=newFunction([arg1],[arg2],…,FuncString);其中，FuncName是函數名，arg1，arg2，…，是函數的形式參數，它們可以沒有；FuncString是字符串形式的函數體。這樣定義的函數實例，可以像普通函數一樣調用。例如：var
setColor=newFunction("document.color='darkgreen'");以后就可以調用它；例如：if(MustSetColor)then{serColor();}利用Function對象定義和調用函數與前面討論的函數定義和使用方法相比，后者在執(zhí)行速度上更快一些，所以以使用后一種方法為主。
7．Function對象
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
預定義函數不屬于任何對象，不必通過對象來引用它們。
8．預定義函數（1）eval函數語法為：eval(string);其中，string是一個字符串，它的內容應是一個合法表達式。eval函數將表達式求值，返回該值。例如：varsum=eval("2+3*4");//sum的值為14vara=2;var
val=eval("5+3*a");//val的值為115.1腳本語言JavaScript5.1.5常用的內建對象和函數
8．預定義函數（2）isNaN函數語法為：isNaN(testValue)；其中，testValue是被測試的表達式，它可以是任意類型的表達式。isNaN測試表達式的值是否為NaN，若是，isNaN返回true；否則返回false。注意，有些平臺不支持NaN常量，則此函數無效。
5.1腳本語言JavaScript5.1.5常用的內建對象和函數
8．預定義函數（3）parseInt和parseFloat函數
parseInt函數的語法格式為：parseInt(str[,radix])其中，str是一個字符串。可選參數radix是整數，若給出，則表示基數；若未給出，則表示基數為10。parseInt函數先對字符串形式的表達式求值，若求出的值是整數，則轉換為相應基數的數值。若不能求出整數值，則返回NaN或0。
parseFloat函數的語法格式為：parseFloat(str)parseFloat函數的使用與parseInt類似，其所求的值為浮點數。
5.1腳本語言JavaScript5.2瀏覽器對象模型及應用
動態(tài)網頁內容在下載到瀏覽器后，不必再通過Web服務器就可以使瀏覽器與用戶互相交換信息。而瀏覽器之所以能夠與網頁交互，除了使用CSS所提供的網頁版面配置和編排方式外，瀏覽器本身的對象模型也提供了操作網頁元素的能力。瀏覽器對象模型將網頁處理為對象的集合，網頁元素都可以是對象，具有屬性、方法和事件，通過腳本語言就可以操作網頁元素。瀏覽器對象模型遵循W3C所定義的文檔對象模型DOM規(guī)范，通過使用DOM，網頁上的文字、圖像等都能被作為對象來處理。IE和Netscape瀏覽器的對象模型都是以DOM為基礎的，因此它們是兼容的。5.2瀏覽器對象模型及應用5.2.1瀏覽器對象模型
Navigator對象層次結構：
5.2瀏覽器對象模型及應用5.2.1瀏覽器對象模型
Navigator對象模型中的常用對象：①Navigator對象：封裝了瀏覽器名稱、版本、客戶端支持的mime類型等環(huán)境信息。②Window對象：封裝了有關窗口的屬性和窗口操作。③Frame對象：在瀏覽器中使用多個窗口時用到該對象，它與Window對象相似，對應子窗口。④Location對象：包含基于當前URL的信息。⑤History對象：包含瀏覽器的瀏覽歷史信息。⑥Document對象：最重要的對象之一，代表當前HTML文件。⑦Form對象：包含表單的屬性和操作。⑧Anchor對象：包含頁面中錨點的信息。⑨Button、Password、Checkbox等對象：是Form的下層對象，對應Form中相應元素。
5.2瀏覽器對象模型及應用5.2.2
Navigator對象
Navigator對象包含正在使用的瀏覽器版本信息包括appName、appVersion、AppCodeName、userAgent、mimeType、plugins屬性和javaEnabled、taintEnabled方法。Navigator對象的主要用途是判別客戶瀏覽器的類別，以便針對不同瀏覽器的特性而設計不同的顯示。
5.2瀏覽器對象模型及應用5.2.2
Navigator對象
Navigator對象常用屬性和方法表屬性或方法名含
義appName以字符串形式表示瀏覽器名稱appVersion以字符串形式表示瀏覽器版本信息，包括瀏覽器的版本號、操作系統(tǒng)名稱等appCodeName以字符串形式表示瀏覽器代碼名字，通常值為MozillauserAgent以字符串表示完整的瀏覽器版本信息，包括appName、appVersion、appCodeName信息mimeType在瀏覽器中可以使用的mime類型plugins在瀏覽器中可以使用的插件①javaEnabled()返回邏輯值，表示客戶瀏覽器可否使用Java5.2瀏覽器對象模型及應用5.2.2
Navigator對象
【例5-11】根據瀏覽器的類型顯示不同的頁面。
<html><head><title>Navigator對象</title></head><body><center><fontface=“隸書”color=redsize=6>歡迎您來訪</font></center><scriptlanguage="JavaScript">if(
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- GB/T 44957-2024人工影響天氣作業(yè)點防雷技術規(guī)范
- 2025年上海市徐匯區(qū)高三語文一模作文解析與范文：突破與接受自身局限
- 持久性隆起性紅斑的臨床護理
- 部編人教版八年級歷史上冊教案
- 《證劵技術分析》課件
- 《數學規(guī)劃》課件
- 《第一章》課件-1.2人生智能的發(fā)展
- 2021年動力鋰電行業(yè)億緯鋰能分析報告
- 《機床電氣線路的安裝與調試》課件-第2章
- 《自動控制原理》課件第11章
- 國家開放大學應用寫作（漢語）形考任務1-6答案（全）
- 學生家長陪餐制度及營養(yǎng)餐家長陪餐記錄表
- 銷售人員如何調整心態(tài)
- 局部阻力系數計算表
- 中南大學《工程制圖》習題集期末自測題答案解析
- 脂溢性皮炎與頭部脂溢性皮炎攻略
- 丙烯精制工段工藝畢業(yè)設計
- 國開?？啤度宋挠⒄Z 2》機考題庫
- 客戶服務技巧-學會委婉說不
- GB/T 2007.3-1987散裝礦產品取樣、制樣通則評定品質波動試驗方法
- GB/T 14456.3-2016綠茶第3部分：中小葉種綠茶
評論
0/150
提交評論