太原理工大学web程序设计基础实验报告.doc

课程名称： WEB程序设计基础 实验项目： WEB程序设计基础实验 实验地点： 逸夫楼402 专业班级： 软件1415班 学生姓名： 朱伟 学号： 2014005960 指导教师： 田玉玲 2016年 11 月 21 日实验一 HTML语言一、实验目的1掌握常用的HTML语言标记；2利用文本编辑器建立HTML文档，制作简单网页。二、实验要求1独立完成实验。2书写实验报告书。三、实验内容1在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）（1）程序代码： Example welcome to youA simple HTML document Welcome to theworld of HtmlThis is a simple HTML document.It is to give you an outline of how to write HTML fileand how the markup tags work in theHTMLfileFollowing is three chaptersThis is the chapter oneThis is the chapter twoThis is the chapter threeFollowing is items of the chapter twoitemcontentitem1fontitem2tableitem3form1234567End of the example document （2）实验结果2 编写一个能输出如图所示界面的HTML文件。（1）程序代码表单范例h1text-align: center;请留下个人资料 姓 名: E-mail: 电 话: 性 别:女 男 年 龄：20以下 留言板：您的爱好：运动阅读听音乐旅游 （2） 实验结果：4、 实验心得： 刚开始编写的时候只是编写了要求的form，但是不如给出的表单那样整齐，后来尝试用了表格，将表格的border属性改为0，再适当加空格 才完成了如图所示的表单实验二 网页程序设计-JavaScript一、实验目的1掌握JavaScript技术,基本掌握JavaScript的开发技巧；2利用文本编辑器建立JavaScript脚本语言进行简单编程。二、实验要求:1根据以下实验内容书写实验准备报告。2独立完成实验。三、实验内容1 显示一个动态的时钟编写程序，在文本框中显示实时的时间，然后运行文件,验证程序是否正确。（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） 实验结果2事件驱动和事件处理 在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： x=0function countSecond()if (x6) x=x+1;document.fm.displayBox.value=x;setTimeout(countSecond(),1000);countSecond()分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3JavaScript表单校验编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。（1） 程序代码用户登录function sub()var username=document.getElementById(username);var uvalue=username.value;if (uvalue=) alert(用户名不能为空，请输入用户名！)form1.username.focus();return false;用户登录请输入用户名：请输入密码： （2） 实验结果4、 实验心得： 这次的提前将form写成了表格的形式，这样显得整齐，javascript编写时要注意函数的编写，如在函数前加上function，还要注意事件、驱动和处理程序，尽可能地减少失误。实验3 Request与Response对象的应用一、实验目的1掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求1独立完成实验。2书写实验报告书。三、实验内容编写程序实现一个单选小测试。在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;否则，转至no.jsp。（1）程序代码test.jspInsert title here北京奥运会开幕日期是： 8月6日 8月8日 8月9日8月10日 Answer.jspInsert title hereYes.jspInsert title here恭喜您答对了！No.jspInsert title here很抱歉，您答错了!（2） 实验结果四、实验心得 本次实验需要配置环境变量才能使用，使用request.getParameter来接收客户端传来的值，用response.sendRedirect重新定位一个jsp页面。另外本次实验过程中出现了端口号被占用的问题，通过查找资料，将Servers-server.xml中的端口号改为8003才解决问题。实验4 Application对象Session对象一、实验目的1掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。2在JDK和Eclipse环境下，完成下列实验。二、实验要求:1独立完成实验2书写实验报告书三、实验内容:1请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：网页计数器您是第位访问者！2 上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。（1） 程序代码：网页计数器您是第位访问者！（2）实验结果刷新时不再增加数量，只有重新打开页面才能增加数量。3编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“欢迎您，管理员”，否则，就显示“注册成功”。（1）程序代码Register.html用户注册function on_submit() if(input.Name.value=) alert(用户名不能为空，请输入用户名!); input.Name.focus(); return false; else if(input.Password.value=|input.Password2.value=) alert(请输入密码); input.Password.focus(); return false; else if(input.Password.value!=input.Password2.value) alert(两次密码不一致！); input.Password2.focus(); return false; else alert(登陆成功);用户注册请输入用户名：请输入密码：再次输入密码：Register.jspInsert title here(2) 实验结果4、 实验心得 通过本次实验学会了session和application的使用，session对象在第一个JSP页面被装载时自动创建，它的作用范围是所有页面，但只能相对于一个用户，它的生命期从访问这个网站到关闭浏览器为止；application虽然也是作用于所有页面，但是是所有用户共享的，它的生命期是从开启服务器开始直到关闭服务器为止。而且这个实验是对之前实验的一个综合，只要细心，也是比较容易。