《Web交互开发》实验教学指导/实验一: JavaScript编程基础 《Web交互开发》实验教学指导 实验一: JavaScript编程基础 、实验目的(5分) 掌握 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)开发乘法口诀表,并将算式以及计算结果打印在特定的表格中。 (2)程序运行结果如图1-1所示 11*1=1 □1*2=22*2=4 1*3=32*3=63*3=9 1*4=4 1*5=525=103*5=154+5=205+5=25 *6=62*6=1236=184*6=245*6=306*6=36 1*7=72*7143*7=214*7=285*725356*7=427+*7=49 1+91291919995954179651997219+9a1 图1-1九九乘法表 (3)请完成下面的任务 任务一:编写乘法口诀表。(10分) 本讲共计4页当前第1页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 4 页 | 当前第 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）开发乘法口诀表，并将算式以及计算结果打印在特定的表格中。 （2）程序运行结果如图 1-1 所示。 （3）请完成下面的任务： 任务一：编写乘法口诀表。（10 分） 图 1-1 九九乘法表
《Web交互开发》实验教学指导/实验一: JavaScript编程基础 要求 请将上述主要代码,填写到实验报告册中。 2、显示日期和时间 (1)程序运行结果如图1-2所示。 今天是2017年11月14日星期二 图1-2时间显示 (2)代码如下: meta Http-eQuiV="cOntent-tyPe"coNtent="tExt/html; charset=gb2312"> ttfe使用数组显示星期 style (color: #FFFFFF) script language="javascript"> var week, today, i week= new Arra("星期日","星期一","星期二""星期三”"星期四","星期五","星期六"); var year= today. get Full Year(; var month=today. getMonth0-+ var date = today. getDate document. write(""+"今天是"+year+"年 (3)请完成下面的任务 任务一:创建一个包含5个元素的数组,并为每个元素赋值,然后输出数组中的所有元素。(5 任务二:上面的案例中仅包含了年、月、日、星期,请将小时、分钟、秒也显示在网页上。(10 分) 本讲共计4页当前第2页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 4 页 | 当前第 2 页 要求： 请将上述主要代码，填写到实验报告册中。 2、显示日期和时间 （1）程序运行结果如图 1-2 所示。 （2）代码如下： 使用数组显示星期 var week,today,i; 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 个元素的数组，并为每个元素赋值，然后输出数组中的所有元素。（5 分） 任务二：上面的案例中仅包含了年、月、日、星期，请将小时、分钟、秒也显示在网页上。（10 分） 图 1-2 时间显示
《Web交互开发》实验教学指导/实验一: JavaScript编程基础 要求 请将上述任务的主要代码,填写到实验报告册中。 3、酒店信息的显示 (1)程序运行结果如图1-3所示。 TravelWorthy hotel availability Quay rooms: 15 图1-3酒店信息 (2)主要代码 script / Create the template for objects that are hotels function Hotel(name, rooms, booked)i this booked booked return this rooms. this booked / Create two hotel objects ar quayHotel =new Hotel( Quay, 40, 25) ar parkHotel=new Hotel(Park, 120, 77) l/ Update the HTMl for the page ar details quay Hotel. name +rooms details + quay Hotel. checkAvailabilityo var elHotell -document getElement Byld(hotel1") elHotel l textcontent= details var details2= parkHotel. name + rooms details2 + parkHotel check Availability ar elHotel2-document getElement Byld(hotel2); elHote12 textContent details2 (6)完成下述任务 任务一:参考上述代码,创建汽车对象。(10分) 任务二:将汽车对象的属性显示至网页上;(5分) 本讲共计4页当前第3页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 4 页 | 当前第 3 页 要求： 请将上述任务的主要代码，填写到实验报告册中。 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; }; } // 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）完成下述任务。 任务一：参考上述代码，创建汽车对象。（10 分） 任务二：将汽车对象的属性显示至网页上；（5 分） 图 1-3 酒店信息
wb交互开发》实验教学指导/实验一: JavaScript编程基础4 要求: 请将上述实验任务的主要代码,填写到实验报告册中 六、自主实验步骤(20分) 1、验证注册表单内容 (1)表单注册界面如图1-4所示。 单注 用户名 输入用户名 情两次输入密码 1地址; 图1-4表单注册 (2)完成下述任务 任务一:完成注册表单页面的开发。(5分) 任务二:失去焦点时,验证用户名、密码、emai地址不能为空。(5分) 任务三:对 email地址进行校验;(5分) 任务四:密码和确认密码两个框内的内容保持一致。(5分) 要求 将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、Web交互开发工具众多,如何选择合适的工具,作为日常学习工作的主要工具?(4分) 2、 JavaScript对象类型种类有哪些?分别是什么?(4分) 3、 JavaScript引入页面的方式有哪些?(4分) 4、 JavaScript如何自定义对象,举例说明?(4分) 5、 JavaScript如何给数组添加一个新的值?(4分) 本讲共计4页当前第4页
《Web 交互开发》实验教学指导 / 实验一：JavaScript 编程基础 本讲共计 4 页 | 当前第 4 页 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 1、验证注册表单内容 （1）表单注册界面如图 1-4 所示。 （2）完成下述任务。 任务一：完成注册表单页面的开发。（5 分） 任务二：失去焦点时，验证用户名、密码、email 地址不能为空。（5 分） 任务三：对 email 地址进行校验；（5 分） 任务四：密码和确认密码两个框内的内容保持一致。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、Web 交互开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？（4 分） 2、JavaScript 对象类型种类有哪些？分别是什么？（4 分） 3、JavaScript 引入页面的方式有哪些？（4 分） 4、JavaScript 如何自定义对象，举例说明？（4 分） 5、JavaScript 如何给数组添加一个新的值？（4 分） 图 1-4 表单注册