太原理工大學(xué)web程序設(shè)計基礎(chǔ)實驗報告內(nèi)容

1、-CAL-FENGHAI.-(YICAI)-Company One1太原理工大學(xué)web程序設(shè)計基礎(chǔ)實驗報告2016PAGE25課程名稱： WEB程序設(shè)計基礎(chǔ) 實驗項目： WEB程序設(shè)計基礎(chǔ)實驗 實驗地點： 逸夫樓402 專業(yè)班級： 軟件1415班 學(xué)生姓名： 朱偉 學(xué)號： 2014005960 指導(dǎo)教師： 田玉玲 2016年 11 月 21 日實驗一 HTML語言一、實驗?zāi)康?掌握常用的HTML語言標(biāo)記；2利用文本編輯器建立HTML文檔，制作簡單網(wǎng)頁。二、實驗要求1獨立完成實驗。2書寫實驗報告書。三、實驗內(nèi)容1在文本編輯器“記事本”中輸入如下的HTML代碼程序，以文件名sy1.html保存，并

2、在瀏覽器中運行。（請仔細閱讀下列程序語句，理解每條語句的作用）（1）程序代碼： Example welcome to youA simple HTML document Welcome to theworld of HtmlThis is a simple HTML document.It is to give you an outline of how to write HTML fileand how the markup tags work in theHTMLfileFollowing is three chaptersThis is the chapter oneThis is th

3、e chapter twoThis is the chapter threeFollowing is items of the chapter twoitemcontentitem1fontitem2tableitem3form1234567End of the example document （2）實驗結(jié)果編寫一個能輸出如圖所示界面的HTML文件。（1）程序代碼表單范例h1text-align: center;請留下個人資料 姓 名: E-mail: 電 話: 性 別:女 男 年 齡：20以下 留言板：您的愛好

4、：運動閱讀聽音樂旅游 實驗結(jié)果：實驗心得： 剛開始編寫的時候只是編寫了要求的form，但是不如給出的表單那樣整齊，后來嘗試用了表格，將表格的border屬性改為0，再適當(dāng)加空格 才完成了如圖所示的表單實驗二 網(wǎng)頁程序設(shè)計-JavaScript一、實驗?zāi)康?掌握JavaScript技術(shù),基本掌握JavaScript的開發(fā)技巧；2利用文本編輯器建立JavaScript腳本語言進行簡單編程。二、實驗要求:1根據(jù)以下實驗內(nèi)容書寫實驗準(zhǔn)備報告。2獨立完成實驗。三、實驗內(nèi)容顯示一個動態(tài)的時鐘編寫程序，在文本框中顯示實時的時間，然后運行文件,驗證程序是否正確。程序代碼var timer = null

5、function stop()clearTimeout(timer)function start()var time = new Date()var hours =time.getHours()var minutes =time.getMinutes()minutes=(minutes10)0:)+minutesvar seconds=time.getSeconds()seconds=(seconds10)0:)+secondsvar clock =hours+:+minutes+:+secondsdocument.forms0.display.value=clocktimer=setTime

6、out(start(),1000)現(xiàn)在是北京時間：實驗結(jié)果2事件驅(qū)動和事件處理 在文本編輯器“記事本”中輸入如下代碼程序，請仔細閱讀下列程序語句，理解每條語句的作用。源程序清單如下： x=0function countSecond()if (x6) x=x+1;document.fm.displayBox.value=x;setTimeout(countSecond(),1000);countSecond()分析上述代碼的作用,然后用瀏覽器運行文件,驗證自己的判斷是否正確。3JavaScript表單校驗編寫程序register.htm，做一個如下圖所示的用戶注冊界面，要求對用戶填寫的部分進行合

7、法性檢驗。程序代碼用戶登錄function sub()var username=document.getElementById(username);var uvalue=username.value;if (uvalue=) alert(用戶名不能為空，請輸入用戶名！)form1.username.focus();return false;用戶登錄請輸入用戶名：請輸入密碼： 實驗結(jié)果實驗心得： 這次的提前將form寫成了表格的形式，這樣顯得整齊，javascript編寫時要注意函數(shù)的編寫，如在函數(shù)前加上function，還要注意事件、驅(qū)動和處理程序，盡可能地減少失誤。實驗3 Reque

8、st與Response對象的應(yīng)用一、實驗?zāi)康?掌握JSP的Request與Response隱式對象的用法，基本掌握JSP的開發(fā)技巧。2在JDK和Eclipse環(huán)境下，完成下列實驗。二、實驗要求1獨立完成實驗。2書寫實驗報告書。三、實驗內(nèi)容編寫程序?qū)崿F(xiàn)一個單選小測試。在test.jsp頁面顯示問題，并將答案提交至answer.jsp進行判斷，如果回答正確，則將頁面轉(zhuǎn)至yes.jsp;否則，轉(zhuǎn)至no.jsp。（1）程序代碼test.jspInsert title here北京奧運會開幕日期是： 8月6日 8月8日 8月9日8月10日 Answer.jspInsert title hereYes.j

9、spInsert title here恭喜您答對了！No.jspInsert title here很抱歉，您答錯了!實驗結(jié)果四、實驗心得 本次實驗需要配置環(huán)境變量才能使用，使用request.getParameter來接收客戶端傳來的值，用response.sendRedirect重新定位一個jsp頁面。另外本次實驗過程中出現(xiàn)了端口號被占用的問題，通過查找資料，將Servers-server.xml中的端口號改為8003才解決問題。實驗4 Application對象Session對象一、實驗?zāi)康?掌握JSP的Application對象Session對象對象的用法，基本掌握JSP的開發(fā)技巧。2在

10、JDK和Eclipse環(huán)境下，完成下列實驗。二、實驗要求:1獨立完成實驗2書寫實驗報告書三、實驗內(nèi)容:1請仔細閱讀下列程序語句，理解每條語句的作用。源程序清單如下：網(wǎng)頁計數(shù)器您是第位訪問者！上述計數(shù)器當(dāng)進行刷新時也會自動加1，試編寫程序count.jsp，實現(xiàn)防刷新文本計數(shù)器。程序代碼：網(wǎng)頁計數(shù)器您是第位訪問者?。?）實驗結(jié)果刷新時不再增加數(shù)量，只有重新打開頁面才能增加數(shù)量。3編寫程序register.htm和register.jsp，做一個用戶注冊的界面，要求對用戶填寫的部分進行合法性檢驗，然后提交到register.jsp進行注冊檢驗，若用戶名為user開頭的，就提示“該用戶名已被注冊”，

11、若用戶名為admin，就提示“歡迎您，管理員”，否則，就顯示“注冊成功”。（1）程序代碼Register.html用戶注冊function on_submit() if(input.Name.value=) alert(用戶名不能為空，請輸入用戶名!); input.Name.focus(); return false; else if(input.Password.value=|input.Password2.value=) alert(請輸入密碼); input.Password.focus(); return false; else if(input.Password.value!=input.Password2.value) alert(兩次密碼不一致！); input.Password2.focus(); return false; else alert(登陸成功);用戶注冊請輸入用戶名：請輸入密碼：再次輸入密碼：Register.jspInsert title here實驗結(jié)果實驗心得 通過本次實驗學(xué)會了