太原理工大学web程序设计基础实验报告Word格式.docx
《太原理工大学web程序设计基础实验报告Word格式.docx》由会员分享，可在线阅读，更多相关《太原理工大学web程序设计基础实验报告Word格式.docx（28页珍藏版）》请在冰点文库上搜索。
bodybgcolor="
#00DDFF"
h1>
B>
I>
FONTCOLOR="
#FF00FF"
MARQUEEBGCOLOR="
#FFFF00"
direction=leftbehavior=alternate>
welcometoyou<
/MARQUEE>
/FONT>
/I>
/B>
/h1>
hr>
h2align=center>
#0000FF"
AsimpleHTMLdocument<
/h2>
EM>
WelcometotheworldofHtml<
/EM>
p>
ThisisasimpleHTMLdocument.ItistogiveyouanoutlineofhowtowriteHTMLfileandhowthe<
b>
markuptags<
/b>
workinthe<
HTML<
file<
/p>
Followingisthreechapters
ul>
li>
Thisisthechapterone<
/li>
AHREF="
#item"
Thisisthechaptertwo<
/A>
Thisisthechapterthree<
/ul>
ANAME="
item"
Followingisitemsofthechaptertwo<
tableborder=2bgcolor=graywidth="
40%"
tr>
th>
item<
/th>
content<
/tr>
td>
item1<
/td>
font<
item2<
table<
item3<
form<
/table>
1<
2<
3<
4<
5<
6<
7<
FONTCOLOR=BLUESIZE=4>
Endoftheexampledocument<
/body>
/html>
（2）实验结果
2．编写一个能输出如图所示界面的HTML文件。
（1）程序代码
DOCTYPEhtml>
表单范例<
style>
h1{
text-align:
center;
}
/style>
body>
formaction="
#"
tableborder="
0"
align="
center"
<
tdcolspan="
2"
<
u>
请留下个人资料<
/u>
&
nbsp姓&
nbsp名:
td>
inputtype="
text"
name="
username"
br>
nbspE-mail:
email"
nbsp电&
nbsp话:
phone"
nbsp性&
nbsp别:
radio"
gender"
value="
女"
checked="
checked"
女<
男"
男<
nbsp年&
nbsp龄：
selectname="
age"
<
optionvalue="
1"
20以下<
/option>
/select>
nbsp留言板：
textareaname="
mark"
cols="
30"
rows="
5"
/textarea>
tdrowspan="
4"
您的爱好：
inputname="
hobby"
type="
checkbox"
"
/>
运动<
阅读<
听音乐<
旅游<
br/>
tralign="
button"
提交"
reset"
全部重写"
/form>
（2）实验结果：
四、实验心得：
刚开始编写的时候只是编写了要求的form，但是不如给出的表单那样整齐，后来尝试用了表格，将表格的border属性改为0，再适当加空格&
nbsp才完成了如图所示的表单
实验二网页程序设计-JavaScript
1．掌握JavaScript技术,基本掌握JavaScript的开发技巧；
2．利用文本编辑器建立JavaScript脚本语言进行简单编程。
二、实验要求:
1．根据以下实验内容书写实验准备报告。
2．独立完成实验。
1．显示一个动态的时钟
编写程序，在文本框中显示实时的时间，然后运行文件,验证程序是否正确。
html>
scriptlanguage="
javascript"
vartimer=null
functionstop（）{
clearTimeout（timer）}
functionstart（）{
vartime=newDate（）
varhours=time.getHours（）
varminutes=time.getMinutes（）
minutes=（（minutes<
10）?
:
）+minutes
varseconds=time.getSeconds（）
seconds=（（seconds<
）+seconds
varclock=hours+"
+minutes+"
+seconds
document.forms[0].display.value=clock
timer=setTimeout（"
start（）"
1000）}
/script>
bodyonLoad="
onUnload="
stop（）"
form>
现在是北京时间：
display"
size="
20"
2．事件驱动和事件处理
在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。
源程序清单如下：
script>
x=0
functioncountSecond（）
{
if（x<
6）
{
x=x+1;
document.fm.displayBox.value=x;
setTimeout（"
countSecond（）"
1000）;
}
formname=fm>
displayBox"
size=4>
countSecond（）
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。
3．JavaScript表单校验
编写程序register.htm，做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。
用户登录<
scripttype="
text/javascript"
functionsub（）{
varusername=document.getElementById（"
）;
varuvalue=username.value;
if（uvalue=="
）{
alert（"
用户名不能为空，请输入用户名！
）
form1.username.focus（）;
returnfalse;
user"
method="
post"
id="
form1"
div>
/div>
请输入用户名：
请输入密码：
nbsp
password"
onclick="
sub（）"
这次的提前将form写成了表格的形式，这样显得整齐，javascript编写时要注意函数的编写，如在函数前加上function，还要注意事件、驱动和处理程序，尽可能地减少失误。
实验3Request与Response对象的应用
1．掌握JSP的Request与Response隐式对象的用法，基本掌握JSP的开发技巧。
2．在JDK和Eclipse环境下，完成下列实验。
编写程序实现一个单选小测试。
在test.jsp页面显示问题，并将答案提交至answer.jsp进行判断，如果回答正确，则将页面转至yes.jsp;
否则，转至no.jsp。
test.jsp
%@pagelanguage="
java"
contentType="
text/html;
charset=UTF-8"
pageEncoding="
%>
DOCTYPEhtmlPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
metahttp-equiv="
Content-Type"
content="
Inserttitlehere<
h2>
北京奥运会开幕日期是：
answer.jsp"
input"
date"
6"
8月6日
8"
8月8日
9"
8月9日
10"
8月10日<
submit"
提交答案"
Answer.jsp
%Stringmydate;
mydate=request.getParameter（"
if（mydate.equals（"
））
response.sendRedirect（"
yes.jsp"
else
response.sendRedirect（"
no.jsp"
Yes.jsp
h1align="
恭喜您答对了！
No.jsp
很抱歉，您答错了!
四、实验心得
本次实验需要配置环境变量才能使用，使用request.getParameter来接收客户端传来的值，用response.sendRedirect重新定位一个jsp页面。
另外本次实验过程中出现了端口号被占用的问题，通过查找资料，将Servers->
server.xml中的端口号改为8003才解决问题。
实验4Application对象Session对象
1．掌握JSP的Application对象Session对象对象的用法，基本掌握JSP的开发技巧。
1．独立完成实验
2．书写实验报告书
三、实验内容:
1．请仔细阅读下列程序语句，理解每条语句的作用。
%@pagecontentType="
charset=gb2312"
网页计数器<
%if（application.getAttribute（"
counter"
）==null）
application.setAttribute（"
"
else{
Stringstrnum=null;
strnum=application.getAttribute（"
）.toString（）;
inticount=0;
icount=Integer.valueOf（strnum）.intValue（）;
icount++;
application.setAttribute（"
Integer.toString（icount））;
}%>
您是第<
%=application.getAttribute（"
）%>
位访问者！
2．上述计数器当进行刷新时也会自动加1，试编写程序count.jsp，实现防刷新文本计数器。
%
if（application.getAttribute（"
if（session.isNew（））//如果是一个新的会话
}
%>
刷新时不再增加数量，只有重新打开页面才能增加数量。
3．编写程序register.htm和register.jsp，做一个用户注册的界面，要求对用户填写的部分进行合法性检验，然后提交到register.jsp进行注册检验，若用户名为user开头的，就提示“该用户名已被注册”，若用户名为admin，就提示“欢迎您，管理员”，否则，就显示“注册成功”。
Register.html
用户注册<
functionon_submit（）
{
if（input.Name.value=="
{
alert（"
用户名不能为空，请输入用户名!
input.Name.focus（）;
returnfalse;
}
elseif（input.Password.value=="
||input.Password2.value=="
请输入密码"
input.Password.focus（）;
elseif（input.Password.value!
=input.Password2.value）
两次密码不一致！
input.Password2.focus（）;
return
升级会员 