太原理工大学web实验报告

更新时间：2023-05-27 12:01:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

太原理工大学大学软件学院

本科实验报告

课程名称：

实验项目：

实验地点：

专业班级：

学生姓名：指导教师： Web开发实用技术基础实验室211 学号：

2015年11月5日

太原理工大学大学软件学院

学院名称学生姓名课程名称

学号专业班级 Web 开发实用技术基础实验题目

实验成绩实验日期 HTML 语言

一.实验目的和要求1.掌握常用的 HTML 语言标记； 2.利用文本编辑器建立 HTML 文档，制作简单网页。 3.独立完成实验。 4.书写实验报告书。

二.实验内容1.在文本编辑器“记事本”中输入如下的 HTML 代码程序，以文件名 sy1.html 保存，并在浏览器中运行。(请仔细阅读下列程序语句，理解每条语句的作用) 源程序清单如下：<html> <head> <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 the world of HTML</EM> <p>This is a simple HTML document.It is to give 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></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>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<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 文件。

三、主要仪器设备笔记本电脑

四、实验结果实验内容 1:

太原理工大学大学软件学院

页面中包含的元素有滚动条 welcome to you,标题 A simple HTML docunment,文字部分 Welcome to 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><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></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> 结果截图：

五、讨论、心得程序开始编写的时候虽然有了要求的 form,但是格式却不如例图中的整齐，后来查阅资料发现用表格可以使 form 里的元素格式变的整齐，看起来和例图中的一样了。

太原理工大学大学软件学院

学院名称学生姓名课程名称

学号专业班级 Web 开发实用技术基础实验题目

实验成绩实验日期网页程序设计-JavaScript

一.实验目的和要求 1.掌握 JavaScript 技术,基本掌握 JavaScript 的开发技巧。 2.利用文本编辑器建立 JavaScript 脚本语言进行简单编程。 3.据以下实验内容书写实验准备报告。 4.独立完成实验。

二.实验内容 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 var clock =hours+":"+minutes+":"+seconds document.forms[0].display.value=clock timer=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>

分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。 3.JavaScript 表单校验编写程序 register.htm,做一个如下图所示的用户注册界面，要求对

用户填写的部分进行合法性检验。

太原理工大学大学软件学院

三、主要仪器设备笔记本电脑。四、实验结果实验内容 1:

页面上有一行文字“现在是北京时间： ” ,其后是一个文本框，内容为现在的时间。事件为 body,onLoad 驱动调用 start()获取本机时间并保存在名为 display 的文本框中。关闭页面时， onUnload 驱动调用 Stop 用来清零计时器。

实验内容 2:

点击按钮 Call Function 后显示

页面时有一个按钮，按钮的值为 Call Function,还有一行文字。点击按钮 Call Function 后， onclick 驱动函数 myfunction(),显示提示框，提示框内容为 HELLO。

实验内容 3: 代码：<html> <head> <title>用户登录</title> <script language="javascript"> function on_submit() { if(.value=="") { alert("用户名不能为空，请输入用户名!"); .focus(); return false; } else

太原理工大学大学软件学院

alert("登陆成功"); } </script> </head> <body> <table> <form name="input" action="html_form_action.asp"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><input type="password" name="Password"></td></tr> </table> <input type="submit" value="提交"> <input type="reset" value="全部重写"> </form> </body> </html>

实验结果：

五、讨论、心得这次实验时吸取了上次的教训，在编写时就加上了表格，这样看起来形式就更加的规范可靠。 JavaScript 使用时还是要多注意函数的编写，比如函数名前加上 function,有时还要返回值。多注意才能减少错误的发生。

太原理工大学大学软件学院

学院名称学生姓名课程名称

学号专业班级 Web 开发实用技术基础实验题目

实验成绩实验日期 Request 与 Response 对象的应用

一、实验目的和要求1.掌握 JSP 的 Request 与 Response 隐式对象的用法，基本掌握 JSP 的开发技巧。 2.在 JDK 和 Eclipse 环境下，完成下列实验。 3.独立完成实验。 4.书写实验报告书。

二、实验内容编写程序实现一个单选小测试。在 test.jsp 页面显示问题，并将答案提交至 answer.jsp 进行判断，如果回答正确，则将页面转至 yes.jsp;否则，转至 no.jsp。

三、主要仪器设备笔记本电脑。四、实验结果代码：Test.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE <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"> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

太原理工大学大学软件学院

<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="da

te" value="10">8月10日 <input type="submit" value="提交答案"> </form> </h2> </body> </html> <br>

Answer.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body><%String mydate; mydate=request.getParameter("date"); if(mydate.equals("8")) response.sendRedirect("yes.jsp"); else response.sendRedirect("no.jsp"); %> </body> </html> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

Yes.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1 align="center">恭喜您答对了！</h1> </body> </html> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

No.jsp

太原理工大学大学软件学院

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE <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> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

实验结果：

五、讨论、心得由于 jsp 不同于 html 和 JavaScript,需要安装环境变量才能使用，所以调试了一段时间后才开始编写程序。不过在 eclipse 下编写起来还是比较容易便捷的，不必再一次一次的改后缀名来运行结果了。需要注意的是使用 request.getParameter 来接收客户端来的值，和用 response.sendRedirect 重新定位一个 jsp 页面。

学院名称

学号

实验成绩

太原理工大学大学软件学院

学生姓名课程名称

专业班级 Web 开发实用技术基础实验题目

实验日期 Application 对象 Session 对象

一、实验目的和要求 1.掌握 JSP 的 Application 对象 Session 对象对象的用法，基本掌握 JSP 的开发技巧。 2.在 JDK 和 Eclipse 环境下，完成下列实验。 3.独立完成实验。 4.书写实验报告书。

二、实验内容1.请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：

<%@ page contentType="text/html;charset=gb2312"%> <html> <head><title>网页计数器</title><head> <body> <% if (application.getAttribute("counter")==null) application.setAttribute("counter","1"); else{ String 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,就提示“欢迎您，管理员”, 否则，就显示“注册成功”。

三、主要仪器设备

太原理工大学大学软件学院

笔记本电脑。四、实验结果实验内容 1:

打开页面，显示用户当前是该网站的第几位访问者，重新打开该页面或者点击刷新按钮都可以使数量加一。

实验内容 2: 代码：<!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>网页计数器</title> </head> <body> <% if (application.getAttribute("counter")==null) application.setAttribute("counter","1"); else{ String 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> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

实验结果：

太原理工大学大学软件学院

刷新时不再增加数量，只有重新打开页面才能增加数量。

实验内容 3: 代码：Register.htm<!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户注册</title> <script language="javascript"> function on_submit() { if(.value=="") { alert("用户名不能为空，请输入用户名!"); .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> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

太原理工大学大学软件学院

<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 " import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <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("该

用户名已被注册"); else out.println("登陆成功"); %> </body> </html> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

实验结果：合法性校验：

太原理工大学大学软件学院

跳转后的页面：

太原理工大学大学软件学院

五、讨论、心得在计数器当中，我发现在<%!%>中声明 session 和 application 会报错，就只好把函数的判断直接放在了程序中。但是对于 QQ 浏览器无论是刷新还是重新打开网页都不会改变值，使用其他浏览器如 IE 时则能满足要求，刷新不增加，重新打开时增加。第三个实验算是对之前内容的一个综合，只要细心一点，编写起来还是比较容易的。

本文来源：https://www.bwwdw.com/article/2hb4.html

相关文章：

正在阅读：

太原理工大学web实验报告05-27

全国人大常委会对司法解释工作进行法律监督若干问题初探演讲12-04

微信唯美的个性签名精选11-20

(三)、施工组织设计(珠海LNG项目)----好04-26

知识产权法复习题及答案（案例分析题）09-21

酒类广告02-17

上一篇：the pursuit of happiness 下一篇：静脉注射吗啡致静脉炎1例