原版Javascript程序設(shè)計(jì)實(shí)驗(yàn)報(bào)告.doc

20 20 學(xué)年 第 學(xué)期Javascript程序設(shè)計(jì)實(shí)驗(yàn)報(bào)告系 別： 專 業(yè)： 班 級(jí)： 姓 名： 學(xué) 號(hào)： 指導(dǎo)教師： 教務(wù)處制Javascript程序設(shè)計(jì)實(shí)驗(yàn)報(bào)告實(shí)驗(yàn)項(xiàng)目：javascript基礎(chǔ)實(shí)驗(yàn)實(shí)驗(yàn)要求1.請(qǐng)認(rèn)真閱讀下面的項(xiàng)目描述。2.按照課程要求，每個(gè)班級(jí)分成若干個(gè)項(xiàng)目小組，每組人數(shù)大約23名同學(xué)，每個(gè)小組選出一名負(fù)責(zé)的同學(xué)。請(qǐng)負(fù)責(zé)同學(xué)做好小組內(nèi)分工。項(xiàng)目描述1.實(shí)驗(yàn)項(xiàng)目是圍繞javascript綜合實(shí)驗(yàn)平臺(tái)展開，涉及到平臺(tái)的外圍設(shè)備。2.要求熟練掌握javascript編程的基本流程。3.要求熟練使用javascript編程軟件平臺(tái)。4.項(xiàng)目實(shí)驗(yàn)內(nèi)容由簡(jiǎn)單到復(fù)雜，采用循環(huán)漸進(jìn)的引導(dǎo)方式，使學(xué)生在輕松的氛圍中掌握javascript開發(fā)及軟件的使用。實(shí)驗(yàn)一 Javascript基本頁面操作實(shí)驗(yàn)?zāi)康?.JS頁面基本結(jié)構(gòu)。2.JS中變量基本格式。3.變量與字符串相連接并顯示結(jié)果。4.使用按鈕與function一一對(duì)應(yīng)來實(shí)現(xiàn)代碼功能。實(shí)驗(yàn)內(nèi)容1.在C盤下創(chuàng)建文件夾1.1。在文件夾內(nèi)創(chuàng)建一個(gè)txt文檔，并命名為xx.1.html。xx是你學(xué)號(hào)后兩位。然后把課本P10的程序1.1輸入該文檔，并把內(nèi)容改為你自己的名字。內(nèi)容改為你的名字加歡迎標(biāo)語。后面是P9的最后一行，但是把 里面的內(nèi)容換成你自己的名字。保存該文檔，并用google瀏覽器查看效果。2.請(qǐng)將課本P10倒數(shù)第四行代碼中的alert換成document.write并保存。你可以把任務(wù)01答案.html中的代碼直接進(jìn)行修改。然后用google瀏覽器打開這個(gè)頁面看效果。想想alert和write的功能各是什么。3.請(qǐng)看課本P12的1.11練習(xí)，將任務(wù)01的頁面代碼的中增加alert(document.title)。保存后用google瀏覽器打開看效果。4.我們一般建議在body中完成頁面的布局設(shè)計(jì)，而將script代碼放在head中。我們?yōu)榱四軌虼_保讓程序執(zhí)行結(jié)果顯示在我們指定的位置，一個(gè)最簡(jiǎn)單的方法是：在body中創(chuàng)建一個(gè)div，然后讓它來顯示程序執(zhí)行的結(jié)果。因?yàn)槲覀兛梢钥刂芼iv出現(xiàn)的位置，所以就等于可以控制程序執(zhí)行結(jié)果出現(xiàn)的位置。我們一般在body中這樣放置一個(gè)id唯一的div然后再在script中通過如下代碼來使該div顯示指定內(nèi)容document.getElementById(d1).innerHTML=歡迎您訪問我的頁面;5.我們現(xiàn)在來學(xué)習(xí)js代碼的兩個(gè)基本概念。一個(gè)是書寫規(guī)范，這個(gè)在P15有介紹，我們建議使用每一行都加分號(hào)并回車換行的方式。另一個(gè)是變量。這個(gè)很有趣，以后每節(jié)課都會(huì)用。請(qǐng)新建xx.2.html，復(fù)制第一個(gè)頁面的基本代碼，然后把script標(biāo)簽內(nèi)的代碼換成var x=Date();document.write(x);然后保存后打開xx.2.html看效果。這里的x是一個(gè)自定義的變量。6.新建一個(gè)頁面xx.3.html。在里面定義一個(gè)變量，變量?jī)?nèi)容為你的姓名。然后讓頁面顯示這個(gè)變量與Date（）函數(shù)相連接的結(jié)果。比如你的變量名為x那么請(qǐng)讓你的頁面顯示x+Date()的內(nèi)容比如是x=張三為您報(bào)時(shí)，現(xiàn)在是請(qǐng)顯示x+Date()的內(nèi)容。7. 新建一個(gè)頁面xx.4.html。要求網(wǎng)頁打開的時(shí)候顯示以下內(nèi)容。XXX的網(wǎng)頁歡迎你?，F(xiàn)在是幾點(diǎn)幾分。xxx是你自己的名字。幾點(diǎn)幾分由下面的代碼結(jié)合而成。由于這個(gè)時(shí)間是從電腦主機(jī)時(shí)間獲得的，而我們機(jī)房的電腦時(shí)間可能不準(zhǔn)確，所以這個(gè)題目你的時(shí)間顯示錯(cuò)誤時(shí)沒關(guān)系的。只要它能顯示，然后每次F5刷新的時(shí)候它可以更新。就可以了。下面是一些擴(kuò)展的知識(shí)點(diǎn)，給大家作為參考。var myDate = new Date(); /將當(dāng)前日期時(shí)間賦值給變量myDatemyDate.getYear(); /獲取當(dāng)前年份(2位)myDate.getFullYear(); /獲取完整的年份(4位,1970-?)myDate.getMonth(); /獲取當(dāng)前月份(0-11,0代表1月)myDate.getDate(); /獲取當(dāng)前日(1-31)myDate.getDay(); /獲取當(dāng)前星期X(0-6,0代表星期天)myDate.getTime(); /獲取當(dāng)前時(shí)間(從1970.1.1開始的毫秒數(shù))myDate.getHours(); /獲取當(dāng)前小時(shí)數(shù)(0-23)myDate.getMinutes(); /獲取當(dāng)前分鐘數(shù)(0-59)myDate.getSeconds(); /獲取當(dāng)前秒數(shù)(0-59)myDate.getMilliseconds(); /獲取當(dāng)前毫秒數(shù)(0-999)myDate.toLocaleDateString(); /獲取當(dāng)前日期var mytime=myDate.toLocaleTimeString(); /獲取當(dāng)前時(shí)間myDate.toLocaleString( ); /獲取日期與時(shí)間8. 新建一個(gè)頁面xx.5.html。在script中輸入如下內(nèi)容var x=5;var y=5;y+=x;document.write(y);請(qǐng)問y的值是多少？每次單擊F5鍵刷新的時(shí)候，y的值都是一樣的么？實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)二 Javascript基本功能控件練習(xí)實(shí)驗(yàn)?zāi)康?.理解html網(wǎng)頁內(nèi)的body中有button，當(dāng)click它時(shí)會(huì)調(diào)用function，而function中代碼運(yùn)行的結(jié)果會(huì)放在一個(gè)變量里，顯示在一個(gè)div的innerHTML中。2.熟悉我們頁面的三個(gè)基本部分是button，function，div。3.掌握三個(gè)基本部分的功能：button觸發(fā)條件，function運(yùn)行代碼，div顯示結(jié)果。這里面最重要的是function。我們今后一段時(shí)間學(xué)習(xí)的就是通過function來實(shí)現(xiàn)各種功能。實(shí)驗(yàn)內(nèi)容1. 創(chuàng)建頁面，使其實(shí)現(xiàn)功能為：?jiǎn)螕繇撁鎯?nèi)的按鈕時(shí)，頁面上顯示“xx歡迎你的訪問！”。2.創(chuàng)建頁面，要求實(shí)現(xiàn)功能為：?jiǎn)螕糇筮叺陌粹o，頁面內(nèi)顯示xx為你報(bào)時(shí)，現(xiàn)在是*報(bào)時(shí)的時(shí)間通過Date（）來顯示。單擊右邊的按鈕，則清空頁面剛才顯示的內(nèi)容。3. 創(chuàng)建一個(gè)頁面（其實(shí)你可以在剛才的頁面基礎(chǔ)上進(jìn)行修改）頁面內(nèi)有3個(gè)按鈕。按鈕上分別顯示“姓名”“班級(jí)”“輔導(dǎo)員”當(dāng)你單擊某個(gè)按鈕的時(shí)候，頁面內(nèi)就會(huì)顯示該按鈕對(duì)應(yīng)的內(nèi)容。比如你單擊姓名，頁面內(nèi)就顯示出你的姓名。4. 創(chuàng)建一個(gè)頁面，該頁面中呈現(xiàn)出以下的心理測(cè)試題目。當(dāng)用戶單擊A,B,C,D選項(xiàng)對(duì)應(yīng)的按鈕時(shí)，用戶將看到自己的選項(xiàng)對(duì)應(yīng)的測(cè)試答案。你屬于哪一種上班族？當(dāng)你流落荒島時(shí)，饑寒交迫，你會(huì)以哪種捕食方式快速喂飽自己 A、設(shè)計(jì)抓山雞 B、采椰子 C、在岸邊捕魚 D、捕獵野豬 結(jié)果分析： 選擇A：你是“打拼型”上班族。 選擇B：你是“夢(mèng)想型”上班族。 選擇C：你是“聰明型”上班族。 選擇D：你是“脫線型”上班族。 5.創(chuàng)建頁面完成課本第一章的課后習(xí)題要求的程序功能實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)三 文本框與函數(shù)參數(shù)傳遞練習(xí)實(shí)驗(yàn)?zāi)康?.學(xué)習(xí)txt文本框和它對(duì)應(yīng)的value屬性的應(yīng)用2.掌握function函數(shù)傳遞參數(shù)的技術(shù)3.通過按鈕button的click事件，來調(diào)用function函數(shù)，并將其結(jié)果顯示在頁面上實(shí)驗(yàn)內(nèi)容1.創(chuàng)建頁面實(shí)現(xiàn)功能：鼠標(biāo)經(jīng)過圖片的時(shí)候會(huì)彈出一句話。用JS的術(shù)語來說，當(dāng)一個(gè)img對(duì)象發(fā)生了onMouseOver事件的時(shí)候，則觸發(fā)一個(gè)alert事件。2.請(qǐng)先瀏覽頁面。然后把onmouseover改成onclick，保存后刷新頁面，點(diǎn)擊該圖片，體會(huì)一下改變的效果。3.請(qǐng)以它和img文件夾中的圖片為基礎(chǔ)，學(xué)習(xí)P22的程序2.5的代碼，修改guofeng.1.html，使得鼠標(biāo)經(jīng)過圖片的時(shí)候，圖片會(huì)變成另外一張，而鼠標(biāo)離開的時(shí)候，會(huì)換成原來的圖片。并將title改為你自己的名字。請(qǐng)把以下代碼更換為這句代碼的功能是當(dāng)鼠標(biāo)經(jīng)過則圖片換為02，鼠標(biāo)離開時(shí)圖片換回01。4. 參考程序2.5創(chuàng)建一個(gè)頁面，頁面內(nèi)有一個(gè)button按鈕，按鈕的value為“你點(diǎn)我啊”。要求實(shí)現(xiàn)效果為：當(dāng)單擊該按鈕后，該按鈕上的文字會(huì)顯示為“誰讓你點(diǎn)我的？！”思路：按鈕上顯示的文字就是button的value值。要改變一個(gè)按鈕自己的value值就是讓它onclick的時(shí)候，使得this.value變成你想要的值。建議：不必照搬課本上的代碼，任務(wù)1的頁面中有可以利用的代碼你盡可以復(fù)制粘貼過來，以節(jié)省時(shí)間。5.請(qǐng)修改guofeng.1.html，現(xiàn)在實(shí)現(xiàn)的效果是，該圖片原始引用圖片p1，鼠標(biāo)經(jīng)過這個(gè)圖片和單擊這個(gè)圖片會(huì)彈出提示。我要求你改效果為：當(dāng)鼠標(biāo)經(jīng)過該圖片時(shí)，圖片改為p2，也就是讓this.src改為p2，當(dāng)鼠標(biāo)單擊該圖片時(shí)，圖片改為p3。6. 要求創(chuàng)建的頁面上有兩個(gè)按鈕，單擊按鈕1出第一個(gè)圖片，單擊按鈕2出第二個(gè)圖片。我要求你增加按鈕3和按鈕4，并且單擊相應(yīng)按鈕出相應(yīng)圖片。實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)四 HTML頁面交互設(shè)計(jì)練習(xí)實(shí)驗(yàn)?zāi)康?.html交互頁面的基本結(jié)構(gòu)。2.義html常見空間的基本屬性。3.對(duì)頁面控件的一些基本操作和具體的函數(shù)定義。實(shí)驗(yàn)內(nèi)容1.創(chuàng)建網(wǎng)頁。使其實(shí)現(xiàn)功能為：當(dāng)點(diǎn)擊按鈕，文本框內(nèi)出現(xiàn)一句話：xx歡迎你訪問本網(wǎng)頁xx是你自己的名字。2. 創(chuàng)建網(wǎng)頁。要求實(shí)現(xiàn)如下功能：頁面內(nèi)共有三個(gè)文本框。第一個(gè)文本框前寫“請(qǐng)?jiān)诖溯斎肽男彰?，第二個(gè)文本框前寫“請(qǐng)?jiān)诖溯斎胂壬蛘吲俊?，然后是一個(gè)“確定”按鈕。用戶單擊確定按鈕之后，第三個(gè)文本框會(huì)出現(xiàn)“XX先生/女士，您好！”的字樣。xx是第一個(gè)文本框中輸入的名字，先生/女士取決于用戶在第二個(gè)文本框輸入的內(nèi)容。3. 創(chuàng)建頁面使其點(diǎn)擊按鈕時(shí)在div和文本框text中同時(shí)出現(xiàn)你自己的姓名，班級(jí)或輔導(dǎo)員名字。本頁面我特別想講解的一點(diǎn)是，在script中，div對(duì)象后面跟的應(yīng)該是innerHTML,而文本框text后面跟的應(yīng)該是value。兩者各有所長(zhǎng)。div對(duì)象內(nèi)可以顯示圖片，控件等各種內(nèi)容，不限于文字。而text的優(yōu)點(diǎn)則在于它不僅僅可以輸出顯示內(nèi)容，也可以讓用戶在文本框里輸入內(nèi)容，以供提取。4.創(chuàng)建頁面，使得用戶在前三項(xiàng)文本框中輸入姓名，籍貫，性別后，單擊按鈕，則最后一個(gè)文本框中出現(xiàn)一句話，內(nèi)容為“xx你好，你來自*，你是個(gè)男生/女生”其中xx，*，性別內(nèi)容要取決于用戶輸入的內(nèi)容。5.創(chuàng)建頁面，使其點(diǎn)擊按鈕時(shí)在div和文本框text中同時(shí)出現(xiàn)你自己的姓名，班級(jí)或輔導(dǎo)員名字。6. 以下代碼目前功能是點(diǎn)擊按鈕會(huì)在div中出現(xiàn)對(duì)應(yīng)答案。請(qǐng)修改頁面代碼使其實(shí)現(xiàn)功能為，點(diǎn)擊按鈕的時(shí)候，文本框text會(huì)和div一起顯示對(duì)應(yīng)答案。 郭峰function a(x)document.getElementById(c).innerHTML=x;你屬于哪一種上班族？當(dāng)你流落荒島時(shí)，饑寒交迫，你會(huì)以哪種捕食方式快速喂飽自己設(shè)計(jì)抓山雞 采椰子 在岸邊捕魚 捕獵野豬 實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)五 Javascript中text控件的設(shè)計(jì)練習(xí)實(shí)驗(yàn)?zāi)康?.熟悉text控件的基本代碼。2.掌握javascript中text與其他控件的組合用法。3.掌握text與function組合使用的常見用法。實(shí)驗(yàn)內(nèi)容1. 請(qǐng)?jiān)O(shè)計(jì)一個(gè)頁面，包括一個(gè)文本框，四個(gè)按鈕。四個(gè)按鈕的value分別是“我的姓名”“我的性別”“我的愛好”“我的家鄉(xiāng)”。點(diǎn)擊按鈕，則在文本框中會(huì)顯示相應(yīng)信息。注意：我要求你本題中四個(gè)按鈕要使用同一個(gè)function。換句話說，這個(gè)題目必須用傳遞參數(shù)技術(shù)來完成。2. 創(chuàng)建一個(gè)包含一個(gè)文本框和四個(gè)按鈕的頁面。要求點(diǎn)擊按鈕的時(shí)候在文本框中出現(xiàn)對(duì)應(yīng)文字。而且要求本題目四個(gè)按鈕必須使用同一個(gè)function，也就是說必須使用參數(shù)傳遞技術(shù)。四個(gè)按鈕點(diǎn)擊后在文本框中出現(xiàn)的對(duì)應(yīng)文字為：俞敏洪推薦語：開卷不讀薛氏書，縱談教育也枉然。小巫推薦語：他是要您懂得培養(yǎng)孩子之道，人生成長(zhǎng)之道。徐小平推薦語：他的文字與思想已經(jīng)并將繼續(xù)對(duì)中國(guó)社會(huì)產(chǎn)生重要影響。 南方人物周刊推薦語：助你自信充盈，找到正確的出口。唯有青春，不可辜負(fù)！3. 請(qǐng)參考并輸入課本p32程序清單3.3的全部代碼，觀察運(yùn)行結(jié)果。注意/右側(cè)的注釋性代碼不必輸入。4. 完成課本p33的練習(xí)3.9.這個(gè)題目中必須用到parseInt（）函數(shù)。因?yàn)槲覀兘?jīng)常用到文本框，而文本框中的默認(rèn)類型為字符型，而有時(shí)候我們需要將其作為數(shù)值進(jìn)行運(yùn)算，那么我們就必須將其通過parseInt（）函數(shù)轉(zhuǎn)為數(shù)值型后再運(yùn)行代碼。假設(shè)現(xiàn)在是X攝氏度，那么轉(zhuǎn)換為華氏度的公式為(x*9)/5)+32那么怎么讓第一個(gè)文本框的值為x呢？常見做法是var x=document.getElementById(t1).value;那么怎么把它轉(zhuǎn)為數(shù)值型呢？只要加上函數(shù)即可。(parseInt(x)*9)/5)+325. 下面頁面主要介紹了parseInt()函數(shù)。它的功能是讓字符串轉(zhuǎn)為數(shù)值型。你可以看上面的兩個(gè)按鈕，代碼完全一樣，唯一的區(qū)別是一個(gè)加了parseInt（）函數(shù)而另外一個(gè)沒有。接下來請(qǐng)?jiān)诒卷撁鎯?nèi)作出修改，實(shí)現(xiàn)如下功能：請(qǐng)?jiān)黾?個(gè)button，其value值分別為相減，相乘；而這兩個(gè)按鈕的功能分別是點(diǎn)擊之后，在其后的文本框中出現(xiàn)文本框t1，t2相減、相乘的結(jié)果。 郭峰function f2()var x=document.getElementById(t1).value;var y=document.getElementById(t2).value;document.getElementById(t4).value=parseInt(x)+parseInt(y);function f1()var x=document.getElementById(t1).value;var y=document.getElementById(t2).value;document.getElementById(t3).value=(x)+(y);+實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)六 Javascript中函數(shù)的簡(jiǎn)單應(yīng)用實(shí)驗(yàn)?zāi)康?熟悉javascript語言的函數(shù)基本結(jié)構(gòu)。2會(huì)定義函數(shù)及其參數(shù)變量。3熟悉對(duì)函數(shù)的一些基本操作和具體的函數(shù)定義。實(shí)驗(yàn)內(nèi)容1.設(shè)計(jì)一個(gè)頁面，要求頁面內(nèi)有三個(gè)文本框，4個(gè)按鈕。四個(gè)按鈕上分別是、,而點(diǎn)擊某個(gè)按鈕之后，則會(huì)將前兩個(gè)文本框中的數(shù)字進(jìn)行相應(yīng)的數(shù)學(xué)運(yùn)算，把答案顯示在第三個(gè)文本框中。2.設(shè)計(jì)一個(gè)頁面，要求實(shí)現(xiàn)功能為：a.點(diǎn)擊對(duì)應(yīng)按鈕，則在其后的文本框中出現(xiàn)對(duì)應(yīng)答案?？疾禳c(diǎn)是parseInt()函數(shù)的應(yīng)用。b.給每個(gè)算式等號(hào)左邊的文本框中設(shè)置一個(gè)默認(rèn)值。就是要求每個(gè)text都要在代碼中先設(shè)一個(gè)value。c.小提示:我只給出了加法的按鈕對(duì)應(yīng)的代碼，我建議你復(fù)制粘貼這段代碼來實(shí)現(xiàn)功能，但是要注意讓按鈕和function，以及各個(gè)文本框之間的對(duì)應(yīng)關(guān)系。3.設(shè)計(jì)一個(gè)頁面，要求單擊左邊文本框?qū)?yīng)按鈕，則左邊文本框中會(huì)出現(xiàn)對(duì)應(yīng)文字。比如依次單擊6,5,7，則出現(xiàn)657。右邊文本框及對(duì)應(yīng)按鈕的功能也類似。在輸入數(shù)字完畢后，單擊=按鈕，則第三個(gè)文本框中會(huì)出現(xiàn)左邊兩個(gè)文本框中的相加之和。本題目是一個(gè)簡(jiǎn)化的計(jì)算器。我給出的提示是，本題中建議只采用三個(gè)function。左邊文本框?qū)?yīng)數(shù)字按鈕都用一個(gè)function足矣，右邊的則用另外一個(gè)按鈕function，=等號(hào)單獨(dú)用一個(gè)function。4.設(shè)計(jì)一個(gè)網(wǎng)頁，其上的文字為“測(cè)試你倆的緣分 三分測(cè)試你倆的緣分 三分鐘就知道誰是你最愛得人? (98%的準(zhǔn)確率) ” 然后下面有這樣兩句您的名字是？后面設(shè)計(jì)個(gè)文本框。然后下面是這一句寫下一個(gè)異性的名子. 后面再一個(gè)文本框然后后面是個(gè)按鈕，開始測(cè)試點(diǎn)擊開始測(cè)試之后，頁面會(huì)有這樣的提示：哈哈，某某，我已經(jīng)知道你喜歡的人是某某啦。趕快賄賂賄賂我，讓我?guī)湍惚Ｃ馨桑∵@個(gè)題目主要是復(fù)習(xí)button的onclick與alert結(jié)合的一個(gè)題目。5. 請(qǐng)創(chuàng)建頁面輸入如下代碼，本題目我已經(jīng)給出了前三個(gè)按鈕的代碼，請(qǐng)為第四個(gè)按鈕增添代碼，使得單擊第四個(gè)按鈕的時(shí)候，第二個(gè)文本框中出現(xiàn)1+3+數(shù)值型t1的值的結(jié)果。郭峰function f1(x,y)document.getElementById(t2).value=document.getElementById(t1).value+x+y;function f2(x,y)document.getElementById(t2).value=1+x+y;初始值t1 最終值t2 實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)七 Javascript控件交互設(shè)計(jì)實(shí)驗(yàn)?zāi)康?.熟悉text與button的組合應(yīng)用。2.會(huì)定義function的相關(guān)功能。3.試驗(yàn)較復(fù)雜功能的頁面設(shè)計(jì)。實(shí)驗(yàn)內(nèi)容1. 請(qǐng)完成以下網(wǎng)頁的設(shè)計(jì)，要求用戶在輸入姓名后，單擊相應(yīng)按鈕，下面就會(huì)出現(xiàn)一個(gè)對(duì)應(yīng)的請(qǐng)假單。并且附帶用戶的姓名和當(dāng)天日期。日期由Date（）函數(shù)得出。得到具體年月日的函數(shù)請(qǐng)看課本P303。請(qǐng)假單顯示在一個(gè)id為d1的div中。再說一點(diǎn)，這個(gè)題目如果你使用參數(shù)傳遞的思路來解決的話，那么只需用寫一個(gè)function即可足夠使用了。2.請(qǐng)為如下頁面增加代碼，要求實(shí)現(xiàn)效果為：用戶輸入姓名，并在空缺文本框中輸入答案后，單擊提交答案按鈕，則會(huì)告訴用戶最終得分。每作對(duì)一題25分，滿分一百分。郭峰function f1()var x=document.getElementById(t1).value;var y=document.getElementById(t2).value;document.getElementById(t3).value=parseInt(x)+parseInt(y);請(qǐng)?jiān)诖溯斎肽男彰?請(qǐng)?jiān)谙旅娴奈谋究騼?nèi)輸入您的答案： = = = = 實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)八 新函數(shù)的學(xué)習(xí)與應(yīng)用訓(xùn)練實(shí)驗(yàn)?zāi)康?.介紹了parseInt（）這個(gè)函數(shù)以及text文本框的value默認(rèn)值功能，并重新練習(xí)了button的onclick調(diào)用function來實(shí)現(xiàn)代碼功能的頁面結(jié)構(gòu)。2.掌握innerHTML和Math.random()隨機(jī)數(shù)函數(shù)。3.confirm（）與prompt（）是我們要練習(xí)的新知識(shí)。刷新頁面location.reload()也是一個(gè)我們必須了解的常用函數(shù)。4.我們今天的重點(diǎn)是4.7利用math對(duì)象簡(jiǎn)化運(yùn)算中4.7.1取整和4.7.3隨機(jī)數(shù)。這兩個(gè)知識(shí)點(diǎn)的組合可以衍生出很多不同的效果。是我們會(huì)經(jīng)常用到的。實(shí)驗(yàn)內(nèi)容1. 請(qǐng)?jiān)O(shè)計(jì)一個(gè)頁面，頁面中有三個(gè)按鈕，要求單擊每個(gè)按鈕的時(shí)候，則在對(duì)應(yīng)位置出現(xiàn)你自己的姓名。單擊文本框按鈕，則文本框中要出現(xiàn)你的名字，也就是onclick點(diǎn)擊按鈕之后，通過函數(shù)function，使得text的value值為你的名字。單擊alert按鈕，則彈出一個(gè)alert警告框，里面是你的名字。最后是div按鈕，單擊它則div中的內(nèi)容換成你的名字，也就是這個(gè)div對(duì)應(yīng)id的document.getElementById().innerHTML=你的名字2. confirm的功能是彈出一個(gè)兩選項(xiàng)的對(duì)話框，最重要的是，你點(diǎn)擊確定或者取消按鈕之后，可以給出進(jìn)一步的選擇。請(qǐng)創(chuàng)建頁面，要求是，修改本題的代碼，使其功能為：?jiǎn)螕舭粹o，會(huì)彈出一句話：“你今天的心情是不是很好??？”如果用戶點(diǎn)擊確定，則彈出“那你請(qǐng)我吃飯好不好啊？”如果用戶點(diǎn)擊取消，則彈出“那你是不是因?yàn)槲覜]給你機(jī)會(huì)請(qǐng)我吃飯所以心情不好?。俊?.自己創(chuàng)建一個(gè)文件，復(fù)制任務(wù)2的代碼，然后自己編寫程序，要求頁面一開始彈出一個(gè)confirm，然后用戶點(diǎn)擊確定或者取消之后，會(huì)再分別彈出內(nèi)容不同的alert。4. 設(shè)計(jì)網(wǎng)頁，實(shí)現(xiàn)的功能為：點(diǎn)擊確定之后再出現(xiàn)一個(gè)confirm，看用戶是否點(diǎn)擊兩次確定。如果點(diǎn)擊取消，則以alert結(jié)束。要求：修改代碼，實(shí)現(xiàn)如下功能：一開始confirm提問：你是否喜歡紅色？如果用戶點(diǎn)擊確定，則再一個(gè)confirm：你是否喜歡藍(lán)色？如果用戶點(diǎn)擊確定，則彈出“你喜歡紅色和藍(lán)色”如果用戶點(diǎn)擊取消，則彈出“你喜歡紅色不喜歡藍(lán)色”如果在“你是否喜歡紅色？”那個(gè)問題上用戶選擇了取消，則再一個(gè)confirm是“你是否喜歡黃色？”如果用戶點(diǎn)擊確定，則彈出“你喜歡黃色不喜歡紅色”如果用戶點(diǎn)擊取消，則彈出“紅色和黃色你都不喜歡”5. 提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為 null。也就是如果點(diǎn)擊取消則沒有任何反應(yīng)。語法： prompt(文本,默認(rèn)值)這里的文本是這個(gè)對(duì)話框上方彈出的提示語。這里的默認(rèn)值是對(duì)話框剛打開的時(shí)候默認(rèn)出現(xiàn)在對(duì)話框里的內(nèi)容。創(chuàng)建頁面，要求實(shí)現(xiàn)功能： title改成你自己的名字。最終效果為：當(dāng)用戶輸入自己名字后，頁面提示為“XX，成功學(xué)院歡迎你的到來！”xx是用戶自己輸入的名字。6.創(chuàng)建頁面，包括一個(gè)文本框一個(gè)按鈕，使其最終效果為：當(dāng)用戶輸入自己性別后，如果輸入為“男”，則頁面顯示“先生你好”，如果輸入為“女”，則顯示“女士你好“。7. 頁面打開之后，會(huì)直接出現(xiàn)提示框，第一個(gè)提示框是請(qǐng)用戶輸入自己的姓名，第二個(gè)提示框是請(qǐng)用戶輸入性別為“男”或者“女”。根據(jù)用戶輸入的信息，頁面顯示“XX先生你好”或者“XX女士你好”。這里的xx是用戶在第一個(gè)prompt提示框中自己輸入的名字。實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)九 div與text的顯示應(yīng)用練習(xí)實(shí)驗(yàn)?zāi)康?.nerHTML的靈活應(yīng)用2.v與text的顯示應(yīng)用3.lue與innerHTML的區(qū)別于練習(xí)實(shí)驗(yàn)內(nèi)容1. 本題目是練習(xí)課本P36的4.2的內(nèi)容，通過id訪問元素，并通過innerHTML屬性改變其內(nèi)容。題目要求為，用戶在文本框中輸入自己的名字，單擊按鈕，則頁面的div中出現(xiàn)一句話“XX,你今天心情好么？”xx是用戶在文本框中輸入的名字。文本框中默認(rèn)值為你自己的姓名。 這個(gè)題目比較容易，我再?gòu)?qiáng)調(diào)一下里面涉及的知識(shí)點(diǎn)：div要顯示內(nèi)容應(yīng)該把div對(duì)應(yīng)id的innerHTML屬性設(shè)置為你需要顯示的內(nèi)容即可。比如document.getElementById(注意這里要輸入div的id).innerHTML=你的名字 而文本框的值則由這句經(jīng)典代碼來指代。document.getElementById(文本框的id).value 他們的相同點(diǎn)是都要用到document.getElementById，都要在括號(hào)內(nèi)的引號(hào)中輸入id。區(qū)別是div后面跟的是innerHTML,而text文本框后面跟的是value。2. 本題目要求為，設(shè)計(jì)頁面代碼，在頁面內(nèi)增加一個(gè)文本框，文本框內(nèi)默認(rèn)值為10。當(dāng)用戶單擊第一個(gè)按鈕的時(shí)候，則文本框中依次出現(xiàn)10,20,40，80.就是前一個(gè)數(shù)的倍數(shù)。而單擊第二個(gè)按鈕，則刷新頁面，重置文本框的值。 這個(gè)題目比較容易，我再?gòu)?qiáng)調(diào)一下里面涉及的知識(shí)點(diǎn)：div要顯示內(nèi)容應(yīng)該把div對(duì)應(yīng)id的innerHTML屬性設(shè)置為你需要顯示的內(nèi)容即可。比如document.getElementById(注意這里要輸入div的id).innerHTML=你的名字3. Math.random()是一個(gè)從0到1的隨機(jī)數(shù)。那么如果我想得到從0到10的隨機(jī)數(shù)呢？那么就需要我們讓Math.random()*10就可以了。然后通過四舍五入，就能得到一個(gè)從0到10的隨機(jī)整數(shù)。任務(wù)9的要求是創(chuàng)建一個(gè)頁面，頁面內(nèi)有一個(gè)按鈕和一個(gè)文本框。單擊按鈕的時(shí)候文本框中隨機(jī)出現(xiàn)一個(gè)0到10隨機(jī)數(shù)。建議從我的示范頁面中選擇和復(fù)制代碼來完成。4.請(qǐng)把以下代碼復(fù)制到空文檔中，用瀏覽器打開，然后按要求修改代碼實(shí)現(xiàn)功能。 文本框賦初值和單擊清空。function a()document.getElementById(t1).value=Math.round(Math.random()*99+1);function b()document.getElementById(t1).value=;function c()function d()本頁面的A,B按鈕已經(jīng)具備了相應(yīng)功能。請(qǐng)學(xué)習(xí)其代碼，然后對(duì)C,D按鈕輸入js代碼，使其實(shí)現(xiàn)頁面上要求的功能。 現(xiàn)在是時(shí)分 秒單擊此按鈕，則上面第一個(gè)文本框中會(huì)出現(xiàn)一個(gè)隨機(jī)數(shù)單擊此按鈕，會(huì)清空第一個(gè)文本框中的數(shù)值單擊此按鈕，則上面的第二，三，四個(gè)文本框會(huì)出現(xiàn)隨機(jī)數(shù)。這里特別提醒一下，第二個(gè)文本框是出小時(shí)，那么應(yīng)該是從0到23的隨機(jī)數(shù)，而文本框三，四是分和秒，它應(yīng)該是從0到59的隨機(jī)數(shù)。單擊此按鈕，則上面的第二，三，四個(gè)文本框中的隨機(jī)數(shù)會(huì)被清空。實(shí)驗(yàn)步驟1.創(chuàng)建網(wǎng)頁文檔文件；2.在編輯器中打開文檔，輸入代碼；3.在瀏覽器中觀看代碼效果；4.根據(jù)運(yùn)行情況進(jìn)行調(diào)試；5.根據(jù)最終結(jié)果記錄程序，總結(jié)經(jīng)驗(yàn)。實(shí)驗(yàn)數(shù)據(jù)記錄及分析（或程序及運(yùn)行結(jié)果）評(píng)語：分?jǐn)?shù)： 教師簽字： 日期： 年 月 日實(shí)驗(yàn)十 Javascript程序修改練習(xí)實(shí)驗(yàn)?zāi)康?.javascript代碼閱讀能力2.根據(jù)源代碼進(jìn)行改進(jìn)的能力。實(shí)驗(yàn)內(nèi)容1.請(qǐng)把以下代碼復(fù)制到空文檔中，用瀏覽器打開，然后按要求修改代碼實(shí)現(xiàn)功能。郭峰function a()function b()在此頁面基礎(chǔ)上進(jìn)行代碼修改，使得下面的A,B按鈕可以完成相應(yīng)的運(yùn)算功能。 + = - =單擊此按鈕，則上面四個(gè)式子的等號(hào)左側(cè)文本框中會(huì)隨機(jī)出現(xiàn)0到100之間的整數(shù)單擊此按鈕，則上面四個(gè)式子的等號(hào)左側(cè)文本框中會(huì)隨機(jī)出現(xiàn)0到100之間的整數(shù)，并且最右邊的文本框中會(huì)出現(xiàn)他們的計(jì)算結(jié)果。2. 請(qǐng)把以下代碼復(fù)制到空文檔中，用瀏覽器打開，然后按要求修改代碼實(shí)現(xiàn)功能。郭峰function a()請(qǐng)?jiān)诖溯斎肽男彰?要求單擊此按鈕后，下面文本框中出現(xiàn)一句話：“恭喜xxx！我們已經(jīng)測(cè)試出您的幸運(yùn)數(shù)字為y”。xxx為上面文本框中輸入的名字，y是一個(gè)從0到100的隨機(jī)整數(shù)。 實(shí)驗(yàn)步