实验一JavaScript编程基础

《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）代码如下所示：

本讲共计5页 | 当前第1页

图1-1 九九乘法表

《Web交互开发》实验教学指导 / 实验一：JavaScript编程基础

（4）请完成下面的任务：

任务一：对代码进行逐行解释。（5分）

任务二：定义长方形的宽、高，然后计算长方形的面积，并将计算结果输出到网页中。（5分） 要求： 请将上述代码中每行代码的含义，填写到实验报告册中。 2、显示日期和时间

（1）程序运行结果如图1-2所示。

（2）代码如下： （3）请完成下面的任务：

任务一：创建一个包含5个元素的数组，并为每个元素赋值，然后使用for循环语句遍历输出数组中的所有元素。（5分）

任务二：上面的案例中仅包含了年、月、日、星期，请将小时、分钟、秒也显示在网页上。（5分）

要求： 请将上述任务的操作方法，填写到实验报告册中。 3、酒店信息的显示

（1）程序运行结果如图1-3所示。

（2）主要代码

（6）完成下述任务。

任务一：什么是对象、属性和方法。（5分） 任务二：关键词this是什么意思。（5分）

任务三：为上述酒店对象再添加两个属性，表示等级和游泳池情况；（5分） 任务四：删除游泳池情况。（5分）

要求： 请将上述实验任务的实验结果，填写到实验报告册中。 六、自主实验步骤（20分）

1、验证注册表单内容

（1）表单注册界面如图1-4所示。

（2）完成下述任务。

本讲共计5页 | 当前第4页

图1-4 表单注册

《Web交互开发》实验教学指导 / 实验一：JavaScript编程基础

任务一：完成注册表单页面的开发。（5分）

任务二：失去焦点时，验证用户名、密码、email地址不能为空。（5分） 任务三：对email地址进行校验；（5分）

任务四：密码和确认密码两个框内的内容保持一致。（5分）

要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20分）

1、Web交互开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？（4分）

2、JavaScript对象类型种类有哪些？分别是什么？（4分） 3、JavaScript引入页面的方式有哪些？（4分） 4、JavaScript如何自定义对象，举例说明？（4分） 5、JavaScript如何给数组添加一个新的值？（4分）

本讲共计5页 | 当前第5页