太原理工大学web程序设计基础实验报告.doc
课程名称： WEB程序设计基础 实验项目： WEB程序设计基础实验 实验地点： 逸夫楼402 专业班级： 软件1415班 学生姓名： 朱伟 学号： 2014005960 指导教师： 田玉玲 2016年 11 月 21 日实验一 HTML语言一、实验目的1掌握常用的HTML语言标记；2利用文本编辑器建立HTML文档，制作简单网页。二、实验要求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，再适当加空格 才完成了如图所示的表单实验二 网页程序设计-JavaScript一、实验目的1掌握JavaScript技术,基本掌握JavaScript的开发技巧；2利用文本编辑器建立JavaScript脚本语言进行简单编程。二、实验要求:1根据以下实验内容书写实验准备报告。2独立完成实验。三、实验内容1 显示一个动态的时钟编写程序，在文本框中显示实时的时间，然后运行文件,验证程序是否正确。（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 >现在是北京时间：<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编写时要注意函数的编写，如在函数前加上function，还要注意事件、驱动和处理程序，尽可能地减少失误。实验3 Request与Response对象的应用一、实验目的1掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求1独立完成实验。2书写实验报告书。三、实验内容编写程序实现一个单选小测试。在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） 实验结果四、实验心得 本次实验需要配置环境变量才能使用，使用request.getParameter来接收客户端传来的值，用response.sendRedirect重新定位一个jsp页面。另外本次实验过程中出现了端口号被占用的问题，通过查找资料，将Servers->server.xml中的端口号改为8003才解决问题。实验4 Application对象Session对象一、实验目的1掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求:1独立完成实验2书写实验报告书三、实验内容:1请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：<% page contentType="text/html;charset=gb2312"%><html><head><title>网页计数器</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 上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。（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>网页计数器</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）实验结果刷新时不再增加数量，只有重新打开页面才能增加数量。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页面被装载时自动创建，它的作用范围是所有页面，但只能相对于一个用户，它的生命期从访问这个网站到关闭浏览器为止；application虽然也是作用于所有页面，但是是所有用户共享的，它的生命期是从开启服务器开始直到关闭服务器为止。而且这个实验是对之前实验的一个综合，只要细心，也是比较容易。
个人主页