WEB程序设计实验(田玉玲).doc

太原理工大学软件工程系WEB程序设计基础实验指导书太原理工大学田玉玲 编目录实验1 HTML语言2实验2 网页程序设计-JavaScript4实验3 Request与Response对象的应用7实验4 Application对象Session对象的应用8实验5 使用JDBC连接数据库10实验一 HTML语言一、实验目的1掌握常用的HTML语言标记；2利用文本编辑器建立HTML文档，制作简单网页。二、实验要求1独立完成实验。2书写实验报告书。三、实验内容1在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： Examplewelcome to youA simple HTML documentWelcome to the world of HTMLThis 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 fileFollowing is three chaptersThis is the chapter oneThis is the chapter twoThis is the chapter threeFollowing is items of the chapter two itemcontentitem 1fontitem 2tableitem 3form1234567End of the example document 2编写一个能输出如图所示界面的HTML文件。 function formReset()document.getElementById(myForm).reset() 实验1 h3.left position: relative; left:533px h4.leftq position: relative; left:565px h4.liuyan position: relative; left:547px h4.aihao position: relative; left:620px h4.aihao2 position: relative; left:615px h4.aihao1 position: relative; left:540px; top: -125px; width:85px; h4.chong position: relative; left:618px 请留下个人资料 姓名： E-mail： 电话： 性别： 女 男 年龄： 20岁以下 19 18 留言板： 运动 阅读 听音乐 旅游   您的爱好： 实验二 网页程序设计-JavaScript一、实验目的1掌握JavaScript技术,基本掌握JavaScript的开发技巧；2利用文本编辑器建立JavaScript脚本语言进行简单编程。二、实验要求:1根据以下实验内容书写实验准备报告。2独立完成实验。三、实验内容1 显示一个动态的时钟在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： var timer = nullfunction stop()clearTimeout(timer)function start()var time = new Date()var hours =time.getHours()var minutes =time.getMinutes()minutes=(minutes10)?0:”“)+minutesvar seconds=time.getSeconds()seconds=(seconds10)?0:”“)+secondsvar clock =hours+:+minutes+:+secondsdocument.forms0.display.value=clocktimer=setTimeout(start(),1000)现在是北京时间：分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确. 2事件驱动和事件处理 在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： function myfunction()alert(HELLO)By pressing the button, a function will be called. The function will alert a message.分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3JavaScript表单校验编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。Insert title here function check(form) if(form.username.value=) alert(请输入用户帐号!); form.username.focus(); return false; if(form.pwd.value=) alert(请输入登录密码!); form.pwd.focus(); return false; return true; 账号：密码： 实验3 Request与Response对象的应用一、实验目的1掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求1独立完成实验。2书写实验报告书。三、实验内容编写程序实现一个单选小测试。在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;否则，转至no.jsp。Text.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恭喜你答对了！实验4 Application对象Session对象一、实验目的1掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求:1独立完成实验2书写实验报告书三、实验内容:1请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： 网页计数器您是第位访问者！2上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。Insert title here您是第位访问者！3编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“D”，否则，就显示“注册成功”。Register.html:Insert title here function check(form) if(form.username.value=) alert(请输入用户帐号!); form.username.focus(); return false; if(form.pwd.value=) alert(请输入登录密码!); form.pwd.focus(); return false; return true; 账号：密码： Register.jsp:Insert title here实验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;建立名为students的access数据库,在库中建立schoolmate表，字段包括：id自动编号name文本birthday日期/时间phone文本email文本address文本other备注2. 创建数据源名 打开数据源（ODBC）；添加Microsoft Access Driver(*.mdb)数据源驱动程序。数据源名称：students；更改默认数据库，选择students。3运行所编写的应用程序启动eclipse，建立项目exp5,将编写的程序放入该项目的WebContent下，右键点击WebContent，选择“刷新”。打开要运行的页面，在程序的任意位置单击右键，选择“运行方式”/“在服务器上运行”，单击“在服务器上运行” 对话框的“完成”，即可看到运行结果。%Connection con;Statement sql;ResultSet rs;tryClass.forName(com.mysql.jdbc.Driver).newInstance();catch(Exception e)out.print(e);try String uri=jdbc:mysql:/localhost:3306/students; con=DriverManager.getConnection(uri,root,1314); sql=con.createStatement(); rs=sql.executeQuery(SELECT * FROM schoolmate); out.print(); 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.getStr