《Web交互开发》实验教学指导/实验二: JavaScript编程应用 《Web交互开发》实验教学指导 实验二: JavaScript编程应用 、实验目的(5分) 1、掌握 JavaScript内置对象的使用 2、掌握 Javascript事件的使用; 3、掌握 JavaScript图像处理的方法 4、理解 JavaScript编程的思路; 5、掌握 JavaScript程序执行的过程 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 、实验要求(5分) 1、完成计时器的设计 2、完成列表的相关操作 3、完成注册表单; 4、完成图片验证码的实现; 5、完成下拉菜单的编写。 四、实验原理(5分) 1、 Window对象的使用; 2、DOM编程原理; 3、 JavaScript事件机制 五、实验步骤(40分) 1、计时器 (1)计时器的功能:单击“开始计时”按钮后启动计时器,输入框会从0开始计时;单 暂停计时”后可以暂停计时。代码如下: metahttp-equiv="content-type"content=text/html;charset=utf-81> <script language=javascript"> var timeID function begot var iform l num value forml num value=i timed= Timeout("beg(", 1000); 本讲共计6页|当前第1页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验二：JavaScript 编程应用 一、实验目的（5 分） 1、掌握 JavaScript 内置对象的使用； 2、掌握 JavaScript 事件的使用； 3、掌握 JavaScript 图像处理的方法； 4、理解 JavaScript 编程的思路； 5、掌握 JavaScript 程序执行的过程。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成计时器的设计； 2、完成列表的相关操作； 3、完成注册表单； 4、完成图片验证码的实现； 5、完成下拉菜单的编写。 四、实验原理（5 分） 1、Window 对象的使用； 2、DOM 编程原理； 3、JavaScript 事件机制； 五、实验步骤（40 分） 1、计时器 （1）计时器的功能：单击“开始计时”按钮后启动计时器，输入框会从 0 开始计时；单 击“暂停计时”后可以暂停计时。代码如下： <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script language="javascript"> var flag=0; var timeID; function beg(){ var i=form1.num.value; i++; form1.num.value=i; timeID=setTimeout("beg()",1000); }
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 function staO( if(flag=0)i bego function pauL clear Timeout(timeID) <form id="formI"name=formI"method="post"action="> <input type="text"name="num"size="1"value=0"A < input type=" button"name="sant" value="开始计时" onclick="staO;" Input type=" button"name=" pause" value="暂停计时" onclick="pauO)" <form (2)请完成以下任务: 任务一:代码中 settimeout方法和 clear Timeout方法的作用是什么?(5分) 任务二:代码中变量fag的作用是什么?(2分) 任务三: window对象的属性 width、 height与 availwidth、 availHeight分别表示什么含义。(3 分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、列表操作 (1)列表操作 代码22如下 <I DOCTYPE html <html> <head> ode List</title> <meta charsetutf-8> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <div id="page"> <hI id=header>List</hI> <h2>Buy groceries</h2> <li id="one"><em>fresh</em> figs</i> 本讲共计6页|当前第2页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 2 页 function sta(){ if(flag==0){ beg(); flag=1; } } function pau(){ clearTimeout(timeID); flag=0; } </script> <form id="form1" name="form1" method="post" action=""> <input type="text" name="num" size="1" value="0" /> <input type="button" name="start" value="开始计时" onclick="sta();" /> <input type="button" name="pause" value="暂停计时" onclick="pau();" /> </form> （2）请完成以下任务： 任务一：代码中 setTimeout 方法和 clearTimeout 方法的作用是什么？（5 分） 任务二：代码中变量 flag 的作用是什么？（2 分） 任务三：window 对象的属性 width、height 与 availWidth、availHeight 分别表示什么含义。（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、列表操作 （1）列表操作 代码 2-2 如下： <!DOCTYPE html> <html> <head> <title>Node List</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="page"> <h1 id="header">List</h1> <h2>Buy groceries</h2> <ul> <li id="one"><em>fresh</em> figs</li>
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 <li id="two">pine nuts</li <li id="three">honey</li> <li id="four>balsamic vinegar</i> < Input type=" button" value="添加"> < cinput type=" button" value="删除"> < cinput type=" button" value="添加样式"> </html> (2)请完成下面的任务 任务一:编写代码,当单击添加时为上面列表添加一项“ quinoa”。(2分) 任务二:当点击删除时,删除列表中的第一项。(3分) 任务三:定义样式,类名为hot,样式为红色、字体大小为16。(2分) 任务四:当点击添加样式按钮时,将样式添加到最后一项。(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、注册表单 (1)代码2-3 <IDOCTYPE html> <title> Event Listener and Event Object</title> <hl>list King</hI> <h2>New account</h2> formmethod=post"action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text"id="username"/<div id="feedback"></div> <label for"password">Create a password: </label> <input type="password"id="password"/><div id="feedback"></div> it"value="sign up function checkLength(e, minLength)i var el. elMs 本讲共计6页|当前第3页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 3 页 <li id="two">pine nuts</li> <li id="three">honey</li> <li id="four">balsamic vinegar</li> </ul> <input type="button" value="添加" > <input type="button" value="删除"> <input type="button" value="添加样式"> </div> </body> </html> （2）请完成下面的任务： 任务一：编写代码，当单击添加时为上面列表添加一项“quinoa”。（2 分） 任务二：当点击删除时，删除列表中的第一项。（3 分） 任务三：定义样式，类名为 hot，样式为红色、字体大小为 16。（2 分） 任务四：当点击添加样式按钮时，将样式添加到最后一项。（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、注册表单 （1）代码 2-3 <!DOCTYPE html> <html> <head> <title>Event Listener and Event Object</title> </head> <body> <div id="page"> <h1>List King</h1> <h2>New Account</h2> <form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" /><div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" /><div id="feedback"></div> <input type="submit" value="sign up" /> </form> </div> <script> function checkLength(e, minLength) { var el, elMsg;
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 4 IMsg=el nextSibling; if(el. value length IMsg innerHTML=' Username must be '+ minLength +'characters or more elMsg. innerHTML=" var elUsername = document. getElementByldcusername') elUsername. add EventListener('blur function(e)i 1, false); </html> (2)完成下述任务。 任务一:上述代码实现的功能是什么?(2分) 任务二:代码el= e target e srcElement是什么意思?(3分) 任务三:代码eMsg= el next Sibling是什么意思?(2分) 任务四: JavaScript事件流的有几种?分别是什么?(3分) 要求 请将上述实验任务的实验结果,填写到实验报告册中。 4、图片验证码的实现 (1)代码2-4-1,如下所示 script language="javascript"> var strsource=明,天日’:科,技,会’更,好,创,新 for( var F0; i<4: i++)i var n=Math. floor(Math. random*strsource length ); 本讲共计6页|当前第4页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 4 页 if (!e) { e = window.event; } el = e.target || e.srcElement; elMsg = el.nextSibling; if (el.value.length < minLength) { elMsg.innerHTML = 'Username must be ' + minLength + ' characters or more'; } else { elMsg.innerHTML = ''; } } var elUsername = document.getElementById('username'); if (elUsername.addEventListener) { elUsername.addEventListener('blur', function(e) { checkLength(e, 5); }, false); } else { elUsername.attachEvent('onblur', function(e) { checkLength(e, 5); }); } </script> </body> </html> （2）完成下述任务。 任务一：上述代码实现的功能是什么？（2 分） 任务二：代码 el = e.target || e.srcElement 是什么意思？（3 分） 任务三：代码 elMsg = el.nextSibling 是什么意思？（2 分） 任务四：JavaScript 事件流的有几种？分别是什么？（3 分） 要求： 请将上述实验任务的实验结果，填写到实验报告册中。 4、图片验证码的实现 （1）代码 2-4-1，如下所示： <script language="javascript"> var img=""; var strsource=['明','天','日','科','技','会','更','好','创','新']; for(var i=0;i<4;i++){ var n=Math.floor(Math.random()*strsource.length);
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 img=img+<img src=Images/checkcode/+n+".gif width=19 height=20> div l innerHTML=img <script> (2)请完成下面的任务 任务一:描述图片验证码程序实现过程。(3分) 任务二:在代码2-4-2的基础上,编写代码实现随机显示背景图片,同时每隔一秒钟,图 片随机变换一次。(7分) 要求 青将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、为保障密码的安全,屏蔽除text类型以外的所有文本内容都不能进行选择操作。 (1)页面页面如图2-1所示 (2)完成下述任务。 任务一:完成页面的编写。 任务二:密码框不允许复制和剪切。 要求 请将完成上述任务的步骤,填写到实验报告册中。 选择页面中的文本内容 用户名:111 肖(U Ctrl+ shift+Z Ctrltx 复制(O Ctrl+ 枯声() Ctrl+V 粘贴为纯文本Ctr+ Shift+V 拼写检查选项(⑤) 审查元素(N) 图2-1注册页面 2、下拉菜单 本讲共计6页当前第5页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 5 页 img=img+"<img src='Images/checkcode/"+n+".gif' width='19' height='20'> "; div1.innerHTML=img; } </script> （2）请完成下面的任务： 任务一：描述图片验证码程序实现过程。（3 分） 任务二：在代码 2-4-2 的基础上，编写代码实现随机显示背景图片，同时每隔一秒钟，图 片随机变换一次。（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、为保障密码的安全，屏蔽除 text 类型以外的所有文本内容都不能进行选择操作。 （1）页面页面如图 2-1 所示。 （2）完成下述任务。 任务一：完成页面的编写。 任务二：密码框不允许复制和剪切。 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、下拉菜单 图 2-1 注册页面