太原理工大学web实验报告_第1页
太原理工大学web实验报告_第2页
太原理工大学web实验报告_第3页
太原理工大学web实验报告_第4页
太原理工大学web实验报告_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、本科实验报告课程名称： Web开发实用技术基础 实验项目： HTML语言 网页程序设计Javascript Request与Response对象的应用 Application与Session对象的应用实验地点： 实验室211 专业班级： 学号： 学生姓名： 指导教师： 2015年11月5日 学院名称学号实验成绩学生姓名专业班级实验日期课程名称Web开发实用技术基础实验题目 HTML语言1 实验目的和要求1 掌握常用的HTML语言标记；2 利用文本编辑器建立HTML文档，制作简单网页。3 独立完成实验。4书写实验报告书。二实验内容1在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy

2、1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： <html><head><title>Example</title></head><body bgcolor="#00DDFF"><h1><B><I><FONT COLOR="#FF00FF"><MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alterna

3、te>welcome to you</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2><EM>Welcome to the world of HTML</EM><p>This is a simple HTML document.It is to give

4、you an outline of how to write HTML file and 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>&

5、lt;/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</t

6、h></tr><tr><td>item 1</td><td>font</td></tr><tr><td>item 2</td><td>table</td></tr><tr><td>item 3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4

7、<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>2编写一个能输出如图所示界面的HTML文件。3、 主要仪器设备笔记本电脑4、 实验结果实验内容1：页面中包含的元素有滚动条welcome to you，标题A simple HTML docunment，文字部分Welcome to

8、 the world of HTML.This is a simple HTML document.It is to give you an outline of how to write HTML file and how the markup tags work in the HTML（格式不同），列表，表格，段落。实验内容2：代码：<html><head> <title>表单范例</title> </head><body> <h2 align="center"><b><

9、;SPAN style="TEXT-DECORATION: underline">请留下个人资料</SPAN></b></h2><table align="center"><form name="form"> <tr><td align="right">姓名：</td> <td><input type="text" name="姓名"></td&

10、gt;</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>&

11、lt;/tr> <tr><td align="right">性别：</td><td><input type="radio" name="性别" checked>女 <input type="radio" name="性别">男</td></tr> <tr><td align="right">年龄：</td><td><sel

12、ect> <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

13、></td></tr> <tr><td align="right">您的爱好：</td> <td><input type="checkbox" name="运动">运动<br> <input type="checkbox" name="阅读">阅读<br> <input type="checkbox" name="听音乐"&g

14、t;听音乐<br> <input type="checkbox" name="旅游">旅游 </td></tr> <tr><td align="center" colspan="2"><input type="submit" name="提交" value="提交"> <input type="reset" name="重写"

15、value="全部重写"></td></tr> </form></table></body></html> 结果截图：5、 讨论、心得 程序开始编写的时候虽然有了要求的form，但是格式却不如例图中的整齐，后来查阅资料发现用表格可以使form里的元素格式变的整齐，看起来和例图中的一样了。学院名称学号实验成绩学生姓名专业班级实验日期课程名称Web开发实用技术基础实验题目 网页程序设计-JavaScript1 实验目的和要求1. 掌握JavaScript技术,基本掌握JavaScript的开发技巧。2

16、. 利用文本编辑器建立JavaScript脚本语言进行简单编程。3. 据以下实验内容书写实验准备报告。4. 独立完成实验。2 实验内容1.显示一个动态的时钟在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <html><head><script language="javascript">var timer = nullfunction stop()clearTimeout(timer)function start()var time = new Date()var hours =ti

17、me.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()"

18、;,1000)</script></head><body onLoad="start()" onUnload="stop()"><form>现在是北京时间：<input type="text" name="display" size="20"></form></body></html>分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确. 2 事件驱动和事件处理 在文本编辑器“记事本”中输

19、入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <html><head><script language="javascript">function myfunction()alert("HELLO")</script></head><body><form><input type="button" onClick="myfunction()" value="Call function&q

20、uot;></form><p>By pressing the button, a function will be called. The function will alert a message.</p></body></html>分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3JavaScript表单校验编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。3、 主要仪器设备 笔记本电脑。4、 实验结果实验内容1：页面上有一行文字“现在是北京时间：”，其后

21、是一个文本框，内容为现在的时间。事件为body，onLoad驱动调用start()获取本机时间并保存在名为display的文本框中。关闭页面时，onUnload驱动调用Stop用来清零计时器。实验内容2： 点击按钮Call Function后显示 页面时有一个按钮，按钮的值为Call Function，还有一行文字。点击按钮Call Function后，onclick驱动函数myfunction()，显示提示框，提示框内容为HELLO。实验内容3：代码：<html><head><title>用户登录</title><script langu

22、age="javascript">function on_submit() if(.value="") alert("用户名不能为空，请输入用户名!"); .focus(); return false; else alert("登陆成功");</script></head><body><table><form name="input" action="html_form_action.a

23、sp"method="get" onsubmit="return on_submit()"><tr><td>用户登录</td></tr><tr><td>请输入用户名：</td><td><input type="text" name="name"></td></tr><tr><td>请输入密码：</td><td><in

24、put type="password" name="Password"></td></tr></table><input type="submit" value="提交"><input type="reset" value="全部重写"></form></body></html>实验结果：五、讨论、心得这次实验时吸取了上次的教训，在编写时就加上了表格，这样看起来形式就更加的规

25、范可靠。JavaScript使用时还是要多注意函数的编写，比如函数名前加上function，有时还要返回值。多注意才能减少错误的发生。学院名称学号实验成绩学生姓名专业班级实验日期课程名称Web开发实用技术基础实验题目 Request与Response对象的应用一、实验目的和要求1 掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2 在JDK和Eclipse环境下，完成下列实验。3 独立完成实验。4 书写实验报告书。2、 实验内容编写程序实现一个单选小测试。在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至

26、yes.jsp;否则，转至no.jsp。3、 主要仪器设备笔记本电脑。4、 实验结果代码：Test.jsp<% page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd">&l

27、t;html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><h2>北京奥运会开幕日期是：</h2> <br><h2><form action="answer.jsp" method="post" name="input"><input typ

28、e="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=&qu

29、ot;10">8月10日 <br><input type="submit" value="提交答案"></form></h2></body></html>Answer.jsp<% page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC &qu

30、ot;-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><%String mydate;mydate=request.getParameter("date

31、");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

32、html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><h1 align="center">恭喜您答对了！</

33、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" "/TR/html4/loose.dtd"><html><h

34、ead><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title></head><body><h1 align="center">很抱歉，您答错了!</h1></body></html>实验结果：五、讨论、心得由于jsp不同于html和JavaScript，需要安装环境变量才能使用，所

35、以调试了一段时间后才开始编写程序。不过在eclipse下编写起来还是比较容易便捷的，不必再一次一次的改后缀名来运行结果了。需要注意的是使用request.getParameter来接收客户端来的值，和用response.sendRedirect重新定位一个jsp页面。学院名称学号实验成绩学生姓名专业班级实验日期课程名称Web开发实用技术基础实验题目 Application对象Session对象1、 实验目的和要求1. 掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2. 在JDK和Eclipse环境下，完成下列实验。3. 独立完成实验。4. 书写实

36、验报告书。2、 实验内容1请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <% page contentType="text/html;charset=gb2312"%><html><head><title>网页计数器</title><head><body><% if (application.getAttribute("counter")=null)application.setAttribute("counter","

37、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")%>位访问者！&

38、lt;/body></html>2上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。3编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“欢迎您，管理员”，否则，就显示“注册成功”。三、主要仪器设备笔记本电脑。4、 实验结果实验内容1： 打开页面，显示用户当前是该网站的第几位访问者，重新打开该页面或者点击刷新按钮都可以使数量加一。实验内容2：代

39、码：<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>网页计数器</title></head><bod

40、y><%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();icoun

41、t+;application.setAttribute("counter",Integer.toString(icount); %>您是第<%=application.getAttribute("counter")%>位访问者！</body></html>实验结果： 刷新时不再增加数量，只有重新打开页面才能增加数量。实验内容3：代码：Register.htm<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "

42、/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户注册</title><script language="javascript">function on_submit() if(input.Name.value="") alert(

43、"用户名不能为空，请输入用户名!"); 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.Passwo

44、rd2.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="tex

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论