Web程序設計(第4版)第5章課件

1、Web程序設計(第4版)“十二五”普通高等教育本科國家級規(guī)劃教材第1頁，共161頁。目 錄第 1 章 Web編程基礎知識 第 2 章 Web應用程序開發(fā)與運行環(huán)境 第 3 章 HTML與XML 第 4 章 層疊樣式表CSS 第 5 章 Web客戶端程序設計第 6 章 Web服務器端程序設計 第 7 章 Web數(shù)據(jù)庫程序設計 第 8 章 ASP.NET綜合應用實例 第2頁，共161頁。第 5 章 Web客戶端程序設計 5.1 腳本語言JavaScript 5.2 瀏覽器對象模型及應用 5.3 HTML DOM 第3頁，共161頁。Web客戶端程序設計概述 網(wǎng)頁設計要使用多種技術，包括HTML語言

2、、腳本程序設計、CSS樣式表以及美工技術等。 動態(tài)網(wǎng)頁，指的是按照訪問者的需要，對訪問者輸入的信息作出不同的響應，提供響應信息。更進一步，動態(tài)網(wǎng)頁設計技術又可分為客戶端和服務器端，客戶端動態(tài)網(wǎng)頁設計技術主要使用層疊樣式表（CSS）和在瀏覽器中執(zhí)行的腳本程序，而服務器端動態(tài)網(wǎng)頁設計技術主要使用ASP.NET、JSP、PHP等。 第4頁，共161頁。Web客戶端程序設計概述 隨著Web頁面的內容和表現(xiàn)手法越來越豐富，將其結構、表現(xiàn)和行為分離成為趨勢。 構建精良的Web頁面一般有三個層次，分別是： 結構（Structure）層 表現(xiàn)（Presentation）層 行為（Behavior）層 對應的標

3、準也分三方面：結構化標準語言（主要包括(X)HTML和XML）、表現(xiàn)標準語言（主要指CSS）和行為標準（主要包括對象模型和腳本語言）。 Web客戶端程序設計的主要內容是腳本語言和瀏覽器對象模型。第5頁，共161頁。5.1 腳本語言JavaScript 腳本（Script）語言的概念源于UNIX操作系統(tǒng)，在UNIX操作系統(tǒng)中，將主要以行命令組成的命令集稱為Shell腳本程序。Shell腳本程序具有一定的控制結構，可以帶參數(shù)，由系統(tǒng)解釋執(zhí)行。除了UNIX Shell Script外，在UNIX環(huán)境下，具有強大的字符串處理能力的Perl語言也是腳本語言的典型代表。 傳統(tǒng)腳本語言常用來編寫執(zhí)行一次性任

4、務，通常以文本(如ASCII)保存，只在被調用時進行解釋或編譯。 而現(xiàn)在腳本和傳統(tǒng)編程語言之間的界限越來越模糊。在一些腳本語言中，有經(jīng)驗的程序員可以進行大量優(yōu)化工作。 本章所討論的腳本語言是指用于Web頁面及程序設計的腳本語言，它們通常是嵌入式（嵌入到HTML文件中）的、具有解釋執(zhí)行的特征。 5.1.1 什么是腳本語言 第6頁，共161頁。 JavaScript是一種嵌入在HTML文件中的腳本語言，它是基于對象和事件驅動的，能對諸如鼠標單擊、表單輸入、頁面瀏覽等用戶事件做出反應并進行處理。 JavaScript特點： （1）簡單性 （2）基于對象 （3）可移植性 （4）動態(tài)性5.1.2 Jav

5、aScript語言概述 5.1 腳本語言JavaScript 第7頁，共161頁。1JavaScript程序的編輯和調試5.1.3 JavaScript編程基礎 可以用任何文本編輯器來編輯JavaScript程序 例如：NotePad。 需要將JavaScript程序嵌入HTML文件。 程序的調試在瀏覽器中進行。5.1 腳本語言JavaScript 第8頁，共161頁。1JavaScript程序的編輯和調試5.1.3 JavaScript編程基礎 將JavaScript程序嵌入HTML文件的方法有兩種： 在HTML文件中使用、標識加入JavaScript語句，這樣HTML語句和JavaScri

6、pt語句位于同一個文件中。其格式為：其中，language屬性指明腳本語言的類型。通常有兩種腳本語言：JavaScript和VBScript，language的默認值為JavaScript。標記可插入在HTML文件的任何位置。 將JavaScript程序以擴展名“.js”單獨存放，再利用以下格式的script標記嵌入HTML文件：方法將HTML代碼和JavaScript代碼分別存放，有利于程序的共享，即多個HTML文件可以共用相同的JavaScript程序。標記通常加在HTML文件的頭部。 5.1 腳本語言JavaScript 第9頁，共161頁。1JavaScript程序的編輯和調試5.1.

7、3 JavaScript編程基礎 一個簡例： JavaScript簡例 alert( 世界，你好! ); 5.1 腳本語言JavaScript 第10頁，共161頁。1JavaScript程序的編輯和調試5.1.3 JavaScript編程基礎 編寫JavaScript程序時還要注意以下三點： JavaScript的大小寫是敏感的，這點與C+相似。 在JavaScript程序中，換行符是一個完整的語句的結束標志；若要將幾行代碼放在一行中，則各語句間要以分號（；）分隔（習慣上，也可像C+一樣，在每一個語句之后以一個分號結束）。 JavaScript的注釋標記是雙斜杠“/”之后的部分，或符號“/*

8、”與符號“*/”之間的部分（與C+相同）。5.1 腳本語言JavaScript 第11頁，共161頁。2數(shù)據(jù)類型 5.1.3 JavaScript編程基礎 JavaScript有三種數(shù)據(jù)類型：數(shù)值型、邏輯型和字符型。（1）數(shù)值型。數(shù)值型數(shù)據(jù)包括整數(shù)和浮點數(shù)。整數(shù)可以是十進制、八進制和十六進制數(shù)，八進制值以0開頭，十六進制值以0 x開頭。例如：100（十進制），021（八進制），0 x5d（十六進制）。以下是浮點數(shù)例子：2.57，1.3e6，2，7e-10。（2）邏輯型。邏輯型數(shù)據(jù)有true和false兩種取值，分別表示邏輯真和邏輯假。（3）字符型。字符型數(shù)據(jù)的值是以雙引號 或單引號 括起來的任

9、意長度的一連串字符。注意反斜杠“”是轉義字符，常用的轉義序列有： n換行符 t水平制表符 r回車符 b退格符5.1 腳本語言JavaScript 第12頁，共161頁。3常量和變量 5.1.3 JavaScript編程基礎 （1）常量 常量是在程序中其值保持不變的量。 JavaScript的常量以直接量的形式出現(xiàn)，即在程序中直接引用值，如“歡迎您”、28等。 常量值可以為整型、實型、邏輯型及字符串型。 另外，JavaScript中有一個空值null，表示什么也沒有，如試圖引用沒有定義的變量，則返回一個null值。 5.1 腳本語言JavaScript 第13頁，共161頁。3常量和變量 5.1

10、.3 JavaScript編程基礎 （2）變量 變量是在程序中值可以改變的量。 JavaScript用關鍵字var聲明變量，或使用賦值的形式聲明變量。例如：var str; /*聲明變量str*/num1=10; /*說明num1為整型，并將其值賦為10*/num2=3.02e10;str1=歡迎您; 5.1 腳本語言JavaScript 第14頁，共161頁。3常量和變量 5.1.3 JavaScript編程基礎 （2）變量 JavaScript命名變量的規(guī)則是： 變量名必須以字母（大小寫均可）打頭，只能由字母（大小寫均可）、數(shù)字（09）和下劃線“_”組成； 變量名長度不能超過1行，并且不能

11、使用JavaScript保留字作變量名； 變量名字母區(qū)分大小寫。5.1 腳本語言JavaScript 第15頁，共161頁。JavaScript的保留字 5.1.3 JavaScript編程基礎 abstractbooleanbreakbytecasecatchcharclassconstcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpu

12、blicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetryvarvoidwhilewith5.1 腳本語言JavaScript 第16頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 運算符 JavaScript的運算符包括： 賦值運算符 算術運算符 字符串運算符 邏輯運算符 關系運算符 位運算符5.1 腳本語言JavaScript 第17頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 賦值運算符。JavaScript提供6個賦值運算符，它們是基本賦

13、值運算符“=”，復合賦值運算符：+=、-=、*=、/=和%=，功能是將一個表達式的值賦予一個變量。 記 法含 義記 法含 義a+=ba=a+ba-=ba=a-ba*=ba=a*ba/=ba=a/ba%=ba=a%baba=a=ba=aba=ba=aba&=ba=a&ba=ba=aba|=ba=a|b賦值運算符簡記形式表 5.1 腳本語言JavaScript 第18頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 算術運算符。算術運算符的操作數(shù)和結果都是數(shù)值型值。算術運算符及位運算符可與賦值運算符結合形成簡記形式 賦值運算符簡記形式表 運 算 符操 作運 算 符操 作+

14、加法-（雙目）減法*乘法/除法%取模+遞增- -遞減-（單目）取負5.1 腳本語言JavaScript 第19頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 字符串運算符。字符串運算是JavaScript中使用最多的運算。字符串運算符只有一個“+”，即字符串連接運算。 參與字符串連接運算的兩個操作數(shù)如果都是字符串，則直接合并；否則，操作數(shù)會先被轉變?yōu)樽址?，再進行合并。 例如：var str1=歡迎您+訪問本頁; /變量str1的值為“歡迎您訪問本頁”var str2=現(xiàn)在是+10+月; /變量str2的值為“現(xiàn)在是10月”5.1 腳本語言JavaScript 第2

15、0頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 邏輯運算符。邏輯運算符的運算對象和結果都是邏輯值。 邏輯運算符有三個：& 與運算 是雙目運算。當兩個操作數(shù)都為true時，結果為true，其他情況下結果均為false。| 或運算 是雙目運算。當兩個操作數(shù)中至少有一個為true時，結果為true，否則結果為false。! 非運算 是單目運算。結果是操作數(shù)的值取反。5.1 腳本語言JavaScript 第21頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 關系運算符。關系運算符用于數(shù)值及字符串值的比較，返回比較判斷的結果。 關系運算符的運算結

16、果是邏輯值。 關系運算包括：= 相等 ！= 不等 大于 = 大于或等于 例如：x=100，y=20 利用關系運算符、邏輯運算符及括號可以組成復雜的表達式。例如：（?。╝=9）&（x=100）| （a!=9） 5.1 腳本語言JavaScript 第22頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 位運算符。位運算符將操作數(shù)作為二進制值處理，返回JavaScript標準的數(shù)值型數(shù)據(jù)。 位運算符都是雙目運算，包括：& 按位與 | 按位或 按位異或 右移 右移，零填充 例如： 15&8的結果為8（1111&1000） 15|8的結果為15（1111|1000） 158的

17、結果為7（1111|1000）5.1 腳本語言JavaScript 第23頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 JavaScript運算符的優(yōu)先級由高到低排列如下： ( ) 高+ - !* / % + - = !=& |& |?= += -= *= /= %= 低5.1 腳本語言JavaScript 第24頁，共161頁。4運算符和表達式 5.1.3 JavaScript編程基礎 表達式 表達式是由常量、變量、運算符、函數(shù)和表達式組成的式子，任何表達式都可求得單一值。 根據(jù)表達式值的類型，JavaScript的表達式有三類： 算術表達式。其值是一個數(shù)值型值

18、。例如：5+a-x。 字符串表達式。其值是一個字符串。例如：字符串1+str。 邏輯表達式。其值是一個邏輯值。例如：(x= =y) & (y=5)。 特殊的表達式條件表達式，其格式為： (condition) ? val1 : val2其中，condition是邏輯表達式。該條件表達式的含義是：如果condition的值為true，則條件表達式的值為val1，否則條件表達式的值為val2。5.1 腳本語言JavaScript 第25頁，共161頁。5函數(shù) 5.1.3 JavaScript編程基礎 函數(shù)為程序設計人員提供了實現(xiàn)模塊化的工具。 將程序劃分為一些相對獨立的部分，每部分編寫一個函數(shù)，從

19、而使各部分充分獨立，任務單一，程序清晰，易懂、易讀、易維護。 JavaScript函數(shù)可以封裝那些在程序中可能要多次用到的功能塊。函數(shù)定義的語法格式為：function 函數(shù)名(參數(shù)表) 函數(shù)體return 表達式或return （表達式） 5.1 腳本語言JavaScript 第26頁，共161頁。5函數(shù) 5.1.3 JavaScript編程基礎 【例5-1】設計一個如圖所示的頁面，顯示指定數(shù)的階乘值。函數(shù)簡例 function factor(num) var i,fact=1; for (i=1;inum+1;i+) fact=i*fact;return fact;document.wri

20、te(調用factor函數(shù)，5的階乘等于：,factor(5),。); 5.1 腳本語言JavaScript 第27頁，共161頁。5函數(shù) 5.1.3 JavaScript編程基礎 使用函數(shù)時要注意以下三點： 函數(shù)定義位置。推薦在HTML文件的頭部定義所有的函數(shù)，因為這樣可以保證函數(shù)的定義先于其調用語句載入瀏覽器，從而不會出現(xiàn)調用函數(shù)時由于函數(shù)定義尚未載入瀏覽器而引起的函數(shù)未定義錯。 函數(shù)的參數(shù)。函數(shù)的參數(shù)是在主調程序與被調用函數(shù)之間傳遞數(shù)據(jù)的主要手段。 變量的作用域。5.1 腳本語言JavaScript 第28頁，共161頁。5.1.3 JavaScript編程基礎 在函數(shù)的定義時，可以給出

21、一個或多個形式參數(shù)，而在調用函數(shù)時，卻不一定要給出同樣多的實參。JavaScript中，系統(tǒng)變量arguments.length中保存了調用者給出的實在參數(shù)的個數(shù)。 【例5-2】設計一個函數(shù)求累加和，默認時求1+2+1000，否則按照用戶所指定的開始值和終止值求和。 function sum(StartVal,EndVal) var ArgNum = sum.arguments.length; var i,s=0; if (ArgNum = 0 ) StartVal = 1; EndVal = 1000; else if (ArgNum = 1 ) EndVal = 1000; for (i

22、= StartVal; i=EndVal; i+) s+=i; return s; 5.1 腳本語言JavaScript 第29頁，共161頁。5.1.3 JavaScript編程基礎 變量的作用域。在函數(shù)內用var保留字聲明的變量是局部變量，其作用域僅局限于該函數(shù)；而在函數(shù)外用var保留字聲明的變量是全局變量，其作用域是整個HTML文件。在函數(shù)內未用var聲明的變量也是全局變量當函數(shù)內以var聲明的變量與全局變量同名時，它們就像不同名的兩個變量，其操作互不影響。 【例5-3】變量作用域示例。 var i, j=10; /全局變量function output( ) var j=0; /局部變

23、量 i=100; /全局變量 j+; j+; document.write( j=,j); document.write( i=,i); i+; 5.1 腳本語言JavaScript 第30頁，共161頁。5.1.3 JavaScript編程基礎 6. 流程控制 JavaScript有順序、分支和循環(huán)三種控制結構。 順序結構是最一般的控制結構，若沒有改變執(zhí)行順序的語句，則程序的各語句是按其出現(xiàn)的先后順序依次執(zhí)行的。 可以改變程序執(zhí)行順序的是條件轉移語句和循環(huán)語句。 5.1 腳本語言JavaScript 第31頁，共161頁。5.1.3 JavaScript編程基礎 6. 流程控制 條件轉移語句

24、：if (condition) statments1 else statments2 其中，condition表示條件，可以是邏輯或關系表達式，若是數(shù)值型數(shù)據(jù)，則將零和非零的數(shù)分別轉換成false和true。如果condition為true，則執(zhí)行語句體statments1；若省略else子句，則condition為false時什么也不做，否則執(zhí)行語句體statments2。 若if及else后的語句體有多行，則必須使用花括號將其括起來。 if語句可以嵌套，格式為：if（condition1）statments1 else if（condition2）statments2 else if（co

25、ndition3）statments3 else statmentsN；5.1 腳本語言JavaScript 第32頁，共161頁。5.1.3 JavaScript編程基礎 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 腳本語言JavaScript 第33頁，共161頁。5.1.3 JavaScript編程基礎 6. 流程控制 for循環(huán)語句：for (exp1；e

26、xp2；exp3) statments 其中，exp1是循環(huán)前的初始設置，通常設置循環(huán)計數(shù)器的初值；exp2是循環(huán)條件，當exp2為true時才執(zhí)行循環(huán)體statments；exp3是運算，它改變循環(huán)設置，通常會改變循環(huán)計數(shù)器的值，使之離循環(huán)終止更近一步。 5.1 腳本語言JavaScript 第34頁，共161頁。5.1.3 JavaScript編程基礎 6. 流程控制 【例5-4】使用for循環(huán)語句計算10！。 var i,factor; factor=1; for (i=1;i=10;i+) factor*=i; document.write(10的階乘是：,factor); 5.1 腳

27、本語言JavaScript 第35頁，共161頁。5.1.3 JavaScript編程基礎 6. 流程控制 continue和break語句 continue語句強制本輪循環(huán)結束，進入下一輪循環(huán)；例如：while (i100) if (j=0) continue; else 語句體 j+; break語句強制結束循環(huán)。例如：while (i100) if (j=0) break; else 語句體 j+;5.1 腳本語言JavaScript 第36頁，共161頁。5.1.3 JavaScript編程基礎 7. 事件觸發(fā)和處理 JavaScript是基于對象（Object-based）的語言，而

28、基于對象的基本特征，就是采用事件驅動（Event-driven）。 事件（Events）是指對計算機進行一定的操作而得到的結果，例如將鼠標移到某個超鏈接上、按下鼠標按鈕等都是事件。由鼠標或熱鍵引發(fā)的一連串程序的動作，稱為事件驅動（Event Driver）。 對事件進行處理的程序或函數(shù)，稱為事件處理程序（Event Handler）。 5.1 腳本語言JavaScript 第37頁，共161頁。5.1.3 JavaScript編程基礎 JavaScript常用事件表 事 件 名發(fā)生的對象說 明事件處理名Click表單的button，radio，checkbox，submit，reset，lin

29、k（超鏈接）單擊了表單元素或超鏈接onClickLoadHTML的body元素在瀏覽器中載入頁面onLoadUnloadHTML的body元素退出當前頁面onUnloadMouseOverlink鼠標移到超鏈接上onMouseOverMouseOutlink鼠標移出超鏈接onMouseOutSubmitform用戶提交了表單onSubmit5.1 腳本語言JavaScript 第38頁，共161頁。5.1.3 JavaScript編程基礎 【例5-5】MouseOver和MouseOut事件處理用法示例。 事件觸發(fā)和事件處理var Images=new Array( );Images0=new

30、 Image( );Images0.src=dot1.jpg;Images1=new Image( );Images1.src=check.gif;function changeImg(ImgIndex) document.imgs.src=ImagesImgIndex.src;軟件設計 5.1 腳本語言JavaScript 第39頁，共161頁。5.1.3 JavaScript編程基礎 【例5-6】簡易計算器設計。 首先，需要設置數(shù)字按鍵和功能按鍵： 可使用表單按鈕（button）來表示。 例如，使用如下語句：顯示數(shù)字“1”的按鍵，當按下該按鍵時，將執(zhí)行SetVal(1)操作。 顯示運算符“

31、+”的按鍵，當按下該按鍵時，將執(zhí)行SetOpr(+)操作。又如以下語句：顯示功能按鍵“=”，當按下該鍵時，將計算用戶輸入的表達式的值。5.1 腳本語言JavaScript 第40頁，共161頁。5.1.3 JavaScript編程基礎 【例5-6】簡易計算器設計。 其次，需要一個顯示輸入計算式和結果的地方，可使用HTML表單的text（單行文本框）元素來表示，例如： 最后，要考慮這些設置和計算任務如何來完成。 SetVal操作：將用戶按下的鍵所代表的數(shù)字連接到整個輸入串的尾部，并判斷這是第幾個操作數(shù)，將其存入相應的變量中； SetOpr操作：將用戶按下的鍵所代表的運算連接到整個輸入串的尾部；

32、Compute操作：利用系統(tǒng)預定義函數(shù)eval( )求出表達式的值； Clear操作：清除輸入框的內容。 5.1 腳本語言JavaScript 第41頁，共161頁。5.1.4 JavaScript對象 在JavaScript中，對象是對客觀事物或事物之間的關系的刻畫。 兩類JavaScript的對象： 內建對象 內建對象包含了對瀏覽器各成分的描述，是JavaScript程序設計中應用最多的部分； 用戶自定義對象 用戶自定義對象允許用戶根據(jù)需要創(chuàng)建自己的對象，從而進一步擴大JavaScript的應用范圍，增強編寫功能強大的Web文檔。 5.1 腳本語言JavaScript 第42頁，共161頁

33、。5.1.4 JavaScript對象 JavaScript中的對象是由屬性（Properties）和方法（Methods）兩個基本元素構成的：屬性成員是對象的數(shù)據(jù)；方法成員是對數(shù)據(jù)的操作。 要使用一個對象，可采用以下三種方式： 引用JavaScript內建對象。 由瀏覽器環(huán)境提供，即引用瀏覽器對象。 創(chuàng)建自定義對象。注意：一個對象在被引用之前，這個對象必須存在，否則將出現(xiàn)錯誤。實際上，引用對象要么創(chuàng)建新的對象，要么利用現(xiàn)存的對象。1. JavaScript對象概述 5.1 腳本語言JavaScript 第43頁，共161頁。5.1.4 JavaScript對象 用戶定義自己的對象包括兩部分：

34、 構造對象的屬性 定義對象的方法 定義對象的步驟是： 首先定義對象的各個方法成員，每個方法成員就是一個普通函數(shù)。 然后定義對象的構造函數(shù)，其中包含每個屬性成員的定義和初始化，以及每個方法成員的初始化。 2. 自定義對象 5.1 腳本語言JavaScript 第44頁，共161頁。5.1.4 JavaScript對象 【例5-7】“書”對象的定義。 function print( )/方法成員定義，輸出各屬性成員值document.write(書名為+);document.write(作者為+this.author+);document.write(出版社為+this.publisher+);d

35、ocument.write(出版時間為+this.date+);document.write(印數(shù)為+this.num+);function book(name,author,publisher,date,num)/構造函數(shù)=name; /書名，屬性成員this.author=author; /作者，屬性成員this.publisher=publisher; /出版社，屬性成員this.date=date; /出版時間，屬性成員this.num=num; /印數(shù)，屬性成員this.print=print; /方法成員 5.1 腳本語言JavaScript 第45頁，共161頁。5.1.4 Ja

36、vaScript對象 構造函數(shù)特殊性： 構造函數(shù)的名字就是對象的名字；如例4-7所定義的對象的名字就是構造函數(shù)book的名字book。 在構造函數(shù)中常使用關鍵字this來為對象的屬性成員和方法成員初始化，this本身是一個特殊對象，即當前構造函數(shù)正在創(chuàng)建的對象。 每個對象都必須定義構造函數(shù)。 2. 自定義對象 5.1 腳本語言JavaScript 第46頁，共161頁。5.1.4 JavaScript對象 引用對象的二件工作： 先用保留字new創(chuàng)建對象的實例。 創(chuàng)建了對象實例后，就可通過該實例引用對象的屬性和方法成員。 創(chuàng)建對象實例的方法是：var對象實例名=new對象名（實在參數(shù)表）； 創(chuàng)建

37、對象實例時，要注意實在參數(shù)表與對象構造函數(shù)的形式參數(shù)表的對應關系。 例如：對例4-7定義的book對象創(chuàng)建實例。var book1=new book(語文,集體編,人民教育出版社,1999,10000); 對象屬性成員的引用格式是：對象實例名.屬性成員名 對象方法成員的引用格式是：對象實例名.方法成員名3. 對象的引用 5.1 腳本語言JavaScript 第47頁，共161頁。5.1.4 JavaScript對象 兩條語句：（1）for.in語句。這是一條循環(huán)語句，格式如下：for（變量名 in 對象實例名）該語句用于對已有對象實例的所有屬性進行操作的控制循環(huán)，它將一個對象實例的所有屬性反復

38、置給指定的變量來實現(xiàn)循環(huán)。該語句的優(yōu)點就是無須知道對象中屬性的個數(shù)即可進行操作。（2）with語句。其語法格式是： with object /在其中引用object的成員時，可不加前綴 在該語句體內，任何對變量的引用被認為是這個對象的屬性，以節(jié)省一些代碼。 4. 有關對象操作的語句 5.1 腳本語言JavaScript 第48頁，共161頁。5.1.4 JavaScript對象 function Show(obj) /定義通用函數(shù)Show var prop; for (prop in obj) document.write(objprop+ ); document.write();【例5-8】

39、下列函數(shù)Show顯示其參數(shù)對象各屬性的值。 5.1 腳本語言JavaScript 第49頁，共161頁。5.1.5 常用的內建對象和函數(shù) JavaScript的常用內建對象和方法如下： Array（數(shù)組）對象。JavaScript的數(shù)組可通過該內建對象來實現(xiàn)。 String（字符串）對象。封裝了字符串及有關操作。 Math（數(shù)學）對象。封裝了一些常用的數(shù)學運算。 Date（日期時間）對象。封裝了對日期和時間的操作。 Number對象、Boolean對象、Function對象。5.1 腳本語言JavaScript 第50頁，共161頁。5.1.5 常用的內建對象和函數(shù) 數(shù)組是若干元素的有序集合，

40、每個數(shù)組有一個名字作為其標識。 在幾乎所有的高級語言中，數(shù)組都是得到支持的數(shù)據(jù)類型，但在JavaScript中，沒有明顯的數(shù)組類型。 在JavaScript中數(shù)組可通過對象來實現(xiàn)，具體有兩種實現(xiàn)方式：使用JavaScript的內建對象Array；使用自定義對象的方式創(chuàng)建數(shù)組對象。 1數(shù)組5.1 腳本語言JavaScript 第51頁，共161頁。5.1.5 常用的內建對象和函數(shù) 創(chuàng)建數(shù)組對象實例 通過new保留字來進行，其語法格式如下：var 數(shù)組名=new Array(數(shù)組長度值); 其中，數(shù)組名是一個標識符。數(shù)組長度值是一個正整數(shù)。 例如：var arr1=new Array( ); /創(chuàng)

41、建數(shù)組實例arr1，長度不定 var arr2=new Array(10); /創(chuàng)建數(shù)組實例arr2，長度為10若創(chuàng)建數(shù)組時不給出元素個數(shù)，則數(shù)組的大小由后面引用數(shù)組時確定。數(shù)組的下標從0開始，因此有10個元素的數(shù)組，其下標范圍是09。 數(shù)組元素的引用引用數(shù)組元素的語法格式為：數(shù)組名下標值 內建對象Array5.1 腳本語言JavaScript 第52頁，共161頁。5.1.5 常用的內建對象和函數(shù) 內建對象Array的特點： 數(shù)組元素不要求數(shù)據(jù)類型相同。例如： arr10=10; /數(shù)值型 arr11= 王林; /字符串 arr12=false; /邏輯型 數(shù)組長度可以動態(tài)變化例如，前面定義

42、了有10個元素的數(shù)組arr2，若希望增加到18個元素，則只要用以下賦值語句即可： arr2 17=1; /可以為arr217賦任意值 內建對象Array5.1 腳本語言JavaScript 第53頁，共161頁。5.1.5 常用的內建對象和函數(shù) Array對象的屬性和方法 ： Array對象常用的屬性是length屬性，表示數(shù)組長度，其值等于數(shù)組元素個數(shù)。 其常用方法有： join 該方法返回由數(shù)組中所有元素連接而成的字符串。 reverse 該方法逆轉數(shù)組中各元素，即將第一個元素換為最后一個，將最后一個元素換為第一個。 sort 對數(shù)組中的元素進行排序。內建對象Array5.1 腳本語言Ja

43、vaScript 第54頁，共161頁。5.1.5 常用的內建對象和函數(shù) 5.1 腳本語言JavaScript 【例5-9】一個Array對象的應用示例。 按照用戶單擊的按鈕（A書、B書、C書或D書），分別在“當前書”、“書名”、“出版社”和“印數(shù)”框中顯示相應的書代號、書名、出版社名和印數(shù)，其運行結果如圖所示。 第55頁，共161頁。5.1.5 常用的內建對象和函數(shù) 5.1 腳本語言JavaScript 【例5-9】一個Array對象的應用示例。 數(shù)組對象function updateInfo(WhichBook) /對象book的方法成員，修改對象屬性值 document.BookForm

44、.currbook.value=WhichBook; document.BookForm.BookTitle.value=this.Title; document.BookForm.BookPublisher.value=this.Publisher; document.BookForm.BookAmount.value=this.Amount;function Book(title,publisher,amount) /對象book的構造函數(shù) this.Title=title; this.Publisher=publisher; this.Amount=amount; this.Update

45、Info=updateInfo;第56頁，共161頁。5.1.5 常用的內建對象和函數(shù) 5.1 腳本語言JavaScript 【例5-9】一個Array對象的應用示例。 var Books=new Array(); /創(chuàng)建數(shù)組，數(shù)組元素是book對象/為數(shù)組各元素賦值Books0=new Book(語文,少年兒童出版社,10000);Books1=new Book(數(shù)學,高等教育出版社,5000);Books2=new Book(普通物理,高等教育出版社,3000);Books3=new Book(計算機基礎,清華大學出版社,2000); 共有四本書，可選擇查看其信息第57頁，共161頁。5.

46、1.5 常用的內建對象和函數(shù) 5.1 腳本語言JavaScript 【例5-9】一個Array對象的應用示例。 選擇當前所顯示的書：當前書：書名：出版社：印數(shù)： 第58頁，共161頁。5.1.5 常用的內建對象和函數(shù) 定義數(shù)組對象 function arrayName(Size) /Size是數(shù)組的長度 this.length=Size; for(var i=0; iSize;i+) thisi=0; return this; 自定義數(shù)組對象：自定義數(shù)組對象與一般的自定義對象的使用方法一樣：通過function定義一個數(shù)組的構造函數(shù)，并使用new對象操作符創(chuàng)建一個具有指定長度的數(shù)組。 5.1

47、腳本語言JavaScript 第59頁，共161頁。5.1.5 常用的內建對象和函數(shù) 創(chuàng)建數(shù)組實例 一個數(shù)組對象定義完成以后，還不能馬上使用，必須使用new操作符為該數(shù)組創(chuàng)建一個數(shù)組實例。例如：MyArray=new arrayName(10);并為各元素賦初值：MyArray0= 1；MyArray1= 2；MyArray9= 10； 自定義數(shù)組對象5.1 腳本語言JavaScript 第60頁，共161頁。5.1.5 常用的內建對象和函數(shù) 創(chuàng)建String對象實例 創(chuàng)建String對象實例的語法是：var String對象實例名=new String(string); 或var Strin

48、g對象實例名=字符串值；例如：str1=new String(This is a sample. ); str2=This is a sample. ; 2String對象5.1 腳本語言JavaScript 第61頁，共161頁。5.1.5 常用的內建對象和函數(shù) 創(chuàng)建String對象實例 創(chuàng)建String對象實例的語法是：var String對象實例名=new String(string); 或var String對象實例名=字符串值；例如：str1=new String(This is a sample. ); str2=“This is a sample. ”; String對象的屬性S

49、tring對象的屬性只有一個：length（長度），其值是字符串包含的字符個數(shù)。 2String對象5.1 腳本語言JavaScript 第62頁，共161頁。5.1.5 常用的內建對象和函數(shù) String對象的方法 charAt(position)。返回String對象實例中位于position位置上的字符，其中position為正整數(shù)或0。注意字符串中字符位置從0開始計算。 indexOf(str)、indexOf(str,start-position)。字符串查找，str是待查找的字符串。在String對象實例中查找str，若給出start-position，則從start-positi

50、on位置開始查找，否則從0開始查找；若找到，返回str在String對象實例中的起始位置，否則返回-1。 lastIndexOf(str)。該方法與indexOf( )類似，區(qū)別在于它是從右往左查找。 substring(position)、substring(position1,position2)。返回String對象的子串。如果只給出position，返回從position開始至字符串結束的子串；如果給出position1和position2，則返回從二者中較小值處開始至較大值處結束的子串。2String對象5.1 腳本語言JavaScript 第63頁，共161頁。5.1.5 常用的內

51、建對象和函數(shù) String對象的方法 toLowerCase( )、toUpperCase( )。分別將String對象實例中的所有字符改變?yōu)樾懟虼髮憽?有關字符顯示的控制方法。big用大字體顯示, Italics( )為斜體字顯示，bold( )為粗體字顯示，blink( )為字符閃爍顯示，small( )為字符用小體字顯示，fixed( )為固定高亮字顯示，fontsize(size)為控制字體大小等。 錨點方法anchor( )和超鏈接方法link( )。錨點方法anchor返回一個字符串，該字符串是網(wǎng)頁中的一個錨點名。 fontcolor(color)、fontsize( )。字號方

52、法fontsize( )的使用與fontcolor( )基本相同。字體顏色方法fontcolor(color)返回一個字符串，此字符串可改變網(wǎng)頁中的文字顏色。語法格式為：str.fontcolor(FontColor)其中，F(xiàn)ontColor是顏色值，可以是一個英文單詞，或一個十六進制數(shù)值 2String對象5.1 腳本語言JavaScript 第64頁，共161頁。5.1.5 常用的內建對象和函數(shù) Math對象封裝了常用的數(shù)學常數(shù)和運算，包括三角函數(shù)、對數(shù)函數(shù)、指數(shù)函數(shù)等。 Math對象與其他對象不同，它本身就是一個實例，是由系統(tǒng)創(chuàng)建的，稱為“靜態(tài)對象”，不能用new創(chuàng)建Math對象實例。

53、3Math對象 5.1 腳本語言JavaScript 第65頁，共161頁。5.1.5 常用的內建對象和函數(shù) Math對象的屬性 Math對象的屬性定義了一些常用的數(shù)學常數(shù)，它們是只讀的。 3Math對象 屬 性 名含 義E常數(shù)e，自然對數(shù)的底，近似值為2.718LN22的自然對數(shù)，近似值為0.693LN1010的自然對數(shù)，近似值為2.302LOG2E以2為底，e的對數(shù)，即log2e，近似值為1.442LOG10E以10為底，e的對數(shù)，即log10e，近似值為0.434PI圓周率，近似值為3.142SQRT1_20.5的平方根，近似值為0.707SQRT22的平方根，近似值為1.4145.1

54、腳本語言JavaScript 第66頁，共161頁。5.1.5 常用的內建對象和函數(shù) Math對象的方法3Math對象 方 法含 義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的自然對數(shù)pow(bv,ev)返回bv的ev次方sqrt(val)返回val的平方根abs(val)返回val的絕對值ceil(val)返回大于或等于val的

55、最小整數(shù)值floor(val)返回小于或等于val的最小整數(shù)值round(val)返回val四舍五入得到的整數(shù)值random()返回01之間的隨機數(shù)max(val1,val2)返回val1和val2之間的大者min(val1,val2)返回val1和val2之間的小者5.1 腳本語言JavaScript 第67頁，共161頁。5.1.5 常用的內建對象和函數(shù) Date對象封裝了有關日期和時間的操作，它有大量設置、獲得和處理日期和時間的方法，但沒有任何屬性。 4Date對象 5.1 腳本語言JavaScript 第68頁，共161頁。5.1.5 常用的內建對象和函數(shù) 創(chuàng)建Date對象實例 var

56、 Date對象名=new Date(parameters);參數(shù)可以是以下的任一種形式： 無參數(shù) /獲得當前日期和時間 形如“月 日, 年 時：分：秒”的參數(shù) /創(chuàng)建指定日期和時間的實例 形如“年、月、日、時、分、秒”的整數(shù)值參數(shù) /創(chuàng)建指定日期和時間的實例（省略時、分、秒，其值將設為0）例如：var today=new Date( );birthday=new Date(September 10,1990 5:50:20);birthday=new Date(90,9,20);birthday=new Date(90,9,20,5,50,20);4Date對象5.1 腳本語言JavaScri

57、pt 第69頁，共161頁。5.1.5 常用的內建對象和函數(shù) Date對象的方法 get方法組，在Date對象中獲取日期和時間值。主要包括以下9種。getYear( )：返回對象實例的年份值。如果年份在1900年后，則返回后兩位，例如1998將返回98；如果年份在1001900之間，則返回完全值。getMonth( )：返回對象實例的月份值，其值在011之間。getDate( )：返回對象實例日期中的天，其值在131之間。getDay( )：返回對象實例日期是星期幾，其值在06之間，0代表星期日。getHours( )：返回對象實例時間的小時值，其值在023之間。getMinutes( )：返

58、回對象實例時間的分鐘值，其值在059之間。getSeconds( )：返回對象實例時間的秒值，其值在059之間。getTime( )：返回一個整數(shù)值，該值等于從1970年1月1日00:00:00到該對象實例存儲的時間所經(jīng)過的毫秒數(shù)。getTimezoneOffset( )：返回當?shù)貢r區(qū)與GMT標準時的差別，單位是min。（GMT時間是基于格林尼治時間的標準時間，也稱UTC時間）。 4Date對象5.1 腳本語言JavaScript 第70頁，共161頁。5.1.5 常用的內建對象和函數(shù) Date對象的方法 set方法組，設置Date對象中的日期和時間值，包括setYear(year)、setM

59、onth(month)、setDate(date)、setHours(hours)、setMinutes(minutes)、setSeconds(senconds)和setTime(time)，含義與get方法組相同。 to方法組，從Date對象中返回日期和時間的字符串值，包括toGMTString( )、toLocalString( )和toString( )。 parse和UTC方法，用于分析Date字符串。 4Date對象5.1 腳本語言JavaScript 第71頁，共161頁。5.1.5 常用的內建對象和函數(shù) 【例5-10】一個有關Date對象的應用例子。該HTML文件在瀏覽器窗口顯

60、示一個不斷刷新的數(shù)字時鐘。 4Date對象function aClock( ) var now=new Date( ); var hour=now.getHours( ); var min=now.getMinutes( ); var sec=now.getSeconds( ); var timeStr= +hour; timeStr+=(min10)?:0:)+min; timeStr+=(sec=12)? P.M.: A.M.; document.clock_form.clock_text.value=timeStr; clockId=setTimeout(aClock( ),1000);