Web技术实验指导书

内容 简 介

Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。对于学生从事Web系统的研发、使用和维护有重要意义。本课程概念多、内容涉及面广、系统性强。通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院 鲁鸣鸣制定

上机实验要求及规范

Web技术课程具有比较强的实践性。上机实验是一个重要的教学环节。一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。但是容易忽略实验的总结，忽略实验报告的撰写。对于一名大学生必须严格训练分析总结能力、书面表达能力。需要逐步培养书写科学实验报告以及科技论文的能力。拿到一个题目，一般不要急于编程。正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：

一般性、较小规模的上机实验题，必须遵循下列要求。养成良好的习惯。

姓名 班级 学号 日期 题目

i. 问题描述

ii. 设计简要描述

iii. 程序清单（带有必要的注释）

iv. 结果分析（原始图示，测试数据与运行记录，分析正确性；）

v. 调试报告：

实验者必须重视最后这两个环节，否则等同于没有完成实验任务。这里可以体现个人特色、或创造性思维。具体内容包括：测试数据与运行记录；调试中遇到的主要问题，自己是如何解决的；经验和体会等。

二、实验报告的提高要求：

阶段性、较大规模的上机实验题，应该遵循下列要求。养成科学的习惯。

（1）问题描述

（2）需求和规格说明

（3）描述问题，简述题目要解决的问题是什么。规定软件做什么。原题条件不足时补全。

（4）概要设计：功能模块的划分

（5）详细设计：每部分模块的设计，含数据结构的设计，算法的描述（流程图或PDL）

a.设计思想：主要算法基本思想。

b.设计表示：每个函数的头和规格说明；列出每个函数所调用和被调用的函数，也可以通过调用关系图表达。

（6）实现注释：各项功能的实现程度、在完成基本要求的基础上还有什么功能。

（7）用户手册：即使用说明书。

（8）调试报告：调试过程中遇到的主要问题是如何解决的；设计的回顾、讨论和分析；时间复杂度、空间复杂度分析；改进设想；经验和体会等。

实验一基于HTML+CSS的静态电商网站实现

一、实验目的

1． 了解和掌握静态网页开发的基本方法

2.  了解和掌握样式表CSS的基本用法

二、实验开发环境和工具

可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成HTML+CSS的静态网页制作，也可选用DreamWeaver等静态网页开发工具进行实验。测试环境采用IE浏览器即可。关于HTML+CSS的静态网页制作的详细细节见课件或相关文献。

三、实验内容

  在掌握课堂讲授的HTML+CSS静态网页制作的基础上，参考课件中的贵美商城网站的范例，仿照当当网、京东或淘宝等电子商务网站制作静态网页，要求实现的静态页面包括：

1.  电子商务网站首页；

2.  商品展示页；

3.  具体商品详细介绍页；

4.  购物车页面；

5.  登录页；

6.  注册页；

7.  帮助中心客服页面。

实验二运用JavaScript技术的电商网站

一、实验目的

1． 了解和掌握JavaScript脚本语言编程的基本方法

2.  了解和掌握JavaScript脚本语言编程的一些基本技术

二、实验开发环境和工具

可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成项目开发，可选用firebug工具来调试JavaScript代码。测试环境采用IE浏览器即可。关于JavaScript的开发详细细节见课件或相关文献。

三、实验内容

在掌握课堂讲授的JavaScipt客户端脚本语言及其范例的的基础上，基于课堂讲授的HTML+CSS静态网页案例“贵美商城”，实现如下客户端动态交互功能：

1. 参考JavaScript课件第2章的内容，在贵美商城首页顶部的导航条中实现动态显示实时时间的效果。

2. 参考JavaScript课件第3章的内容，将贵美商城首页主体部分左边的商品分类导航用树形菜单的方式实现；实现并解释贵美商城首页主体部分右下角部分的TAB切换特效（以非图片的形式）；实现并解释贵美商城电子产品目录页产品全选和全不选的特效（即复选框的全选和全不选的特效）。

3. 参考JavaScript课件第4章的内容，实现贵美商城购物车页面的订单修改、删除和增加功能。

4. 参考JavaScript课件第5章的内容，在贵美商城首页实现随鼠标滚动的广告图片特效。

5. 参考JavaScript课件第6,7章的内容，在贵美商城登陆和注册页面实现基于JavaScipt的表单验证特效。

实验三基于JSP的新闻发布系统前端实现

一、实验目的

1． 了解和掌握JSP开发环境和开发流程

2.  了解和掌握通过JDBC访问数据库并使用JSP展示查询数据的基本方法

二、实验开发环境和工具

可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括Tomcat7.0.37 Web应用服务器，SQL Server 20## SP4 数据库服务器，JSP集成开发环境采用Eclipse Juno，使用Java语言，工具包使用JDK1.7。关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容

在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，搭建JSP开发环境，构建基于JSP的新闻发布系统前端，具体要求如下：

1.       参考课件中的相关视频，搭建基于Tomcat7.0.37 Web应用服务器，SQL Server 20## SP4 数据库服务器，JDK1.7和Eclipse Juno的JSP集成开发环境；

2.       显示存储在数据库中的新闻一级标题。页面显示效果如下：

实验四基于JSP的新闻发布系统后端实现

一、实验目的

1． 了解和掌握JSP开发环境和开发流程

2.  了解和掌握通过JDBC访问数据库并使用JSP更新数据的基本方法

二、实验开发环境和工具

可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括Tomcat7.0.37 Web应用服务器，SQL Server 20## SP4 数据库服务器，JSP集成开发环境采用Eclipse Juno，使用Java语言，工具包使用JDK1.7。关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容

在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，构建基于JSP的新闻发布系统后端，具体要求如下：

1.       从页面上添加新闻一级标题，并保存至数据库中；

2.       从页面上添加新闻二级标题，并保存至数据库中；

3.       完成最终版的新闻发布系统，包括为新闻发布系统增加访问控制，为新闻发布系统增加已访问人数统计，实现新闻发布系统的分级浏览。

第二篇：Web技术实验指导书

《Web技术》实验指导书

北京工商大学 计算机与信息工程学院

20##年3月

目录

实验一 使用Dreamweaver制作HTML页面... 3

实验二 CSS及JavaScript实验... 3

实验三 MyEclipse使用... 4

实验四 JSP技术应用实验... 4

实验五 JSP动作... 5

实验六 JSP的<jsp:useBean>动作使用... 5

实验七 JSP内置对象——request对象和response对象... 6

实验八 JSP内置对象——out对象和session对象... 6

实验九 JSP使用技巧... 6

实验十 MySQL数据库使用... 6

实验十一 JSP数据库应用开发（4学时）... 7

实验一 使用Dreamweaver制作HTML页面

【实验目的】掌握使用Dreamweaver制作HTML页面的方法

【实验内容】

1．使用HTML制作一个页面，要有背景颜色，页面显示内容及格式如下图所示。

2．制作一个页面，上有文字、图像和朋友的E.mail地址，在文字和图像上创建超级链接，单击链接时，页面跳转到其他页面，单击E.mail地址时，打开信箱，发送邮件。

3．制作一个计算器界面，界面如下图所示。

4．用Dreamweaver布局模式布局如下页面，页面主题自定。    

Top: 显示logo图片和页面的标题。

Left: 登录模块

Body: 当前页面的主要显示区域。

Bottom: 显示版权信息。

【实验报告】将实验文件发送到老师的电子信箱。

实验二 CSS及JavaScript实验

【实验目的】掌握CSS及JavaScript的使用方法

【实验内容】

1.定义一个main.css文件，在其中设置超链接的颜色、访问过的超链接的颜色，颜色自定。另外，设计两个HTML页面，在其中创建超链接，并链接main.css文件，观察超链接的颜色。

2. 使用JavaScript脚本来验证用户输入的用户名是否为空，并要求密码的长度必须大于6，根据用户的输入给出相应的提示。

3. 页面上有一幅图像，在状态栏显示有关图像的说明。单击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。

4．（选做）制作一个页面，页面上有两个文本框和提交按钮，在第一个文本框中输入信息后，用鼠标单击提交按钮后，将在第二个文本框显示输入的内容。

【实验报告】将实验文件发送到老师的电子信箱。

实验三 MyEclipse使用

【实验目的】掌握MyEclipse的使用

【实验内容】

1. 检查MyEclipse的配置

1）查找当前的Tomcat配置，分析其参数含义；

2）查找当前的JDK配置，分析其参数含义。

2. 使用MyEclipse建立一个Web Project，并修改其中的默认jsp文件，使其显示“欢迎进入JSP开发学习！”，并部署和运行，观察效果。

【实验报告】将实验文件发送到老师的电子信箱。

实验四 JSP技术应用实验

【实验目的】掌握JSP脚本元素和指令元素

【实验内容】

1．应用JSP技术在浏览器中输出4行由大变小的文字。

提示：可通过for循环来实现。

2．应用Date对象读取系统当前时间，根据不同的时间段，在浏览器输出不同的问候语，例如上午0~12点之间输出“早上好”，同时把系统的年、月、日、小时、分、秒和星期输出到用户的浏览器。

提示：

(1) Date对象的getYear()方法获得的是1900年之后的年数，所以系统的年应该在其返回值上加1900.

(2) Date对象的getMonth()方法的返回值从0开始，即0代表1月份，所以系统的月应该在其返回值上加1.

(3) 返回日期的函数为getDate()，返回星期的函数为getDay()，返回小时、分钟和秒数的函数分别为getHours(),getMinutes()和getSeconds()。

3．加载静态文件。制作一个HTML文件，在页面上输出一行文字，例如“include指令的使用。”等。然后制作一个JSP文件，应用include指令加载刚制作的HTML文件，在客户端显示出来，并在客户端的“查看源文件”中观察源文件。

提示：

（1）如果被包含的文件中包含中文并且为html文件的话，会出现乱码，设置字符集也无法解决，要尽量避免这种情况，可以将被包含文件设置为.jsp文件来解决。

（2）如果被包含的文件为.jsp文件的话，只要在其中设置字符集，就不会出现乱码。

【实验报告】将实验文件发送到老师的电子信箱。

实验五 JSP动作

【实验目的】掌握JSP动作

【实验内容】

1．加载动态文件，制作一个JSP文件，计算一个数的平方根，然后再制作一个JSP文件，应用<jsp:include>动作加载刚制作的JSP文件，在客户端显示出来，并在客户端的“查看源文件”中观察源文件。

Math.sqrt()

2．设计表单，制作读者选购图书的界面，当读者选中一本图书后，单击“确定”按钮，页面跳转到介绍该图书信息页面，请用“jsp:forward page=”语句。

提示：需要至少3个文件，第一个为用户选购图书的页面，第二个文件接收用户输入的信息并根据用户的输入转向相应的页面，第三个页面显示图书的具体信息。如果有多本图书应该有多个图书介绍页面，在第二个文件中根据用户的选择分别转向它们。

【实验报告】将实验文件发送到老师的电子信箱。

实验六 JSP的<jsp:useBean>动作使用

【实验目的】掌握<jsp:useBean>动作的使用

【实验内容】

1．  制作一个页面，页面的背景颜色，文字的大小、字体和颜色可以根据用户的选择来实施。界面如下图所示，要求应用Java Bean完成。

注意：该实验用到JavaBean，在新建MyEclipse项目时，不用WebRoot目录，否则会出错。

步骤：

（1）       编写JavaBean(如：pageBean)；

（2）       新建一个jsp文件（pageJavaBean.jsp），在其中使用pageBean，将其scope属性设置为session，并布局下图所示的页面元素。用户点击“确定”按钮后，将用户的选择提交到另外一个jsp文件，如（setBean.jsp）

（3）       新建setBean.jsp文件，将用户所选择的页面属性值更新至javaBean的属性值，然后转回pageJavaBean.jsp文件。

2．（选做）应用JavaBean完成一个计数器的制作，计数器beans的范围是application的，由不同用户共享。

【实验报告】将实验文件发送到老师的电子信箱。

实验七 JSP内置对象——request对象和response对象

【实验目的】掌握JSP的request和response对象的使用

【实验内容】

1. 制作一个购书页面，要求用户输入用户名和密码，并通过下拉菜单选择需要购买的图书，单击“确定”按钮，将信息发往服务器端，服务器端文件接收用户输入并输出用户名和所购图书。

2. 设计表单，制作读者选购图书的界面，当读者选中一本图书后，单击“确定”按钮，页面跳转到介绍该图书信息页面，要求使用response对象sendRedirect方法。

【实验报告】将实验文件发送到老师的电子信箱。

实验八 JSP内置对象——out对象和session对象

【实验目的】掌握out对象和session对象的使用

【实验内容】

有3个商店（即3个页面，供应不同的商品），应用session对象存储用户的用户名、密码和购物信息，当用户购物结束时，向用户返回其购物信息。

【实验报告】将实验文件发送到老师的电子信箱。

实验九 JSP使用技巧

【实验目的】

【实验内容】

1. 制作一个用户登录界面，用户输入中文用户名后能够在参数接收页面读取用户输入的中文参数并进行显示。

2. 制作一个用户注册页面，分别用客户端方法和服务器端方法限制用户重复提交注册信息。

【实验报告】将实验文件发送到老师的电子信箱。

实验十 MySQL数据库使用

【实验目的】掌握MySQL数据库的使用

【实验内容】

1. 启动MySQL的命令行管理工具，用MySQL的建库语句建立一个名为company的数据库。

2. 在company库中建立雇员表emp，表的数据项及数据类型如下所示：

empno int(4) not null primary key,

ename varchar(10),

job varchar(10),

hiredate datetime,

salary double

【实验报告】将实验文件发送到老师的电子信箱。

实验十一 JSP数据库应用开发（4学时）

【实验目的】掌握JSP数据库应用开发

【实验内容】

建立一个JSP文件，通过JDBC连接实验十所建立的数据库，然后执行如下操作：

l  在雇员表emp中插入几行测试数据（英文数据，日期格式为YYYY-MM-DD）。

l  查看表中的数据。

l  修改表中的某条记录。

l  删除表中的某条记录。

【实验报告】将实验文件发送到老师的电子信箱。