太原理工大學web程序設計基礎實驗報告.doc
課程名稱： WEB程序設計基礎 實驗項目： WEB程序設計基礎實驗 實驗地點： 逸夫樓402 專業(yè)班級： 軟件1415班 學生姓名： 朱偉 學號： 2014005960 指導教師： 田玉玲 2016年 11 月 21 日實驗一 HTML語言一、實驗目的1掌握常用的HTML語言標記；2利用文本編輯器建立HTML文檔，制作簡單網(wǎng)頁。二、實驗要求1獨立完成實驗。2書寫實驗報告書。三、實驗內容1在文本編輯器“記事本”中輸入如下的HTML代碼程序，以文件名sy1.html保存，并在瀏覽器中運行。（請仔細閱讀下列程序語句，理解每條語句的作用）（1）程序代碼：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body bgcolor="#00DDFF"> <h1><B><I><FONT COLOR="#FF00FF"> <MARQUEE BGCOLOR="#FFFF00"direction=left behavior=alternate>welcome to you</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2><EM> Welcome to theworld of Html</EM><p>This is a simple HTML document.It is to give you an outline of how to write HTML fileand how the <b>markup tags </b>work in the<I>HTML</I>file</p><p>Following is three chapters<ul><li>This is the chapter one</li><li><A HREF="#item">This is the chapter two</A></li><li>This is the chapter three</li></ul></p><hr><p><A NAME="item">Following is items of the chapter two</A></p><table border=2 bgcolor=gray width="40%"><tr><th>item</th><th>content</th></tr><tr><td>item1</td><td>font</td></tr><tr><td>item2</td><td>table</td></tr><tr><td>item3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONT COLOR=BLUE SIZE=4>End of the example document</FONT></I></B></p></body></html> </body></html>（2）實驗結果2 編寫一個能輸出如圖所示界面的HTML文件。（1）程序代碼<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表單范例</title><style>h1text-align: center;</style></head><body><form action="#"><table border="0" align="center"><tr><td colspan="2"><h1><u>請留下個人資料</u></h1></td></tr><tr><td> 姓 名:</td><td ><input type="text" name="username"></td></tr><br><tr><td> E-mail:</td><td><input type="text" name="email"></td></tr><br><tr><td> 電 話:</td><td><input type="text" name="phone"></td></tr><br><tr><td> 性 別:</td><td><input type="radio" name="gender" value="女" checked="checked">女 <input type="radio" name="gender" value="男">男</td></tr><br><tr><td> 年 齡：</td><td><select name="age"><option value="1">20以下</option></select></td></tr><br><tr><td> 留言板：</td><td><textarea name="mark" cols="30" rows="5"></textarea></td></tr><tr><td rowspan="4">您的愛好：</td><td><input name="hobby" type="checkbox" value=""/>運動</td></tr><tr><td><input name="hobby" type="checkbox" value=""/>閱讀</td></tr><tr><td><input name="hobby" type="checkbox" value=""/>聽音樂</td></tr><tr><td><input name="hobby" type="checkbox" value=""/>旅游</td><br/></tr><tr align="center"> <td colspan="2"> <input type="button" value="提交"><input type="reset" value="全部重寫"> </td></tr></table></form></body></html>（2） 實驗結果：4、 實驗心得： 剛開始編寫的時候只是編寫了要求的form，但是不如給出的表單那樣整齊，后來嘗試用了表格，將表格的border屬性改為0，再適當加空格 才完成了如圖所示的表單實驗二 網(wǎng)頁程序設計-JavaScript一、實驗目的1掌握JavaScript技術,基本掌握JavaScript的開發(fā)技巧；2利用文本編輯器建立JavaScript腳本語言進行簡單編程。二、實驗要求:1根據(jù)以下實驗內容書寫實驗準備報告。2獨立完成實驗。三、實驗內容1 顯示一個動態(tài)的時鐘編寫程序，在文本框中顯示實時的時間，然后運行文件,驗證程序是否正確。（1） 程序代碼<html><head><meta charset="UTF-8"><script language="javascript">var timer = nullfunction stop()clearTimeout(timer)function start()var time = new Date()var hours =time.getHours()var minutes =time.getMinutes()minutes=(minutes<10)?"0":"")+minutesvar seconds=time.getSeconds()seconds=(seconds<10)?"0":"")+secondsvar clock =hours+":"+minutes+":"+secondsdocument.forms0.display.value=clocktimer=setTimeout("start()",1000)</script></head><body onLoad="start()" onUnload="stop()"><form >現(xiàn)在是北京時間：<input type="text" name="display" size="20"></form></body></html>（2） 實驗結果2事件驅動和事件處理 在文本編輯器“記事本”中輸入如下代碼程序，請仔細閱讀下列程序語句，理解每條語句的作用。源程序清單如下： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script>x=0function countSecond()if (x<6) x=x+1;document.fm.displayBox.value=x;setTimeout("countSecond()",1000);</script></head><body><form name=fm><input type="text" name="displayBox" value="0" size=4></form><script>countSecond()</script></body></html>分析上述代碼的作用,然后用瀏覽器運行文件,驗證自己的判斷是否正確。3JavaScript表單校驗編寫程序register.htm，做一個如下圖所示的用戶注冊界面，要求對用戶填寫的部分進行合法性檢驗。（1） 程序代碼<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用戶登錄</title><script type="text/javascript">function sub()var username=document.getElementById("username");var uvalue=username.value;if (uvalue="") alert("用戶名不能為空，請輸入用戶名！")form1.username.focus();return false;</script></head><body><form action="user" method="post" id="form1"><table border="0"><div>用戶登錄</div><div>請輸入用戶名：<input type="text" name="username" id="username"></div><div>請輸入密碼： <input type="password"></div><div><input type="button" value="提交" onclick="sub()"><input type="reset" value="全部重寫"></div></table></form></body></html>（2） 實驗結果4、 實驗心得： 這次的提前將form寫成了表格的形式，這樣顯得整齊，javascript編寫時要注意函數(shù)的編寫，如在函數(shù)前加上function，還要注意事件、驅動和處理程序，盡可能地減少失誤。實驗3 Request與Response對象的應用一、實驗目的1掌握JSP的Request與Response隱式對象的用法，基本掌握JSP的開發(fā)技巧。2在JDK和Eclipse環(huán)境下，完成下列實驗。二、實驗要求1獨立完成實驗。2書寫實驗報告書。三、實驗內容編寫程序實現(xiàn)一個單選小測試。在test.jsp頁面顯示問題，并將答案提交至answer.jsp進行判斷，如果回答正確，則將頁面轉至yes.jsp;否則，轉至no.jsp。（1）程序代碼test.jsp<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><h2>北京奧運會開幕日期是：</h2> <br><form action="answer.jsp" method="post" name="input"><input type="radio" name="date" value="6"> 8月6日<input type="radio" name="date" value="8"> 8月8日<input type="radio" name="date" value="9"> 8月9日<input type="radio" name="date" value="10">8月10日 <br><input type="submit" value="提交答案"></form></body></html>Answer.jsp<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><%String mydate;mydate=request.getParameter("date");if(mydate.equals("8")response.sendRedirect("yes.jsp");elseresponse.sendRedirect("no.jsp");%></body></html>Yes.jsp<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><h1 align="center">恭喜您答對了！</h1></body></html>No.jsp<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><h1 align="center">很抱歉，您答錯了!</h1></body></html>（2） 實驗結果四、實驗心得 本次實驗需要配置環(huán)境變量才能使用，使用request.getParameter來接收客戶端傳來的值，用response.sendRedirect重新定位一個jsp頁面。另外本次實驗過程中出現(xiàn)了端口號被占用的問題，通過查找資料，將Servers->server.xml中的端口號改為8003才解決問題。實驗4 Application對象Session對象一、實驗目的1掌握JSP的Application對象Session對象對象的用法，基本掌握JSP的開發(fā)技巧。2在JDK和Eclipse環(huán)境下，完成下列實驗。二、實驗要求:1獨立完成實驗2書寫實驗報告書三、實驗內容:1請仔細閱讀下列程序語句，理解每條語句的作用。源程序清單如下：<% page contentType="text/html;charset=gb2312"%><html><head><title>網(wǎng)頁計數(shù)器</title><head><body><% if (application.getAttribute("counter")=null)application.setAttribute("counter","1");elseString strnum=null;strnum=application.getAttribute("counter").toString();int icount=0;icount=Integer.valueOf(strnum).intValue();icount+;application.setAttribute("counter",Integer.toString(icount); %>您是第<%=application.getAttribute("counter")%>位訪問者！</body></html>2 上述計數(shù)器當進行刷新時也會自動加1，試編寫程序count.jsp，實現(xiàn)防刷新文本計數(shù)器。（1） 程序代碼：<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>網(wǎng)頁計數(shù)器</title></head><body><%if (application.getAttribute("counter")=null)application.setAttribute("counter","1");elseString strnum=null;strnum=application.getAttribute("counter").toString();if(session.isNew()/如果是一個新的會話int icount=0;icount=Integer.valueOf(strnum).intValue();icount+;application.setAttribute("counter",Integer.toString(icount); %>您是第<%=application.getAttribute("counter")%>位訪問者！</body></html>（2）實驗結果刷新時不再增加數(shù)量，只有重新打開頁面才能增加數(shù)量。3編寫程序register.htm和register.jsp，做一個用戶注冊的界面，要求對用戶填寫的部分進行合法性檢驗，然后提交到register.jsp進行注冊檢驗，若用戶名為user開頭的，就提示“該用戶名已被注冊”，若用戶名為admin，就提示“歡迎您，管理員”，否則，就顯示“注冊成功”。（1）程序代碼Register.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用戶注冊</title><script language="javascript">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("登陸成功");</script></head><body><table><form action="register.jsp" method="get" name="input" onSubmit="return on_submit()"><h1 align="center">用戶注冊</h1><tr><td>請輸入用戶名：</td><td><input type="text" name="Name"></td></tr><br><tr><td>請輸入密碼：</td><td><input type="password" name="Password"></td></tr><br><tr><td>再次輸入密碼：</td><td><input type="password" name="Password2"></td></tr><br></table><input type="submit" value="提交"><input type="reset" value="全部重寫"></form></body></html>Register.jsp<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><%String name;String chr;name=request.getParameter("Name");if(name.equals("admin")out.println("歡迎您，管理員");else if(name.startsWith("User")out.println("該用戶名已被注冊");elseout.println("登陸成功");%></body></html>(2) 實驗結果4、 實驗心得 通過本次實驗學會了session和application的使用，session對象在第一個JSP頁面被裝載時自動創(chuàng)建，它的作用范圍是所有頁面，但只能相對于一個用戶，它的生命期從訪問這個網(wǎng)站到關閉瀏覽器為止；application雖然也是作用于所有頁面，但是是所有用戶共享的，它的生命期是從開啟服務器開始直到關閉服務器為止。而且這個實驗是對之前實驗的一個綜合，只要細心，也是比較容易。
個人主頁