《JavaScript前端开发程序设计》实践教案

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 JavaScript语法基础1

一、实验目的

1、熟练掌握HTML文件中编写JavaScript程序的基本操作。

2、掌握JavaScript的基本数据类型。

3、掌握JavaScript常量的声明和使用。

二、实验仪器：微机（台）

三、实验内容

1、输入以下代码：

思考：

最后的显示结果是什么？后面两行为什么没有显示？如何修改将其显示出来？

2、定义一个未赋值的变量a和一个进行重复赋值的变量b，并输出这两个变量的值。

3、设计一个程序，返回true的数据类型。

4、尝试输出1/0 ，-1/0 ，0/0的结果，并分别指出他们是什么数据类型

5、输出如下的显示结果：

6、分别输出数字456不同进制的输出结果

（选做）编写一个JavaScript程序，效果如图所示。

按要求输入以下代码：补齐techy的赋值，输出如上图所示的结果。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 JavaScript语法基础2

一、实验目的

1、熟练掌握HTML文件中编写JavaScript程序的基本操作。

2、掌握JavaScript变量的声明和使用。

3、熟练掌握运算符和表达式的使用

二、实验仪器：微机（台）

三、实验内容

1、按要求实现如下界面：

其中var a=1;var b=2; var c=3;（alert弹出对话框）

2、按要求输入以下代码：

3、设计一个程序，小高今年22岁，应用条件判断语句，大于18岁就是成年人，否则为未成年人，并输出结果。

4、按要求实现如下界面：（alert弹出对话框）

其中a=1+2*3， b=(1+2)*3

5、输入一个四位年份，判断是否为闰年

能够被4整除但不能被100整除，或者能够被400整除

year%4==0&&year%100!=0||year%400==0

6、将多个字符串进行连接，并将自己的个人信息结果显示在页面中

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 JavaScript流程控制

一、实验目的

1、熟练掌握if else选择语句

2、使用case语句简化嵌套的if选择语句

3、熟练掌握for、while、do……while三种循环语句的使用方法

二、实验仪器：微机（台）

三、实验内容

1、检验一个四位数的年份，判断其是否为闰年。

条件 选择 分支 能够被4整除不能被100整除 或者是能被400整除

2、编写一个程序，要求能在网页上自动根据时间显示不同问候语的程序，要求：

0-4点 显示深夜了，注意身体，该休息了！

4-7点 清晨好，这么早就上网呀？！

7-12点 早上好，一天之际在于晨，又是美好的一天！

12-13点 该吃午饭啦！有什么好吃的？

13-17点 外面的天气很热吧，心静自然凉

17-18点 太阳落山了！快看看夕阳吧!

18-19点 吃过晚饭了吗？

19-23点 一天过的真快！今天过得好吗？

提示：

day=new Date();// 获取当前日期

hr=rs(); //获取当前时间的小时数

显示全部使用弹出提示窗口方式实现。

3（选做）判断今天是星期几

提示：

1）var now=new Date(); //获取系统日期

var day=(); //获取星期

2）使用switch case 语句显示今天是星期几

4、将1-10之间的奇偶数分开，页面呈现方式如下：

5（选做）实时显示1到100内的偶数相加过程

6、编写一个程序，在页面上输出1-1000之间所有能同时被3,5,7整除的整数，并要求每行显示6个这样的数。

7（选做）在页面上输出如下图案：

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验5 JavaScript内置函数

一、实验目的

1、熟练掌握预定义函数的使用

二、实验仪器：微机（台）

三、实验内容

1、使用预定义函数在界面上显示如下结果：

2、判断用户输入的是不是数字，如果是，分别将其转换成浮点数和整数，并显示到网页上。

3、设计密码检测程序，密码输入正确，用警示对话框显示“欢迎访问”，不正确用警示对话框显示“密码不正确，请重新输入”。

4、练习eval函数的使用，输入如下代码，总结出该函数的作用。

显示效果图如下：

选做：计算个人所得税（if else 练习）

 纳税起点=5000元

 月应纳税所得额 = 个人月收入-社会保险-纳税起点元

 月应纳税额 = 月应纳税所得额×适用税率-速算扣除数

 个人所得税税率表工资、薪金所得适用



级数 全月应纳税所得额 税率 速算扣除数 元

1 不超过3000元的 3 0

2 超过3000元至12000元的部分 10 210

3 超过12000元至25000元的部分 20 1410

4 超过25000元至35000元的部分 25 2660

5 超过35000元至55000元的部分 30 4410

6 超过55000元至80000元的部分 35 7160

7 超过80000元的部分 45 15160

举例说明：

速算扣除数是为了方便进行计算而事先计算好的数值，例如纳税所得额为4000元，在3000至12000元的区间范围使用10%的税率，另外3000元使用3%的税率这样总的纳税额的计算方法应该是

(4000-3000)*10%+3000*3% =4000*10%-3000*7% =4000*10%-210

再比如，我们的纳税所得额是17000元，它的计算方法是

（17000-12000）*20%+(12000-3000)*10%+3000*3%=17000*20%-12000*10%-300+90=17000*20%-14

10

可以知道，可以直接用月纳税所得额乘以当前税率然后减去一个常数获得纳税额。这个常数就是速算扣除数。

要求：

 输入参数采用prompt输入框

 输出结果通常有两种办法一种是用方法输出到文档中，还有一

种是用alert方法弹出窗口。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 对象编程

一、实验目的

1、熟练掌握对象的创建和引用

2、掌握常用的内置对象Date对象、Array对象

二、实验仪器：微机（台）

三、实验内容

1、显示如图格式所示的时间：

要求：

 显示“现在是xxxx年xx月xx日xx：xx:xx（星期x）,欢迎您的访问！”

 注意时间是两位数，星期几是大写

2、输入自己的出生日期，然后计算从出生到现在的天数。Date的方法getTime得到的是毫秒数，需要进行转换成天。

3、计算求 1+2+3+…100000 之和所需要的运行时间（毫秒数）

4、设计一个程序，使用一个数组接收7门课程的成绩，然后在页面上将这七门课的成绩排序（假定成绩都大于10分），显示其总成绩和平均分，并列出小于60的成绩。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 访问HTML DOM对象

一、实验目的

1、掌握访问HTML DOM对象的方法

二、实验仪器：微机（台）

三、实验内容

1、在姓名后面输入自己的姓名，当点击“欢迎您”按钮时弹出如下提示。

2、点击确认按钮，判断密码和确认密码是否输入一致 。

（选做）编写JavaScript脚本来实现页面中的复选框全选或全不选效果。

实现思路：

（1） 使用document对象的getElementsByName（）方法获得一组复选框的集合，其前提条件是：页面上的多个复选框名称必须相同。

（2） 根据获得的复选框的个数，循环判断获得的每一个复选框的checked属性，从而实现页面中的复选框全选或全不选的效果。

(选做)自选五张图片，实现图片轮播。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 浏览器对象1

一、实验目的

1、熟练掌握BOM对象

二、实验仪器：微机（台）

三、实验内容

1、请点击上面的“开始计数”按钮来启动计数器。输入框会一直进行计时，从 0 开始。点击“停止计数”按钮可以终止计数。

2、设置时间提醒器

1）要求每隔5秒在页面上弹出实时时间的提醒对话框

2）页面上同时设置取消定时器的链接

3、2秒钟后关闭本窗口。

4、页面显示实时变化的时钟，格式自定。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 浏览器对象二

一、实验目的

1、熟练掌握frame对象，history对象，location对象，navigator对象

二、实验仪器：微机（台）

三、实验内容

1、编写代码显示你的浏览器的如下信息：

2、实现如下所示的静态页面，然后利用location对象编写脚本，点击按钮，弹出第一题的页面

3、在第二题上加一个超链接，链接到第三题，第三题上如图2所示，点击后退按钮，能够退到第二题的页面上。

4、用户登陆后，制作跳转页面，登录到之前的页面

5、写出实现页面跳转的几种方法。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 事件驱动编程

一、实验目的

1、熟练掌握事件绑定

2、学会使用事件对象

二、实验仪器：微机（台）

三、实验内容

1、采用事件监听的形式，实现点击输入框弹出“请正确输入您要输入的内容”。

2、设计一个页面，在该页面上有一个“发送”按钮，当单击这个按钮时将显示一个警示对话框显示“发送完毕”（尝试使用多种方式来实现这一效果）。

3、尝试用几种方式完成，页面加载完成 自动弹出“欢迎您”。

4、输入如下的程序，解释一下为什么不执行？怎样修改就可以了

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 处理鼠标、键盘事件

一、实验目的

1、学会处理鼠标事件、键盘事件

二、实验仪器：微机（台）

三、实验内容

1、编写脚本，当鼠标在超链接上移动时，窗口上显示鼠标指针在窗口中的坐标

2、设计一个含有表单的页面，并且在表单上放置一个文本框，当鼠标在页面上移动时，鼠标坐标将显示在这个文本框中。

3、取消 Ctrl+A 选中全部页面内容的操作

4、编写脚本，在document对象的onkeydown事件处理程序中判断用户是否按下shift键

5、页面添加一张图片，当鼠标划过时更换另一张图片。

四、实验要求

认真上机，按照实验内容完成实验报告。

实验报告

姓名：__________ 学号：______ 班级：___________

实验成绩：_______

实验 操作表单

一、实验目的

1、掌握操作表单元素的方法

2、掌握表单的submit和reset事件、focus和blur事件、change和select事件、error事件

二、实验仪器：微机（台）

三、实验内容

1、设计如图所示的界面，输入用户名和密码后，显示欢迎对话框。

2、设计如图所示的界面，输入X的值，并进行校验，无效重新输入

3、设计一个表单，可以让用户输入姓名、年龄，并编写程序对年龄有效性检验（16岁到40岁之间），姓名不能为空，数据合格后提交。

4、(选做)设计一个表单，如图1所示，当单击“显示提交”按钮时，会显示图2的信息，即将您所填写的内容显示出来。

5、点击按钮，更换背景颜色

6、验证年龄，尝试在里面设置年龄的范围为10-100，在范围内弹出提示

如下函数为判断年龄是否在这个范围内。

7、点击“禁用”，文本不可输入，点击“启用”，文本可以输入，并且获得焦点

8、设计如下所示的表单，当点击输入姓名时，后面有提示，如下所示

四、实验要求

认真上机，按照实验内容完成实验报告。