JavaScript实验

长春理工大学光电信息学院

《Javascript程序设计》实验指导书

孙颖馨编写

信息工程分院计算机实验中心

实验一

实验目的：掌握在在IE中调试JavaScript的方法和步骤。学会使用Microsoft 脚本编辑器。

实验要求：启动Microsoft脚本编辑器，在HTML文档中插入

在生成的代码中，是HTML 注释，而//是JavaScript的注释。使用这种注释标记的作用在于使较旧的不支持脚本的浏览器也能正确显示该文档的其他部分。

( 3 ）在之间的空行中可以编写任意的JavaScript语句，如

必须注意的是，当输入对象名和句点“document.”时，Microsoft 脚本编辑器将自动弹出一个快捷菜单，提示document 对象所拥有的方法和属性。这种效果可以使编程人员避免写出错误的方法名或属性名。

3 ．使用Microsoft 脚本编样器的帮助系统

JavaScript 是基于对象的脚本语言，它含有许多内置对象，而每个对象又含有大量的方法和属性。对于这些信息，编程人员没有必要完全记住，他们可以随时通过Microsoft 脚本编辑器的帮助系统查到所需信息的详细描述。

要使用Microsoft 脚本编辑器的帮助系统，可在Microsoft 脚本编辑器中选择“帮助”菜单的“Microsoft脚本编辑器帮助”命令，这时将出现一个

“Miscrosoft Script Editor 帮助”窗口，如图1-4所示。

图1-4 Miscrosoft Script Editor 帮助

Microsoft 脚本编辑器的帮助系统提供了对脚本编辑器、HTML 、JScript 和VBScript 的详细描述。如果要了解JavaScript的有关描述，可在“Miscrosoft Script Editor 帮助”窗口左部“目录”选项卡中通过单击来展开“Jscript 帮助”项目，随着左部项目的选择，窗口右部将显示左部所选项目的详细描述。

实验二

实验目的：掌握HTML语言的网页制作技术。

实验要求：首先制作一个名为：职工.html的页面，并以此为下一个实验的超链接部分。

实验内容：

1 ．设计一个含有如下表格的HTML文档,命名为职工.html。

2. 制作一个框架集网页，它把浏览器工作区分为左右两个框架，左框架的宽度为30%，且显示一个含有以下三个超链接的HTML文档。

在右框架中浏览中大主页

在新窗口中浏览中大主页

在当前框架浏览中大主页

要求：

●当单击超链接“在右框架中浏览中大主页”时，将在右框架打开中大主页:职工.html;

●当单击超链接“在新窗口中浏览中大主页”时，将打开一个新窗口显示中大主页:职工.html;

●当单击超链接“在当前框架浏览中大主页”时，将在当前框架打开中大主页:职工.html。

实验三

实验目的：1．掌握使用Javascript的基础语法及内置对象编写动态Web页的方法。

2. 领会动态网页技术的概念、类型，熟悉HTML技术的构成。

实验要求：通过使用Javascript的基本语法及内置对象完成简单的Web页面。实验内容：

使用JavaScript语言编制具有以下功能的网页。

1）编制一个实现九九乘法表功能的程序/.htm，要求显示效果如下：

1*1=1

2*1=1 2*2=4

………

9*1=1 9*2=18 9*3=27………9*9=81

提示：使用for（初始化；条件；增量）编程，窗口输出使用document.write( )完成。并且document.writeln( )要放在：document.write(“

”)，document.write(“

2）编制一个实现能自动根据时间显示网页上不同问候语的程序hi.htm，要求： 5点以后～8点以前显示早上好！；

12点以前显示上午好！；

18点以前显示下午好！；

21点以前显示晚上好！；

23点以前显示祝你晚安！；

23点～5点以前显示网虫：该休息了，明天还有课呢！。

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

提示：日期对象Date一定要注意字母的大小写，否则将出现错误，例如： var today=new Date();若键入为var today=new date();将出错。

Javascript中switch每个case后面只能有一个常量表达式。

实验四

实验目的：掌握使用Javascript实现面向对象编程的方法。

实验要求：完成显示程序运行时间的Web页面，及返回一年中天数的页面。

实验内容：

1.编写一个Web页面，实现计算求1+2+3+…+10000之和所需要的运行时间（毫秒数）。

执行效果如下图所示：

2.设计一个函数DayOfYear（d），它接收一个日期参数d，返回一个该日期是所在年份的第几天，如DayOfYear（Date(2000,2,8)）的返回值是39.

提示：①定义一个数组months=newArray（31，28，31，30，31，30，31，31， 30，31，30，31）记录每个月有多少天。

②定义一个辅助函数IsLeapYear（y）判断某个年份是否是闰年，以确定2月份的天数是28还是29。

注：只计算2000年2月8日的天数即可，不必使用页面传递参数及文本框等动态输入。

实验五

实验目的：掌握使用Javascript正则表达式编程的方法。

实验要求：1.编写出验证正确用户名的Web页面；

2.根据输入数据显示区号位置的页面。

实验内容：

1.某网站的注册用户名要求如下：

⑴由大小写字母、数字和下划线组成；

⑵第一个字符为字母或下划线，不能是数字；

⑶长度不能少于6位。

参照教材59页例题，编写出验证正确用户名的Web页面。

2.编写一个页面完成以下功能：

在输入框中如果输入“010”，则弹出提示框显示“这是个北京的号码”；如果输入“020”，则填出提示框显示“这是个上海的号码”；如果输入“020”，则弹出提示框显示“这是个上海的号码”；如果输入“0431”，则弹出提示框显示“这是个长春的号码”；如果输入其它号码，则弹出提示框显示“这是另外的号码”。

输入格式例如：010-********

实验六

实验目的：掌握使用浏览器对象模型BOM编程的方法。

实验要求：1.编写显示当前浏览器的信息的Web页面；

2.编写一个在线调查页面。

实验内容：

1.编写一个Web页面：每0.2秒在浏览器窗口的状态栏中滚动显示一次当前浏览器的信息。在输出内容前加一个输出次数的计数。这样每次的显示效果有所不同。

提示：浏览器信息可由window对象的子对象navigator获得，用window.status设置状态栏的内容。

2.设计一个在线调查的表单页面（含有单选、多选项），当用户单击提交按钮时将显示一个对话框显示用户的选择结果。

执行效果如下图所示：

实验七

实验目的：掌握利用文档对象模型DOM编程的方法。

实验要求：参考例题，实现对表格排序功能进行进一步完善。

实验内容：

结合课本7.3.5节,实现对表格排序功能进行进一步完善，要求：

( l ）表头增加排序标志，指明当前排序列及排序方式（升序/降序）;

( 2 ) 7.3.5节的实现方案在HTML中嵌入了Javascript代码，例如将它们修改为的形式，实现同样的排序功能，其中datatype为自定义属性（仿照7.3.2 节中自定义属性的实现方式）。

注：这种编程模式称为Unobtrusive JavaScript，它可以增加JavaScript 代码的可维护性，并保持HTML的结构完整，在浏览器禁用JavaScript的清况下也可以自然地降级使用。关于Unobtrusive JavaScript的进一步讲解，同学可以参考以下网址：http : // https://www.wendangku.net/doc/5816654688.html,/artices/unobtrusive javascript。

实验八

实验目的：掌握样式编程的方法。

实验要求：利用css知识，完成鼠标显示特效及切换效果。

实验内容：

1.设计一个页面，使访问者用鼠标指向页面上的不同文字时，鼠标的形状会有

所不同。

执行效果如图所示：

2.在下面的HTML 页面中实现toggle函数，当用户点击“切换显示”按钮时，