Day18 JavaScript基本教学(三)

动态网页概念

DHTML是 Dynamic HTML 的简称，相较於 HTML 它更强调网页的动态表现，所谓动态网页即是指：网页在浏览器中能依据参观者的操作或时间状态的变化适时地改变网页内容。由於 HTML 仅能依靠标记语法来展现网页内容，并没有动态改变的能力，因此必须将网页内容物件模型化（DOM）接着透过 Script 语言来操控它的内容，另外再结合事件驱动机制以便反映参观者的操作，同时为了让动态网页能展现更精彩的视觉变化，又加上了串接样式表的支援，如果用公式来表示，可以写为 DHTML = DOM + Events + Script + CSS。

网页物件模型(DOM)

物件这个名词在程序设计领域里，是一个很重要的观念，它是从静态的资料结构（例如：阵列） 蜕变出来的。我们可以把静态的资料结合组装成各种结构，也可以应用同一种思维把片段程序码重新组装成独立的有机结构，因此发明了物件 导向程序设计，可以根据程序的需求尽情地重新组合物件，例如：网页不也是从有限的标 签中组合成无限的版面变化。

程序运作需要使用变数或把变数组合成资料结构，有时候程序也需要输入或输出变数值，因此物件应该包含：内建函式、私有或公用变数、变数预设值，而其中某些关键变数值可以从物件外部直接指定或变更。

虽然微软公司也引用物件导向设计观念，来处理网页物件模型（DOM），但是它却又自己发明许多新名词，譬如：内建函式被改称为方法（method），变数则被称为属性。

DOM 树状阶层结构

在 IE DOM 里面，最大的物件是 window，它也是 DOM 里面少数没有对应标签的物件之一，window 事实上就是 IE 主程序所开启的视窗，我们可以透过它来呼叫 IE 的程序功能表或状态列。window 有六个从属物件和一个物件集合。

• navigator：这个物件用来侦测浏览器名称、厂商、版本、能力...等
• external：这个物件用来呼叫 IE 主程序功能表
• history：也就是浏览器中的历史清单，用来跳到上一页或下一页
• location：这个物件就是 IE 的网址列
• screen：这个物件就是目前桌面的萤幕设定
• event：虽然每个物件都有自己的事件处理器，但若是要写一个互动游戏，需要规划每个键盘按键的功能，就不能没有一个综观全局的前置处理器，event 物件可以说是所有事件的统一指挥中心
• document：这个物件就是对应到整个网页的内容
• frames：是框架物件的集合，假如网页有使用框架的话，则在 window 与 document 之间，将会多出这一层

对於程序来说，document物件很重要， 因此说明一下document 物件常用的从属物件及物件集合

body：这个物件对应 body 标签，用来处理背景图及卷轴棒样式
all：所有标签对应物件的集合（body 物件不算，因为一份文件只有一个 body）
anchors：所有 a 标签的集合
applets：所有控制元件（applet 标签）的集合，例如：JAVA、Flash、AVI电影、统计图表....等
embeds：文件中所有 embeds 标签的集合
filters：CSS 视觉滤镜的集合
frames：所有嵌入框架（iframe 标签）的集合
forms：所有输入表单（form 标签）的集合
images：所有图片（img 标签）的集合
stylesheets：所有样式性质的集合（定义在 style 标签里的才算）

事件驱动与沸升

事件驱动并非 DHTML 而发明的，是整个 windows 系统就是以事件驱动的方式在运作。当移动滑鼠游标在IE的视窗内游走时，滑鼠的游标位置就会透过滑鼠驱动程序回报给作业系统，作业系统将此一事件转换成描述字串，称为事件讯息，事件讯息会被传送给所有执行中的程序，让程序决定是否要回应或忽略，假设该讯息传送给 IE 主程序，主程序依据座标判断，发现滑鼠游标正移到网页的某图片上，因此决定给予回应。於是呼叫该图片的事件处理程序出来执行。

网页物件化以後，为了让程序设计师能根据不同事件自由地处理回应方式，因此在每个物件上设计有事件处理器，此一程序容器为事先定义好的空函式，其内容可以由程序设计师自由取代。

串接样式表(CSS)

串接样式表是为了弥补 HTML 的排版功能不足而设计的，透过 CSS 原本 HTML 表现不出来的声光效果，现在已经获得大幅度的改善。所以使用 MS Word 编辑 doc 的文件时，可以原封不动地转换成网页显示出来，其关键就在於使用了 CSS。

CSS让HTML标签有底下的新功能：

• 能够以像素为单位精准的定位：过去只能使用相对位置来布置版面，透过CSS允许改用绝对位置来摆放网页元件。
• 将色彩及背景变化扩充给所有的容器物件：过去不能设定段落的背景，不能让表单元件显示颜色，不能改变边框的大小样式。
• 网页上的元件具备2.5D的图层概念：透过z-index这个性质，可以让网页元件互相交叠，配合Script程序设计出各种动画演出的效果！
• 能够将网页元件暂时隐藏或显现：程序设计师使用这个新的visibility性质，很容易设计出可以摺收的功能表单。