JavaScript實驗實訓(xùn)內(nèi)容[務(wù)實運用]

1、JavaScript表達(dá)式和邏輯控制語句的使用實驗一 一實驗?zāi)康恼莆認(rèn)avaScript的變量；掌握J(rèn)avaScript的數(shù)據(jù)類型；掌握J(rèn)avaScript的運算符；掌握J(rèn)avaScript的邏輯控制語句。二實驗內(nèi)容1、聲明一個變量str，為其賦值Hello World!，顯示該值；改變該變量值為Hello China!，然后再顯示該值。2、將110之間的奇偶數(shù)分開，頁面呈現(xiàn)方式如下：3、任意輸入一個年份，判斷是否為閏年。實驗二 函數(shù)部分一實驗?zāi)康恼莆認(rèn)avaScript的常用函數(shù)；二實驗內(nèi)容編寫一個函數(shù)，在頁面上輸出11000之間所有能同時被3，5，7整除的證書，并要求每行顯示6個這樣的數(shù)。

2、ex050303.htm!-var n,nb=0;for(n=1;n 0) document.write(,);nb+;document.write(n);if (nb%6 = 0) document.write(n);document.write(nn);document.write(共有+nb+個數(shù));/-實驗三 實驗?zāi)康模撼Ｓ煤瘮?shù)的使用。實驗內(nèi)容：利用全局變量和函數(shù)，設(shè)計模擬幸運數(shù)字機游戲。設(shè)幸運數(shù)字為8，每次由計算機隨機生成3個19之間的隨機數(shù)，當(dāng)這3個隨機數(shù)中有一個數(shù)字為8時，就算贏了一次。Ex050309.htmlvar win_rate=0;/贏率 var play_times=

3、0;/總次數(shù)var wins=0;/贏的次數(shù)var last_digits;/上次數(shù)字串var last_win;/上次是否贏?!-function PlayOnce()/模擬玩一次數(shù)字機游戲var i,digit;play_times+;last_digits=;last_win=false;for(i=0;i事件與對象實驗四實驗?zāi)康模罕韱蔚脑O(shè)計。實驗內(nèi)容：設(shè)計一個表單，放入兩個按鈕，單擊它們時將顯示不同問候語。S07_02.HTM處理事件-HTML標(biāo)記方式function hello_girl() alert(小姐,您好!); 實驗五實驗?zāi)康模簝?nèi)置對象的使用。實驗內(nèi)容： 1 在頁面中顯示當(dāng)

4、天日期。S06_03.HTM：使用new運算符var today;today = new Date();document.write(今天是+today.getFullYear()+年+(today.getMonth()+1)+月+today.getDate()+日);實驗六實驗?zāi)康模簝?nèi)置對象的使用。實驗內(nèi)容： 2 在瀏覽器窗口的狀態(tài)欄中顯示當(dāng)前瀏覽器的版本信息。S06_02.HTM訪問對象的屬性window.status = navigator.appVersion;實驗七實驗?zāi)康模簝?nèi)置對象的使用。實驗內(nèi)容： 3 將用戶輸入的字符串反向輸出到頁面上，并且要求將其中的小寫字母轉(zhuǎn)換成大寫字母。S

5、06_07.HTM使用Stringvar origin_s,upper_s,i;origin_s = prompt(請輸入一行文字:,);upper_s = origin_s.toUpperCase();for(i=upper_s.length-1;i=0;i-) document.write(upper_s.charAt(i);實驗八實驗?zāi)康模簝?nèi)置對象的使用。實驗內(nèi)容： 4 求PI的5次方，并四舍五入取整。S06_04.HTM使用Math對象alert(Math.round(Math.pow(Math.PI,5);實驗九實驗?zāi)康模簝?nèi)置對象的使用。實驗內(nèi)容： 5 由圖像表示日期。ch3_14.

6、htm !-var sWeek = new Array(日,一,二 ,三,四,五,六);var myDate = new Date(); / 當(dāng)天的日期var sYear = myDate.getFullYear(); / 年var sMonth = myDate.getMonth()+1; / 月var sDate = myDate.getDate(); / 日var sDay = sWeekmyDate.getDay(); / 星期document.write(imageDigits(sYear) +    + imageDigits(sMonth) +  &

7、nbsp; + imageDigits(sDate) + );/ 如果輸入數(shù)是1位數(shù)，在十位數(shù)上補0function formatTwoDigits(s) if (s10) return 0+s; else return s;/ 將數(shù)轉(zhuǎn)換為圖像，注意，在本文件的相同目錄下已有09的圖像文件，文件名為0.gif，1.gif 以此類推function imageDigits(s) var ret = ; var s = new String(s); for (var i=0; is.length; i+) ret += ; return ret;/-JavaScript對象的理解和使用實驗十一實驗

8、目的掌握J(rèn)avaScript的常用的對象類型；掌握J(rèn)avaScript對象屬性和方法的引用方式；了解JavaScript對象的常用屬性和方法；二實驗內(nèi)容1、任意輸入一個字符串，單擊“確定”按鈕，輸出字符串的長度。2、猜數(shù)游戲，實現(xiàn)效果如下：3、設(shè)計實現(xiàn)一個帶開關(guān)的時鐘。 JavaScript事件的理解和使用實驗十一一實驗?zāi)康恼莆認(rèn)avaScript的常用的事件；掌握J(rèn)avaScript事件的處理方式；了解如何通過HTML屬性和JavaScript屬性處理事件；二實驗內(nèi)容1、設(shè)計實現(xiàn)一個頁面，當(dāng)進(jìn)入頁面時提示“您好，歡迎光臨”，當(dāng)離開頁面時提示“您好，歡迎您下次再來”。2、設(shè)計實現(xiàn)如下頁面，要求

9、（1）單擊“提交”按鈕時逐一驗證頁面各項信息不允許為空；（2）如果哪一項信息不滿足要求，頁面焦點停留在該信息處；（3）單擊“重置”按鈕時，將頁面各項元素信息清空。 JavaScript的瀏覽器對象模型實驗十二一實驗?zāi)康恼莆認(rèn)avaScript瀏覽器對象的層次結(jié)構(gòu)；掌握J(rèn)avaScript瀏覽器對象的屬性和方法；二實驗內(nèi)容1、設(shè)計實現(xiàn)如下頁面：（1）單擊“修改年齡”按鈕，彈出一個對話框：（2）單擊“確定”按鈕，將文本框內(nèi)的年齡信息改為用戶重新輸入的信息；（3）單擊“取消”按鈕提示用戶“您按了取消按鈕”。2、設(shè)計實現(xiàn)如下頁面：（1）輸入學(xué)生信息后，單擊“提交”按鈕，頁面呈現(xiàn)方式如下：（2）單擊“復(fù)

10、位”按鈕，頁面呈現(xiàn)方式如下：實驗十三一實驗?zāi)康恼莆認(rèn)avaScript瀏覽器對象的層次結(jié)構(gòu)；掌握J(rèn)avaScript瀏覽器對象的屬性和方法；二實驗內(nèi)容設(shè)計一個含有一個表單的頁面，并且在表單上放入一個文本框。編寫程序，當(dāng)鼠標(biāo)在頁面上移動時，鼠標(biāo)的坐標(biāo)將顯示在這個文本框中。ex070303.htm 1 在窗體中有兩個多選列表，用戶可以從左側(cè)列表中選擇任意項，添加到右側(cè)列表中。反之亦然。ch4_07.htm -1) / o為需要移動列表中當(dāng)前選擇項對象 var o = fromList.optionscurrent; var t = o.text; var v = o.value; / 根據(jù)已選項新

11、建一個列表選項 var optionName = new Option(t, v, false, false); / 將該選項添加到移動到列表中 toList.optionstoLen= optionName; toLen+; / 將該選項從需要移動列表中清除 fromList.optionscurrent=null; current = fromList.selectedIndex; /- a b c onclick=moveList(leftList,rightList) input type=button name=backTo value= d e f 實驗十四一實驗?zāi)康模赫莆毡韱蔚膽?yīng)

12、用二實驗內(nèi)容設(shè)計一個有3個超鏈接的頁面，單擊這些鏈接時分別打開和關(guān)閉窗口以及關(guān)閉本身窗口。S08_01.HTM打開和關(guān)閉窗口var newwin;function opennewwin() newwin=open(,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();打開新窗口關(guān)閉新窗口關(guān)閉本窗

13、口2 設(shè)計一個表單，該表單有姓名和某種卡號兩個文本輸入框，其中這種卡號的格式為“XXXX-XXXX-XXXX-XXXX”（每個X代表一個數(shù)字），要求用戶單擊提交按鈕之前驗證這兩個輸入數(shù)據(jù)的有效性。S08_11.HTM驗證表單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

14、ok = (s.length0); if(!ok) alert(名字輸入有誤，請查核！) return ok;function checkNum(n) var ok,i,ch; ok = (n.charAt(4)=- & n.charAt(9)=- & n.charAt(14)=-); if(!ok) alert( 卡號輸入有誤，請查核！); return false; i=0; while(i 9 | ch 0) alert( 卡號輸入有誤，查核！) return false; i+; return true; 姓名： 卡號： 3 設(shè)計3個按鈕，當(dāng)單擊他們時分別使頁面的背景色變成紅、藍(lán)和綠色

15、。S08_13.HTM使用按鈕function ChangeBgColor(new_bgcolor) document.bgColor=new_bgcolor; 實驗十五一實驗?zāi)康恼莆毡韱蔚尿炞C二實驗內(nèi)容表單驗證單擊.htmlfunction check()var inst = 愛好：;if(document.myform.txt1.value=)alert(請輸入姓名！);elsealert(姓名：+document.myform.txt1.value );if(document.myform.sex0.checked) alert(性別：男);else alert(性別：女);if(doc

16、ument.myform.inst0.checked) inst += 游泳;if(document.myform.inst1.checked) inst += ,滑冰;if(document.myform.inst2.checked) inst += ,散步;if(inst=愛好：)alert(趕快培養(yǎng)一個愛好吧！);elsealert(inst);請輸入您的姓名：請選擇您的性別：男女請選擇您的愛好：游泳滑冰散步 JavaScript的應(yīng)用與實踐實驗十六一實驗?zāi)康恼莆認(rèn)avaScript的綜合應(yīng)用。二實驗內(nèi)容1、設(shè)計實現(xiàn)如下頁面：要 求：（1）“姓名”、“學(xué)號”要求輸入本人的真實姓名與學(xué)號；

17、（2）“年齡”要求驗證不允許為空，且只能是小于100的正整數(shù)；（3）“出生日期”要求驗證年不允許為空，且只能為4位數(shù)字；（4）“身份證號”要求驗證不允許為空，且為有效的身份證號；（5）“家庭住址”要求驗證不允許為空，且最大長度為50個字符，且需驗證只能為中文、數(shù)字和字母；（6）“性別”、“班級”、“課程”要求驗證不允許為空；（7）“興趣”要求設(shè)置為高3行、寬30列，最大輸入長度為200，且需驗證不允許為空，且只能為中文、字母、符號。瀏覽器對象1 設(shè)計一個表單，可以讓用戶輸入姓名、年齡、職業(yè)，并編寫程序?qū)δ挲g進(jìn)行有效檢驗（16年齡40），數(shù)據(jù)合格后提交表單。ex080304.html:!-fun

18、ction validate()/驗證表單var age;age = parseInt(my_form.my_age.value);if(age40)window.alert(年齡必須在16,40之間,請重新輸入);my_form.my_age.focus();my_form.my_age.select();return false; /不提交有錯誤的表單return true;/向服務(wù)器提交表單數(shù)據(jù)/- 姓名： 年齡： 職業(yè)： 2 使用3種方法改變當(dāng)前網(wǎng)頁的地址。ch5_05.htmwindow.open()location.hreflocation.replace()3 網(wǎng)頁中有一個鏈接，

19、點擊鏈接將顯示yahoo網(wǎng)頁，這時，點擊瀏覽器的后退按鈕，或點擊歷史列表中網(wǎng)頁地址，當(dāng)前頁仍顯示yahoo網(wǎng)頁，而不能回到上一個網(wǎng)頁。Ch5_06.htmyahoo4 顯示歷史列表中的第一個網(wǎng)址的網(wǎng)頁。ch5_07.html歷史列表中的第一個網(wǎng)址5 列出表單中所有元素的名稱。S08_10.HTM遍歷表單中的所有元素 姓名: 密碼: 性別:男  女 愛好：音樂  運動 學(xué)歷: 小學(xué) 中學(xué) 大學(xué) 大學(xué)以上 自我介紹： var myform,element,i;myform = document.myform;document.write(表單中有+myform.length+個

20、元素:);for (i=0;i0) document.write(,); document.write();6 設(shè)計一個頁面，顯示document對象的一些屬性。S08_06.HTM顯示document對象的一些屬性太平洋電腦城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)前文檔的最后修改日期:+document.lastModified

21、+);document.write(當(dāng)前文檔包含+document.links.length+個超鏈接);document.write(當(dāng)前文檔包含+document.images.length+個圖像);7 網(wǎng)頁中有一個可滾動的文字區(qū)域，含有10個錨點標(biāo)記，其下方有10個鏈接，每一個鏈接將對應(yīng)于一個錨點位置，用戶點擊任何一個鏈接，將跳到相應(yīng)位置。ch4_09.htm 問題1: 回答1: 問題2: 回答2: 問題3: 回答3: 問題4: 回答4: 問題5: 回答5: 問題6: 回答6: 問題7: 回答7: 問題8: 回答8: 問題9: 回答9: 問題10: 回答10: 問題1 | 問題2 |

22、問題3 | 問題4 | 問題5 問題6 | 問題7 | 問題8 | 問題9 | 問題10 8 通過鏈接提交窗體。ch4_10.html 用戶名: 密碼: 提交動態(tài)表格徹底研究1對表格單元格的添加刪除修改并對其進(jìn)行移動以及拷貝等操作，是目前應(yīng)用開發(fā)中常用的技術(shù)。 2-53.htmfunction addcell() /添加新的單元格/插入新的一行oTargetRow = document.all(mytable1).insertRow();for(var k = 0; k document.all(mytable1).rows(0).cells.length; k+)var oCell = oT

23、argetRow.insertCell();if(k = 0)oCell.innerHTML = elseoCell.innerHTML = k;function checkall() /選中所有的單元格var eInput = document.all(mytable1).all.tags(INPUT);for(var i = 0; i eInput.length; i+)eInputi.checked = true;function uncheckall() var eInput = document.all(mytable1).all.tags(INPUT);for(var i = 0; i eInput.length; i+)eInputi.checked = false;function copycell() /拷貝單元格var eInput = document.a