JavaScript编程-电子课件.ppt

任务1下拉菜单的设计任务拓展设置最近被单击过的超链接外观属性—改进版上面这段代码将所有的超链接对象遍历了一遍，效率不高，可以使用一个全局变量保存上次点击过的超链接对象，防止遍历过程，提高执行效率。改进代码如下：任务2表格美化的设计【任务陈述】本任务对由table对象及其下属对象进行样式设置，使表头行与表体行有别，表体行的奇数行、偶数行和鼠标移入行的背景色有区别。实例任务2表格美化的设计5.10DOM对象意义与结构DOM是文档对象模型〔DocumentObjectModel〕的缩写。DOM对象模型的出现，使得HTML元素成为对象，借助JavaScript脚本就能操作HTML元素。HTML元素允许相互嵌套，页面文档局部是由body为根节点的HTML节点树组成的，DOM的结构就是一个树形结构。在JavaScript程序使用DOM对象中可以动态添加、删除、查询节点，设置节点的属性，程序员使用丰富的DOM对象库可以方便地操控HTML元素。【知识准备】任务2表格美化的设计5.11DOM对象节点类型任务2表格美化的设计5.12DOM对象节点及其属性的访问DOM对象的访问是操作DOM节点的先决条件。使用前面介绍的getElementById、getElementsByName、getElementsByTagyName可以定位DOM节点绝对位置，getElementsByName、getElementsByTagyName得到的是DOM节点的集合，访问其中某个节点必须借助于下标。DOM还为访问DOM节点的相对位置提供了丰富的方法。这些方法有：一、访问父节点二、访问子节点三、访问兄弟节点任务2表格美化的设计5.13DOM对象节点的创立与修改DOM树形结构的建立与调整，都可以用JavaScript代码对节点的创立与删除进行修改，以取代前面的字符串方式拼接的HTML文本，用访问DOM节点树中节点对象方式局部替代HTML元素对象，更容易实现用JavaScript编程操作页面中各个DOM对象。操作DOM节点对象方法主要有创立节点、添加节点、删除节点、替换节点、复制节点等。一、创立节点二、添加节点三、删除节点四、替换节点五、复制节点任务2表格美化的设计任务实施表格美化的设计需要完成表格数据结构结构级数据的建立、样式表文件的建立和javascript事件处理文件的建立。本任务从静态页面设计三个方面进行设计，设计步骤分别如下：第一步、HTML设计提供页面元素；第二步、CSS设计布局与美化页面元素；第三步、JavaScript设计处理页面元素的事件。当然，前面的两步也可以用JavaScript完成，从效劳端接受的数据，用JavaScript脚本构造DOM对象子树，设置DOM对象的style及其下属属性，最后将DOM对象子树添加到DOM容器父对象中。任务2表格美化的设计任务实施第一步、HTML设计提供页面元素任务2表格美化的设计任务实施第二步、样式文件的建立为了提高样式表的可维护性，本任务中对样式的设置采用了多个样式文件，每个样式文件负责某个方面样式如：颜色类〔color.css〕布局类〔layout.css〕排版类〔typography.css〕再以“@importurl(样式文件);”将多个样式文件导入一个样式文件basic.css中。basic.css文件的内容如下：@importurl(color.css);@importurl(layout.css);@importurl(typography.css);任务2表格美化的设计任务实施第二步、样式文件的建立颜色类〔color.css〕布局类〔layout.css〕排版类〔typography.css〕任务1下拉菜单的设计5.6函数的定义与引用Table类的定义与引用Table类中数据有：表数据Rows前景色ForeColor背景色BackColor线条色LineColor表宽Width;行为有：得到表标签getTable。任务1下拉菜单的设计5.7浏览器内置对象的使用浏览器内置对象概述要对网页进行编程，必须了解浏览器、浏览器中显示的窗口和窗口中显示的HTML文档等信息。JavaScript在网页编程中经常操作的HTML文档被称为文档对象〔DocumentObject〕，它是浏览器对象的一局部。