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

课程名称：WEB程序设计基础实验项目：WEB程序设计基础实验实验地点：逸夫楼402专业班级：软件1415班学生姓名：朱伟学号：2014005960指导教师：田玉玲2016年11月21日实验一HTML语言一、实验目的1．掌握常用的HTML语言标记；2．利用文本编辑器建立HTML文档，制作简单网页。二、实验要求1．独立完成实验。2．书写实验报告书。三、实验内容1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）（1）程序代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8titleExample/title/headbodybgcolor=#00DDFFh1BIFONTCOLOR=#FF00FFMARQUEEBGCOLOR=#FFFF00direction=leftbehavior=alternatewelcometoyou/MARQUEE/FONT/I/B/h1hrh2align=centerFONTCOLOR=#0000FFAsimpleHTMLdocument/FONT/h2EMWelcometotheworldofHtml/EMpThisisasimpleHTMLdocument.ItistogiveyouanoutlineofhowtowriteHTMLfileandhowthebmarkuptags/bworkintheIHTML/Ifile/ppFollowingisthreechaptersulliThisisthechapterone/liliAHREF=#itemThisisthechaptertwo/A/liliThisisthechapterthree/li/ul/phrpANAME=itemFollowingisitemsofthechaptertwo/A/ptableborder=2bgcolor=graywidth=40%trthitem/ththcontent/th/trtrtditem1/tdtdfont/td/trtrtditem2/tdtdtable/td/trtrtditem3/tdtdform/td/tr/tablehrp1p2p3p4p5p6p7pBIFONTCOLOR=BLUESIZE=4Endoftheexampledocument/FONT/I/B/p/body/html/body/html（2）实验结果2．编写一个能输出如图所示界面的HTML文件。（1）程序代码!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title表单范例/titlestyleh1{text-align:center;}/style/headbodyformaction=#tableborder=0align=centertrtdcolspan=2h1u请留下个人资料/u/h1/td/trtrtd 姓 名:/tdtdinputtype=textname=username/td/trbrtrtd E-mail:/tdtdinputtype=textname=email/td/trbrtrtd 电 话:/tdtdinputtype=textname=phone/td/trbrtrtd 性 别:/tdtdinputtype=radioname=gendervalue=女checked=checked女inputtype=radioname=gendervalue=男男/td/trbrtrtd 年 龄：/tdtdselectname=ageoptionvalue=120以下/option/select/td/trbrtrtd 留言板：/tdtdtextareaname=markcols=30rows=5/textarea/td/trtrtdrowspan=4您的爱好：/tdtdinputname=hobbytype=checkboxvalue=/运动/td/trtrtdinputname=hobbytype=checkboxvalue=/阅读/td/trtrtdinputname=hobbytype=checkboxvalue=/听音乐/td/trtrtdinputname=hobbytype=checkboxvalue=/旅游/tdbr//trtralign=centertdcolspan=2inputtype=buttonvalue=提交inputtype=resetvalue=全部重写/td/tr/table/form/body/html（2）实验结果：四、实验心得：刚开始编写的时候只是编写了要求的form，但是不如给出的表单那样整齐，后来尝试用了表格，将表格的border属性改为0，再适当加空格 才完成了如图所示的表单实验二网页程序设计-JavaScript一、实验目的1．掌握JavaScript技术,基本掌握JavaScript的开发技巧；2．利用文本编辑器建立JavaScript脚本语言进行简单编程。二、实验要求:1．根据以下实验内容书写实验准备报告。2．独立完成实验。三、实验内容1．显示一个动态的时钟编写程序，在文本框中显示实时的时间，然后运行文件,验证程序是否正确。（1）程序代码htmlheadmetacharset=UTF-8scriptlanguage=javascriptvartimer=nullfunctionstop(){clearTimeout(timer)}functionstart(){vartime=newDate()varhours=time.getHours()varminutes=time.getMinutes()minutes=((minutes10)?0:)+minutesvarseconds=time.getSeconds()seconds=((seconds10)?0:)+secondsvarclock=hours+:+minutes+:+secondsdocument.forms[0].display.value=clocktimer=setTimeout(start(),1000)}/script/headbodyonLoad=start()onUnload=stop()form现在是北京时间：inputtype=textname=displaysize=20/form/body/html（2）实验结果2．事件驱动和事件处理在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8scriptx=0functioncountSecond(){if(x6){x=x+1;document.fm.displayBox.value=x;setTimeout(countSecond(),1000);}}/script/headbodyformname=fminputtype=textname=displayBoxvalue=0size=4/formscriptcountSecond()/script/body/html分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。3．JavaScript表单校验编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。（1）程序代码!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title用户登录/titlescripttype=text/javascriptfunctionsub(){varusername=document.getElementById(username);varuvalue=username.value;if(uvalue==){alert(用户名不能为空，请输入用户名！)form1.username.focus();returnfalse;}}/script/headbodyformaction=usermethod=postid=form1tableborder=0div用户登录/divdiv请输入用户名：inputtype=textname=usernameid=username/divdiv请输入密码： inputtype=password/divdivinputtype=buttonvalue=提交onclick=sub()inputtype=resetvalue=全部重写/div/table/form/body/html（2）实验结果四、实验心得：这次的提前将form写成了表格的形式，这样显得整齐，javascript编写时要注意函数的编写，如在函数前加上function，还要注意事件、驱动和处理程序，尽可能地减少失误。实验3Request与Response对象的应用一、实验目的1．掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。2．在JDK和Eclipse环境下，完成下列实验。二、实验要求1．独立完成实验。2．书写实验报告书。三、实验内容编写程序实现一个单选小测试。在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;否则，转至no.jsp。（1）程序代码test.jsp%@pagelanguage=javacontentType=text/html;charset=UTF-8pageEncoding=UTF-8%!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/title/headbodyh2北京奥运会开幕日期是：/h2brformaction=answer.jspmethod=postname=inputinputtype=radioname=datevalue=68月6日inputtype=radioname=datevalue=88月8日inputtype=radioname=datevalue=98月9日input