Web实验报告

实验一 HTML语言

一、实验目的

1．掌握常用的HTML语言标记；

2．利用文本编辑器建立HTML文档，制作简单网页。

二、实验要求

1．独立完成实验。

2．书写实验报告书。

三、实验内容

1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）

源程序清单如下：

<html>

<head>

<title>Example</title> //设置该HTML文本的标题

</head>

<body bgcolor="#00DDFF">//设置背景颜色

<h1><B><I><FONT COLOR="#FF00FF">//H1字体加粗倾斜设置颜色

<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>//H2字体居中显示

<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>

<tr>//设置表格 3行2列设置背景颜色边框大小

<th>content</th>

</tr>

<tr>

</tr>

<tr>

<td>table</td>

</tr>

<tr>

</tr>//设置每个单元格的内容

</table>

<hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p>//打印1234567段

<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>

</p>

</body>

</html>

运行结果：

2．实现代码：

<html>

<head>

</head>

<body>

<td align ="center" valign = "middle" colspan = "2"><font size = "6"><u>请留下个人资料</u></font></td>

<tr> <td class = "word2">姓&nbsp&nbsp名:</td><td><input type = "text" name = "name" value = "" class = "intput1"/></td></tr>

<tr> <td class = "word2">电&nbsp&nbsp话:</td><td><input type = "text" name = "name" value = "" class = "intput1"/></td></tr>

<tr><td class = "word2">性&nbsp&nbsp别:</td><td><input type = "radio" name = "gender" value = "female" checked>女性<input type = "radio" name = "gender" value = "male">男性</td></tr>

<tr><td class = "word2">年&nbsp&nbsp龄:</td><td><select name = "age" > <option value = "20以下">20以下</option> <option value = "20-40">20-40岁</option></td></tr>

<tr> <td class = "word2">留言板:&nbsp</td><td><textarea name = "brief" rows =5 cols = 30>请输入留言</textarea></td></tr>

</table></form></body></html>

运行结果：

实验二网页程序设计-JavaScript

一、实验目的

1．掌握JavaScript技术,基本掌握JavaScript的开发技巧；

2．利用文本编辑器建立JavaScript脚本语言进行简单编程。

二、实验要求:

1．根据以下实验内容书写实验准备报告。

2．独立完成实验。

三、实验内容

1．显示一个动态的时钟

在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：

<html>

<head>

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>

function myfunction(){

alert("HELLO")

} //设置一个函数，功能是弹出一个显示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，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。

输入确认密码；

单选，多选按钮等，文本框。

读取出数据。显示出数据（alert）

运行结果：

用户名为空的情况

两次密码不一致情况

输入正确情况

实验3 Request与Response对象的应用

一、实验目的

1．掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。

2．在JDK和Eclipse环境下，完成下列实验。

二、实验要求

1．独立完成实验。

2．书写实验报告书。

三、实验内容

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

实现代码：

Text.jsp页面代码:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

String date = request.getParameter("date");

if(date!= null)

{if(date.equals("c"))

response.sendRedirect("yes.jsp");

else

response.sendRedirect("no.jsp"); }

<p>北京奥运会的开幕日期是：</p>

<input type="radio" name = "date" value="a">8月6日

<input type="radio" name = "date" value="b">8月7日

<input type="radio" name = "date" value="c">8月8日

<input type="radio" name = "date" value="d">8月9日

</form>

</body>

</html>

Yes.jsp页面代码:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

恭喜您！答对了！！

</body>

</html>

No.jsp页面代码:

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

抱歉！！您答错了！！

</body>

</html>

运行结果：

转至yes.jsp

转至no.jsp

实验4 Application对象Session对象

一、实验目的

1．掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。

2．在JDK和Eclipse环境下，完成下列实验。

二、实验要求:

1．独立完成实验

2．书写实验报告书

三、实验内容:

1．请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：

<%@ page contentType="text/html;charset=gb2312"%>

<html>

<head><title>网页计数器</title><head>

<body>

<% if (application.getAttribute("counter")==null) //如果计数器为空的话就置访问次数为1

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，实现防刷新文本计数器。

实现代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>

<head>

<title>网页防刷新计数器</title>

</head>

<body>

if(!session.isNew())

{

out.print("你是第"+application.getAttribute("counter")+"位访问者");

}

else

{

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));

}

out.print("你是第"+application.getAttribute("counter")+"位访问者");

}

%></body>

</html>

运行结果：

刷新前：刷新后：

（刷新不加一）

关闭浏览器再次打开：

访问次数加一

3．编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“欢迎您，管理员”，否则，就显示“注册成功”。

实现代码：

register.htm 页面代码：

<html>

<head>

<title>shiyan2_3</title>

function checkpassword()

{

if(document.form1.password.value != document.form1.password2.value)

{

alert("两次密码输入不一致");

return;

}

function checkname()

{

if(document.form1.name.value !="")

{return;}

else {alert("用户名为空！"); return;}

}

</script>

</head>

<body>

<tr><td >年&nbsp&nbsp龄:</td><td><select name = "age" > <option value = "20以下">20以下</option> <option value = "20-40">20-40岁</option></td></tr>

<tr> <td>个人资料:&nbsp</td><td><textarea name = "brief" rows =5 cols = 30>请输入留言</textarea></td></tr>

</table>

</form>

</body>

</html>

register.jsp 页面代码：

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

String myusername = request.getParameter("name");

if(myusername.length()>=4)

{String mystring = myusername.substring(0,4);

if(mystring.equalsIgnoreCase("user") )

out.println("对不起，该用户名已经被注册！请重新输入！");

else if(myusername.equalsIgnoreCase("admin"))

out.println("欢迎您，管理员！");

else

out.println("恭喜您，注册成功！"); }

else

{ out.println("恭喜您，注册成功！"); } %>

</body>

</html>

运行结果：

用户名注册为userabc 跳转至register.jsp

用户名注册为admin 跳转至register.jsp

用户名注册为其他 跳转至register.jsp

相关推荐