欧志清 《Web程序设计》实验指导书.doc

《欧志清 《Web程序设计》实验指导书.doc》由会员分享，可在线阅读，更多相关《欧志清 《Web程序设计》实验指导书.doc（20页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Web程序设计实验课程课程编号：433013实 验 指 导 书主撰人： 审核人：经济与管理科学系电子商务教研室二一二 年四月 目 录前 言1实验1搭建ASP开发环境2实验2Dreamweaver编写页面5实验3超文本标记语言HTML7实验4VBScript编程9实验5ASP内置对象的使用（一）11实验6ASP内置对象的使用（二）13实验7ADO组件的使用15前 言实验总体目标:培养Web程序设计编程能力适用专业年级:电子商务三年级第五学期实验课时分配:24学时序号实验项目要求类型每组人数实验学时1搭建ASP开发环境选验证122Dreamweaver编写页面必验证123超文本标记语言HTML必综

2、合144VBScript编程必设计145ASP内置对象的使用（一）必设计146ASP内置对象的使用（二）必综合147ASP内置组件ADO的使用必设计14实验环境要求每次可提供每人一台正常运行的计算机，实验室面积为60平方米以上，多媒体投影系统，室内采光通风良好卫生，供电正常，无强大信号干扰源，消防设备齐全，疏散通道正常。实验总体要求通过本实验课程的教学，学生能基本上达到独立完成实验内容，通过老师的指导可完成研究性实验内容，能将相关内容应用到课程设计、电子竞赛、毕业设计等实践性环节中。本课程的重点、难点及教学方法建议1、重点: 掌握ASP开发平台的搭建；掌握HTML语言编写网页；掌握ASP的工作

3、原理及其编程；熟练掌握VBScript程序的编写；熟练使用ASP内置对象编程；熟练使用ASP内置组件编程；熟练掌握通过ADO访问数据库的编程。2、难点：掌握ASP内置对象编程；掌握通过ADO访问数据库的编程。3、教学方法建议：注重理论与实验相结合，可利用现有的实验条件开发不同方法的综合性、设计性及研究性实验内容或实验项目。实验1 搭建ASP开发环境一、实验目的1、掌握使用IIS作为WEB服务器进行ASP页面发布的方法2、掌握使用ASP脚本进行基本输出的方法二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理1、利用Windows组件IIS搭建Web服务器实现对ASP页面的解析。2、利

4、用简单ASP页面的运行检测IIS工作是否正常。四、实验内容与步骤1、安装IIS（因实验室微机已安装IIS，本步骤无须上机完成）；将WindowsXP安装光盘放入光驱（或将安装光盘下I386文件夹拷贝至硬盘中）。启动控制面板中的“添加或删除程序”。图1-1 添加/删除程序在弹出的对话框中点击左侧的“添加/删除Windows组件”按钮，在弹出的Windows组件向导中，选中Internet信息服务（IIS），如下图：图1-2 Windows组件向导点击“下一步”。若I386文件夹与安装是所处位置不同，则会弹出如下对话框：图1-3 所需文件对话框在此对话框中输入I386文件夹的真实路径，点击“确定”

5、可继续完成安装。（此对话框在安装过程中可能出现多次）2、设定WEB主目录主目录是存放WEB服务器页面的初始目录，只有此目录下的文件才能被客户访问。默认的主目录一般为c:inetpubwwwroot，您也可以按图所示来更改主目录。图1-4 默认网站属性对话框3、设置默认文档 接下来，为您的主目录设置一个能在默认情况下自动运行的文档。该文档的作用是，当进入本站点时，如没有指定要访问的文档，则服务器自动提供一个默认文档让其访问。在图中，选中“启用默认文档”复选框，并在“默认文档”框中，输入自己的首页文档名index.asp。图1-5 默认文档设置页面4、建立简单ASP页面使用记事本新建一个文档，向文

6、档中输入如下内容：Hello World将该文档保存到您上面所指定的WEB主目录下，文件名为您指定的默认文档名称：index.asp。打开浏览器，在地址栏内输入您的WEB站点地址（这里使用localhost做为本机地址），然后按回车键即可查看到默认文档的内容了。五、思考题1、若要查看的目录下没有默认文档将出现什么结果？2、对于静态页面，Web服务器如何处理？六、注意事项1、注意Web主目录与页面存放文件夹及访问URL之间的关系。实验2 Dreamweaver编写页面一、实验目的1、掌握利用Dreamweaver制作静态页面的方法；2、掌握利用Dreamweaver制作ASP页面的方法；二、实验

7、设备及要求本实验主要使用设备为：计算机1台三、实验原理1、利用Dreamweaver制作静态页面；2、利用Dreamweaver制作简单ASP页面。四、实验内容与步骤1、利用Dreamweaver制作静态页面启动Dreamweaver，在创建新项目中单击HTML，创建一个静态HTML页面。图2-1 Dreamweaver启动界面制作一个简单静态页面如下图。图2-2 静态页面按F12，在浏览器中预览此页面效果。2、利用Dreamweaver制作简单ASP页面。打开Dreamweaver，在创建新项目下单击ASP VBScript，创建一个ASP页面。（参见图2-1）在代码模式下，输入代码。部分代

8、码如下：现在的时间是：3、创建站点并预览将IIS的Web主目录设置为C:Inetpubwwwroot，创建新站点，将此站点的本地根文件夹设置为此目录。将此站点测试服务器设置如下图2-4。图2-3 站点本地信息设置图2-4 站点测试服务器设置将新建的ASP页面保存于C:Inetpubwwwroot目录中。按F12预览。五、思考题1、客户端能否看见ASP脚本的内容？2、对于动态ASP页面，Web服务器如何处理？六、注意事项1、注意Web主目录与页面存放文件夹及访问URL之间的关系。实验3 超文本标记语言HTML一、实验目的1、掌握Dreamweaver中编写HTML标签的方法；2、掌握常用HTML

9、标签的使用。二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理1、在Dreamweaver中新建页面，转到代码模式下对其HTML源代码进行编辑；2、在页面源代码中输入常用HTML标签，转到预览模式下查看其显示效果。四、实验内容与步骤1、在Dreamweaver中新建页面，转到代码模式下对其HTML源代码进行编辑启动Dreamweaver，在创建新项目中单击HTML，创建一个静态HTML页面。图3-1 Dreamweaver启动界面在Dreamweaver中转到代码模式下，输入如下HTML代码：图3-2 代码模式页面转到设计模式，预览此页面效果。2、在页面源代码中输入常用HTML标签

10、，转到预览模式下查看其显示效果。在代码模式下，在文字头尾分别输入HTML标签，,等，每输入一个标签就转到设计模式查看此标签对页面显示的效果影响。在设计模式下，对文字的字体，字号，颜色，超链接等进行设置。每次设置后，转到代码模式查看此效果由哪些HTML标签体现。五、思考题1、在设计模式下对文字进行设置和在代码模式下直接编辑HTML标签来指定输出效果有没有区别？六、注意事项1、在Dreamweaver中，编辑-首选参数打开首选参数对话框，将其中“使用CSS而不是HTML标签”选项前的勾去掉。（下图中红色圆角矩形框中的选项）图3-3 首选参数对话框实验4 VBScript编程一、实验目的1、掌握在页

11、面中加入VBScript脚本的方法；2、掌握客户端VBScript程序的编写；二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理1、通过VBScript脚本的编写，熟悉VBScript语法与程序的编写。四、实验内容与步骤1、新建网页，在代码模式下往页面中加入VBScript脚本；编写程序，在页面上输出九九乘法表如下图所示。具体要求：利用表格布局，去掉表格线，增加表格的背景颜色，三角形显示九九乘法表。图4-1 九九乘法表打开Dreamweaver，新建ASP页面。在Dreamweaver中切换到代码模式，在页面源代码中插入如下脚本程序。九九乘法表%for i=1 to 9respon

12、se.Write()for j=1 to iresponse.Write()response.Write(j&*&i&=)response.Write(i*j)response.Write()nextresponse.Write()next%2、编写VBScript脚本程序，实现如下程序：在文本框1和文本框2中输入乘数，点击等号按钮后，乘积出现在文本框3中。在Dreamweaver中新建ASP VBScript页面，在代码模式下编写脚本程序，部分代码如下：function answer()document.form1.textfield3.value=document.form1.textfi

13、eld.value*document.form1.textfield2.valueend function * 图2-2 代码模式页面转到设计模式，按F12在浏览器中预览此页面效果。五、思考题1、客户端的表格是如何形成的？2、客户端脚本和服务器端脚本有何区别六、注意事项1、注意脚本插入到页面的方法。实验5 ASP内置对象的使用（一）一、实验目的1、掌握Request对象和Response对象的使用；2、掌握Cookies的使用；二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理通过VBScript脚本的编写，掌握ASP内置对象的使用方法。四、实验内容与步骤1、利用表单接受用户输入，

14、用VBScript语言编写表单处理程序，利用Request对象接受用户的输入，利用Response对象返回应答信息。1)制作表单页面1.html如下，其中文本框和密码框名字分别是user和pass，表单动作设置为2.asp。图5-1 表单页面1.html2)制作表单处理页面2.asp。在Dreamweaver中新建ASP VBScript页面并存为2.asp。转到代码模式，在其中输入表单处理的脚本程序。部分代码如下：图5-2 表单处理程序2.asp3)返回1.html页面，按F12在浏览器中预览1.html页面，查看程序运行效果。2、编写脚本实现Cookie的写入和读取。编辑上题中1.html

15、，将表单动作设置为3.asp。在Dreamweaver中新建ASP VBScript页面并存为3.asp。转到代码模式，在其中输入表单处理的脚本程序。部分代码如下：图5-3 表单处理程序3.asp五、思考题1、为什么程序中最后要对比user1和user2的值？2、user1和user2的值分别是从何而来？六、注意事项1、HTML信息可以在设计模式下先做好然后再转到代码模式添加脚本代码。实验6 ASP内置对象的使用（二）一、实验目的1、掌握Application对象的使用；2、掌握Session对象的使用；二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理通过VBScript脚本的编

16、写，掌握ASP内置对象的使用方法。四、实验内容与步骤1、编写程序，利用Application对象保存信息。1)制作表单页面1.html如下，其中文本框和密码框名字分别是user和pass，表单动作设置为2.asp。（可参考上个实验制作）图6-1 表单页面1.html2)制作表单处理页面2.asp。在Dreamweaver中新建ASP VBScript页面并存为2.asp。转到代码模式，在其中输入表单处理的脚本程序。部分代码如下：（可在上个实验的3.asp基础上修改）图6-2 表单处理程序2.asp在浏览器中预览1.html，输入注册信息，查看程序运行结果。2、编写程序，利用Session对象保

17、存信息。编辑上题中1.html，将表单动作设置为3.asp。在Dreamweaver中新建ASP VBScript页面并存为3.asp。转到代码模式，在其中输入表单处理的脚本程序。部分代码如下：图6-3 表单处理程序3.asp五、思考题1、Application对象和Session对象有何不同？2、若不同计算机的用户同时访问1.html，表单处理程序2.asp和3.asp的处理结果会否不同？六、注意事项1、注意Application对象和Session对象中数据的写入和读取方法。实验7 ADO组件的使用一、实验目的1、掌握ADO中connection对象操作数据库的方法；2、掌握ADO中Rec

18、ordSet对象的使用。二、实验设备及要求本实验主要使用设备为：计算机1台三、实验原理通过VBScript脚本的编写，掌握利用ADO组件中Connection对象和RecordSet对象访问数据库的方法。四、实验内容与步骤1、编写脚本，利用Connection对象实现对数据库的访问；利用microsoft Access建立数据库文件asp.mdb，其中包含表格student。此表包含三个字段，No字段自动编号，Name和Sex字段都是文本型，长度为默认的50。在student表中随意输入几条记录。将此文件保存在C:Inetpubwwwroot目录中，并在资源管理器中设置其安全权限属性为ever

19、yone都可以完全控制。图7-1 student表在Dreamweaver中新建ASP VBScript页面1.asp并保存在C:Inetpubwwwroot目录中，部分代码及其解释如下：数据库操作实例%建立连接字符串connstr =Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(Asp.mdb)建立ADODB.Connection对象Set Conn=Server.CreateObject(ADODB.Connection)利用ADODB.Connection对象打开数据库Conn.Open connstr建立SQL

20、字符串sql=select * from Student执行SQL语句并返回结果Set rs=Conn.Execute(sql)输出结果while not rs.eofresponse.write &rs(Name)&rs(Sex)&rs.MoveNextWend%按F12,在浏览器中预览此页面，看能否显示student表中所有记录。2、编写脚本，利用RecordSet对象实现数据的分页显示。在Dreamweaver中新建ASP VBScript页面2.asp并保存在C:Inetpubwwwroot目录中，部分代码如下：RecordSet对象实例姓名密码%建立连接字符串connstr =Pro

21、vider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(Asp.mdb)建立ADODB.Connection对象Set Conn=Server.CreateObject(ADODB.Connection)打开Connection对象连接conn.open connstr建立SQL字符串sql=Select * from Student建立ADODB.RecordSet对象Set rs=Server.CreateObject(ADODB.Recordset)利用RecordSet对象打开数据库rs.open sql,conn,1,3输出结果while not rs.eofresponse.write &rs(Name)&rs(Sex)&rs.MoveNextWend%按F12,在浏览器中预览此页面，看能否显示student表中所有记录。五、思考题1、Connection对象和RecordSet对象的使用方法有何不同？2、有了Connection对象为什么还需要RecordSet对象？六、注意事项注意总结ADO对象访问数据库的程序基本流程。