JavaScript程序设计案例教程（第2版）第6章BOM对象.ppt

JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 浏览器对象模型（Browser Object Model）是JavaScript中定义而由浏览器提供的对象，嵌入在网页中的JavaScript脚本可以通过这些对象提供的属性和方法操作当前的浏览器窗口，浏览器对象的属性和方法也可能会因为浏览器的不同而出现差异。 知识目标 熟悉JavaScript中的BOM模型 熟悉window对象、history对象、screen对象、images对象和location对象的常用属性、方法和事件 能力目标 能够熟练使用BOM模型中window、history、images和location对象的常见属性、方法和事件 能够熟练使用window对象的open()、setTimeout()、alert()、close()等常用方法以及属性实现特效 能够熟练使用screen对象和images对象实现图片轮显等特效 4 案例陈述 1 2 3 案例实施 知识准备 本章小结 5 课后习题 5 本案例实现“课程学习—脚本调试”超链接页面，主要功能是实现在线脚本编辑器。单击如图6.1所示的“开始”按钮弹出对话框“你确定开始么？”，单击“确定”可以进入在线脚本编辑页面，如图6.2所示，在脚本编辑页面的文本框里输入JS代码后，单击“运行代码”按钮，可以在新窗口中显示运行输入的JS代码结果；单击“清除代码”按钮可将文本区域清空，如果之前打开过窗口，则单击“返回上一页”可以返回到上一页面，如果直接打开的是图6.2的窗口，则单击“返回上一页”会弹出提示“该窗口没有打开过其它网页，按钮失效！”；新窗口并于10秒后自动关闭。 图6.1 在线编辑器效果图1 图6.2 在线编辑器效果图2 1)使用Dreamweaver，新建网页“Case11-1.html”，编辑如图6.3所示页面。 2)新建CSS样式表文件“case11-scriptcss.css”，并链入到网页“Case11-1.html”中。 3)在网页“Case11-1.html”中修改代码。 4) 再将网页“Case11-1.html”另存为“Case11-2.html”，增加按钮并修改代码。 图6.3 编辑页面图1 知识点1 浏览器对象的层次关系 图6.5 浏览器对象的层次关系图 知识点2 window对象 1)window对象概述 通过window对象可以控制窗口可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目，不同浏览器的界面也有所不同。 2)打开和关闭窗口的语法格式 通过JavaScript脚本的open( )方法和close( )方法可以打开和关闭新窗口。 使用window对象的open( )方法的语法格式如下： 3)window对象的属性 表6-2给出了window对象的属性。 4)window对象的方法 除了属性之外，window对象还拥有很多方法。window对象的方法见表6-3。 windowVar=window.open(url,windowname[,windowfeature]); 【实例6-1】window对象的应用 实例要求设计一个有3个超链接的页面，单击这些链接可以打开、关闭新窗口以及关闭本窗口。 图6.6 打开和关闭窗口案例运行效果图 知识点3 屏幕(screen)对象 screen 对象包含有关用户屏幕的信息。这些信息只能读取，不可以设置，使用时只要直接引用screen对象就可以了，调用格式如下： screen 对象的属性见表6-4。 screen.属性 属 性 说 明 availWidth 可用的屏幕宽度，返回访问者屏幕的宽度，以像素计，屏幕宽度减去界面特性。 availHeight 可用的屏幕高度，返回访问者屏幕的高度，以像素计，屏幕高度减去系统环境所需要的高度，比如窗口任务栏。 width 返回以像素表示的屏幕宽度。 height 返回以像素表示的屏幕高度。 表6-4 screen对象的属性 【实例6-2】打开狭长窗口。 实例要求在装载“sl6-2.html”页面的同时，自动打开宽和高均为300像素的新窗口“popu1.htm”，此窗口于3秒后自动关闭；单击“sl6-2.html”中的超链接文字“使用超链接打开狭长窗口”能够打开高为200像素的狭长的窗口。 图6.7 打开狭长窗口效果图 知识点4 历史记录(history) history 对象包含浏览器的历史。调用格式如下： ? history 对象的属性为length，表示返回浏览器历史列表中的 URL 数量。 histor