互联网实验三四Word格式文档下载.docx
- 文档编号:4246787
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:26
- 大小:434.89KB
互联网实验三四Word格式文档下载.docx
《互联网实验三四Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《互联网实验三四Word格式文档下载.docx(26页珍藏版)》请在冰点文库上搜索。
//www.w3.org/TR/html4/loose.dtd"
>
html>
head>
metahttp-equiv="
Content-Type"
content="
title>
address<
/title>
scriptlanguage="
JavaScript"
type="
text/javascript"
--
functioncheck(){
vars=document.getElementById("
email"
).value;
varreg=/^\w+([-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
varm=reg.test(s);
if(m){
alert("
success"
);
}else{
Invalidemailaddress"
}
//-->
/script>
/head>
body>
tableborder="
0"
name="
tr>
td>
EmailAddress:
/td>
inputtype="
text"
id="
/>
/tr>
button"
value="
Submit"
onclick="
check()"
reset"
Reset"
/table>
/body>
/html>
运行结果:
2.用javascriptcookie来保存用户登录名和密码。
程序代码:
%@pageimport="
javax.servlet.http.Cookie"
cookie<
varisSecondChkChecked=false;
functionchange(chkBox){
isSecondChkChecked=chkBox.checked;
functionsave(){
varun=document.getElementById("
username"
varup=document.getElementById("
password"
if(isSecondChkChecked){
document.cookie='
username='
+un;
userpwd='
+up;
}
alert(un);
returnfalse;
functionclear(chkBox){
if(chkBox.checked){
+"
"
;
}
%
Cookiecookie[]=null;
Stringname="
Stringpwd="
Cookiecookie1[]=request.getCookies();
for(inti=0;
i<
cookie1.length;
i++){
if("
.equals(cookie1[i].getName())){
name=cookie1[i].getValue();
//out.println(cookie1[i].getValue());
userpwd"
//out.println(cookie1[i].getValue());
pwd=cookie1[i].getValue();
formaction="
email.jsp"
user"
method="
post"
onSubmit="
returnsave()"
用户名:
%=name%>
密&
nbsp;
码:
%=pwd%>
tr>
tdcolspan="
2"
是否记住密码:
checkbox"
ifsave"
onchange="
change(this)"
清除cookie:
ifclear"
clear(this)"
submit"
>
/form>
提醒代码:
一:
获取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>
divid="
pp"
父节点
<
test"
pid="
s"
第一个child<
/p>
div>
第二个child<
/div>
第三个child<
scripttype="
functiongetParent(){
varx=document.getElementById("
x.parentNode.style.border="
3pxdashedpink"
x.parentNode.style.color="
red"
alert("
父节点"
functiongetFirst(){
varx=document.getElementById("
x.firstChild.style.color="
第一个节点"
functiongetLast(){
x.lastChild.style.color="
blue"
最后一个节点"
functiongetBrother(){
x.nextSibling.style.color="
green"
兄弟节点"
functioncreate(){
varnewel,newtext;
varx=document.getElementsByTagName('
p'
创建节点"
newel=x.createElement('
edition'
newtext=x.createTextNode('
First'
newel.appendChild(newtext);
x.appendChild(newel);
f"
getFirst()"
p"
getParent()"
l"
getLast()"
b"
getBrother()"
c"
create()"
四、实验心得
本次试验主要是用到javascript和dom知识,对文本对象属性的操作,其中javascript调用dom来实现各种功能,cookie可用javascript操作,也可用纯java操作,主要包括创建cookie和读取cookie,dom主要是获取文本对象里的节点,属性,然后用javascript来改变这些属性值。
这就是javascript和dom的关系,初学时觉得两者一样,其实是包含关系。
实验四:
Html+CSS+JavaScript综合编程
通过运用Dom,Jquery,ajax进行编程,使学生了解Jquery的应用;
运用ajax的架构包进行编程,达到动态丰富网页,巩固课堂中所学的理论知识。
二、实验内容
1.完成所提供的案例的记性ajax或者Jquery程序编写,并进行测试;
2.至少完成下面程序中的四个,对第四个实验jzoom自己配置测试看效果。
三、实验步骤
1.见下(图3),有两个下拉框,把左边选择添加到右边,把右边删除后返回到左边。
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
/>
jquery<
scriptsrc="
jquery-1.9.1.min.js"
$("
document"
).ready(function(){
$("
p#addright"
).click(function(){
$("
[name='
s1'
]"
).children("
:
checked"
).insertBefore($("
s2'
]>
option"
).eq(0));
});
p#addallright"
varrest=$("
).children().not("
#flag1"
rest.insertBefore($("
});
p#delleft"
p#delallleft"
#flag2"
bodyalign="
center"
divstyle="
position:
relative"
selectstyle="
width:
140px;
height:
100px"
multiplename="
s1"
option>
1<
/option>
2<
3<
optionid="
flag1"
disabled>
/select>
pstyle="
background-color:
lightGray;
140px"
addright"
选中添加到右边>
addallright"
全部添加到右边>
relative;
left:
160px;
top:
-182px"
s2"
flag2"
lightGray;
delleft"
选中删除到左边>
delallleft"
全部删除到左边>
2.点击下图“+全商品菜单”,出现下图右边菜单效果,点击“-全商品菜单”出现左图效果
Tochangethistemplate,chooseTools|Templates
andopenthetemplateintheeditor.
-->
DOCTYPEHTMLPUBLIC"
charset=UTF-8"
SCRIPTsrc="
/SCRIPT>
p#display"
).css("
display"
"
none"
p#hidden"
).slideDown(100);
ul#hidden"
).slideDown(1000);
).slideUp(1000);
).slideUp(10);
).slideDown(10);
styletype="
text/css"
#hidden{display:
none}
/style>
+全商品菜单<
hidden"
-全部商品菜单<
ulid="
square"
li>
菜单1<
/li>
menu2<
menu3<
/ul>
tel"
+点击看电视菜单<
imgsrc="
blueButton2.gif"
width="
80"
height="
30"
style="
display:
none"
3.如下图,实现动态添加员工和删除员工。
点击提交,添加,点击删除按钮删除当前行。
button#submit"
+$("
name'
).val()+"
email'
).val()+"
salary'
buttononClick='
remove(this)'
删除<
/button>
).insertAfter($("
tbody"
tr:
last"
));
functionremo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 实验 三四