javascript程序設(shè)計(jì)實(shí)驗(yàn)1

1、實(shí)驗(yàn)項(xiàng)目1 javascript程序設(shè)計(jì) 【實(shí)驗(yàn)內(nèi)容】 1 、 JavaScript 變量、表達(dá)式和運(yùn)算符的使用 2 、 JavaScript 對(duì)話(huà)框的使用 3 、 JavaScript 函數(shù)的定義及調(diào)用 4 、 JavaScript 分支結(jié)構(gòu)程序設(shè)計(jì) 5 、 JavaScript 循環(huán)結(jié)構(gòu)程序設(shè)計(jì) 【實(shí)驗(yàn)參考書(shū)】 網(wǎng)頁(yè)設(shè)計(jì)與制作 重慶大學(xué)出版社 網(wǎng)頁(yè)標(biāo)題制作技巧與實(shí)例 清華大學(xué)出版社 javascript 入門(mén)與提高 清華大學(xué)出版社 javascript 寶典 電子工業(yè)出版社 【實(shí)驗(yàn)設(shè)備】 計(jì)算機(jī)，多媒體 【實(shí)驗(yàn)?zāi)康呐c要求】 1 、掌握 JavaScript 變量、表達(dá)式和運(yùn)算符的使用 2

2、、掌握 JavaScript 對(duì)話(huà)框的使用 3 、掌握 JavaScript 函數(shù)的定義及調(diào)用 4 、掌握分支結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 5 、掌握循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 【實(shí)驗(yàn)重點(diǎn)】 1 、掌握 JavaScript 函數(shù)的定義及調(diào)用 2 、掌握分支結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 3 、掌握循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 【實(shí)驗(yàn)難點(diǎn)】 1 、掌握分支結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 2 、掌握循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì) 【實(shí)驗(yàn)過(guò)程】 實(shí)驗(yàn)內(nèi)容一： JavaScript 變量、表達(dá)式和運(yùn)算符 1 、程序案例 1 顯示年齡

3、 var name; / 聲明變量 name var age; / 聲明變量 age name= 張三 ; / 把字符串 張三 存儲(chǔ)到變量 name 中 age=20; / 把整數(shù) 20 存儲(chǔ)到變量 age 中 document.write(name); / 讀取變量 name 的值，并將它顯示在頁(yè)面上 document.write( 的年齡是 :); / 在頁(yè)面上輸出 的年齡是 : document.write(age); / 讀取變量 age 的值，并將它顯示在頁(yè)面上 2 、程序案例 2 稅額計(jì)算 var list,rate=0.05,paid=105,tax; / list: 標(biāo)價(jià) ;

4、rate: 稅率 ; paid: 付款額 ; tax: 稅額 list = paid/(1+rate); / 標(biāo)價(jià) = 付款額 / (1+ 稅率 ) tax = paid - list; document.writeln( 標(biāo)價(jià) =+list); document.writeln( 稅額 = + tax); 3 、思考題： 設(shè)計(jì) JavaScript 程序，在網(wǎng)頁(yè)上輸出半徑為 3 的圓的面積和周長(zhǎng)。 實(shí)驗(yàn)內(nèi)容二： JavaScript 對(duì)話(huà)框 教師演示 JavaScript 對(duì)話(huà)框的程序案例，學(xué)生按照教師的操作步驟，自己動(dòng)手編寫(xiě)該程序，并完成教師布置的思考題。 1 、警示對(duì)話(huà)框程序案例 ale

5、rt( 歡迎瀏覽本頁(yè)面！ ); 2 、確認(rèn)對(duì)話(huà)框程序案例 var visited,show_text; visited=confirm( 您來(lái)過(guò)四川農(nóng)業(yè)大學(xué)嗎？ ); show_text = visited? 您也認(rèn)為四川農(nóng)業(yè)大學(xué)很美吧！ : 歡迎您有機(jī)會(huì)來(lái)四川農(nóng)業(yè)大學(xué)參觀(guān) !; document.write(show_text); 3 、提示對(duì)話(huà)框程序案例 var name; name=prompt( 請(qǐng)輸入您的姓名 :,); document.write( 尊敬的 +name+ ：歡迎您進(jìn)入我的主頁(yè)！ ); 4 、思考題： 設(shè)計(jì)密碼檢測(cè)程序，密碼輸入正確，顯示 “ 歡迎訪(fǎng)問(wèn) ” ，不正確顯

6、示 “ 密碼不正確，好好想喲 ” 。 實(shí)驗(yàn)內(nèi)容三： JavaScript 函數(shù)的定義及調(diào)用 教師演示 JavaScript 函數(shù)的定義及調(diào)用的程序案例，學(xué)生按照教師的操作步驟，自己動(dòng)手編寫(xiě)該程序，并完成教師布置的思考題。 1 、程序案例 1 素?cái)?shù)判斷 function IsPrime(p) if(p1) return false; var i; for(i=2;ip;i+) if (p%i=0) return false; return true; var x; x=parseInt(prompt( 請(qǐng)輸入 1-100 之間的數(shù)字 ,1); alert( 該數(shù)是否為素?cái)?shù)： + IsPrime(

7、x); 2 、程序案例 2 局部變量和全局變量 function first(p,q) p=p*2; b=b+1; var c=100; document.writeln(P 的值為： ,p,); document.writeln(a 的值為： ,a,); document.writeln(b 的值為： ,b,); document.writeln(c 的值為： ,c,); var a=1, b=2, c=3; first(a,b); document.writeln(a 的值為： ,a,); document.writeln(b 的值為： ,b,); document.writeln(c 的

8、值為： ,c,); 3 、思考題：設(shè)計(jì)檢測(cè)手機(jī)號(hào)碼的程序。 提示：手機(jī)號(hào)碼應(yīng)該是 11 位數(shù)字，并且手機(jī)號(hào)碼應(yīng)該以 13 開(kāi)頭。在JavaScript中isNaN（）方法如何使用： isNaN(加你要判斷的值,可以是變量) 判斷這個(gè)值是不是不是一個(gè)數(shù)并返回true 或者 false 比如var temp = isNaN(123);alert(temp);那么提示的是false實(shí)驗(yàn)內(nèi)容四： JavaScript 分支結(jié)構(gòu)程序設(shè)計(jì) 1 、分支結(jié)構(gòu)程序案例 1 兩個(gè)數(shù)排序 var x,y,temp; x = parseFloat(prompt( 請(qǐng)輸入 x 的值： ,0); y = parseFlo

9、at(prompt( 請(qǐng)輸入 y 的值： ,0); if (xy) temp = x; x = y; y = temp; document.writeln( 排序后 ,x= + x +;y= + y) 2 、分支結(jié)構(gòu)程序案例 2 常識(shí)問(wèn)答 var answer; answer = prompt( 中國(guó)的首都在哪個(gè)城市 ?nA. 香港 tB. 廣州 tC. 北京 tD. 上海 ,E); switch(answer) case a: case A: alert( 錯(cuò)！香港是中國(guó)的特別特政區(qū) ); break; case b: case B: alert( 錯(cuò)！廣州是中國(guó)南部的大都市 ); brea

10、k; case c: case C: alert( 對(duì)！北京是中國(guó)的首都，在中國(guó)北方 ); break; case d: case D: alert( 錯(cuò)！上海是中國(guó)東部的大都市 ); break; default: alert( 選擇錯(cuò)誤 ! 只能選填字母 A 、 B 、 C 或 D); break; 3 、思考題： 根據(jù)成績(jī)給出學(xué)生的考評(píng)：如果成績(jī) =85, 考評(píng) “ 優(yōu) ” ，否則如果成績(jī) =60 ，考評(píng) “ 及格 ”, 否則考評(píng)為 “ 不及格 ” 。 實(shí)驗(yàn)內(nèi)容五： JavaScript 循環(huán)結(jié)構(gòu)程序設(shè)計(jì) 教師演示 JavaScript 循環(huán)結(jié)構(gòu)程序設(shè)計(jì)的程序案例，學(xué)生按照教師的操作步驟

11、，自己編寫(xiě)該程序。 1 、循環(huán)結(jié)構(gòu)程序案例 1 求 1+2+3+100 的累計(jì)和 var i,sum=0; for(i=1;i=100;i+) sum += i; document.write(1+2+3+.+100=+sum); 2 、循環(huán)結(jié)構(gòu)程序案例 2 二位整數(shù)相加的測(cè)試程序 var go_on,x,y,result,answer do x = Math.floor(Math.random() *90)+10; y = Math.floor(Math.random() *90)+10; result = x+y; answer = parseFloat(prompt(x + + + y

12、+ =,0); go_on = confirm(answer=result)? 答對(duì) : 答錯(cuò) ) + ！ t 繼續(xù)測(cè)試嗎 ?) while(go_on) 3 、循環(huán)結(jié)構(gòu)程序案例 3 累加用戶(hù)輸入的整數(shù) var input,input_number,sum for(sum=0;) input = prompt(sum=+sum + n 請(qǐng)輸入新的累加數(shù) ( 輸入 Q 結(jié)束 ):,0); if (input=null | input=Q | input=q) break; if (isNaN(input) continue; input_number = parseFloat(input); i

13、f (input_number=0) continue; sum += input_number; alert(sum=+sum); 4 、思考題： 在頁(yè)面上顯示一個(gè) “9 9 乘法表 ” 。 【實(shí)驗(yàn)小結(jié)】 通過(guò)這次實(shí)驗(yàn)，同學(xué)們熟悉了 JavaScript 變量、表達(dá)式和運(yùn)算符，理解了 JavaScript 對(duì)話(huà)框的使用，掌握了 JavaScript 函數(shù)的定義及調(diào)用，掌握了分支結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì)，掌握了循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì)。 實(shí)驗(yàn)項(xiàng)目2內(nèi)置函數(shù)和對(duì)象【實(shí)驗(yàn)內(nèi)容】 1 、 JavaScript 內(nèi)置函數(shù)的應(yīng)用 2 、 JavaScript 內(nèi)置對(duì)象的應(yīng)

14、用 3 、 JavaScript 瀏覽器對(duì)象的應(yīng)用 【實(shí)驗(yàn)參考】 網(wǎng)頁(yè)設(shè)計(jì)與制作 重慶大學(xué)出版社 網(wǎng)頁(yè)標(biāo)題制作技巧與實(shí)例 清華大學(xué)出版社 javascript 入門(mén)與提高 清華大學(xué)出版社 javascript 寶典 電子工業(yè)出版社【實(shí)驗(yàn)設(shè)備】 計(jì)算機(jī)，投影機(jī) 【實(shí)驗(yàn)?zāi)康呐c要求】 1 、掌握 JavaScript 內(nèi)置函數(shù)的使用方法 2 、掌握 JavaScript 常用內(nèi)置對(duì)象的屬性和方法 3 、掌握 JavaScript 瀏覽器對(duì)象的含義 4 、掌握使用瀏覽器對(duì)象提供的信息來(lái)完成一定功能的網(wǎng)頁(yè)設(shè)計(jì)。 【實(shí)驗(yàn)重點(diǎn)】 1 、掌握 JavaScript 內(nèi)置函數(shù)的使用方法 2 、掌握 JavaSc

15、ript 常用內(nèi)置對(duì)象的屬性和方法 3 、掌握 JavaScript 瀏覽器對(duì)象的含義 【實(shí)驗(yàn)難點(diǎn)】 1 、掌握使用瀏覽器對(duì)象提供的信息來(lái)完成一定功能的網(wǎng)頁(yè)設(shè)計(jì)。 【實(shí)驗(yàn)過(guò)程】 實(shí)驗(yàn)內(nèi)容一： JavaScript 內(nèi)置函數(shù)的應(yīng)用 1 、 eval( ) ：計(jì)算字符串表達(dá)式的值 2 、 parseFloat( ) 和 parseInt( ) ：將字符串開(kāi)頭的整數(shù)或浮點(diǎn)數(shù)分解出來(lái)，轉(zhuǎn)換為整數(shù)或浮點(diǎn)數(shù) 3 、 isNaN( ) ：確定一個(gè)變量是否為 NaN （ Not a Number ） 4 、 escape( ) ：將字符串中的非字母數(shù)字字符轉(zhuǎn)換為按格式 %XX 表示的數(shù)字 5 、 unesca

16、pe( ) ：將字符串格式為 %XX 的數(shù)字轉(zhuǎn)換為字符 6 、程序案例 1_1 ：求用戶(hù)在提示對(duì)話(huà)框中輸入的表達(dá)式的值。 alert(eval(prompt( 請(qǐng)輸入一個(gè)常量表達(dá)式 , 運(yùn)算符可以是 JavaScript 所允許的任何運(yùn)算符 , 而操作數(shù)只能是常量。如 123*321/9, 我將為您計(jì)算出結(jié)果。 ,65+98+96) 7 、思考題：判斷用戶(hù)輸入的字符是不是數(shù)字，如果是，分別將其轉(zhuǎn)換成浮點(diǎn)數(shù)和整數(shù)，并顯示到網(wǎng)頁(yè)上。 var input = prompt( 請(qǐng)輸入字符！ ,); alert(isNaN(input)? 你輸入的不是數(shù)字 : 你輸入的是數(shù)字 ); if(!isNaN(

17、input) document.write(parseInt(input)+); document.write(parseFloat(input); 實(shí)驗(yàn)內(nèi)容二： JavaScript 內(nèi)置對(duì)象的應(yīng)用 一、對(duì)象的基本概念 1 、什么是對(duì)象 對(duì)象用于描述客觀(guān)世界存在的特定實(shí)體。在計(jì)算機(jī)世界中，不僅存在來(lái)自于客觀(guān)世界的對(duì)象，也包含為解決問(wèn)題而引入的抽象對(duì)象。 2 、對(duì)象的屬性和方法 在 JavaScript 中，對(duì)象就是屬性和方法的集合。 方法是作為對(duì)象成員的函數(shù)表明對(duì)象所具有的行為，屬 性是作為對(duì)象成員的一組變量，表明對(duì)象的狀態(tài)。 通過(guò)訪(fǎng)問(wèn)或設(shè)置對(duì)象的屬性，并且調(diào)用對(duì)象的方法，就可以對(duì)對(duì)象進(jìn)行各

18、種操作，從而獲得需要的功能。 調(diào)用對(duì)象的一個(gè)方法類(lèi)似于調(diào)用一個(gè)函數(shù)。 使用對(duì)象的一個(gè)屬性則類(lèi)似于使用一個(gè)變量。 二、 Math 對(duì)象 1 、 Math 對(duì)象的屬性是數(shù)學(xué)中常用的常量，如圓周率 PI ，自然對(duì)數(shù)的底 E 等。 2 、 Math 對(duì)象的方法則是一些十分有用的數(shù)學(xué)函數(shù)，如 sin() 、 random() 、 log() 等。 3 、在調(diào)用 Math 對(duì)象的屬性和方法時(shí)，直接寫(xiě)成： Math. 屬性和 Math. 方法。 4 、案例 2_1 ：求 PI 的 5 次方，并四舍五入取整。 var number = Math.round(Math.pow(Math.PI,5); docum

19、ent.write(PI 的 5 次方的值為： +number); 5 、思考題：設(shè)計(jì) javascript 程序，在網(wǎng)頁(yè)上隨機(jī)顯示 10 個(gè)兩位整數(shù)。 三、 Date 對(duì)象 1 、 Date 對(duì)象的主要方法 常用方法 : 設(shè)置和獲取日期中的年、月、日、小時(shí)、分、秒和毫秒等 2 、創(chuàng)建 Date 對(duì)象 要使用 Date 對(duì)象，必須先使用 new 運(yùn)算符創(chuàng)建它。創(chuàng)建 Date 對(duì)象的常見(jiàn)方式有三種： (1) 不帶參數(shù) var today = new Date(); (2) 創(chuàng)建一個(gè)指定日期的 Date 變量 var theDate = new Date(2000, 9, 1); (3) 創(chuàng)建一個(gè)

20、指定時(shí)間的 Date 變量 var theTime = new Date(2000, 9, 1, 10, 20,30,50) 3 、案例 2_2 ：計(jì)算求 1+2+3+10000 之和所需要的運(yùn)行時(shí)間 ( 毫秒數(shù) ) 。 var t1,t2,htime,i,sum=0; t1 = new Date(); document.write( 循環(huán)前的時(shí)間 :+t1.toLocaleString()+:+t1.getMilliseconds()+); for(i=1;i=10000;i+) sum+=i; t2 = new Date(); document.write( 循環(huán)后的時(shí)間 :+t2.toL

21、ocaleString()+:+t2.getMilliseconds()+); htime = t2.getTime() - t1.getTime(); document.write( 執(zhí)行 10000 次循環(huán)用時(shí) :+ htime+ 毫秒 ) 4 、思考題：在網(wǎng)頁(yè)上顯示當(dāng)前日期和時(shí)間，并顯示是星期幾 。 四、 Number 對(duì)象 1 、 Number 對(duì)象用于存放 MAX_VALUE 、 MIN_VALUE 、 NaN 、 NEGATIVE_INFINITY 、 POSITIVE_INFINITY 等極端數(shù)值。 2 、案例 2_3 ：在頁(yè)面中顯示 JavaScript 可以處理的數(shù)的區(qū)間。

22、document.write(JavaScript 有效數(shù)的范圍是 : +Number.MIN_VALUE+,+Number.MAX_VALUE+); 2 、確認(rèn)對(duì)話(huà)框程序案例 var visited,show_text; visited=confirm( 您來(lái)過(guò)四川農(nóng)業(yè)大學(xué)嗎？ ); show_text = visited? 您也認(rèn)為四川農(nóng)業(yè)大學(xué)很美吧！ : 歡迎您有機(jī)會(huì)來(lái)四川農(nóng)業(yè)大學(xué)參觀(guān) !; document.write(show_text); 五、 String 對(duì)象 1 、 String 對(duì)象提供對(duì)字符串進(jìn)行處理的屬性和方法。 2 、在使用 String 對(duì)象時(shí)，首先要?jiǎng)?chuàng)建一個(gè)字符串

23、變量。 3 、使用 new 運(yùn)算符來(lái)創(chuàng)建，如： newstring = new String(This is a new string) 4 、也可以直接將字符串賦給變量。 newstring = This is a new string 5 、 String 對(duì)象的最常用屬性和方法 length 、 toLowerCase() 、 toUpperCase() 、 charAt(index) 、 substr(start,len) 6 、程序案例 2_4 ： String 對(duì)象的常用方法 var mystr = look at this; document.writeln(mystr.char

24、At(5); document.writeln(mystr.substring(5,7); document.writeln(mystr.toUpperCase(); document.writeln(mystr.indexOf(oo); 7 、思考題：將用戶(hù)輸入的字符串反向輸出到頁(yè)面上，并且要求將其中的小寫(xiě)字母轉(zhuǎn)換為大寫(xiě)字母。例如，如果輸入 ”abc123” ，則輸出 ”321CBA” 。 六、 Array 對(duì)象 1 、什么是數(shù)組 一個(gè)數(shù)組可以包含多個(gè)數(shù)組元素。數(shù)組中數(shù)組元素的個(gè)數(shù)稱(chēng)為數(shù)組長(zhǎng)度。 2 、創(chuàng)建和訪(fǎng)問(wèn)數(shù)組 一個(gè)數(shù)組元素由數(shù)組名、一對(duì)方括號(hào) 和這對(duì)括號(hào)中的下標(biāo)組合起來(lái)表示。如： a

25、rrayname0 、 arrayname1 。 3 、 forin 語(yǔ)句 用 forin 語(yǔ)句處理數(shù)組，可以依次對(duì)數(shù)組中的每個(gè)數(shù)組元素執(zhí)行一條或多條語(yǔ)句。 forin 的格式是： for( 變量 in 數(shù)組 ) 循環(huán)體語(yǔ)句 ; 4 、程序案例 2_5 ：使用 forin 語(yǔ)句，顯示數(shù)組的值 。 var classmates,i; classmates = new Array( 張?jiān)?, 李良 , 王力 , 何芳 ); for(i in classmates) document.write( 第 +(parseInt(i)+1)+ 個(gè)同學(xué)是 :+classmatesi+); 實(shí)驗(yàn)內(nèi)容三： Ja

26、vaScript 內(nèi)置對(duì)象的應(yīng)用 一、窗口 (window) 對(duì)象 1 、 window 對(duì)象的屬性和方法 窗口 (window) 對(duì)象處于對(duì)象層次的頂端，它提供了處理瀏覽器窗口的方法和屬性。 對(duì)于 window 對(duì)象的使用，主要集中在窗口的打開(kāi)和關(guān)閉、窗口狀態(tài)的設(shè)置、定時(shí)執(zhí)行程序以及各種對(duì)話(huà)框的使用等四個(gè)方面。 在 JavaScript 中可直接引用 window 對(duì)象的屬性和方法。 2 、打開(kāi)和關(guān)閉窗口 通過(guò)腳本可以打開(kāi)新窗口，也可以關(guān)閉窗口 。 3 、程序案例 3_1 ：設(shè)計(jì)一個(gè)有三個(gè)超鏈接的頁(yè)面，單擊這些鏈接時(shí)分別打開(kāi)和關(guān)閉新窗口，以及關(guān)閉本身窗口 var newwin; functi

27、on opennewwin() newwin=open(new.htm,myWindow, height=100,width=400,top=10,left=0,toolbar=no,menubar=no, + scrollbars=no,resizable=no,location=no,status=no); function closenewwin() newwin.close(); 打開(kāi)新窗口 關(guān)閉新窗口 關(guān)閉本窗口 3 、使用定時(shí)器 使用 window 對(duì)象的定時(shí)器機(jī)制，可以讓一段程序每隔一段時(shí)間就執(zhí)行一次。 4 、程序案例 3_2 ：在瀏覽器窗口的狀態(tài)欄中滾動(dòng)顯示一次當(dāng)前瀏覽器的信息

28、。 var msg; msg = 瀏覽器代碼名稱(chēng) :+navigator.appCodeName+ ； ; msg += 瀏覽器名稱(chēng) :+navigator.appName+ ； ; msg += 瀏覽器版本號(hào) :+navigator.appVersion+ ； ; msg += 是否支持 Java:+navigator.javaEnabled()+ ； ; msg += MIME 類(lèi)型數(shù) :+navigator.mimeTypes.length+ ； ; msg += 操作系統(tǒng)平臺(tái) :+navigator.platform+ ； ; msg += 插件數(shù) :+navigator.plugin

29、s.length+ ； ; msg += 用戶(hù)代理 :+navigator.userAgent+ ； ; function ShowMsg() window.status = msg; msg = msg.substr(3); if (msg=) window.clearInterval(); window.setInterval(ShowMsg(),100); 5 、頁(yè)面跳轉(zhuǎn) 在 HTML 文檔中，可以通過(guò)腳本控制窗口顯示特定的頁(yè)面。 6 、思考題：設(shè)計(jì)一個(gè)頁(yè)面，當(dāng)這個(gè)頁(yè)面顯示后 3 秒內(nèi)用戶(hù)沒(méi)有移動(dòng)過(guò)鼠標(biāo)，將自動(dòng)顯示另一個(gè)頁(yè)面。 二、文檔 (document) 對(duì)象 通過(guò) document

30、 對(duì)象可以訪(fǎng)問(wèn) HTML 文檔包含的任何 HTML 元素，如各種表格、表單、圖像、超鏈接等。 所有 HTML 元素在文檔對(duì)象模型中都表現(xiàn)為一個(gè)對(duì)象。 1 、 document 對(duì)象的屬性和方法 案例 3_4 ：設(shè)計(jì)一個(gè)頁(yè)面，顯示 document 對(duì)象中的一些屬性。 document.write( 當(dāng)前文檔的標(biāo)題 :+document.title+); document.write( 當(dāng)前文檔的 URL:+document.URL+); document.write( 當(dāng)前文檔的背景色 :+document.bgColor+); document.write( 當(dāng)前文檔的最后修改日期 :+do

31、cument.lastModified+); document.write( 當(dāng)前文檔包含 +document.links.length+ 個(gè)超鏈接 ); document.write( 當(dāng)前文檔包含 +document.images.length+ 個(gè)圖像 ); 2 、使用 all 屬性訪(fǎng)問(wèn) HTML 元素 在 document 對(duì)象中， all 是一個(gè)非常特殊的屬性。通過(guò)它，可以訪(fǎng)問(wèn)文檔中的所有 HTML 元素對(duì)象。 3 、案例 3_5 ：顯示當(dāng)前 HTML 文檔中出現(xiàn)的所有標(biāo)記。 var i,cell; for(i=0;i0) document.write(,); document.wr

32、ite(cell.tagName); 4 、思考題：在頁(yè)面上設(shè)計(jì)一個(gè)動(dòng)態(tài)顯示時(shí)間的電子時(shí)鐘。 三、表單對(duì)象 1 、 form 對(duì)象的屬性、方法和事件 （1） 在程序中，如果創(chuàng)建的表單有一個(gè)名字 ( 如 myform) ，那么就可通過(guò)這個(gè)表單名訪(fǎng)問(wèn)它，如 :document.myform 。 獲取了 form 對(duì)象之后，就可以通過(guò)使用其屬性、方法和事件來(lái)實(shí)現(xiàn)各種功能。 （2） 程序案例 3_6 ：列出表單中所有表單元素的名稱(chēng)。 var myform,element,i; myform = document.myform; document.write( 表單中有 +myform.length+

33、個(gè)元素 :); for (i=0;i0) document.write(,); document.write(); 2 、表單處理 （ 1 ）表單驗(yàn)證是指確定用戶(hù)提交的表單數(shù)據(jù)是否合法，例如填寫(xiě)的身份證號(hào)碼是否有意義、年齡和學(xué)歷是否相符等問(wèn)題。 （ 2 ）由于在表單正式提交到服務(wù)器之前，需要 onSubmit 的值為 true( 如果不設(shè)置事件處理函數(shù)，則該值默認(rèn)為 true) ，因此可以通過(guò)為 onSubmit 事件指定的處理函數(shù)來(lái)進(jìn)行表單數(shù)據(jù)的驗(yàn)證。 （ 3 ）程序案例 3_7 ：設(shè)計(jì)一個(gè)表單，該表單有姓名和某種卡號(hào)兩個(gè)文本輸入框，其中這種卡號(hào)的格式為 XXXX-X

34、XXX-XXXX-XXXX( 每個(gè) X 代表一位數(shù)字 ) ，要求在用戶(hù)單擊提交按鈕 “ 發(fā)送 ” 之前驗(yàn)證這兩個(gè)輸入數(shù)據(jù)的有效性。 function validate() if(!checkName(document.myform.myname.value) return false; if(!checkNum(document.myform.mynumber.value) return false; alert( 數(shù)據(jù)完全 ); return true; function checkName(s) var ok = (s.length0); if(!ok) alert( 名字輸入有誤，請(qǐng)查核

35、！ ) return ok; function checkNum(n) var ok,i,ch; ok = (n.charAt(4)=- & n.charAt(9)=- & n.charAt(14)=-); if(!ok) alert( 卡號(hào)輸入有誤，請(qǐng)查核！ ); return false; i=0; while(i 9 | ch 0) alert( 卡號(hào)輸入有誤，查核！ ) return false; i+; return true; （ 4 ）思考題：設(shè)計(jì)一個(gè)用戶(hù)注冊(cè)的表單檢測(cè)程序，要求用戶(hù)名和密碼不能為空，密碼和確認(rèn)密碼必須相同。 3 、表單元素對(duì)象的屬性、方法和事件 （ 1 ）表單可

36、以有很多表單元素，稱(chēng)之為表單元素對(duì)象。 表單元素對(duì)象可以分為文本框 (Text) 、文本區(qū) (TextArea) 、密碼 (Password) 、按鈕 (Button) 、重置按鈕 (Reset) 、提交按 鈕 (Submit) 、單選框 (Radio) 、復(fù)選框 (Checkbox) 、列表 (Select) 、列表選項(xiàng) (Option) 和隱藏 (Hidden) 對(duì)象等。 4 、處理表單元素示例 對(duì)表單元素對(duì)象的引用，類(lèi)似于引用表單的通用屬性。 （ 1 ）程序案例 3_8 ：檢驗(yàn)在文本框中輸入的年齡是否有效 , 要求年齡在 10100 之間。 function isValidAge(s)

37、var i,ch,age; for(i=0;is.length;i+) ch = s.charAt(i); if(ch9) alert( 請(qǐng)輸入數(shù)字 !); return false; age = parseInt(s); if(age100) alert( 請(qǐng)輸入真實(shí)年齡 !); return false; return true; function CheckAge() var f; f = document.myform; if(isValidAge(f.age.value) alert( 您輸入的年齡是 :+f.age.value); else / 如果輸入的是無(wú)效年齡 f.age.f

38、ocus(); / 設(shè)置焦點(diǎn) f.age.select(); / 選中 age 中的已有內(nèi)容 （ 2 ）程序案例 3_9 ：設(shè)計(jì) 3 個(gè)按鈕，當(dāng)單擊它們時(shí)分別使頁(yè)面的背景色變成紅、藍(lán)和綠色。 function ChangeBgColor(new_bgcolor) document.bgColor=new_bgcolor; 【實(shí)驗(yàn)小結(jié)】 通過(guò)本次實(shí)驗(yàn)，同學(xué)們學(xué)會(huì)了 javascript 內(nèi)置函數(shù)的使用方法，熟悉了 javascript 多個(gè)內(nèi)置對(duì)象的屬性和方法，要求重點(diǎn)掌握瀏覽器對(duì)象的含義，以及如何使用瀏覽器對(duì)象提供的信息來(lái)完成一定功能的網(wǎng)頁(yè)設(shè)計(jì)。 實(shí)驗(yàn)項(xiàng)目3 javascript事件處理 【實(shí)

39、驗(yàn)內(nèi)容】 1. 瀏覽器事件及處理 2. 鼠標(biāo)事件及處理 3. 鍵盤(pán)事件及處理 4. 其他事件及處理 【實(shí)驗(yàn)參考】 網(wǎng)頁(yè)設(shè)計(jì)與制作 重慶大學(xué)出版社 網(wǎng)頁(yè)標(biāo)題制作技巧與實(shí)例 清華大學(xué)出版社 javascript入門(mén)與提高 清華大學(xué)出版社 javascript寶典 電子工業(yè)出版社 【實(shí)驗(yàn)設(shè)備】 計(jì)算機(jī) 【實(shí)驗(yàn)?zāi)康呐c要求】 1. 了解 JavaScript 事件處理的基本概念 2. 理解 JavaScript 事件處理模型 3. 掌握 JavaScript 常用事件及處理 【實(shí)驗(yàn)重點(diǎn)】 1. 理解 JavaScript 事件處理模型 2. 掌握 JavaScript 常用事件處理 【實(shí)驗(yàn)過(guò)程】 實(shí)驗(yàn)內(nèi)容一：瀏覽器事件及處理 1、 load 事件：發(fā)生在瀏覽器完成網(wǎng)頁(yè)的加載之后。 歡迎訪(fǎng)問(wèn)我的主頁(yè)！ 2、 unload 事件：發(fā)生在瀏覽器載入新網(wǎng)頁(yè)之前。 3、submit 事件：發(fā)生在提交表單數(shù)據(jù)給服