太原理工大学web程序设计基础实验报告.docx
课程名称：WEB程序设计根基实验工程:WEB程序设计根基实验实验地点:逸夫楼402专业班级：软件1415班学生姓名：朱伟学号:2014005960指导教师：田玉玲2016年11月21日实验一HTML语言一、实验目的1 .掌握常用的HTML语言标记；2 .利用文本编辑器建设HTML文档，制作简单网页。二、实验要求1 .独立完成实验。2 .书写实验报告书。三、实验内容1 .在文本编辑器”记事本中输入如下的HTML代码程序，以文件名SyLhtml保存，并在浏览器中运行。(请仔细阅读以下程序语句，理解每条语句的作用)(1)程序代码：<!doctypehtml><htmllang=,en,><head><metacharset=',UTF-8,*><title>Example<title><head><bodybgcolor=,00DDFF,><hl><B><I><FONTCOLOR=,FFOOFF,><MARQUEEBGCOLOR=",FFFFOO,direction=leftbehavior=alternate>welcometoyou<MARQUEE><FONT><I><B><hl><hr><h2align=center><FONTCOLOR=M#OOOOFFn>AsimpleHTMLdocument<FONT><h2><EM>WelcometotheworldofHtml<KM><p>ThisisasimpleHTMLdocument.ltistogiveyouanoutlineofhowtowriteHTMLfileandhowthe<b>markuptags<b>workinthe<I>HTML<I>file<p><p>Followingisthreechapters<ul><li>Thisisthechapterone<li><li><AHREF=,item,'>Thisisthechaptertwo<A><li><li>Thisisthechapterthree<li><ul><p><hr><p><ANAME=,item,>Followingisitemsofthechaptertwo<A><p><tableborder=2bgcolor=graywidth=',40%,><tr><th>item<th><th>content<th><tr><tr><td>iteml<td><td>font<td><tr><tr><td>item2<td><td>table<td><tr><tr><td>item3<td><td>form<td><tr><table><hr><p>l<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONTCOLOR=BLUESIZE=4>EndOftheexampledocument<FONT><I><B><p><body><html><body><html>(2)实验结果2 .编写一个能输出如以下列图界面的HTML文件。(1)程序代码<!DOCTYPEhtml><htmllang=',enu><head><metacharset="UTF-8'>><title>表单范例<title><style>hltext-align:center;)<style><head><body><formaction="#"><tableborder=u0align="center',><tr><tdcolspan="2><h1><u>请留下个人资¼<u><h1><td><tr><tr><td> 姓 名:vtd><td><inputtype="text"name=usemame',><td><tr><br><tr><td> E-mail:</td><td><inputtype="text"name="emai,><td><tr><br><tr><td> 电 话:vtd><td><inputtype="text"name=,'phone"><td><tr><br><tr><td><fenbsp性 别:vtd><td><inputtype=,'radio"name=gendervalue="nchecked=',checked><inputtype=uradioname="gender"value="5><td><tr><br><tr><td> 年 龄：<td><td><selectname="age',><optionvalue="l">20以下<oPtiOn><select><td><tr><br><tr>< td> 留言板：<td><td><textareaname=*'mark"cols="30"rows=n5u><textarea><td><tr><tr>< tdrowspan="4">您的爱好：<td><td><inputname=hobbytype="checkbox"value=,'7>½<td><tr><tr>< td><inputname=hobbytype=checkboxvalue=1*'7>Mi<td><tr><tr><td><inputname=hobbytype="CheCkbOX"value="”/听音乐<td><tr><tr><td><inputname=uhobbytype=,'checkboxvalue='*'7>KJ<td><br><tr><tralign=center>< tdcolspan="2><inputtype="button"value="提交”><inputtype="reset"value="全部重写”><td><tr><table><form><body><html>(2)实验结果：四、实验心得：刚开场编写的时候只是编写了要求的form,但是不如给出的表单那样整齐，后来尝试用了表格，将表格的border属性改为0,再适当加空格 才完成了如以下列图的表单实验二网页程序设计-JavaScript一、实验目的1 .掌握JavaScript技术，基本掌握JavaScript的开发技巧;2 .利用文本编辑器建设JavaScript脚本语言进展简单编程。二、实验要求：1 .根据以下实验内容书写实验准备报告。2 .独立完成实验。三、实验内容1 .显示一个动态的时钟编写程序，在文本框中显示实时的时间，然后运行文件,验证程序是否正确。(1)程序代码<html><head><metacharset="UTF-8><scriptlanguage="javascript">vartimer=nullfunctionstop()clearTimeout(timer)functionstart()vartime=newDate()varhours=time.getHours()varminutes=time.getMinutes()minutes=(minutes<10)?"0":H")+minutesvarseconds=time.getSeconds()seconds=(seconds<10)7,0",)+secondsvarclock=hours+:,+minutes+n:"+secondsdocument.forms0.display.value=clocktimer=setTimeout("start()",1000)<script><head><bodyonLoad=,start()"onUnload=',stop()',><form>现在是北京时间：<inputtype=',text"name=displaysize="20'|><form><body><html>(2)实验结果2 .事件驱动和事件处理在文本编辑器“记事本中输入如下代码程序，请仔细阅读以下程序语句，理解每条语句的作用。源程序清单如下：<!DOCTYPEhtml><htmllang="en><head><metacharset="UTF-8',><script>x=0functioncountSecond()if(x<6)(x=x÷1;document.fm.displayBox.value=x;setTimeout("countSecond()n,1000);)<script><head><body><formname=fm><inputtype="text"name=displayBox,'value=0"size=4><form><script>countSecond()<script><body><html>分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3 .JavaScript表单校验编写程序register.htm,做一个如以以下列图所示的用户注册界面，要求对用户填写的局部进展合法性检验。(1)程序代码<!DOCTYPEhtml><htmllang="en,"><head><metacharset=,UTF-8,'><title>ffl户登录</出le><scripttype="textavascript">functionsub()varUSername=document.getElemenlById("username");varUvalue=Usemame.value;if(uvalue=")alert("用户名不能为空，请输入用户名！”)fbrml.username.fbcus();returnfalse;)1<script><head><body><fbrmaction="user"method="post"id="fbrml"><tableborder="0><div>用户登录<div><div>请输入用户名：<inputtype="text'1name=,username"id="usemame"><div><div>请输入密码： <inputtype="password"><div><div><inputtype="button"value="C"onclick="sub(),><inputtype="reset"ValUeF全部重写"><div><table><fbrm><body><html>(2)实验结果四、实验心得：这次的提前将form写成了表格的形式，这样显得整齐，javascript编写时要注意函数的编写，如在函数前加上function,还要注意事件、驱动和处理程序，尽可能地减少失误。实验3Request与Response对象的应用一、实验目的1 .掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2 .在JDK和ECIiPSe环境下，完成以下实验。二、实验要求1 .独立完成实验。2 .书写实验报告书。三、实验内容编写程序实现一个单项选择小测试。在test,jsp页面显示问题，并将答案提交至answer.jsp进展判断,如果答复正确,那么将页面转至yes.jsp;否那么，转至no.jsp。(1)程序代码test.jsp<%pagelanguage=',javaoContentType="text/htmL;Charset=UTF-8uPageEncoding="UTF-8"%><!D0CTYPEhtmlPUBLIC,-W3CDTDHTML4.01TransitionalEN"":/w3.org/TR/html4/loose.dtd"><html><head><meta-equiv=uContent-Type"content="text/htmL;Charset=UTF-8"><title>Inserttitlehere<title><head><body><h2>北京奥运会开幕日期是：<h2><br><formaction="answer,jsp“method="post"name="input"><inputtype="radio"name="date"value=,6,>8月6日Vinpirttype="rdio"name="dte"value="8”)8月8日<inputtype="radio,name=,date"value=,9,8月9日<inputtype="rdio"name="dte"value=S0">8月10日<br><inputtype="sUbmt"value="提交基案”)<form><body><html>Answer.jsp<%pagelanguage="javauContentType="text/htmL;charset=UTF-8"PageEncoding="UTF-8n%><!DocTYPEhtmlPUBLIC"-/W3C/DTDHTML4.01TransitionalEN"":/w3.orgTRhtml4loose.dtd"><html><head><meta-equiv=uContent-Typecontent="text/htmL;charset=UTF-8"><title>Inserttitlehere<title><head><body><%Stringmydate;mydate=request.getParameter("date");if(mydate.equals("8")response.sendRedirect("yes.jsp");elseresponse.SendRedirect（"no.jsp"）;%><body><html>Yes.jsp<%pagelanguage="javanContentType=',te×thtmL;Charset=UTF-8"PageEncoding=,'UTF-8,%><!D0CTYPEhtmlPUBLIC",-W3CDTDHTML4.01TransitionalEN,u:/w3.orgTRhtml4loose.dtd,*><html><head><meta-equiv="Content-Type',content=,'te×thtmL;charset=UTF-8,><title>Inserttitlehere<title><head><body><hlalign="center”>恭喜您答对了!<hl><body><html>No.jsp<%gpagelanguage="javaoContentType="te×thtmL;Charset=UTF-8"PageEncoding="UTF-8"%><!D0CTYPEhtmlPUBLIC,-W3CDTDHTML4.01TransitionalEN"":/w3.orgTRhtml4loose.dtd"><html><head><meta-equiv="Content-Type,content="te×thtmL;charset=UTF-8"><title>Inserttitlehere<title><head><body><hla：Iign="center”）很抱歉,您答错了！<hl><body><html>（2）实验结果四、实验心得本次实验需要配置环境变量才能使用，使用request.getParameter来接收客户端传来的值，用response.sendRedirect重新定位一个jsp页面。另外本次实验过程中出现了端口号被占用的问题，通过查找资料，将Servers->server.xml中的端口号改为8003才解决问题。实验4Application对象Session对象一、实验目的1 .掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2 .在JDK和ECIiPSe环境下，完成以下实验。二、实验要求：1 .独立完成实验2 .书写实验报告书三、实验内容：1 .请仔细阅读以下程序语句，理解每条语句的作用。源程序清单如下：<%pagecontentType="text/html;charset=gb2312"%><html><head><title>网页计数<title><head><body><%if(application.getAttribute("counter")=nu11)application.setAttribute(",counter","1',);elseStringstmum=null;strnum=application.getAttribute("counter,).toString();inticount=0;icount=Integer.ValueOf(Strnum).intValue();icount+;application.setAttribute(,counter",Integer.toString(icount);)%>您是第v%=application.getAttribute("counter")%>位访问者!<body><html>2 .上述计数器当进展刷新时也会自动加1,试编写程序COUnt.jsp,实现防刷新文本计数器。(1)程序代码：<%pagelanguage="javanContentType=ntexthtmL;charset=UTF-8"PageEncoding=',UTF-8,1%><!DocTYPEhtmlPUBLIC"-/W3C/DTDHTML4.01TransitionalEN",:/w3.orgTRhtml4loose.dtd"><html><head><meta-equiv="Content-Typecontent=,'texthtmL;charset=UTF-8',><title>网页计数器/title)<head><body><%if(application.getAttribute("counter")=null)application.setAttribute(',counter,l");else(Stringstrnum=null;strnum=application.getAttribute("counter").toString();if(session.isNew()如果是个新的会话inticount=0;icount=Integer.ValueOf(Strnum).intValue();icount+;application.setAttribute("counter"jInteger.toString(icount);%>您是第<%=application.getAttribute(,'counter")%>位访问者！<body><html>(2)实验结果刷新时不再增加数量，只有重新翻开页面才能增加数量。3.编写程序register.htm和register.jsp,做一个用户注册的界面，要求对用户填写的局部进展合法性检验，然后提交到register.jsp进展注册检验，假设用户名为USer开头的，就提示“该用户名已被注册，假设用户名为admin,就提示“欢迎您，管理员，否那么，就显示“注册成功。(1)程序代码Register,html<!DOCTYPEhtml><html><head><metacharset=,WF-8,><title>用户注册/title)<scriptlanguage=,jvscripf,>functionon_submit()if(input.Namevalue=",')alert(“用户名不能为空，请输入用户名！“);input.Name.focus();returnfalse;elseif(input.Password,value=""input.Password2.value=",)alert("请输入密码”)；input.Password.focus();returnfalse;elseif(input.Password.value!=input.Password2.value)alert(“两次密码不一致！,);input.Password2.focus();returnfalse;elsealert(“登陆成功”)；<script><head><body><table><formaction="register,jsp“method="get"rarne="icout“onSubmit="retUrnOnsubmit。”)<h:Ialign="center”>用户注册<hl><tr><td>请输入用户名:<td><td><inputtype=text,name="Name,r><td><tr><br><tr><td>请输入密码:<td><td><inPUttyPe="pa55w。尸d"name="Password”)<td><tr><br><tr><td>再次输入密码:</tdxtdxinputtype=*,passwordMname=*Passivord2"><td><tr><br><table><inputtype="submt"value="3f”><inputtype="reset"value="全都重写”)<form><body><html>Register,jsp<%pagelanguage=',javanContentType=ntexthtmL;charset=UTF-8"PageEncoding="UTF-8,%><!DOCTYREhtmlRUBLIC"-/W3C/DTDHTML4.01TransitionalEN",:/w3.orgTRhtml4loose.dtd"><html><head><meta-equiv="Content-Type,content="text/htmL;charset=UTF-8',><title>Inserttitlehere<title><head><body><%Stringname;Stringchr;name=request.getParameter("Name");if(name.equals("admin")OUt.printin("欢迎您，管理员”)；elseif(name.startsWith("User")out.PrintIn("该用户名已被注册”);elseOUt.printIn("登陆成功")；%><body><html>(2)实验结果四、实验心得通过本次实验学会了session和application的使用，session对象在第一个JSP页面被装载时自动创立，它的作用范围是所有页面，但只能相对于一个用户，它的生命期从访问这个网站到关闭浏览器为止；application虽然也是作用于所有页面，但是是所有用户共享的，它的生命期是从开启服务器开场直到关闭服务器为止。而且这个实验是对之前实验的一个综合，只要细心，也是比较容易。
