《Web交互开发》实验教学指导/实验一: JavaScript编程基础 《Web交互开发》实验教学指导 实验一: JavaScript编程基础 、实验目的(5分) 1、掌握 JavaScript编程语法 2、掌握 JavaScript变量的定义方法 3、掌握 JavaScript数据类型 4、掌握函数的创建及使用 5、掌握自定义对象的创建以及使用。 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成乘法口诀表 2、完成网页中日期和时间的显示; 3、完成酒店信息的显示。 四、实验原理(5分) 1、 Netbeans的安装和使用; 2、 JavaScript语法及数据类型; 3、 JavaScript的函数的定义和使用 4、 JavaScript对象的定义和使用。 五、实验步骤(40分) 1、乘法口诀表 (1)利用for循环语句开发一个乘法口诀表,并将算式以及计算结果打印在特定的表格 中 (2)程序运行结果如图1-1所示。 1*1=1 □1*442*483*4124416 103*5=154+5=205+5=25 1*6=62*6123*6=184*6=245*6=306*6=36 11*8=82+8=163+8=244+8=325+8=406+8=487+8=568米8=64 1*9=929=183*9=274*9=365*9=456*9=5479=638*9729*9=81 图1-1九九乘法表 (3)代码如下所示: 本讲共计5页当前第1页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 5 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验一：JavaScript 编程基础 一、实验目的（5 分） 1、掌握 JavaScript 编程语法； 2、掌握 JavaScript 变量的定义方法； 3、掌握 JavaScript 数据类型； 4、掌握函数的创建及使用； 5、掌握自定义对象的创建以及使用。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成乘法口诀表； 2、完成网页中日期和时间的显示； 3、完成酒店信息的显示。 四、实验原理（5 分） 1、NetBeans 的安装和使用； 2、JavaScript 语法及数据类型； 3、JavaScript 的函数的定义和使用； 4、JavaScript 对象的定义和使用。 五、实验步骤（40 分） 1、乘法口诀表 （1）利用 for 循环语句开发一个乘法口诀表，并将算式以及计算结果打印在特定的表格 中。 （2）程序运行结果如图 1-1 所示。 （3）代码如下所示： 图 1-1 九九乘法表
《Web交互开发》实验教学指导/实验一: JavaScript编程基础 title→>乘法口诀表 for(var Fl; ") document. write() for(var j=1 j ") document. write(j+*+i+="+i*j) script (4)请完成下面的任务 任务一:对代码进行逐行解释。(5分) 任务二:定义长方形的宽、高,然后计算长方形的面积,并将计算结果输出到网页中。(5分) 要求: 请将上述代码中每行代码的含义,填写到实验报告册中 2、显示日期和时间 (1)程序运行结果如图1-2所示。 今天是2017年11月14日星期二 图1-2时间显示 2)代码如下: meta Http-EquiV="ContenT-tyPe"cOntenT="Text/html; charset=gb2312> stylel ( color: #FFFFFFi script language="javascript"> ek, today 本讲共计5页当前第2页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 5 页 | 当前第 2 页 （4）请完成下面的任务： 任务一：对代码进行逐行解释。（5 分） 任务二：定义长方形的宽、高，然后计算长方形的面积，并将计算结果输出到网页中。（5 分） 要求： 请将上述代码中每行代码的含义，填写到实验报告册中。 2、显示日期和时间 （1）程序运行结果如图 1-2 所示。 （2）代码如下： 使用数组显示星期 var week,today,i; 乘法口诀表 for (var i=1;i"); document.write(""); for (var j=1;j"); document.write(j+"*"+i+"="+i*j); document.write(""); } document.write(""); document.write(""); } 图 1-2 时间显示
《Web交互开发》实验教学指导/实验一: JavaScript编程基础 wek= new Array("星期日","星期一","星期二","星期三","星期四""星期五"”"星期六"), day. get Day (; onth=today. getMonth(+1 document. write(""+"今天是"+year+"年 onth+"月"+date+"日"+week[+""), pan CLASs="style1"> (3)请完成下面的任务 任务一:创建一个包含5个元素的数组,并为每个元素赋值,然后使用for循环语句遍历 输出数组中的所有元素。(5分) 任务二:上面的案例中仅包含了年、月、日、星期,请将小时、分钟、秒也显示在网页上 (5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 3、酒店信息的显示 (1)程序运行结果如图1-3所示。 TravelWorthy hotel availability 图1-3酒店信息 (2)主要代码 / Create the template for objects that are hotels function Hotel(name, rooms, booked)i this checkAvailability= function(( return this rooms. this booked 本讲共计5页|当前第3页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 5 页 | 当前第 3 页 week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); today = new Date(); i = today.getDay(); var year = today.getFullYear(); var month = today.getMonth()+1; var date = today.getDate(); document.write(""+"今天是"+year+"年 "+month+"月"+date+"日 "+week[i]+""); （3）请完成下面的任务： 任务一：创建一个包含 5 个元素的数组，并为每个元素赋值，然后使用 for 循环语句遍历 输出数组中的所有元素。（5 分） 任务二：上面的案例中仅包含了年、月、日、星期，请将小时、分钟、秒也显示在网页上。 （5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、酒店信息的显示 （1）程序运行结果如图 1-3 所示。 （2）主要代码 // Create the template for objects that are hotels function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; this.checkAvailability = function() { return this.rooms - this.booked; }; } 图 1-3 酒店信息
wb交互开发》实验教学指导/实验一: JavaScript编程基础4 / Create two hotel objects ar quay Hotel = new Hotel( Quay, 40, 25) var parkHotel -new Hotel(Park, 120, 77) //Update the hTml for the page ar details =quayHotel name +rooms details + quay Hotel check Availability; ar elHotell =document getElement Byld(hotell,) elHotel l textcontent= details ar details2=park Hotel name+rooms: details2 + parkHotel checkAvailabilityo ar elHotel2-document getElement Byld( hotel2) elHotel2 textcontent= details 2 (6)完成下述任务。 任务一:什么是对象、属性和方法。(5分) 任务二:关键词this是什么意思。(5分) 任务三:为上述酒店对象再添加两个属性,表示等级和游泳池情况;(5分) 任务四:删除游泳池情况。(5分) 要求 请将上述实验任务的实验结果,填写到实验报告册中。 六、自主实验步骤(20分) 1、验证注册表单内容 (1)表单注册界面如图1-4所示。 用户名 输入用户名 请输入密码 确认密 请次输入密码 1均址 请输入正确他1 图1-4表单注册 (2)完成下述任务。 本讲共计5页|当前第4页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 5 页 | 当前第 4 页 // Create two hotel objects var quayHotel = new Hotel('Quay', 40, 25); var parkHotel = new Hotel('Park', 120, 77); // Update the HTML for the page var details1 = quayHotel.name + ' rooms: '; details1 += quayHotel.checkAvailability(); var elHotel1 = document.getElementById('hotel1'); elHotel1.textContent = details1; var details2 = parkHotel.name + ' rooms: '; details2 += parkHotel.checkAvailability(); var elHotel2 = document.getElementById('hotel2'); elHotel2.textContent = details2; （6）完成下述任务。 任务一：什么是对象、属性和方法。（5 分） 任务二：关键词 this 是什么意思。（5 分） 任务三：为上述酒店对象再添加两个属性，表示等级和游泳池情况；（5 分） 任务四：删除游泳池情况。（5 分） 要求： 请将上述实验任务的实验结果，填写到实验报告册中。 六、自主实验步骤（20 分） 1、验证注册表单内容 （1）表单注册界面如图 1-4 所示。 （2）完成下述任务。 图 1-4 表单注册
《Web交互开发》实验教学指导/实验一: JavaScript编程基础 任务一:完成注册表单页面的开发。(5分) 任务二:失去焦点时,验证用户名、密码、 email地址不能为空。(5分) 任务三:对emai地址进行校验;(5分) 任务四:密码和确认密码两个框内的内容保持一致。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中 七、思考及问答(20分) 1、Web交互开发工具众多,如何选择合适的工具,作为日常学习工作的主要工具?(4 对象类型种类有哪些?分别是什么?(4分) 3、 JavaScript引入页面的方式有哪些?(4分) 4、 JavaScript如何自定义对象,举例说明?(4分) 5、 JavaScript如何给数组添加一个新的值?(4分) 本讲共计5页|当前第5页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 5 页 | 当前第 5 页 任务一：完成注册表单页面的开发。（5 分） 任务二：失去焦点时，验证用户名、密码、email 地址不能为空。（5 分） 任务三：对 email 地址进行校验；（5 分） 任务四：密码和确认密码两个框内的内容保持一致。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、Web 交互开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？（4 分） 2、JavaScript 对象类型种类有哪些？分别是什么？（4 分） 3、JavaScript 引入页面的方式有哪些？（4 分） 4、JavaScript 如何自定义对象，举例说明？（4 分） 5、JavaScript 如何给数组添加一个新的值？（4 分）