河南中医药大学：《Web交互开发》实验指导_03.实验三：JavaScript高级应用[JH-2018版]

《Web交互开发》实验教学指导/实验三: JavaScript高级应用 《Web交互开发》实验教学指导 实验三: JavaScript高级应用 、实验目的(5分) 1、掌握 JavaScript编程思路 2、掌握DOM的编程方法; 3、掌握 Window的编程方法 4、掌握 JavaScript事件的使用; 二、实验环境(5分) 1、 Windows xp/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成网页中节点的插入 2、完成定时器的开发 3、完成注册页面的编写 4、完成进度条的编写 四、实验原理(5分) 1、DOM编程方法 2、 Window编程方法; 3、 JavaScript事件的使用 五、实验步骤(40分) 1、在网页中插入节点 (1)对于DOM的操作有很多,包括在网页中创建节点、插入节点、复制节点、删除节点等, 本例中完成网页节点的创建和插入。 (2)创建节点程序代码如sy3-1所示 var hl=document. create Element(h1"); var txt=document. createTextNode "Hello, World") hI. append Child(txt) document body. appendChild(h1); 本讲共计3页|当前第1页

《Web 交互开发》实验教学指导 / 实验三：JavaScript 高级应用 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验三：JavaScript 高级应用 一、实验目的（5 分） 1、掌握 JavaScript 编程思路； 2、掌握 DOM 的编程方法； 3、掌握 Window 的编程方法； 4、掌握 JavaScript 事件的使用； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成网页中节点的插入； 2、完成定时器的开发； 3、完成注册页面的编写； 4、完成进度条的编写。 四、实验原理（5 分） 1、DOM 编程方法； 2、Window 编程方法； 3、JavaScript 事件的使用。 五、实验步骤（40 分） 1、在网页中插入节点 （1）对于 DOM 的操作有很多，包括在网页中创建节点、插入节点、复制节点、删除节点等， 本例中完成网页节点的创建和插入。 （2）创建节点程序代码如 sy3-1 所示。 function createChild(){ var h1=document.createElement("h1"); var txt=document.createTextNode("Hello,World"); h1.appendChild(txt); document.body.appendChild(h1); }

《Web交互开发》实验教学指导/实验三: JavaScript高级应用 (3)请完成下面的任务 任务一:在网页的文本框中插入需要插入的文本,然后通过单击“插入”按钮将文本插入到网 页中,如图3-1所示(10分) Javascript 在上面插入节点 输入文本:Jac插入 图3-1插入文本 要求 请将上述主要代码,填写到实验报告册中。 2、定时器 (1) window对象的方法有很多,包括 alert()、 confirm()、 settimeout()、 status()等, 学习这些方法的使用: (2)请完成下面的任务 任务一:完成计时器的编写,如图3-2所示,点击“开始计时”按钮。输入框会从0开始 直进行计时,点击“暂停计时”可停止计时。(10分) 「开始计时!「暂停计时! 图3-2定时器 要求: 请将上述任务的主要代码,填写到实验报告册中 3、用户注册界面 (1)制作一个简单的用户注册界面,应用表单事件的失去焦点事件,判断用户输入的密码 判断密码是否符合要求。当用户名或密码为空时提示,提示请输入用户名或密码,当用户名或密码 长度小于6时,提示用户名或密码长度不能小于6,否则提示注册成功。 (2)完成下述任务。 任务一:编写程序实现上述功能。(10分) 要求: 请将上述实验任务的主要代码,填写到实验报告册中。 4、进度条 (1)实现进度条的显示功能,进度条在制定的时间内增加20%的进度,直到增长到100%为 止 本讲共计3页当前第2页

《Web 交互开发》实验教学指导 / 实验三：JavaScript 高级应用 本讲共计 3 页 | 当前第 2 页 （3）请完成下面的任务： 任务一：在网页的文本框中插入需要插入的文本，然后通过单击“插入”按钮将文本插入到网 页中，如图 3-1 所示（10 分） 要求： 请将上述主要代码，填写到实验报告册中。 2、定时器 （1）window 对象的方法有很多，包括 alert（）、confirm（）、setTimeout（）、status（）等， 学习这些方法的使用； （2）请完成下面的任务： 任务一：完成计时器的编写，如图 3-2 所示，点击“开始计时”按钮。输入框会从 0 开始一 直进行计时，点击“暂停计时”可停止计时。（10 分） 要求： 请将上述任务的主要代码，填写到实验报告册中。 3、用户注册界面 （1）制作一个简单的用户注册界面，应用表单事件的失去焦点事件，判断用户输入的密码， 判断密码是否符合要求。当用户名或密码为空时提示，提示请输入用户名或密码，当用户名或密码 长度小于 6 时，提示用户名或密码长度不能小于 6，否则提示注册成功。 （2）完成下述任务。 任务一：编写程序实现上述功能。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 4、进度条 （1）实现进度条的显示功能，进度条在制定的时间内增加 20%的进度，直到增长到 100%为 止。 图 3-1 插入文本 图 3-2 定时器

《Web交互开发》实验教学指导/实验三: JavaScript高级应用 (2)完成下述任务。 任务一:编写程序完成进度条的显示,如图3-3所示。(10分) 图3-3进度条 要求 请将上述实验任务的主要代码,填写到实验报告册中。 六、自主实验步骤(20分) 1、编写tab选项卡 (1)编写选项卡,当鼠标移动上去,显示相应选项卡下的数据,如图3-4所示。 动漫电视剧电影娱乐记录 艮魂 智龙迷城 黑色四叶草 我的英雄学 图3-4tab选项卡 (2)完成下述任务 任务一:编写程序,选项卡。(20分) 要求: 请将完成上述任务的步骤,填写到实验报告册中 七、思考及问答(20分) 1、 window resize To(300,300)和 window. resizeBy(5,x)分别是什么意思?(5分) 2、 textcontent和 innerHTML有什么区别?(5分) 3、JS如何检测客户端机器上的浏览器类型?(5分) 4、 JavaScript使用哪些关键字来处理异常?(5分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验三：JavaScript 高级应用 本讲共计 3 页 | 当前第 3 页 （2）完成下述任务。 任务一：编写程序完成进度条的显示，如图 3-3 所示。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 1、编写 tab 选项卡 （1）编写选项卡，当鼠标移动上去，显示相应选项卡下的数据，如图 3-4 所示。 （2）完成下述任务。 任务一：编写程序，选项卡。（20 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、window.resizeTo(300,300)和 window.resizeBy（5，x）分别是什么意思？（5 分） 2、textContent 和 innerHTML 有什么区别？（5 分） 3、JS 如何检测客户端机器上的浏览器类型？（5 分） 4、JavaScript 使用哪些关键字来处理异常？（5 分） 图 3-3 进度条 图 3-4 tab 选项卡