（中职）JavaScript项目式实例教程项目六电子课件工信版

（中职）JavaScript项目式实例教程项目六电子课件工信版 项目六 多功能相册 —— 文档对象  JavaScript项目式实例教程 设计一个多功能相册，具体需求如下： ①如图6.1所示，是相册用户登录的页面。用户输入用户名、密码正确才能进入如图6.2所示的相册页面。如果选择了“记住密码”复选框，则重新打开此页面时，用户名、密码已经被填入文本框中，用户直接点击“进入看相册”按钮就可以查看相册。 项目情境 图6.1 登录 图6.2 相册  JavaScript项目式实例教程 ②如图6.2所示，是进入的相册页面。相册中的图片在一行显示，当鼠标放置到小图上时，在下方显示对应的大图。当点击小图时，打开如图6.3所示的对话框。在该对话框中，显示该图的详细信息。 项目情境 图6.3 详细介绍  JavaScript项目式实例教程 ③在图6.3所示的对话框中，不仅显示图片的详细介绍，还可以通过点击图片介绍下方的导航链接浏览其他图片及其详细介绍。 项目情境  JavaScript项目式实例教程 掌握文档对象Document的常用属性和方法。 掌握Cookie对象的使用方法。 掌握图像对象的使用方法。 掌握超级链接对象的使用方法。 掌握利用JavaScript设置样式的方法。 学习目标  JavaScript项目式实例教程 任务1 用JAVASCRIPT设置属性和样式 在如图6.4的窗口上显示4张大小比例相同的图片，每张图片加红色实线边框，且在一行显示。要求必须用JavaScript实现属性和样式的设置。 图6.4 设置属性和样式  JavaScript项目式实例教程 1、文档对象Document Window对象的一个子对象，代表整个HTML文档。通过Document对象可以操作HTML文档中的内容及其他对象。Document对象有许多属性和方法，还有子对象。 【相关知识】 属性 描述 all 返回对象所包含的元素集合的引用。（IE支持） alinkColor 设置或获取元素中所有激活链接的颜色。 bgColor 不赞成。设置或获取表明对象后面的背景颜色的值。 cookie 设置或获取 cookie 的字符串值。 documentElement 获取对文档根结点的引用。 domain 设置或获取文档的安全域名。 expand 设置或获取表明是否可对象内创建任意变量的值。 fgColor 设置或获取文档的前景(文本)颜色。 forms 返回一个数组，数组中的元素为Form表单对象。 images 返回一个数组，数组中的元素为Image图像对象。 linkColor 设置或获取对象文档链接的颜色。 links 返回一个数组，数组中的元素为Link超级链接对象。 referrer 获取将用户引入当前页面的位置 URL。 URL 设置或获取当前文档的 URL。 vlinkColor 设置或获取用户已访问过的链接颜色。 XMLDocument 获取对由对象引出的的 XML 文档对象模型(DOM)的引用。 XSLDocument 获取对 XSL 文档的顶层结点的引用。  JavaScript项目式实例教程 【相关知识】 方法 描述 close 关闭输出流并强制将数据发送到显示。 open 此方法以两种方式工作。该方法打开一个文档用于收集 write 和 writeln 方法的输出。在这种情况下，只使用前两个参数 url 和 name。若指定了附加参数，此方法将打开一个窗口，这与 window 对象的 window.open 方法相同。 write 在指定窗口的文档中写入一个或多个 HTML 表达式。 writeln 在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。  JavaScript项目式实例教程 2、图像对象 文档对象Document的images属性返回的是一个数组，数组中的每一个元素都是一个图像对象，即Image对象。 JavaScript加载HTML文档时，会自动创建一个images数组，数组中的元素个数由HTML文档中的<img>标签决定，每一个<img>标签就是images数组的一个元素，也就是一个图像对象。引用images数组中的元素方法有三种，分别是： document.images[i] document.images[图片的名字] document.图片的名字 【相关知识】  JavaScript项目式实例教程 3、在JavaScript中设置对象的属性或样式 1）设置属性 通常，在HTML文档中，可以直接在该标签内部设置一个标签的属性，例如： <img src=