web实验报告.docx

《web实验报告.docx》由会员分享，可在线阅读，更多相关《web实验报告.docx（24页珍藏版）》请在冰点文库上搜索。

web实验报告

本科实验报告

课程名称：

Web程序设计

实验项目：

HTML语言

实验地点：

逸夫楼303

专业班级：

学号：

学生姓名：

指导教师：

2013年12月13日

1、实验目的和要求

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

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

2、实验内容和原理

1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。

（请仔细阅读下列程序语句，理解每条语句的作用）

源程序清单如下：

welcometoyou

AsimpleHTMLdocument

WelcometotheworldofHTML

ThisisasimpleHTMLdocument.ItistogiveyouanoutlineofhowtowriteHTMLfileandhowthemarkuptagsworkintheHTMLfile

Followingisthreechapters

• Thisisthechapterone
• Thisisthechaptertwo
• Thisisthechapterthree

Followingisitemsofthechaptertwo

item

content

item1

font

item2

table

item3

form

1

2

3

4

5

6

7

Endoftheexampledocument

2．编写一个能输出如图所示界面的HTML文件。

3、主要仪器设备

笔记本电脑

4、操作方法与实验步骤

实验2的源代码如下：

请留下个人资料

姓名：

E-mail：

电话：

性别：

女男

年龄：

20以下

40以下

60以下

60以上

留言板：

您的爱好：

运动

阅读

听音乐

旅游

5、实验结果与分析

实验1结果：

部分重要的HTML语言标记：

：

标示网页主题

一级标题；粗体字；斜体字

：

走马灯标记，用于标记一行或多行滚动的文本

:

强调斜体

:

段落

无序列表

列表项

水平分割线

表格

;;:

表格的一行；一行中的一个单元格；标题列

实验2结果：

6、讨论、心得

这是做的第一个网页设计的实验，把抽象的课上的内容实践成网页还是有一定挑战的，看着和自己动手差别很大。

需要自己多多联系，熟练这些语言。

另外，第二个实验出了些小问题，虽然看起来是表单，但格式的对齐等需要用表格来实现。

但单单使用表格是不能完成重置按钮的功能的，需要表格嵌套表单，或者表单嵌套表格，本次实验使用的是表单嵌套表格。

本科实验报告

课程名称：

Web程序设计

实验项目：

网页程序设计-JavaScript

实验地点：

逸夫楼303

专业班级：

学号：

学生姓名：

指导教师：

2013年12月20日

1、实验目的和要求

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

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

二、实验内容和原理

1．显示一个动态的时钟

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

源程序清单如下：

vartimer=null

functionstop（）{

clearTimeout（timer）}

functionstart（）{

vartime=newDate（）

varhours=time.getHours（）

varminutes=time.getMinutes（）

minutes=（（minutes<10）?

"0":

”“）+minutes

varseconds=time.getSeconds（）

seconds=（（seconds<10）?

"0":

”“）+seconds

varclock=hours+":

"+minutes+":

"+seconds

document.forms[0].display.value=clock

timer=setTimeout（"start（）",1000）}

分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确.

2．事件驱动和事件处理

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

源程序清单如下：

functionmyfunction（）{

alert（"HELLO"）

}

Bypressingthebutton,afunctionwillbecalled.Thefunctionwillalertamessage.

分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。

3．JavaScript表单校验

编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。

3、主要仪器设备

笔记本电脑

4、操作方法与实验步骤

实验3源代码如下：

functioncheckValidate（form）{

if（document.form.name.value==""||document.form.name.value==undefined）{

alert（"用户名不能为空，请输入用户名！

"）;

returnfalse;

}

elseif（document.form.password.value==""）{

alert（"密码不能为空，请输入正确密码！

"）;

returnfalse;

}

else{

window.alert（"提交成功！

"）;

returntrue;

}

}

用户登录

请输入用户名：

请输入密码：

5、实验结果与分析

实验1

脚本编程语言javascript

clearTimeout（timer）清除超时设置

setTimeout（"start（）",1000）标记一个特定的“超时”

vartime=newDate（）;创建日期对象

time.getHours（）get方法，返回整数表示的对象时间的小时值

minutes=（（minutes<10）?

"0":

”“）+minutes分钟的显示：

如果小于10前一位加0，否则不加

document.forms[0].display.value=clock将display的值赋给clock

实验2

alert（"HELLO"）;显示一个窗口（提示字符为：

HELLO）

onClick="myfunction（）"事件驱动：

单击鼠标，执行myfunction（）函数

实验3-1

实验3-2

实验3-3

六、讨论、心得

此次试验熟悉了javascript的用法，结构。

对其中的诸多对象函数都有了理解，例如DATE对象及其方法。

还有对事件驱动及事件处理的过程也有了实际的认识。

Javascript的语句与编程语言方法类似不用费太大力气，但也不相同需要深刻记忆。

本科实验报告

课程名称：

Web程序设计

实验项目：

Request与Response对象的应用

实验地点：

逸夫楼303

专业班级：

学号：

学生姓名：

指导教师：

2013年12月27日

1、实验目的和要求

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

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

二、实验内容和原理

编写程序实现一个单选小测试。

在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;否则，转至no.jsp。

3、主要仪器设备

笔记本电脑

4、操作方法与实验步骤

Test.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

北京奥运会开幕的日期是:

8月6号

8月8号

8月9号

8月10号

Answer.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%

Strings1=request.getParameter（"date"）;

if（s1.equals（"2"））

response.sendRedirect（"yes.jsp"）;

else

response.sendRedirect（"no.jsp"）;

%>

Yes.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

恭喜您答对了！

No.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

答错了!

5、实验结果与分析

首页

选择8月6号

选择8月8号

六、讨论、心得

此实验主要是对JSP内置对象的应用：

Request与Response，及其方法的调用。

request.getParameter（"date"），是request的getparameter方法，调取name为date的value值，response.sendRedirect（“yes.jsp”），是response的sendredirect方法，向客户端返回请求，至yes.jsp页面。

由此也熟悉了其他方法的使用。

本科实验报告

课程名称：

Web程序设计

实验项目：

Application对象Session对象

实验地点：

专业班级学号：

学生姓名：

指导教师：

2014年01月02日

1、实验目的和要求

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

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

二、实验内容和原理

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

源程序清单如下：

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

<%if（application.getAttribute（"counter"）==null）

application.setAttribute（"counter","1"）;

else{

Stringstrnum=null;

strnum=application.getAttribute（"counter"）.toString（）;

inticount=0;

icount=Integer.valueOf（strnum）.intValue（）;

icount++;application.setAttribute（"counter",Integer.toString（icount））;

}%>

您是第<%=application.getAttribute（"counter"）%>位访问者！

2．上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。

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

三、主要仪器设备

笔记本电脑

4、操作方法与实验步骤

实验2源代码：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%

if（application.getAttribute（"counter"）==null）

application.setAttribute（"counter","1"）;

else{

if（session.isNew（）==true）{

Stringstrnum=null;

strnum=application.getAttribute（"counter"）.toString（）;

inticount=0;

icount=Integer.valueOf（strnum）.intValue（）;

icount++;

application.setAttribute（"counter",Integer.toString（icount））;

}

}

%>

您是第<%=application.getAttribute（"counter"）%>访问的人！

实验3源代码：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="U