web实验李柯 1
实 验 报 告 学院：软件学院系：软件工程 专业：软件工程 班级：1112 学号：2011005002 姓名：郭亮亮 指导教师：王莉时间：2013年12月29日学院名称软件学院专业班级软件1112学号2011005002实验成绩学生姓名郭亮亮同组人姓名实验日期2013.12.15课程名称实验题目HTML语言一实验目的1掌握常用的HTML语言标记；2利用文本编辑器建立HTML文档，制作简单网页。二实验内容 1在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程<html><head><title>表格标记综合示例</title></head><body><table border="1"cellpadding="0"bgcolor="#C0C0C0"width="400" height="75"><caption><p style="margin-right:16"><font size="5"color="#0000FF">学生成绩登记表</form></caption><tr> <td allign="center"valign="middle" width="40%" height="30%">学 号</td> <td allign="center"valign="middle" width="20%" height="22%">姓 名</td> <td allign="center"valign="middle" width="20%" height="22%">高等数学</td> <td allign="center"valign="middle" width="20%" height="22%">英 语</td> </tr><tr> <td allign="center"valign="middle" width="40%">2008000001</td> <td allign="center"valign="middle" width="20%">张三</td> <td allign="center"valign="middle" width="20%">95</td> <td allign="center"valign="middle" width="20%">90</td></tr><tr> <td allign="center"valign="middle" width="40%">2008000002</td> <td allign="center"valign="middle" width="20%">李四</td> <td allign="center"valign="middle" width="20%">90</td> <td allign="center"valign="middle" width="20%">96</td></tr> <tr> <td allign="center"valign="middle" width="40%"rowspan="2">说明</td> <td allign="center"valign="middle" width="60%"colspan="3">成绩=平时*20%+期末*80%</td> </tr> <tr> <td valign="middle"width="60%"colspan="3">2006年1月</td> </tr> </table> </body></html>序清单如下： 3 实验过程中遇到的问题及解决方法 对表单中标记的使用出现了问题，不了解各种标记的功能，通过查找书籍并在编程过程中运用，最终能熟练运用。四实验结论和感想 通过此次实验，.能熟练地掌握基本的HTML语言标记，懂得每一个标记所代表的意思。 进一步熟悉了表单的制作过程以及表单中各标记的灵活应用。五实验程序（另附）程序清单： <html> <head> <title>表单范例</title> </head> <body> <table align="center"><caption><h2><b>请留下个人资料</b><hr size="1" width="170" color="black"></h2></p></caption> <form name="form"> <tr><td align="right">姓名：</td> <td><input type="text" name="姓名"></td></tr> <tr><td align="right">E-mail：</td><td><input type="text" name="邮箱"></td></tr> <tr><td align="right">电话：</td><td><input type="text" name="电话"></td></tr> <tr><td align="right">性别：</td><td><input type="radio" name="性别" checked>女<input type="radio" name="性别">男</td></tr> <tr><td align="right">年龄：</td><td><select> <option selected>20以下<option>40以下<option>60以下<option>60以上</select></td></tr> <tr><td align="right">留言板：</td> <td><textarea name="留言板" rows="5" cols="40"></textarea><br></td></tr> <tr><td align="right">您的爱好：</td> <td><input type="checkbox" name="运动">运动<br> <input type="checkbox" name="阅读">阅读<br> <input type="checkbox" name="听音乐">听音乐<br> <input type="checkbox" name="旅游">旅游</td></tr> <tr><td align="center" colspan="2"><input type="submit" name="提交" value="提交">      <input type="reset" name="重写" value="全部重写"></td></tr> </form> </table> </body> </html> 网页程序设计-JavaScript一实验目的1掌握JavaScript技术,基本掌握JavaScript的开发技巧；2利用文本编辑器建立JavaScript脚本语言进行简单编程。二实验内容1 显示一个动态的时钟在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <html><head><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事件驱动和事件处理 在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <html><head><script language="javascript">function myfunction()alert("HELLO")</script></head><body><form><input type="button" onClick="myfunction()" value="Call function"></form><p>By pressing the button, a function will be called. The function will alert a message.</p></body></html>分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3JavaScript表单校验编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。三实验过程中遇到的问题及解决方法 在第三个实验的表单校验中，设置窗口弹出时遇到一定的问题，通过分析第二个实验，设定一个function函数，在button中的事件处理中调用此函数。四实验结论和感想 在本次实验中，学会了javascript函数的编写和调用，动手编写了javascript代码，但是在中间出现了很多问题，通过和同学商量以及老师的指导之后得到了解决，实现对表单元素的验证。五实验程序（另附）（1） <html> <head> <script language="javascript">var timer = null function stop() clearTimeout(timer) function start()var time = new Date() var hours =time.getHours() var minutes =time.getMinutes() minutes=(minutes<10)?"0":"")+minutes var seconds=time.getSeconds() seconds=(seconds<10)?"0":"")+seconds varclock=hours+":"+minutes+":"+seconds display.value=clock/document.forms0. timer=setTimeout("start()",1000) </script> </head> <body onLoad="start()" onUnload="stop()"> 现在是北京时间：<input type="text" name="display" size="20"> </body> </html> （2） <html> <head> <script language="javascript"> function myfunction() alert("HELLO") </script> </head> <body> <form> <input type="button" onClick="myfunction()" value="Call function"> </form> <p>By pressing the button, a function will be called. The function will alert a message.</p> </body> </html> （3）<html> <head> <script language="javascript"> function myfunction1() alert("用户名不能为空，请输入用户名") </script> </head> <body> <form> 用户登录</br> 请输入用户名：<input type="text"></br> 请输入密码:   <input type="text"></br></br> <input type="button" onClick="myfunction1()" value="提交"> <input type="button" onClick="myfunction2()" value="全部重写"> </form> </body> </html> 学院名称软件学院专业班级软件1106学号2011005004实验成绩学生姓名李柯同组人姓名实验日期2013.12.19课程名称实验题目Request与Response对象的应用一实验目的1掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验二实验内容编写程序实现一个单选小测试。在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;否则，转至no.jsp。 三实验过程中遇到的问题及解决方法 软件在配置过程中遇到一些问题，和tomcat连接时由于使用的全部为英文软件，操作有些困难。在进行编写程序的时候不会页面跳转，后使用response.sendRedirect（）命令来进行页面的跳转，并且产生不同的结果。四实验结论和感想 在不停地尝试中掌握JSP的Request与Response隐式对象的用法，以及在jsp环境下如何配置，编译。编程是一个锻炼人耐心的工作，遇到的重重问题只有在不断尝试和克服下，才能获取成功。五实验程序（另附）Test.jsp <%page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <body > <h2>北京奥运会开幕日期是： <br><br><form action="ansewr.jsp" method=post name=form1> <input type=radio name="date" checked 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日 <p></p> </h2> <input type=submit value=提交答案> </form> </body> </html> answer.jsp <% page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <body> <% String mydate; mydate=request.getParameter("date"); if(mydate.equals("8") response.sendRedirect("yes.jsp"); else response.sendRedirect("no.jsp"); %> </body> </html> yes.jsp<% page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <body background="D:MyEclipseXXSSSWebRoot1.jpg"> <br><br><br> <h1>恭喜您答对了！</h1> </body> </html> no.jsp <% page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <body> <br><br><br> <h1>很抱歉，您答错了！</h1> 学院名称软件学院专业班级软件1106学号2011005004实验成绩学生姓名李柯同组人姓名实验日期2013.12.21课程名称实验题目Application对象Session对象一实验目的1掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二实验内容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，实现防刷新文本计数器。3编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“欢迎您，管理员”，否则，就显示“注册成功”。3 实验过程中遇到的问题及解决方法 第一个程序的代码，既是按要求完成通过一个各客户端可以共享的对象application建立了一个对象，客户端每次打开浏览器或刷新浏览器都会触发这个计数器函数，只要有客户端访问服务器，服务器上的counter值就会进行加1操作，如果是初始打开则进行赋值1操作。 经过第一个程序的分析，已经大致知道计数器的实现方法，为达到防刷新，需要session的方法，在书上看到有一个isNew()的方法，可以用此方法来判断客户端是否由服务器产生。编写第三个实验时，在判断以user开头的用户名不太清楚，第一次使用contains()方法大致实现了判断功能，经过查阅java API文档，得知有substring()方法可以实现对字符串的截取操作，截取0-4的字符串对其进行equals()比较则实现了题目要求的功能。四实验结论和感想本次实验，学会了编写一个jsp程序，并将jsp程序部署到tomcat服务器上，并且懂得了接收客户端浏览器传过来的参数的值要用request对象，这次试验让我对Request命令和Response命令有了更加直观的了解和学习。五实验程序（另附）Register.html代码：<html><head><script language="javascript">function CheckForm()if(document.forms0.Username.value="")alert("请输入姓名");document.forms0.Username.focus();return false;if(document.forms0.Userpass.value="")alert("请输入密码");document.forms0.Userpass.focus();return false;</script></head><body><form onSubmit="return CheckForm();" action="register.jsp" method="post">用户登录：<br>请输入用户名：<input type="text" name="Username" size="20"><br>请输入密码： <input type="text" name="Userpass" size="20"><br><input type="submit" value="提交"><input type="reset" value="全部重写"></form></body></html>Register.jsp代码如下：<% page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+":/"+request.getServerName()+":"+request.getServerPort()+path+"/"%><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html> <head> <base href="<%=basePath%>"> <title>注册页面</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body><%if(request.getParameter("Username").substring(0,4).equals("user") %>该用户已被注册<%else if(request.getParameter("Username").equals("admin") %>欢迎您，管理员<%else %>注册成功<% %> </body></html>学院名称软件学院专业班级软件1106学号2011005004实验成绩学生姓名李柯同组人姓名实验日期2013.12.25课程名称实验题目使用JDBC连接数据库一实验目的1掌握JSP与数据库的连接技术JDBC2掌握JSP数据库编程技术。二实验内容 利用数据库建立一个同学录，然后通过JDBC编写一系列基于Web方式的JSP程序，来对同学录的数据库进行添加、查询等功能，要求在网页上显示出来。 1建立数据库建立名为students的access数据库,在库中建立schoolmate表，字段包括：id自动编号name文本birthday日期/时间phone文本email文本address文本other备注2. 创建数据源名打开数据源（ODBC）；添加Microsoft Access Driver(*.mdb)数据源驱动程序。数据源名称：students；更改默认数据库，选择students。3运行所编写的应用程序启动eclipse，建立项目exp5,将编写的程序放入该项目的WebContent下，右键点击WebContent，选择“刷新”。打开要运行的页面，在程序的任意位置单击右键，选择“运行方式”/“在服务器上运行”，单击“在服务器上运行” 对话框的“完成”，即可看到运行结果。三实验过程中遇到的问题及解决方法 在库中建立schoolmate表时，过程比较繁琐，期间小问题不断，在耐心调试下得以解决。建立数据库时，对以前所学知识不熟悉导致出错频繁，渐渐熟悉过程后得以解决。四实验结论和感想 通过此次实验，我学会了在JSP中连接数据库，而且能够对数据库进行一定的操作。在学习过程中遇到一些问题，在向数据库插入日期类型的数据，再添加之后返回主页不能立即显示插入的信息，还有中文乱码的问题，问题虽小，但在解决的过程中却能收获很多。五实验程序（另附） sc.html <html> <head> <script language="javascript"> function myfunction() if(form1.id.value="") alert("请输入要删除成员的编号"); return false; else return true; </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>删除界面</title> </head> <body> <h1>输入删除同学记录的编号</h1> <form name="form1" action="sc.jsp" method="post" onsubmit="return myfunction()"> 编号: <input type="text" name="id"><p></p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> <a href="sy.html">返回首页</a> </body> </html> sy.html <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>同学录</title></head> <body> <br><h1>同学录</h1> <br> <font size=6 > <a href="cx.jsp">查询</a> <a href="tj.html">添加</a> <a href="sc.html">删除</a> </font></body></html> tj.html <html> <head> <script language="javascript">Function myfunction() if(form1.id.value=""|form1.name.value=""|form1.birthday.value=""|form1.phone.value=""|form1.email.value=""|form1.address.value=""|form1.other.value="") alert("您输入的信息不完整"); return false; else return true; </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加界面</title> </head> <body> <h1>添加同学信息</h1> <form name="form1" action="tj.jsp" method="post" onsubmit="return myfunction()"> 学号: <input type="text" name="id"><br><br> 姓名: <input type="text" name="name"><br><br> 生日: <input type="text" name="birthday"><br><br> 电话: <input type="text" name="phone"><br><br> 邮箱: <input type="text" name="email"><br><br> 地址: <input type="text" name="address"><br><br> 其他: <input type="text" name="other"><br><br> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> <a href="sy.html">返回首页</a> </body> </html> cx.jsp <html> <head> <% page language="java" contentType="text/html; charset=UTF-8" import="java.sql.*" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <table border=1> <tr><td>学号</td><td>姓名</td><td>生日</td><td>电话</td><td>邮箱</td><td>地址</td><td>其他</td></tr> <% String driverName = "sun.jdbc.odbc.JdbcOdbcDriver" String dbName = "students" String tableName = "schoolmate" String userName = "" String userPasswd = "" String conURL = "jdbc:odbc:"+dbName; String sql = "SELECT * FROM "+tableName; Class.forName(driverName); Connection con = DriverManager.getConnection(conURL,userName,userPasswd); Statement s=con.createStatement(); ResultSet rs=s.executeQuery(sql); while(rs.next() out.println("<tr>"); out.println("<td>"+rs.getString("id")+"</td>"); out.println("<td>"+rs.getString("name")+"</td>"); out.println("<td>"+rs.getString("birthday")+"</td>"); out.println("<td>"+rs.getString("phone")+"</td>"); out.println("<td>"+rs.getString("email")+"</td>"); out.println("<td>"+rs.getString("address")+"</td>"); out.println("<td>"+rs.getString("other")+"</td>"); out.println("</tr>"); rs.close(); s.close(); con.close(); %> </table> <a href="sy.html">返回首页</a> </body></html> sc.jsp <html> <head> <% page language="java" contentType="text/html; charset=UTF-8" import="java.sql.*" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <% String driverName = "sun.jdbc.odbc.JdbcOdbcDriver" String dbName = "students" String tableName = "schoolmate" String userName = "" String userPasswd = "" String conURL = "jdbc:odbc:"+dbName; String sql = "SELECT * FROM "+tableName; Class.forName(driverName); Connectioncon= DriverManager.getConnection(conURL,userName,userPasswd); String id = new String(request.getParameter("id"); String up="delete from schoolmate where id="+id+"" PreparedStatement ps = con.prepareStatement(up); ps.executeUpdate(); ps.close(); %> <h1>删除后的数据库记录</h1><hr> <table border=1> <tr><td>学号</td><td>姓名</td><td>生日</td><td>电话</td><td>邮箱</td><td>地址</td><td>其他</td></tr> <% Statement s1=con.createStatement(); ResultSet rs1=s1.executeQuery(sql); while(rs1.next() out.println("<tr>"); out.println("<td>"+rs1.getString("id")+"</td>"); out.println("<td>"+rs1.getString("name")+"</td>"); out.println("<td>"+rs1.getString("birthday")+"</td>"); out.println("<td>"+rs1.getString("phone")+"</td>"); out.println("<td>"+rs1.getString("email")+"</td>"); out.println("<td>"+rs1.getString("address")+"</td>"); out.println("<td>"+rs1.getString("other")+"</td>"); out.println("</tr>"); rs1.close(); s1.close(); con.close(); %> </table> <a href="sy.html">返回首页</a> </body> </html> Tj.jsp <html> <head> <% page language="java" contentType="text/html; charset=UTF-8" import="java.sql.*" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <% String driverName = "sun.jdbc.odbc.JdbcOdbcDriver" String dbName = "students" String tableName = "schoolmate" String userName = "" String userPasswd = "" String conURL = "jdbc:odbc:"+dbName; String sql = "SELECT * FROM "+tableName; Class.forName(driverName); Connectioncon= DriverManager.getConnection(conURL,userName,userPasswd); Stringname=new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8"); String id = new String(request.getParameter("id"); String birthday = new String(request.getParameter("birthday"); String phone = new String(request.getParameter("phone"); String email = new String(request.getParameter("email"); Stringaddress=new String(request.getParameter("address").getBytes("ISO-8859-1"),"UTF-8"); Stringother=new String(request.getParameter("other").getBytes("ISO-8859-1"),"UTF-8"); PreparedStatement ps = con.prepareStatement("insert into schoolmate values(?,?,?,?,?,?,?)"); ps.setString(1,id); ps.setString(2,name); ps.setString(3,birthday); ps.setString(4,phone); ps.setString(5,email); ps.setString(6,address); ps.setString(7,other); ps.executeUpdate(); ps.close(); %> <h1>插入后的数据库记录</h1><hr> <table border=1> <tr><td>学号</td><td>姓名</td><td>生日</td><td>电话</td><td>邮箱</td><td>地址</td><td>其他</td></tr> <% Statement s1=con.createStatement(); ResultSet rs1=s1.executeQuery(sql); while(rs1.next() out.println("<tr>"); out.println("<td>"+rs1.getString("id")+"</td>"); out.println("<td>"+rs1.getString("name")+"</td>"); out.println("<td>"+rs1.getString("birthday")+"</td>"); out.println("<td>"+rs1.getString("phone")+"</td>"); out.println("<td>"+rs1.getString("email")+"</td>"); out.println("<td>"+rs1.getString("address")+"</td>"); out.println("<td>"+rs1.getString("other")+"</td>"); out.println("</tr>"); rs1.close(); s1.close(); con.close(); %> </table> <a href="sy.html">返回首页</a> </body> </html>
个人主页