實(shí)驗(yàn)-javascript程序設(shè)計(jì)_第1頁
實(shí)驗(yàn)-javascript程序設(shè)計(jì)_第2頁
實(shí)驗(yàn)-javascript程序設(shè)計(jì)_第3頁
實(shí)驗(yàn)-javascript程序設(shè)計(jì)_第4頁
實(shí)驗(yàn)-javascript程序設(shè)計(jì)_第5頁
已閱讀5頁,還剩22頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

2、 、掌握 JavaScript 變量、表達(dá)式和運(yùn)算符的使用 2 、掌握 JavaScript 對(duì)話框的使用 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)方式】 1 、項(xiàng)目工程互動(dòng)式教

3、學(xué)法 2 、“講、學(xué)、練”相結(jié)合:對(duì)于 javscript 程序設(shè)計(jì)相關(guān)細(xì)節(jié),大量采用演示、講解和操作等方式。使學(xué)生在實(shí)驗(yàn)中加深對(duì)相關(guān)內(nèi)容的理解并熟練掌握。 【實(shí)驗(yàn)設(shè)計(jì)】 向?qū)W生演示多個(gè) javascript 程序設(shè)計(jì)案例,學(xué)生跟著教師一起完成 javascript 程序的編寫,同時(shí)完成教師布置的思考題,教師實(shí)施指導(dǎo)。 第一步:演示 JavaScript 變量、表達(dá)式和運(yùn)算符的使用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 10 分鐘左右) 第二步:演示 JavaScript 對(duì)話框的使用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 (

4、 20 分鐘左右) 第三步:演示 JavaScript 函數(shù)的定義及調(diào)用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 20 分鐘左右) 第四步:演示分支結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì),學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 20 分鐘左右) 第五步:演示循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì),學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 20 分鐘左右) 【實(shí)驗(yàn)過程】 實(shí)驗(yàn)內(nèi)容一: JavaScript 變量、表達(dá)式和運(yùn)算符 教師演示 JavaScript 變量、表達(dá)式和運(yùn)算符的程序案例,學(xué)

5、生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 1 、程序案例 1 顯示年齡 var name; / 聲明變量 name var age; / 聲明變量 age name= 張三 ; / 把字符串 張三 存儲(chǔ)到變量 name 中 age=20; / 把整數(shù) 20 存儲(chǔ)到變量 age 中 document.write(name); / 讀取變量 name 的值,并將它顯示在頁面上 document.write( 的年齡是 :); / 在頁面上輸出 的年齡是 : document.write(age); / 讀取變量 age 的值,并將它顯示在頁面上 2 、程序案例 2 稅額計(jì)

6、算 var list,rate=0.05,paid=105,tax; / list: 標(biāo)價(jià) ; 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)頁上輸出半徑為 3 的圓的面積和周長。 var r=3; var pi=3.1415; document.writeln( 圓的半徑為: +

7、 r); document.writeln( 圓的面積為: + pi*r*r); document.writeln( 圓的周長為: + 2*pi*r); 實(shí)驗(yàn)內(nèi)容二: JavaScript 對(duì)話框 教師演示 JavaScript 對(duì)話框的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 1 、警示對(duì)話框程序案例 alert( 歡迎瀏覽本頁面! ); 2 、確認(rèn)對(duì)話框程序案例 var visited,show_text; visited=confirm( 您來過湖北職院?jiǎn)幔?); show_text = visited? 您也認(rèn)為湖北職院很美吧! : 歡迎您有機(jī)會(huì)來

8、湖北職院參觀 !; document.write(show_text); 3 、提示對(duì)話框程序案例 var name; name=prompt( 請(qǐng)輸入您的姓名 :,); document.write( 尊敬的 +name+ :歡迎您進(jìn)入我的主頁! ); 4 、思考題: 設(shè)計(jì)密碼檢測(cè)程序,密碼輸入正確,顯示 “ 歡迎訪問 ” ,不正確顯示 “ 密碼不正確,好好想喲 ” 。 var password= ; var answer= prompt( 請(qǐng)輸入你的密碼 ,); alert(answer = password) ? 歡迎訪問 : 密碼不正確,好好想想喲! ); 實(shí)驗(yàn)內(nèi)容三: JavaScr

9、ipt 函數(shù)的定義及調(diào)用 教師演示 JavaScript 函數(shù)的定義及調(diào)用的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 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(x); 2 、程序案例 2 局部變量和全局變量 function

10、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 的值為: ,c,); 3 、思考題:設(shè)計(jì)檢測(cè)手機(jī)號(hào)碼的程序。 fun

11、ction test(obj) if(obj.length!=11) alert( 手機(jī)號(hào)碼應(yīng)該是 11 位數(shù)字 ); else if(obj.substring(0,2)!=13) alert( 手機(jī)號(hào)碼應(yīng)該以 13 開頭 ); else if(isNaN(obj) alert( 手機(jī)號(hào)碼應(yīng)該是 11 位數(shù)字 ); else alert( 你填的是正確的手機(jī)號(hào)碼 ); 檢測(cè)手機(jī)號(hào)碼: 示例: 實(shí)驗(yàn)內(nèi)容四: JavaScript 分支結(jié)構(gòu)程序設(shè)計(jì) 教師演示 JavaScript 分支結(jié)構(gòu)程序設(shè)計(jì)的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序。 1 、分支結(jié)構(gòu)程序案例 1 兩個(gè)數(shù)排序 v

12、ar x,y,temp; x = parseFloat(prompt( 請(qǐng)輸入 x 的值: ,0); y = parseFloat(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í)問答 var answer; answer = prompt( 中國的首都在哪個(gè)城市 ?nA. 香港 tB. 廣州 tC. 北京 tD. 上海 ,E); switch(answer) case a: case A: alert( 錯(cuò)!香港是

13、中國的特別特政區(qū) ); break; case b: case B: alert( 錯(cuò)!廣州是中國南部的大都市 ); break; case c: case C: alert( 對(duì)!北京是中國的首都,在中國北方 ); break; case d: case D: alert( 錯(cuò)!上海是中國東部的大都市 ); break; default: alert( 選擇錯(cuò)誤 ! 只能選填字母 A 、 B 、 C 或 D); break; 3 、思考題: 根據(jù)成績給出學(xué)生的考評(píng):如果成績 =85, 考評(píng) “ 優(yōu) ” ,否則如果成績 =60 ,考評(píng) “ 及格 ”, 否則考評(píng)為 “ 不及格 ” 。 var s

14、core,grade; score = parseFloat(prompt( 請(qǐng)輸入學(xué)生的成績 :,); if (score=85) grade= 優(yōu) ; else if (score=75) grade= 中 ; else if (score=60) grade= 及格 ; else grade= 不及格 ; alert( 根據(jù)學(xué)生成績 : + score +, 評(píng)定為 : + grade); 實(shí)驗(yàn)內(nèi)容五: JavaScript 循環(huán)結(jié)構(gòu)程序設(shè)計(jì) 教師演示 JavaScript 循環(huán)結(jié)構(gòu)程序設(shè)計(jì)的程序案例,學(xué)生按照教師的操作步驟,自己編寫該程序。 1 、循環(huán)結(jié)構(gòu)程序案例 1 求 1+2+3+

15、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 + =,0); go_on = confirm(answer=r

16、esult)? 答對(duì) : 答錯(cuò) ) + ! t 繼續(xù)測(cè)試嗎 ?) while(go_on) 3 、循環(huán)結(jié)構(gòu)程序案例 3 累加用戶輸入的整數(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); if (input_number=0) continue; sum

17、 += input_number; alert(sum=+sum); 4 、思考題: 在頁面上顯示一個(gè) “9 9 乘法表 ” 。 var i,j document.write() for(i=1;i=9;i+) for(j=1;j1) document.write(t); document.write(j+*+i+=+j*i); document.writeln(); document.write() 【實(shí)驗(yàn)小結(jié)】 通過這次實(shí)驗(yàn),同學(xué)們熟悉了 JavaScript 變量、表達(dá)式和運(yùn)算符,理解了 JavaScript 對(duì)話框的使用,掌握了 JavaScript 函數(shù)的定義及調(diào)用,掌握了分支結(jié)構(gòu)的

18、 JavaScript 程序設(shè)計(jì),掌握了循環(huán)結(jié)構(gòu)的 JavaScript 程序設(shè)計(jì)。 實(shí)驗(yàn)項(xiàng)目二十一內(nèi)置函數(shù)和對(duì)象【學(xué) 時(shí) 數(shù)】 2 ( 45 分鐘 2=90 分鐘) 【實(shí)驗(yàn)內(nèi)容】 1 、 JavaScript 內(nèi)置函數(shù)的應(yīng)用 2 、 JavaScript 內(nèi)置對(duì)象的應(yīng)用 3 、 JavaScript 瀏覽器對(duì)象的應(yīng)用 【實(shí)驗(yàn)參考】 網(wǎng)頁設(shè)計(jì)與制作 重慶大學(xué)出版社 網(wǎng)頁標(biāo)題制作技巧與實(shí)例 清華大學(xué)出版社 javascript 入門與提高 清華大學(xué)出版社 javascript 寶典 電子工業(yè)出版社【實(shí)驗(yàn)設(shè)備】 計(jì)算機(jī),投影機(jī) 【實(shí)驗(yàn)?zāi)康呐c要求】 1 、掌握 JavaScript 內(nèi)置函數(shù)的使用方

19、法 2 、掌握 JavaScript 常用內(nèi)置對(duì)象的屬性和方法 3 、掌握 JavaScript 瀏覽器對(duì)象的含義 4 、掌握使用瀏覽器對(duì)象提供的信息來完成一定功能的網(wǎng)頁設(shè)計(jì)。 【實(shí)驗(yàn)重點(diǎn)】 1 、掌握 JavaScript 內(nèi)置函數(shù)的使用方法 2 、掌握 JavaScript 常用內(nèi)置對(duì)象的屬性和方法 3 、掌握 JavaScript 瀏覽器對(duì)象的含義 【實(shí)驗(yàn)難點(diǎn)】 1 、掌握使用瀏覽器對(duì)象提供的信息來完成一定功能的網(wǎng)頁設(shè)計(jì)。 【實(shí)驗(yàn)方式】 1 、項(xiàng)目工程互動(dòng)式教學(xué)法 2 、“講、學(xué)、練”相結(jié)合:對(duì)于 javascript 內(nèi)置函數(shù)和對(duì)象相關(guān)細(xì)節(jié),大量采用演示、講解和操作等方式。使學(xué)生在實(shí)驗(yàn)

20、中加深對(duì)相關(guān)內(nèi)容的理解并熟練掌握。 【實(shí)驗(yàn)設(shè)計(jì)】 向?qū)W生演示多個(gè) javascrip 內(nèi)置函數(shù)和對(duì)象的程序案例,學(xué)生跟著教師一起完成 javascript 程序的編寫,同時(shí)完成教師布置的思考題,教師實(shí)施指導(dǎo)。 第一步:演示 JavaScript 內(nèi)置函數(shù)的應(yīng)用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 20 分鐘左右) 第二步:演示 JavaScript 常用內(nèi)置對(duì)象的應(yīng)用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 ( 35 分鐘左右) 第三步:演示 JavaScript 瀏覽器對(duì)象的應(yīng)用,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,

21、并完成教師布置的思考題。 ( 35 分鐘左右) 【實(shí)驗(yàn)過程】 實(shí)驗(yàn)內(nèi)容一: JavaScript 內(nèi)置函數(shù)的應(yīng)用 教師演示 JavaScript 內(nèi)置函數(shù)應(yīng)用的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 1 、 eval( ) :計(jì)算字符串表達(dá)式的值 2 、 parseFloat( ) 和 parseInt( ) :將字符串開頭的整數(shù)或浮點(diǎn)數(shù)分解出來,轉(zhuǎn)換為整數(shù)或浮點(diǎn)數(shù) 3 、 isNaN( ) :確定一個(gè)變量是否為 NaN ( Not a Number ) 4 、 escape( ) :將字符串中的非字母數(shù)字字符轉(zhuǎn)換為按格式 %XX 表示的數(shù)字 5 、 u

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

23、sNaN(input) document.write(parseInt(input)+); document.write(parseFloat(input); 實(shí)驗(yàn)內(nèi)容二: JavaScript 內(nèi)置對(duì)象的應(yīng)用 教師演示 JavaScript 內(nèi)置對(duì)象應(yīng)用的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 一、對(duì)象的基本概念 1 、什么是對(duì)象 對(duì)象用于描述客觀世界存在的特定實(shí)體。在計(jì)算機(jī)世界中,不僅存在來自于客觀世界的對(duì)象,也包含為解決問題而引入的抽象對(duì)象。 2 、對(duì)象的屬性和方法 在 JavaScript 中,對(duì)象就是屬性和方法的集合。 方法是作為對(duì)象成員的函數(shù)

24、表明對(duì)象所具有的行為,屬 性是作為對(duì)象成員的一組變量,表明對(duì)象的狀態(tài)。 通過訪問或設(shè)置對(duì)象的屬性,并且調(diào)用對(duì)象的方法,就可以對(duì)對(duì)象進(jìn)行各種操作,從而獲得需要的功能。 調(diào)用對(duì)象的一個(gè)方法類似于調(diào)用一個(gè)函數(shù)。 使用對(duì)象的一個(gè)屬性則類似于使用一個(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í),直接寫成: Math. 屬性和 Math. 方法。 4 、案例 2_1 :求 P

25、I 的 5 次方,并四舍五入取整。 var number = Math.round(Math.pow(Math.PI,5); document.write(PI 的 5 次方的值為: +number); 5 、思考題:設(shè)計(jì) javascript 程序,在網(wǎng)頁上隨機(jī)顯示 10 個(gè)兩位整數(shù)。 for(i=1;i=10;i+) var number = Math.floor(Math.random()*90)+10; document.write( 隨機(jī)數(shù) +i+ : +number+); 三、 Date 對(duì)象 1 、 Date 對(duì)象的主要方法 常用方法 : 設(shè)置和獲取日期中的年、月、日、小時(shí)、分、

26、秒和毫秒等 2 、創(chuàng)建 Date 對(duì)象 要使用 Date 對(duì)象,必須先使用 new 運(yùn)算符創(chuàng)建它。創(chuàng)建 Date 對(duì)象的常見方式有三種: (1) 不帶參數(shù) var today = new Date(); (2) 創(chuàng)建一個(gè)指定日期的 Date 變量 var theDate = new Date(2000, 9, 1); (3) 創(chuàng)建一個(gè)指定時(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

27、=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.toLocaleString()+:+t2.getMilliseconds()+); htime = t2.getTime() - t1.getTime(); document.write( 執(zhí)行 10000 次循環(huán)用時(shí) :+ htime+ 毫秒 ) 4 、思考題:在網(wǎng)

28、頁上顯示當(dāng)前日期和時(shí)間,并顯示是星期幾 。 var week,today,week_i; week=new Array( 星期日 , 星期一 , 星期二 , 星期三 , 星期四 , 星期五 , 星期六 ); today=new Date(); year=today.getYear();/ 年 month=today.getMonth()+1;/ 月 date=today.getDate();/ 日 hour=today.getHours();/ 小時(shí) minute=today.getMinutes();/ 分 second=today.getSeconds();/ 秒 week_i=today

29、.getDay(); document.write(year+ 年 +month+ 月 +date+ 日 +t); document.write(hour+:+minute+:+second+t+weekweek_i) 四、 Number 對(duì)象 1 、 Number 對(duì)象用于存放 MAX_VALUE 、 MIN_VALUE 、 NaN 、 NEGATIVE_INFINITY 、 POSITIVE_INFINITY 等極端數(shù)值。 2 、案例 2_3 :在頁面中顯示 JavaScript 可以處理的數(shù)的區(qū)間。 document.write(JavaScript 有效數(shù)的范圍是 : +Number.

30、MIN_VALUE+,+Number.MAX_VALUE+); 2 、確認(rèn)對(duì)話框程序案例 var visited,show_text; visited=confirm( 您來過湖北職院?jiǎn)幔?); show_text = visited? 您也認(rèn)為湖北職院很美吧! : 歡迎您有機(jī)會(huì)來湖北職院參觀 !; document.write(show_text); 五、 String 對(duì)象 1 、 String 對(duì)象提供對(duì)字符串進(jìn)行處理的屬性和方法。 2 、在使用 String 對(duì)象時(shí),首先要?jiǎng)?chuàng)建一個(gè)字符串變量。 3 、使用 new 運(yùn)算符來創(chuàng)建,如: newstring = new String(Thi

31、s 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.charAt(5); document.writeln(mystr.substring(5,7); docu

32、ment.writeln(mystr.toUpperCase(); document.writeln(mystr.indexOf(oo); 7 、思考題:將用戶輸入的字符串反向輸出到頁面上,并且要求將其中的小寫字母轉(zhuǎn)換為大寫字母。例如,如果輸入 ”abc123” ,則輸出 ”321CBA” 。 var origin_s,upper_s,i; origin_s = prompt( 請(qǐng)輸入一行文字 :,); upper_s = origin_s.toUpperCase(); for(i=upper_s.length-1;i=0;i-) document.write(upper_s.charAt(i

33、); 六、 Array 對(duì)象 1 、什么是數(shù)組 一個(gè)數(shù)組可以包含多個(gè)數(shù)組元素。數(shù)組中數(shù)組元素的個(gè)數(shù)稱為數(shù)組長度。 2 、創(chuàng)建和訪問數(shù)組 一個(gè)數(shù)組元素由數(shù)組名、一對(duì)方括號(hào) 和這對(duì)括號(hào)中的下標(biāo)組合起來表示。如: arrayname0 、 arrayname1 。 3 、 forin 語句 用 forin 語句處理數(shù)組,可以依次對(duì)數(shù)組中的每個(gè)數(shù)組元素執(zhí)行一條或多條語句。 forin 的格式是: for( 變量 in 數(shù)組 ) 循環(huán)體語句 ; 4 、程序案例 2_5 :使用 forin 語句,顯示數(shù)組的值 。 var classmates,i; classmates = new Array( 張?jiān)?,

34、 李良 , 王力 , 何芳 ); for(i in classmates) document.write( 第 +(parseInt(i)+1)+ 個(gè)同學(xué)是 :+classmatesi+); 實(shí)驗(yàn)內(nèi)容三: JavaScript 內(nèi)置對(duì)象的應(yīng)用 教師演示 JavaScript 內(nèi)置對(duì)象應(yīng)用的程序案例,學(xué)生按照教師的操作步驟,自己動(dòng)手編寫該程序,并完成教師布置的思考題。 一、窗口 (window) 對(duì)象 1 、 window 對(duì)象的屬性和方法 窗口 (window) 對(duì)象處于對(duì)象層次的頂端,它提供了處理瀏覽器窗口的方法和屬性。 對(duì)于 window 對(duì)象的使用,主要集中在窗口的打開和關(guān)閉、窗口狀態(tài)的

35、設(shè)置、定時(shí)執(zhí)行程序以及各種對(duì)話框的使用等四個(gè)方面。 在 JavaScript 中可直接引用 window 對(duì)象的屬性和方法。 2 、打開和關(guān)閉窗口 通過腳本可以打開新窗口,也可以關(guān)閉窗口 。 3 、程序案例 3_1 :設(shè)計(jì)一個(gè)有三個(gè)超鏈接的頁面,單擊這些鏈接時(shí)分別打開和關(guān)閉新窗口,以及關(guān)閉本身窗口 var newwin; function opennewwin() newwin=open(new.htm,myWindow, height=100,width=400,top=10,left=0,toolbar=no,menubar=no, + scrollbars=no,resizable=no

36、,location=no,status=no); function closenewwin() newwin.close(); 打開新窗口 關(guān)閉新窗口 關(guān)閉本窗口 3 、使用定時(shí)器 使用 window 對(duì)象的定時(shí)器機(jī)制,可以讓一段程序每隔一段時(shí)間就執(zhí)行一次。 4 、程序案例 3_2 :在瀏覽器窗口的狀態(tài)欄中滾動(dòng)顯示一次當(dāng)前瀏覽器的信息。 var msg; msg = 瀏覽器代碼名稱 :+navigator.appCodeName+ ; ; msg += 瀏覽器名稱 :+navigator.appName+ ; ; msg += 瀏覽器版本號(hào) :+navigator.appVersion+ ;

37、; msg += 是否支持 Java:+navigator.javaEnabled()+ ; ; msg += MIME 類型數(shù) :+navigator.mimeTypes.length+ ; ; msg += 操作系統(tǒng)平臺(tái) :+navigator.platform+ ; ; msg += 插件數(shù) :+navigator.plugins.length+ ; ; msg += 用戶代理 :+navigator.userAgent+ ; ; function ShowMsg() window.status = msg; msg = msg.substr(3); if (msg=) window.c

38、learInterval(); window.setInterval(ShowMsg(),100); 5 、頁面跳轉(zhuǎn) 在 HTML 文檔中,可以通過腳本控制窗口顯示特定的頁面。 6 、思考題:設(shè)計(jì)一個(gè)頁面,當(dāng)這個(gè)頁面顯示后 3 秒內(nèi)用戶沒有移動(dòng)過鼠標(biāo),將自動(dòng)顯示另一個(gè)頁面。 var timeout; function window_onload() timeout=setTimeout(navigate();,3000); function window_onmousemove() clearTimeout(timeout); 二、文檔 (docum

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

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

41、ite(,); document.write(cell.tagName); 4 、思考題:在頁面上設(shè)計(jì)一個(gè)動(dòng)態(tài)顯示時(shí)間的電子時(shí)鐘。 function ShowTime() var now,clock_line,time_text; now=new Date(); time_text = now.getHours()+:+now.getMinutes()+:+now.getSeconds(); clock_line=document.all(clock); clock_line.innerText= 北京時(shí)間: + time_text; setTimeout(ShowTime();,200);

42、此處將顯示電子時(shí)鐘的時(shí)間 三、表單對(duì)象 1 、 form 對(duì)象的屬性、方法和事件 (1) 在程序中,如果創(chuàng)建的表單有一個(gè)名字 ( 如 myform) ,那么就可通過這個(gè)表單名訪問它,如 :document.myform 。 獲取了 form 對(duì)象之后,就可以通過使用其屬性、方法和事件來實(shí)現(xiàn)各種功能。 (2) 程序案例 3_6 :列出表單中所有表單元素的名稱。 var myform,element,i; myform = document.myform; document.write( 表單中有 +myform.length+ 個(gè)元素 :); for (i=0;i0) document.write(,); document.write(); 2 、表單處理 ( 1 )表單驗(yàn)證是指確定用戶提交的表單數(shù)據(jù)是否合法,例如填寫的身份證號(hào)碼是否有意義、年齡和學(xué)歷是否相符等問題。 ( 2 )由于在表單正式提交到服務(wù)器之前,需要 onSubmit 的值為 true( 如果不設(shè)置事件處理函數(shù),則該值默認(rèn)為 true) ,因此可以通過為 onSubmit 事件指定的處理函數(shù)來進(jìn)行表單數(shù)據(jù)的驗(yàn)證。 ( 3 )程序案例 3_7 :設(shè)計(jì)一個(gè)表單,該表單有姓名和某種卡號(hào)兩個(gè)文本輸入框,其中這種卡號(hào)的格式為 XXXX-XXXX-XXXX-X

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論