WEB实验题目及代码.doc_咨信网zixin.com.cn

资源描述

JavaScript基础训练一、实验目的：编写JavaScript代码，熟悉并掌握JavaScript的基本语法、控制结构及函数，掌握JavaScript预定义对象、浏览器对象的使用二、实验内容：在MyEclipse环境下编写JavaScript代码，调入或嵌入HTML页面中。三、实验要求： 1. 熟悉并掌握JavaScript的基本语法、控制结构及函数； 2. 掌握JavaScript预定义对象、浏览器对象的使用； 3. 将JavaScript代码嵌入或调入HTML页面，并完成指定效果； 4. 写出实验报告。四、实验学时：2学时五、实验步骤： 1．进入MyEclipse环境，新建一个Web Project； 2. 新建一个HTML网页，网页上有一个姓名输入框、密码输入框、性别单选按钮组和一个提交按钮，要求用户提交时检查姓名不能为空，密码长度在6到10位之间，性别项不能为空，如果不符合标准则不允许提交，并提示相应错误信息； 3.在完成P92第5题的基础上实现计算功能【第3题注释：】parseFloat()函数将字符串转变成浮点数 <html> <head> <title> 客户端表单简单验证</title> <script language="javascript"> function checkForm(){ var username = document.myForm.userName.value; if(username==""){ alert("用户名不能为空!") //调用表单元素对象的focus方法使得该表单元素对象重新获得输入焦点 document.myForm.userName.focus(); return false; } var p=document.myForm.pwd.value; if(p==""){ alert("密码不能为空!") document.myForm.pwd.focus(); return false; } if(p.length<6||p.length>10) { alert("密码长度不符合!长度在6-10之间") document.myForm.pwd.focus(); return false; } var xb = document.myForm.gender; var flag = false; for(var i = 0; i<xb.length;i++){ if(xb[i].checked){ flag = true; } } if(!flag){ alert("请选择性别！"); return false; } } </script> </head> <body> <form action = "1.html" name="myForm" onsubmit="return checkForm();"> <table> <tr> <td>用户名：</td> <td><input type ="text" name="userName"/></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="male"/>男   <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交"/> </td> </tr> </table> </form> </body> </html> onsubmit="return checkForm()提交表单的时候先执行checkForm();这个方法,如果这个方法返回的是false则将不提交表单 <html> <head> <title> 计算器</title> <script language="javascript"> function jisuan(){ var Num; var Num1=parseFloat(document.myForm.Number1.value); var Num2=parseFloat(document.myForm.Number2.value); var js=document.myForm.caozuo; if(js[0].checked) Num=Num1+Num2; if(js[1].checked) Num=Num1-Num2; if(js[2].checked) Num=Num1*Num2; if(js[3].checked) Num=Num1/Num2; document.myForm.jieguo.value=Num; } </script> </head> <body> <form name="myForm" > <table> <tr> <td>第一个操作数：</td> <td><input type ="text" name="Number1"/></td> </tr> <tr> <td>第二个操作数:</td> <td><input type="text" name="Number2"/></td> </tr> <tr> <td>请选择操作</td> <br/> <td> <input type="radio" name="caozuo" value="jia"/>+   <input type="radio" name="caozuo" value="jian"/>-   <input type="radio" name="caozuo" value="cheng"/>*   <input type="radio" name="caozuo" value="chu"/>/ </td> </tr> <tr> <td align="center"> <input type="button" value=" = "onclick="jisuan()"/> </td> </tr> <tr> <td>结果是:</td> <td><input type="text" name="jieguo"/></td> </tr> </table> </form> </body> </html> JSP基本语法训练一、实验目的：编写JSP代码，熟悉并掌握JSP的基本语法、控制结构、表达式、脚本段、JSP指令及JSP动作。二、实验内容：在MyEclipse环境下编写JSP代码，运用JSP的基本语法、控制结构、表达式、脚本段、JSP指令及JSP动作完成相应的功能，调试运行程序。三、实验要求： 1. 熟悉并掌握JSP的基本语法、控制结构、表达式、脚本段； 2. 熟悉并掌握JSP的指令及JSP动作； 3. 运用各项JSP技术完成规定功能； 4. 写出实验报告。四、实验学时：2学时五、实验步骤： 1．进入MyEclipse环境，新建一个Web Project； 2. 新建一个JSP页面，该页面向浏览器输出一句”Hello JSP”，要求采用三种方式输出（模板文本输出/out.println方法输出/JSP表达式输出），并观察该JSP页面所生成Servlet，解释页面内容在Servlet中的对应角色； 3. 新建JSP页面，显示一个如下表格，表格重复内容采用循环输出，并观察该JSP页面所生成Servlet，解释页面内容在Servlet中的对应角色；书号书名作者出版社价格类别操作 ISBN-001 Web开发范月华清华出版社 25 新书编辑删除 ISBN-001 Web开发范月华清华出版社 25 新书编辑删除 ISBN-001 Web开发范月华清华出版社 25 新书编辑删除 ISBN-001 Web开发范月华清华出版社 25 新书编辑删除 ISBN-001 Web开发范月华清华出版社 25 新书编辑删除 4.教材P154 例7.4，out.println输出形式改成模板文本输出和JSP表达式输出两种形式，并观察该JSP页面所生成Servlet，解释页面内容在Servlet中的对应角色； 5. 调试运行程序； Num1 <%@ 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>My JSP 'Num1.jsp' starting page</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> Hello jsp! <br/> <% out.println("Hello jsp!"); %> <br/> <%="hello jsp!" %> </body> </html> Num2 <%@ 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>My JSP 'Num2.jsp' starting page</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><table border="2"width="100%"height="80%"align="center"> <tr align="center"> <td>书号</td><td>书名</td><td>作者</td> <td>出版社</td><td>价格</td><td>类别</td><td>操作</td></tr> <%for (int i=1;i<6;i++){ %> <tr align="center"> <td>ISBN-001</td><td>Web开发</td><td>范月华</td> <td>清华出版社</td><td>25</td><td>新书</td> <td><a href="#">编辑</a>&nbsp <a href="#">删除</a> </td></tr> <%} %> </table> </body></html> Num3 <%@ 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>My JSP 'Num3.jsp' starting page</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> <center><font color="red"size="7"face="微软雅黑"> <%Date today=new Date();int hours=today.getHours();if(hours>=0&&hours<12){ %> 朋友们，早上好！ <%}else if(hours>=12&&hours<19){ %> 朋友们，中午好！ <%}else{%> 朋友们，晚上好！ <%} %> </font></center></body></html> Num4 <%@ 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>My JSP 'Num4.jsp' starting page</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><center> <font color="red"size="7"face="微软雅黑"> <% Date today=new Date(); int hours=today.getHours(); if(hours>=0&&hours<12){ %> <%="朋友们，早上好！"%> <%}else if(hours>=12&&hours<19){ %> <%="朋友们，中午好！"%> <%}else {%> <%="朋友们，晚上好！"%> <%} %> </font></center></body></html> JSP内置对象编程一、实验目的：编写JSP代码，熟悉并掌握常用JSP内置对象（request、response、out、session等）及Cookie的使用。二、实验内容：在MyEclipse环境下编写JSP代码，运用JSP的常用内置对象（request、response、out、session等）以及Cookie完成相应的功能，调试运行程序。三、实验要求： 1. 熟悉并掌握JSP的常用内置对象及Cooke； 2. 运用常用JSP内置对象及Cookie完成规定功能； 3. 写出实验报告。四、实验学时：2学时五、实验步骤： 1．进入MyEclipse环境，导入之前的书店后台管理Web Project； 2．改造书籍添加页面，实现将书籍添加信息提交至一个JSP页面，在该JSP页面内读取请求参数信息，显示在一个表格中，第一列显示参数名，第二列显示参数值； 3．开发完成登陆页面login.html，实现将登陆信息提交至一个JSP页面，在该JSP页面读取用户名和密码并做简单判断，如果正确转向首页，并在首页顶部显示欢迎信息（今天是XXXX年XX月XX日，欢迎XX），否则转向错误提示页面（提示重新登陆）； 4. 调试运行程序；六、选作实验完善登陆页面，实现记住用户名和密码的自动登陆功能 <html><head> <title>index.html</title> </head> <table border="5"align="center"width="100%"height="100%"> <tr><td colspan="2"valign="center" align="center"height="20%"> <font face="黑体"size="20">网上书店后台管理系统</font></td></tr> <tr><td cellpadding="20"width="20%"valign="top"><font color="red"> <ul><li><a href="BookManagement.html"><h4>书籍信息管理</h4></a></li> <li><a href="1.html"><h4>其他模块管理</h4></a></li> <li><a href="1.html"><h4>其他模块管理</h4></a></li> <li><a href="1.html"><h4>其他模块管理</h4></a></li> <li><a href="1.html"><h4>其他模块管理</h4></a></li> <li><a href="1.html"><h4>其他模块管理</h4></a></li></ul></font></td> <td cellpadding="80"> <form action="1.jsp" method="post"> <table border="0"valign="top"align="top"> <tr cosplan="2"><th>基本信息</th> </tr> <tr><td>书号</td><td><input type ="text"name="BookNumber"/></td></tr> <tr><td>书名</td><td><input type ="text"name="BookName"/></td></tr> <tr><td>作者</td><td><input type ="text"name="userName"/></td></tr> <tr><td>出版社</td><td> <select name="chu_ban_she_shi"> <option value="请选择">------请选择------</option> <option value="中国人民出版社"> 中国人民大学出版社</option> <option value="清华大学出版社">清华大学出版社</option> <option value="高等学府出版社">高等学府出版社</option> </select></td></tr> <tr><td>出版日期</td><td> <input name="date2" type="text" id="date2" onclick="calendar.show(this);" size="20" maxlength="20" readonly="readonly" /></td></tr> <tr><td>价格</td><td><input type ="text"name="money"/></td></tr> <tr><td>库存位置</td><td><input type ="text"name="location"/></td></tr> <tr><td>类别</td> <td><input type="radio"name="lei_bie"value="普通"/>普通   <input type="radio"name="lei_bie"value="新书"/>新书    <input type="radio"name="lei_bie"value="精品"/>精品 </td></tr> <tr><td>备注：</td> <td><textarea name="comment"rows="10"cols="50"></textarea></td></tr> <tr><td colspan="2" align="center"> <input type="submit"value="保存"></input> <input type="reset"value="重置"></input></td></tr></table> </form></td></tr></table</html> <%@ 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>My JSP '1.jsp' starting page</title> </head> <body> <table border="2"width="80%"height="80%"> <% request. setCharacterEncoding("utf-8"); String number=request.getParameter("BookNumber"); String bookname=request.getParameter("BookName"); String name=request.getParameter("userName"); String chu=request.getParameter("chu_ban_she_shi"); String data=request.getParameter("date2"); String price=request.getParameter("money"); String wei=request.getParameter("location"); String lei=request.getParameter("lei_bie"); String beizhu=request.getParameter("comment");%> <tr><td>书号</td><td><%=number %></td> </tr> <tr><td>书名</td><td><%=bookname %></td></tr> <tr><td>作者</td><td><%=name %></td></tr> <tr><td>出版社</td><td><%=chu %></td></tr> <tr><td>出版日期</td><td><%=data %></td></tr> <tr><td>价格</td><td><%=price %></td></tr> <tr><td>位置</td><td><%=wei %></td></tr> <tr><td>类别</td><td><%=lei %></td></tr> <tr><td>备注</td><td><%=beizhu %></td> </tr></table></body></html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>login.html</title> </head> <body><form action="2.jsp" method="get"> <table border="0"valign="top"align="top"> <tr><td>姓名</td><td><input type ="text"name="Name"/></td></tr> <tr><td>密码</td><td><input type ="password"name="pwd"/></td></tr> <tr><td colspan="2" align="center"><input type="submit"value="提交"> </input></td></tr></table></form></body></html> <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html><head><base href="<%=basePath%>"> <title>My JSP '2.jsp' starting page</title> </head> <body><% String name=request.getParameter("Name"); String pwd=request.getParameter("pwd"); if(name.equals("sun")&&pwd.equals("555")) {response.sendRedirect("3.jsp?"); session.setAttribute("NAME",name); }else{response.sendRedirect("error.html");} %></body></html> <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html><head> <base href="<%=basePath%>"> <title>My JSP '3.jsp' starting page</title> </head> <body> <%Date taday=new Date(); String name = (String)session.getAttribute("NAME"); int year=taday.getYear()+1900; int month=taday.getMonth()+1; int date=taday.getDate(); if(name==null){response.sendRedirect("error2.html");} %> 今天是<%=year %>年<%=month %>月<%=date%>日，欢迎<%=name %>! <br/> 还差点就成功了，<a href="4.jsp">继续</a> </body></html> 使用Date类代表指定的时间 Date d1 = new Date(2009-1900,3-1,9); System.out.println(d1); 使用带参数的构造方法，可以构造指定日期的Date类对象，Date类中年份的参数应该是实际需要代表的年份减去1900，实际需要代表的月份减去1以后的值。例如上面的示例代码代表就是2009年3月9号。 <%@ 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>My JSP '4.jsp' starting page</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"> <!--<li

展开阅读全文