JavaScript程序设计课件：第七章 窗口和框架

《JavaScript程序设计课件：第七章 窗口和框架》由会员分享，可在线阅读，更多相关《JavaScript程序设计课件：第七章 窗口和框架（25页珍藏版）》请在装配图网上搜索。

1、高等学校计算机应用人才培养系列教材7.1第七章第七章 窗口和框架窗口和框架高等学校计算机应用人才培养系列教材7.2本章结构本章结构udocument对象对象ulink对象对象uanchor对象对象uimage对象对象u使用使用div标签标签高等学校计算机应用人才培养系列教材7.3document对象对象udocument对象概述对象概述ndocument对象是客户端对象是客户端JavaScript最为常用的对象之一，在浏览最为常用的对象之一，在浏览器对象模型中，它位于器对象模型中，它位于window对象的下一层级。对象的下一层级。nwindow对象代表了浏览器窗口或者框架，而对象代表了浏览器窗

2、口或者框架，而document对象则代表对象则代表了窗口或者框架中的文档。了窗口或者框架中的文档。n每一个每一个window对象都有一个对象都有一个document属性，属性，window对象的对象的document属性引用的就是代表该窗口中所显示文档的属性引用的就是代表该窗口中所显示文档的document对对象。象。n文档对象的命名规则文档对象的命名规则document.infoForm /使用表单名称访问使用表单名称访问document.forms0 /使用该表单在使用该表单在document对象对象 forms属性中的位置访问属性中的位置访问高等学校计算机应用人才培养系列教材7.4doc

3、ument对象对象udocument对象的简单属性对象的简单属性nalinkColor：该属性指定了链接被激活时的颜色，初始值可以在文：该属性指定了链接被激活时的颜色，初始值可以在文档的档的标签中设置，也可以通过标签中设置，也可以通过标签标签alink属性设置。属性设置。nbgColor：该属性指定了文档的背景颜色，其初始值由：该属性指定了文档的背景颜色，其初始值由标标签的签的bgcolor属性设置。属性设置。nfgColor：该属性指定了文档文本的颜色，其初始值可以在文档的：该属性指定了文档文本的颜色，其初始值可以在文档的标签中设置，也可以通过标签中设置，也可以通过标签标签text属性设置。

4、属性设置。nlinkColor：该属性指定了文档中未被访问过的链接的颜色，其初：该属性指定了文档中未被访问过的链接的颜色，其初始值可以在文档的始值可以在文档的标签中设置，也可以通过标签中设置，也可以通过标签标签link属性设置属性设置nlocation：等同与：等同与URL属性，指定了文档的属性，指定了文档的URL。ntitle：表示位于：表示位于标签和标签和标签之间的文本。标签之间的文本。nVlinkColor：该属性指定了文档中已经被访问过的链接的颜色。：该属性指定了文档中已经被访问过的链接的颜色。高等学校计算机应用人才培养系列教材7.5document对象对象udocument对象的数组

5、属性对象的数组属性nanchors：包含了对当前文档中所有：包含了对当前文档中所有anchor对象的引用，每一个对象的引用，每一个数组元素对应一个数组元素对应一个标记。标记。napplets：包含了对当前文档中所有：包含了对当前文档中所有applet对象的引用，每一个数对象的引用，每一个数组元素对应一个组元素对应一个标记。标记。nembeds：包含了对当前文档中所有嵌入对象（插件或者：包含了对当前文档中所有嵌入对象（插件或者ActiveX控件）的引用，每一个数组元素对应一个控件）的引用，每一个数组元素对应一个标记。标记。nforms：包含了对当前文档中所有：包含了对当前文档中所有form对象的

6、引用，每一个数组对象的引用，每一个数组元素对应一个元素对应一个标记。标记。nimages：包含了对当前文档中所有：包含了对当前文档中所有image对象的引用，每一个数对象的引用，每一个数组元素对应一个组元素对应一个标记。标记。nlinks：包含了对当前文档中所有：包含了对当前文档中所有link对象的引用，每一个数组元对象的引用，每一个数组元素都代表文档中一个超文本链接。素都代表文档中一个超文本链接。高等学校计算机应用人才培养系列教材7.6document对象对象udocument对象的方法对象的方法nclear()：该方法用于清除文档内容，不过：该方法用于清除文档内容，不过JavaScript

7、并不推荐使用并不推荐使用这个方法，相同的功能应该使用这个方法，相同的功能应该使用document.open()方法打开一个新方法打开一个新文档。文档。nclose()：该方法将显示出所有已经写入文档但还没有显示出来的：该方法将显示出所有已经写入文档但还没有显示出来的内容，然后关闭文档的输出流。内容，然后关闭文档的输出流。nopen(mimetype)：该方法打开一个可供写入文档内容的流，以便：该方法打开一个可供写入文档内容的流，以便接下来调用接下来调用write()方法将数据添加到文档中。方法将数据添加到文档中。nwrite(value,)：该方法会将它的所有参数按照出现顺序写入文档：该方法会

8、将它的所有参数按照出现顺序写入文档中，不是字符串的参数在写入过程中将被转换成字符串。中，不是字符串的参数在写入过程中将被转换成字符串。nwirteln(value,)：该方法与：该方法与write()方法类似，只不过在写入所有方法类似，只不过在写入所有参数之后，会自动加上一个换行符。参数之后，会自动加上一个换行符。高等学校计算机应用人才培养系列教材7.7高等学校计算机应用人才培养系列教材7.8高等学校计算机应用人才培养系列教材7.9高等学校计算机应用人才培养系列教材7.10link对象对象ulink对象概述对象概述nlink对象表示的是对象表示的是HTML文档中超文本链接或者客户端映射表中文档

9、中超文本链接或者客户端映射表中的可点击区域，在的可点击区域，在HTML文档中由文档中由和和标签创建，其语法如标签创建，其语法如下：下：/链接中的可见文本高等学校计算机应用人才培养系列教材7.11link对象对象ulink对象的属性对象的属性nhash：该属性表示：该属性表示URL引用的对象中的一个锚的名字。引用的对象中的一个锚的名字。nhost：该属性表示：该属性表示URL中的主机名和端口号的组合。中的主机名和端口号的组合。nhostname：该属性表示：该属性表示URL中含有的主机名。中含有的主机名。nhref：该属性表示完整的：该属性表示完整的URL。nlength：该属性表示：该属性表示

10、links数组中元素的数量。数组中元素的数量。npathname：该属性表示：该属性表示URL中的路径部分。中的路径部分。nport：该属性表示：该属性表示URL中的端口部分。中的端口部分。nprotocol：该属性表示：该属性表示URL中的协议部分。中的协议部分。nsearch：该属性表示：该属性表示URL中含有的查询部分。中含有的查询部分。ntext/innerText：该属性表示出现在创建：该属性表示出现在创建link对象的对象的HTML标签标签和和之间的纯文本。之间的纯文本。高等学校计算机应用人才培养系列教材7.12高等学校计算机应用人才培养系列教材7.13高等学校计算机应用人才培养系

11、列教材7.14高等学校计算机应用人才培养系列教材7.15image对象对象uimage对象概述对象概述nimage对象代表了文档中含有的内嵌图像。虽然对象代表了文档中含有的内嵌图像。虽然HTML本身具有显本身具有显示图像的功能，但是存在一个缺陷，就是无法改变已经显示的图示图像的功能，但是存在一个缺陷，就是无法改变已经显示的图像，除非加载一个新的页面；而利用像，除非加载一个新的页面；而利用image对象，通过对象，通过JavaScript可以动态地对图像进行操作，使网页变得更具吸引力。可以动态地对图像进行操作，使网页变得更具吸引力。n在在JavaScript中，可以使用中，可以使用new关键字创

12、建关键字创建image对象，这种方法对象，这种方法创建的创建的image对象常用于缓存图像：对象常用于缓存图像：new Image(width,height);构造函数构造函数Image中的中的width和和height参数是可选的，分别指定所参数是可选的，分别指定所创建创建image对象的宽度和高度，不过这个构造函数并没有指定对象的宽度和高度，不过这个构造函数并没有指定要加载图像的要加载图像的URL地址，如果要将地址，如果要将image对象与特定的图像对对象与特定的图像对应起来，必须将其应起来，必须将其src属性设定为要显示的图像。属性设定为要显示的图像。高等学校计算机应用人才培养系列教材7

13、.16image对象对象u由由HTML中中标签创建标签创建image对象的语法规则如下：对象的语法规则如下：高等学校计算机应用人才培养系列教材7.17image对象对象uimage对象的属性对象的属性nborder：这个属性指定了图像边界的宽度，以像素为单位。：这个属性指定了图像边界的宽度，以像素为单位。nheight：该属性指定了图像的高度，以像素为单位。：该属性指定了图像的高度，以像素为单位。nhspace：该属性指定了图像的左右边界和周围文字之间的水平距：该属性指定了图像的左右边界和周围文字之间的水平距离，以像素为单位。离，以像素为单位。nlowsrc：该属性指定了在低分辨率状态下显示图

14、像的：该属性指定了在低分辨率状态下显示图像的URL。nname：该属性指定了：该属性指定了image对象的名称，表示对象的名称，表示HTML文档中一幅文档中一幅特定的图像。特定的图像。nsrc：该属性指定了正常状况下要显示图像的：该属性指定了正常状况下要显示图像的URL，修改该属性将，修改该属性将导致浏览器重新加载和显示图像。导致浏览器重新加载和显示图像。nvspace：该属性指定了图像的上下边界和周围文字之间的垂直距：该属性指定了图像的上下边界和周围文字之间的垂直距离，以像素为单位。离，以像素为单位。nwidth：该属性指定了图像的宽度，以像素为单位。：该属性指定了图像的宽度，以像素为单位。

15、高等学校计算机应用人才培养系列教材7.18image对象对象uimage对象的应用对象的应用n改变改变image对象的对象的src属性将导致浏览器重新加载图像，如果要使属性将导致浏览器重新加载图像，如果要使新加载的图像显示在原来的地方并且不影响页面上原有的内容，新加载的图像显示在原来的地方并且不影响页面上原有的内容，那么必须保证新的图像与原来的图像具有相同的高度和宽度，或那么必须保证新的图像与原来的图像具有相同的高度和宽度，或者通过设置者通过设置image对象的对象的width和和height属性保证新图像与原来的图属性保证新图像与原来的图像大小相同。像大小相同。n为了让图像能在需要的时候迅速

16、的显示出来，通常的做法是先将为了让图像能在需要的时候迅速的显示出来，通常的做法是先将图像在浏览器里缓存起来，这样在需要的时候便可以直接使用，图像在浏览器里缓存起来，这样在需要的时候便可以直接使用，而不是临时通过网络下载。缓存图像的方法十分简单，首先使用而不是临时通过网络下载。缓存图像的方法十分简单，首先使用Image()构造函数创建一个构造函数创建一个image对象，然后将想要使用图像的对象，然后将想要使用图像的URL地址赋给新建地址赋给新建image对象的对象的src属性。属性。高等学校计算机应用人才培养系列教材7.19高等学校计算机应用人才培养系列教材7.20高等学校计算机应用人才培养系列

17、教材7.21高等学校计算机应用人才培养系列教材7.22高等学校计算机应用人才培养系列教材7.23高等学校计算机应用人才培养系列教材7.24本章小结本章小结udocument对象是客户端对象是客户端JavaScript最为常用的对象之一，在浏览器对最为常用的对象之一，在浏览器对象模型中，它位于象模型中，它位于window对象的下一层级，代表了窗口或者框架中对象的下一层级，代表了窗口或者框架中的文档。的文档。udocument对象的对象的links属性包含的就是文档中的属性包含的就是文档中的link对象，对象，link对象对象表示的是表示的是HTML文档中超文本链接或者客户端映射表中的可点击区域文

18、档中超文本链接或者客户端映射表中的可点击区域，在，在HTML文档中由文档中由和和标签创建。标签创建。udocument对象的对象的anchors属性包含的就是文档中的属性包含的就是文档中的anchor对象，对象，anchor对象表示的是对象表示的是HTML文档中超文本链接的锚，文档中超文本链接的锚，“锚锚”是是HTML文档中一个命名了的地点，由具有文档中一个命名了的地点，由具有name属性的属性的标签创建。标签创建。udocument对象的对象的images属性是包含的就是文档中的属性是包含的就是文档中的image对象，对象，image对象表示文档中的内嵌图像，在对象表示文档中的内嵌图像，在H

19、TML文档中由文档中由标签创标签创建。建。udiv标签是一种可以包含其他标签是一种可以包含其他HTML标签的标签，在实际应用中，常标签的标签，在实际应用中，常通过通过JavaScript操作操作div标签以达到各种复杂的效果。标签以达到各种复杂的效果。高等学校计算机应用人才培养系列教材7.25思考题思考题u什么是什么是document对象？如何获取文档对象上的元素？对象？如何获取文档对象上的元素？u通过通过link对象可以获取什么信息？对象可以获取什么信息？u创建创建anchor对象与创建对象与创建link对象有什么不同？对象有什么不同？u如何通过如何通过image对象模拟播放幻灯片？对象模拟播放幻灯片？u如何通过如何通过div标签模拟动画效果？（例如让一辆汽车载屏标签模拟动画效果？（例如让一辆汽车载屏幕上按照预定的轨道前进）幕上按照预定的轨道前进）