Web实验报告.docx

《Web实验报告.docx》由会员分享，可在线阅读，更多相关《Web实验报告.docx（22页珍藏版）》请在冰豆网上搜索。

Web实验报告

本科实验报告

课程名称：

Web开发实用技术基础

实验项目：

HTML语言

网页程序设计JavaScript

Request与Response对象的应用

Application与Session对象的应用

实验地点：

软件实验楼210

专业班级：

软件1309班学号：

2013005661

学生姓名：

蔡潇钰

指导教师：

林福平

2015年11月17日

学院名称

软件学院

学号

2013005661

实验成绩

学生姓名

蔡潇钰

专业班级

软件1309班

实验日期

2015.11.15

课程名称

Web开发实用技术基础

实验题目

HTML语言

一、实验目的和要求

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

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

二、实验内容

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

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

注：

源代码见实验结果

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

三、主要仪器设备

笔记本电脑、AdobeDreamweaverCC2015

四、实验结果

1.

（1）源代码：

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代码程序，以文件名sy1.html保存

②在浏览器中运行

2.

（1）源程序

doctypehtml>

请留下个人资料

姓名：

E-mail：

电话：

性别：

女  男

年龄：

20岁以下

20岁-30岁

30岁-40岁

40岁-50岁

50岁-60岁

留言板：

您的爱好：

运动

阅读

听音乐

旅游

②运行结果：

学院名称

软件学院

学号

2013005661

实验成绩

学生姓名

蔡潇钰

专业班级

软件1309班

实验日期

2015.11.16

课程名称

Web开发实用技术基础

实验题目

网页程序设计JavaScript

一、实验目的和要求

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

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

二、实验内容

1．显示一个动态的时钟

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

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

2．事件驱动和事件处理

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

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

注：

源代码见实验结果

3．JavaScript表单校验

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

三、主要仪器设备

笔记本电脑、AdobeDreamweaverCC2015

四、实验结果

1.

（1）源代码

vartimer=null

functionstop（）{clearTimeout（timer）}

functionstart（）

{

vartime=newDate（）

varhours=time.getHours（）

varminutes=time.getMinutes（）

varseconds=time.getSeconds（）

minutes=（（minutes<10）?

"0":

""）+minutes

seconds=（（seconds<10）?

"0":

""）+seconds

varclock=hours+":

"+minutes+":

"+seconds

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

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

}

（2）实验结果

2.

（1）源代码

functionmyfunction（）{

alert（"HELLO"）

}

Bypressingthebutton,afunctionwillbecalled.Thefunctionwillalertamessage.

（2）实验结果

3.

（1）源代码

doctypehtml>

functionon_submit（）

{

if（form1.username.value==""）

{

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

"）;

form1.username.focus（）;

returnfalse;

}

if（form1.userpassword.value==""）

{

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

"）;

form1.userpassword.focus（）;

returnfalse;

}

}

 用户登陆

 请输入用户名：

 请输入密码：

（2）实验结果

学院名称

软件学院

学号

2013005661

实验成绩

学生姓名

蔡潇钰

专业班级

软件1309班

实验日期

2015.11.17

课程名称

Web开发实用技术基础

实验题目

Request与Response对象的应用

一、实验目的和要求

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

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

二、实验内容

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

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

三、主要仪器设备

笔记本电脑、AdobeDreamweaverCC2015

四、实验结果

（1）源代码

test.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

北京奥运会开幕日期是：

8月6日

8月8日

8月9日

8月10日

answer.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

<%

Stringmydate;

mydate=request.getParameter（"date"）;

if（mydate.equals（"8"））

response.sendRedirect（"yes.jsp"）;

elseresponse.sendRedirect（"no.jsp"）;

%>

yes.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

恭喜您答对了！

no.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

很抱歉，您答错了！

①选择“8月6日”并点击“提交答案”

②选择“8月8日”并点击“提交答案”

学院名称

软件学院

学号

2013005661

实验成绩

学生姓名

蔡潇钰

专业班级

软件1309班

实验日期

2015.11.17

课程名称

Web开发实用技术基础

实验题目

Application对象Session对象

一．实验目的和要求

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，就提示“欢迎您，管理员”，否则，就显示“注册成功”。

三、主要仪器设备

JDK和Eclipse环境

四、实验结果

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

<%

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

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

else{

if（session.isNew（））

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

r.jsp:

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

pageEncoding="UTF-8"%>

用户登录:

请输入用户名：

请输入密码：

Register.jsp:

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

pageEncoding="UTF-8"%>

<%Stringstr2=newString（request.getParameter（"user"）.getBytes（"ISO-8859-1"）,"UTF-8"）;

if（str2.substring（0,4）.equals（"user"））

{out.println（"该用户名已被注册"）;

out.print（"5秒后自动跳转"）;

response.setHeader（"refresh","5;url=register.jsp"）;}

elseif（str2.equals