第5讲动态(特效)页面设计.ppt

1、第5讲,动态(特效)页面设计,本讲内容,DHTML 动态(特效)页面设计 浏览器对象 Navigator Windows Document Form,JavaScript的浏览器对象,DHTML 构成 层叠样式表(CSS)扩充了HTML标记的属性，可通过脚本语言控制技术细节/style 脚本程序 HTML4.0将页面中的文字和图象当作对象来处理，并可通过脚本语言对其特性和变化进行控制,JavaScript的浏览器对象及应用,Navigator对象层次 在JavaScript中，浏览器的属性封装在一系列对象中，这些对象按照层次组织起来，形成树状结构，称为 Navi

2、gator对象树,JavaScript的浏览器对象及应用,常用对象含义 Navigator:封装浏览器名称、版本、客户端支持的MIME类型属性 Windows:封装了有关窗口的属性和操作 Frame:使用多个子窗口时候使用 Location:当前URL信息 History:浏览器的浏览历史信息 Document:当前的HTML文档 Form:表单的属性和操作 Anchor:页面中的锚点信息,Navigator对象树,Navigator对象,属性和方法,Navigator对象示例,示例 Ex25.htm,Windows对象(1),属性 与窗口有关的属性 parent当前窗口或帧(Frame)的父

3、窗口 self,window当前窗口 top主窗口，所有下级窗口的父窗口 以上四个属性，是当前浏览器环境所涉及的Window对象的实例，它们的引用不能加对象名。如：self.status而不是window.self.status,与浏览器状态栏有关的属性 status defaultstatus,Windows对象(2),方法 与对话框有关的方法 alert(字符串) confirm(字符串) prompt(字符串1,字符串2),与窗口生成与撤消有关的方法 open生成一个新窗口，语法如下：open(“URL”,”WindowName”,”Window Features”); close关闭一

4、个窗口,窗口的特征值,Windows对象(3),方法 与窗口焦点有关的方法 focus()获得焦点 blur()失去焦点,与超时有关的方法 setTimeout设置超时，语法如下：setTimeout(“函数表达式”,time)每隔time ms对函数表达式求1次 clearTimeout()清除超时设置,语法如下：clearTimeout(timeId)/timeId是由setTimeout返回的标志,Windows对象(4),其它属性和方法 属性 opener由open()打开的最新窗口 frames一个数组，成员为窗口内的各帧 方法 scroll(x,y)使窗口滚动到(x,y)处,示例

5、Ex26.htm(Window对象的属性和方法window.html) 示例 Ex27.htm(两个窗口之间传递信息win.html ),Document对象,属性 数值属性 与HTML的标记相对应，用于设置和改变页面的背景、文本、超连接颜色等显示属性,对象数组属性 anchor对象和anchors数组 定义锚点锚点文本anchors数组是anchor对象的序列只有一个length属性 image对象和images数组 image的定义,连接对象和连接数组 link对象用来存储URL信息，一个完整的URL包括：协议、主机名或IP地址，协议端口号，路径名，hash数如：:2000/java/in

6、dex.htm#follow-up,数值属性,link对象的属性,Document对象的方法,方法 write(输出内容到HTML)。write(string1,string2) open(打开一个或创建一个新文件来写入内容)允许的文件类型(MIME类型)有：text/html,text/plain,image/gif, image/jpeg, image/xbm,x-world/plug-in close(关闭文件) clear(清理文件中的内容) 示例 Ex28.htm,FORM对象,属性 action:表单提交后启动的服务器应用程序的URL name:表单名称 method:发送信息到服

7、务器的方法(get|post) target:服务器执行结果返回的窗口 encoding:被发送数据的编码方式 elements:一个数组，表单各输入域对象 length:表单输入域个数 示例 Ex29.htm,FORM对象的方法,submit:触发submit事件，引起onSubmit事件处理的执行 表单输入数据被提交服务器相应程序,可以通过onSubmit事件处理返回false来阻止数据被提交，实现数据合法性检查 reset:清除表单中的所有输入，将输入域设为原来的默认值,触发onReset事件处理的执行 示例 Ex30.htm,按钮对象,submit提交按钮 reset复位按钮 butt

8、on普通按钮 按钮的属性与方法 按钮的事件处理,按钮的属性,按钮对象的方法,按钮的事件处理,其他表单对象,text 对应文本框text,具有以下属性 name对象名 type类型 form所属的表单 value值 defaultValue默认值 text的方法与事件处理,其他子对象（1）,textarea对象文本域对象，与text对象的属性、方法、相关事件处理相同 password对象口令域对象，与text对象的属性、方法相同(没有onClick事件处理) hidden对象隐藏域对象，与text相比，没有defaultValue属性,其他子对象（2）,checkbox对象复选框对象，具有属性

9、checked被选择 defaultChecked默认选中 name对象名 value值 form所属的表单 type类型 checkbox对象的方法及相应的事件处理 blur()Blur focus()Focus click()Click,其他子对象（3）,radio对象单选框对象，属性，方法、事件处理与checkbox相同 select对象选择列表对象，具有属性 form所属的表单 name对象名 length选项个数 type定义select对象并指示是否定义multiple selectIndex被选种项的索引号 options一个数组，包含了select定义中的每个option 示例 Ex31.htm,text的方法,text的事件处理,特效综合示例,示例一 Zh1.htm（校验邮件地址） 示例二 Zh2.htm(变色菜单) 示例三 Zh3.htm(鼠标操作) 示例四 Zh4.htm(防止选择),综合示例(2),示例五 Zh5.htm(防