河南中医药大学：《Web交互开发》实验指导_02.实验二：JavaScript编程语句[JH-2018版]

《Web交互开发》实验教学指导/实验二: JavaScript编程语句 《Web交互开发》实验教学指导 实验二: JavaScript编程语句 、实验目的(5分) 1、掌握 JavaScript编程语句的种类 2、掌握 JavaScript顺序语句; 3、掌握 JavaScript条件语句; 4、掌握 JavaScript循环语句; 二、实验环境(5分) 1、 Windows xp/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成文本框信息的提示 2、完成问候语程序的编写 3、完成100以内的偶数的和 4、完成五行星阵的编写。 四、实验原理(5分) 1、 JavaScript顺序语句 2、 JavaScript条件语句 3、 JavaScript循环语句。 五、实验步骤(40分) 1、利用复选框选择爱好 (1)利用复选框让用户选择其爱好,用 alert对话框输出用户所选的内容。 (2)程序代码如s2-1所示。 function fun GolF var chkA=document. forml. chkAH for( var F=0; i 本讲共计4页当前第1页

《Web 交互开发》实验教学指导 / 实验二：JavaScript 编程语句 本讲共计 4 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验二：JavaScript 编程语句 一、实验目的（5 分） 1、掌握 JavaScript 编程语句的种类； 2、掌握 JavaScript 顺序语句； 3、掌握 JavaScript 条件语句； 4、掌握 JavaScript 循环语句； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成文本框信息的提示； 2、完成问候语程序的编写； 3、完成 100 以内的偶数的和； 4、完成五行星阵的编写。 四、实验原理（5 分） 1、JavaScript 顺序语句； 2、JavaScript 条件语句； 3、JavaScript 循环语句。 五、实验步骤（40 分） 1、利用复选框选择爱好 （1）利用复选框让用户选择其爱好，用 alert 对话框输出用户所选的内容。 （2）程序代码如 sy2-1 所示。 function funGo1(){ var chkA=document.form1.chkAH; for(var i=0;i

《Web交互开发》实验教学指导/实验二: JavaScript编程语句 篮球 足球排球 乒乓球 orn (3)程序运行效果如图2-1所示。 c合me∥D方方教字为果技术a日 口篮球 乒乓球此网页显示 图2-1选择兴趣爱好 (4)请完成下面的任务: 任务一:要求在文本框中输入用户名,点击“注册”按钮进行提交。当文本框为空时,弹出提 示信息“null”,当不为空时,弹出用户名,如图2-2所示(10分) 姓名 注册里置 图22文本框 要求 请将上述主要代码,填写到实验报告册中 2、问候语程序 (1)编制一个实现能自动根据时间显示网页上不同问候语的程序hhtm,要求 5点以后~8点以前显示早上好! 12点以前显示上午好!; 18点以前显示下午好! 21点以前显示晚上好! 23点以前显示祝你晚安! 23点~5点以前显示网虫:该休息了,明天还有课呢!。 本讲共计4页|当前第2页

《Web 交互开发》实验教学指导 / 实验二：JavaScript 编程语句 本讲共计 4 页 | 当前第 2 页 篮球 足球 排球 乒乓球 （3）程序运行效果如图 2-1 所示。 （4）请完成下面的任务： 任务一：要求在文本框中输入用户名，点击“注册”按钮进行提交。当文本框为空时，弹出提 示信息“null”，当不为空时，弹出用户名，如图 2-2 所示（10 分） 要求： 请将上述主要代码，填写到实验报告册中。 2、问候语程序 （1）编制一个实现能自动根据时间显示网页上不同问候语的程序 hi.html，要求： 5 点以后~8 点以前显示早上好！； 12 点以前显示上午好！； 18 点以前显示下午好！； 21 点以前显示晚上好！； 23 点以前显示祝你晚安！ 23 点~5 点以前显示网虫：该休息了，明天还有课呢！。 图 2-1 选择兴趣爱好 图 2-2 文本框

《Web交互开发》实验教学指导/实验二: JavaScript编程语句 (2)请完成下面的任务 任务一:完成上面要求的程序的编写。(10分) 要求 请将上述任务的主要代码,填写到实验报告册中 3、计算100以内所有偶数的和 (1)计算100以内所有偶数的和有很多中方法,请用 continue语句进行计算。 (2)完成下述任务。 任务一:编写程序实现100以内所有偶数的和的计算。(10分) 要求 请将上述实验任务的主要代码,填写到实验报告册中。 4、完成五行星阵的编写 (1)完成如图所示的五行星阵的编写。 (2)完成下述任务。 任务一:编写程序完成如图2-3所示五行星阵。(10分) ★★★★★ 图2-3五行星阵 要求 请将上述实验任务的主要代码,填写到实验报告册中 六、自主实验步骤(20分) 1、4位数字验证码 (1)随机生成一个四位数字的验证码,并显示在网页上 (2)完成下述任务。 任务一:编写程序,实现验证码的生成。(10分) 要求 请将完成上述任务的步骤,填写到实验报告册中 2、判断用户是否输入了用户名和密码 (1)编写表单并进行判断,当用户名或密码为空时,提示输入用户名或密码,否则,可以提 交表单,如图24所示。 本讲共计4页当前第3页

《Web 交互开发》实验教学指导 / 实验二：JavaScript 编程语句 本讲共计 4 页 | 当前第 3 页 （2）请完成下面的任务： 任务一：完成上面要求的程序的编写。（10 分） 要求： 请将上述任务的主要代码，填写到实验报告册中。 3、计算 100 以内所有偶数的和 （1）计算 100 以内所有偶数的和有很多中方法，请用 continue 语句进行计算。 （2）完成下述任务。 任务一：编写程序实现 100 以内所有偶数的和的计算。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 4、完成五行星阵的编写 （1）完成如图所示的五行星阵的编写。 （2）完成下述任务。 任务一：编写程序完成如图 2-3 所示五行星阵。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 1、4 位数字验证码 （1）随机生成一个四位数字的验证码，并显示在网页上。 （2）完成下述任务。 任务一：编写程序，实现验证码的生成。（10 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、判断用户是否输入了用户名和密码 （1）编写表单并进行判断，当用户名或密码为空时，提示输入用户名或密码，否则，可以提 交表单，如图 2-4 所示。 图 2-3 五行星阵

wb交互开发》实验教学指导/实验二: JavaScript编程语句4 用尸登录 用户名 「登录 图2-4对用户名和密码进行检验 (2)完成下述任务。 任务一:编写程序,实现表单的验证。(10分) 要求: 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、 JavaScript中流程控制语句有哪些?(5分) 2、 JavaScript中 continue与 break有啥区别?(5分) 3、do. while语句与 while语句的区别?(5分) 4、定义字符串st=“ JavaScript自学视频教程”,如果将其输出为 JavaScript,自,学 视,频,教,程,使用什么方法?(5分) 本讲共计4页当前第4页

《Web 交互开发》实验教学指导 / 实验二：JavaScript 编程语句 本讲共计 4 页 | 当前第 4 页 （2）完成下述任务。 任务一：编写程序，实现表单的验证。（10 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、JavaScript 中流程控制语句有哪些？（5 分） 2、JavaScript 中 continue 与 break 有啥区别？（5 分） 3、do...while 语句与 while 语句的区别？（5 分） 4、定义字符串 str=“JavaScript 自 学 视 频 教 程”，如果将其输出为 JavaScript，自，学， 视，频，教，程，使用什么方法？（5 分） 图 2-4 对用户名和密码进行检验