《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> 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 开始计时；单 击“暂停计时”后可以暂停计时。代码如下： 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) ode List List Buy groceries fresh figs 本讲共计6页|当前第2页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 2 页 function sta(){ if(flag==0){ beg(); flag=1; } } function pau(){ clearTimeout(timeID); flag=0; } （2）请完成以下任务： 任务一：代码中 setTimeout 方法和 clearTimeout 方法的作用是什么？（5 分） 任务二：代码中变量 flag 的作用是什么？（2 分） 任务三：window 对象的属性 width、height 与 availWidth、availHeight 分别表示什么含义。（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、列表操作 （1）列表操作 代码 2-2 如下： Node List List Buy groceries fresh figs
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 pine nutshoney balsamic vinegar (2)请完成下面的任务 任务一:编写代码,当单击添加时为上面列表添加一项“ quinoa”。(2分) 任务二:当点击删除时,删除列表中的第一项。(3分) 任务三:定义样式,类名为hot,样式为红色、字体大小为16。(2分) 任务四:当点击添加样式按钮时,将样式添加到最后一项。(3分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、注册表单 (1)代码2-3 Event Listener and Event Object list King New account formmethod=post"action="http://www.example.org/register"> Create a username: Create a password: it"value="sign up function checkLength(e, minLength)i var el. elMs 本讲共计6页|当前第3页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 3 页 pine nuts honey balsamic vinegar （2）请完成下面的任务： 任务一：编写代码，当单击添加时为上面列表添加一项“quinoa”。（2 分） 任务二：当点击删除时，删除列表中的第一项。（3 分） 任务三：定义样式，类名为 hot，样式为红色、字体大小为 16。（2 分） 任务四：当点击添加样式按钮时，将样式添加到最后一项。（3 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、注册表单 （1）代码 2-3 Event Listener and Event Object List King New Account Create a username: Create a password: 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); (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 （2）完成下述任务。 任务一：上述代码实现的功能是什么？（2 分） 任务二：代码 el = e.target || e.srcElement 是什么意思？（3 分） 任务三：代码 elMsg = el.nextSibling 是什么意思？（2 分） 任务四：JavaScript 事件流的有几种？分别是什么？（3 分） 要求： 请将上述实验任务的实验结果，填写到实验报告册中。 4、图片验证码的实现 （1）代码 2-4-1，如下所示： var img=""; var strsource=['明','天','日','科','技','会','更','好','创','新']; for(var i=0;i<4;i++){ var n=Math.floor(Math.random()*strsource.length);
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 img=img+ div l innerHTML=img (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+" "; div1.innerHTML=img; } （2）请完成下面的任务： 任务一：描述图片验证码程序实现过程。（3 分） 任务二：在代码 2-4-2 的基础上，编写代码实现随机显示背景图片，同时每隔一秒钟，图 片随机变换一次。（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、为保障密码的安全，屏蔽除 text 类型以外的所有文本内容都不能进行选择操作。 （1）页面页面如图 2-1 所示。 （2）完成下述任务。 任务一：完成页面的编写。 任务二：密码框不允许复制和剪切。 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、下拉菜单 图 2-1 注册页面
《Web交互开发》实验教学指导/实验二: JavaScript编程应用 6 学院况 风把生就业获奖荣联系我们 栏目 图2-2下拉菜单 (1)完成下述任务。 任务一:使用 JavaScript完成上述下拉菜单的编写 要求 请将完成上述任务的步骤,填写到实验报告册中 七、思考及问答(20分) 1、定义字符串str=“ JavaScript自学视频教程”,如果将其输出为 Javascript,自,学, 视,频,教,程,使用什么方法? 2、 window resize tol30030)和 window. resizeBy(5,x)分别是什么意思? 3、 textcontent和 innerhTML有什么区别? 4、 JavaScript使用哪些关键字来处理异常? 5、如何检测客户端机器上的浏览器类型? 本讲共计6页|当前第6页
《Web 交互开发》实验教学指导 / 实验二 ：JavaScript 编程应用 本讲共计 6 页 | 当前第 6 页 （1）完成下述任务。 任务一：使用 JavaScript 完成上述下拉菜单的编写。 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、定义字符串 str=“JavaScript 自 学 视 频 教 程”，如果将其输出为 JavaScript，自，学， 视，频，教，程，使用什么方法？ 2、window.resizeTo(300,300)和 window.resizeBy（5，x）分别是什么意思？ 3、textContent 和 innerHTML 有什么区别？ 4、JavaScript 使用哪些关键字来处理异常？ 5、如何检测客户端机器上的浏览器类型？ 图 2-2 下拉菜单