WEB 程序设计基础实验指导书太原理工大学田玉玲 编1目录实验 1HTML 语言.2实验 2网页程序设计-JavaScript.4实验 3Request 与 Response 对象的应用. 7实验 4Application 对象 Session 对象的应用.8实验 5使用 JDBC 连接数据库.102实验一实验一 HTML 语言语言一、实验目的一、实验目的1掌握常用的 HTML 语言标记；2利用文本编辑器建立 HTML 文档，制作简单网页。二、实验要求二、实验要求1独立完成实验。2书写实验报告书。三、实验内容三、实验内容1在文本编辑器“记事本”中输入如下的 HTML 代码程序，以文件名 sy1.html 保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）源程序清单如下：Examplewelcome to youA simple HTML document Welcome to the world of HTML This is a simple HTML document.It is to give you an outline of how to write HTML file and how the markup tags work in the HTML file Following is three chaptersThis is the chapter one This is the chapter two This is the chapter threeFollowing is items of the chapter two 3item contentitem 1 fontitem 2 tableitem 3 form1 2 3 4 5 6 7 End of the example document 2编写一个能输出如图所示界面的 HTML 文件。4function formReset()document.getElementById(“myForm“).reset()实验 1h3.leftposition: relative;left:533pxh4.leftqposition: relative;left:565pxh4.liuyanposition: relative;left:547pxh4.aihao5position: relative;left:620pxh4.aihao2position: relative;left:615pxh4.aihao1position: relative;left:540px;top: -125px;width:85px;h4.chongposition: relative;left:618px请留下个人资料姓名：E-mail：电话：性别：女男年龄：620 岁以下1918留言板：运动阅读听音乐旅游您的爱好：7实验二实验二网页程序设计网页程序设计-JavaScript一、实验目的一、实验目的1掌握 JavaScript 技术,基本掌握 JavaScript 的开发技巧；2利用文本编辑器建立 JavaScript 脚本语言进行简单编程。二二、实验要求实验要求:1根据以下实验内容书写实验准备报告。2独立完成实验。8三三、实验内容、实验内容1显示一个动态的时钟显示一个动态的时钟在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：var timer = null function stop() clearTimeout(timer) function start() var time = new Date() var hours =time.getHours() var minutes =time.getMinutes() minutes=(minutes现在是北京时间：分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确.2事件驱动和事件处理事件驱动和事件处理在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：9function myfunction() alert(“HELLO“) By pressing the button, a function will be called. The function willalert a message.分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3JavaScript 表单校验表单校验编写程序 register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。10Insert title herefunction check(form) if(form.username.value=) alert(“请输入用户帐号!“);form.username.focus();return false;if(form.pwd.value=)alert(“请输入登录密码!“);form.pwd.focus();return false;return true;账号：密码：11实验实验 3 Request 与与 Response 对象的应用对象的应用一、实验目的一、实验目的1 掌握 JSP 的 Request 与与 Response 隐式对象的用法， 基本掌握 JSP 的开发技巧。2在 JDK 和 Eclipse 环境下，完成下列实验。二二、实验要求实验要求1独立完成实验。2书写实验报告书。三三、实验内容实验内容编写程序实现一个单选小测试。在 test.jsp 页面显示问题，并将答案提交至answer.jsp进行判断， 如果回答正确， 则将页面转至yes.jsp;否则， 转至 no.jsp。12Text.jsp:Insert title here北京奥运会的开幕时间是：8月6号8月8号8月9号8月10号Answer.jspNo.jsp:Insert title here您回答的错了！应该为8月8号！Yes.jsp:Insert title here恭喜你答对了！14实验实验 4Application 对象对象 Session 对象对象一、实验目的一、实验目的1掌握 JSP 的 Application 对象 Session 对象对象的用法，基本掌握 JSP 的开发技巧。2在 JDK 和 Eclipse 环境下，完成下列实验。二二、实验要求实验要求: :1独立完成实验2书写实验报告书三三、实验内容实验内容: :1请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：网页计数器您是第位访问者！152上述计数器当进行刷新时也会自动加 1，试编写程序 count.jsp，实现防刷新文本计数器。Insert title here您是第位访问者！3编写程序 register.htm 和 register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到 register.jsp 进行注册检验，若用户名为16user 开头的，就提示“该用户名已被注册”，若用户名为 admin，就提示“D”，否则，就显示“注册成功”。Register.html:Insert title herefunction check(form) if(form.username.value=) alert(“请输入用户帐号!“);form.username.focus();return false;if(form.pwd.value=)alert(“请输入登录密码!“);form.pwd.focus();return false;return true;账号：密码：17Register.jsp:Insert title here181920实验实验 5 使用使用 JDBC 连接数据库连接数据库一、实验目的一、实验目的1掌握 JSP 与数据库的连接技术JDBC2掌握 JSP 数据库编程技术。二二、实验要求实验要求1独立完成实验2书写实验报告书三三、实验内容实验内容利用数据库建立一个同学录，然后通过 JDBC 编写一系列基于 Web 方式的JSP 程序， 来对同学录的数据库进行添加、 查询等功能， 要求在网页上显示出来。四四、实验步骤实验步骤1建立数据库建立数据库查看支持的编码：SHOW VARIABLES LIKE character_set_%;mysqluse mydb mysqlalter database mydb character set utf-8; 创建数据库指定数据库的字符集 mysqlcreate database mydb character set utf-8;21建立名为 students 的 access 数据库,在库中建立 schoolmate 表，字段包括：id自动编号name文本birthday日期/时间phone文本email文本address文本other备注2. 创建数据源名创建数据源名打开数据源（ODBC）；添加 Microsoft Access Driver(*.mdb)数据源驱动程序。数据源名称：students；更改默认数据库，选择 students。3运行所编写的应用程序运行所编写的应用程序启动 eclipse， 建立项目 exp5,将编写的程序放入该项目的 WebContent 下， 右键点击 WebContent，选择“刷新”。打开要运行的页面，在程序的任意位置单击右键，选择“运行方式”/“在服务器上运行”，单击“在服务器上运行” 对话框的“完成”，即可看到运行结果。“);out.print(“);out.print(“+“id“);out.print(“+“name“);out.print(“+“birthday“);out.print(“+“phone“);out.print(“+“email“);out.print(“+“address“);out.print(“+“other“);out.print(“);while(rs.next()out.print(“);out.print(“+rs.getString(1)+“);out.print(“+rs.getString(2)+“);out.print(“+rs.getString(3)+“);out.print(“+rs.getString(4)+“);out.print(“+rs.getString(5)+“);out.print(“+rs.getString(6)+“);out.print(“+rs.getString(7)+“);out.print(“);out.print(“);con.close();catch(SQLException e1)out.print(e1);%2324