互联网实验三四.docx
《互联网实验三四.docx》由会员分享，可在线阅读，更多相关《互联网实验三四.docx（26页珍藏版）》请在冰豆网上搜索。
互联网实验三四
实验三：
JavaScript运用编程
一、实验目的
通过运用JavaScript，Dom，JavaCookie进行编程，使学生了解和运用JavaScript的架构包进行编程，达到动态丰富网页，巩固课堂中所学的理论知识。
二、实验要求
1.完成所提供的案例的记性javascript程序编写，并进行测试；
2.至少完成下面程序中的四个，第五个自己配置测试看效果。
3.在实验报告中，要写出下面各个效果图源代码，对代码要进行必要注解。
对第五题，要用不同的图或者参数进行测试。
列出效果图。
4：
实验可以任做其中两个案例，最好全做。
三、实验原理
1、JavaScript的基本语法；
2、JavaScript基本使用方法；
四、实验步骤
完成下列案例的编写，并在IE和Firefox两种浏览器中进行测试。
1：
正则表达式运用点击（图1）中提交，如果邮件格式不对则出现下面
（图2）错误提示的效果
图1
图2
注意：
用则表达式和re.test（）测试。
。
代码：
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
address
--
functioncheck（）{
vars=document.getElementById（"email"）.value;
varreg=/^\w+（[-.]\w+）*@\w+（[-.]\w+）*\.\w+（[-.]\w+）*$/;
varm=reg.test（s）;
if（m）{
alert（"success"）;
}else{
alert（"Invalidemailaddress"）;
}
}
//-->
| EmailAddress: | |
| |
运行结果：
2.用javascriptcookie来保存用户登录名和密码。
图2
程序代码：
<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%>
<%@pageimport="javax.servlet.http.Cookie"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
cookie
--
varisSecondChkChecked=false;
functionchange（chkBox）{
isSecondChkChecked=chkBox.checked;
}
functionsave（）{
varun=document.getElementById（"username"）.value;
varup=document.getElementById（"password"）.value;
if（isSecondChkChecked）{
document.cookie='username='+un;
document.cookie='userpwd='+up;
}
alert（un）;
returnfalse;
}
functionclear（chkBox）{
if（chkBox.checked）{
document.cookie='username='+"";
document.cookie='userpwd='+"";
}
}
//-->
<%
Cookiecookie[]=null;
Stringname="";
Stringpwd="";
Cookiecookie1[]=request.getCookies（）;
for（inti=0;iif（"username".equals（cookie1[i].getName（）））{
name=cookie1[i].getValue（）;
//out.println（cookie1[i].getValue（））;
}
if（"userpwd".equals（cookie1[i].getName（）））{
//out.println（cookie1[i].getValue（））;
pwd=cookie1[i].getValue（）;
}
}
%>
| 用户名: | "> |
| 密 码: | "> |
是否记住密码:
清除cookie:
| |
运行结果：
提醒代码：
一：
获取Cookie
functiongetCookie（c_name）
{if（document.cookie.length>0）
{c_start=document.cookie.indexOf（c_name+"="）
if（c_start!
=-1）{c_start=c_start+c_name.length+1c_end=document.cookie.indexOf（";",c_start）
if（c_end==-1）
c_end=document.cookie.length
returnunescape（document.cookie.substring（c_start,c_end））
}
}
return""
}
二：
设置Cookie
functionsetCookie（c_name,value,expiredays）
{varexdate=newDate（）
exdate.setDate（exdate.getDate（）+expiredays）
document.cookie=c_name+"="+escape（value）+（（expiredays==null）?
"":
";expires="+exdate.toGMTString（））
}
要求：
用户名和密码各用一个Cookie，在登录的时候判断是否有Cookie，如果没有，就设置一个新Cookie,如果有，把它内容显示在用户名和密码文本框中。
如果用户修改密码要用alert提醒。
如果用户
选择记住密码，要用Cookie，没有选择就不用Cookie。
3.自己利用Dom中方法GetElementById，getElementByTagName,removeAttribute,setAttribute，firstChild,lastChild,nextSibling,previousSibling,CreateElment,appendChild,removechild实现如下图3显示。
图3
点击相应的按钮用alert（）显示相应的内容。
如下图4所示：
图4
运行结果:
代码：
DOCTYPEhtml>
父节点
第一个child
第二个child
第三个child