[工学]JavaScript.ppt

JavaScript II 本篇内容 DOM编程 DOM编程 DOM概述 DOM编程下的JavaScript事件处理机制 常用DOM对象及应用 DHTML 一、 DOM概述 1.1 DOM定义 JavaScript将浏览器窗口、窗口内的网页文档以及网页文档中的HTML元素等采用相应的对象进行表示，其中一些对象是作为另外一些对象的属性存在 这些对象以及对象之间的层次关系称为： BOM（Browser Object Model）：浏览器对象模型 DOM （Document Object Model）：文档对象模型 BOM包含DOM，有时，两者概念也不严格区分 1.2 BOM和DOM对象模型图（部分） 1.3 DOM（BOM）内置对象 为方便编程，JavaScript提供了一些内置的DOM（BOM）对象供使用 DOM内置对象：直接拿来使用，不需要实例化 比如：JavaScript定义了表示浏览器窗口的Window类，同时提供了一个对象名叫window的该类对象，程序中可以直接使用，不需要实例化 常用内置对象：window、document等 二、 DOM下的JavaScript事件处理机制 DOM(BOM)除了定义各种对象之外，还定义了各个对象所支持的事件，以及各个事件所对应的用户的具体操作 事件： 用户与浏览器的交互：如按下鼠标或键盘、鼠标移动等 浏览器自身动作引起：如载入一个文档 2.1 事件驱动的程序设计模型 JavaScript程序采用事件驱动的程序设计模型 JavaScript可以为不同类型的事件注册一个事件处理程序（event handler），即一个JavaScript函数或代码段，事件发生时，浏览器调用相应程序代码 2.2 事件与事件处理程序的关联 JavaScript中，事件与事件处理程序代码的关联： 在事件源对象对应的HTML标记上增加一个要处理的事件属性，让事件属性值等于处理该事件的程序代码或函数名 当事件源对象上某个事件发生时，浏览器自动调用相应事件属性指向的处理程序 事件与事件处理程序的关联 示例 例如：要在用户单击一个按钮时执行 JavaScript代码，可以把这段代码设置为input按钮标记的onclick事件属性的值 事件属性值等于函数名 2.3 常用事件（属性） （部分）常用事件属性和支持它们的HTML元素 常用事件属性（续） JavaScript常用事件举例 onclick：鼠标单击时(大多数HTML元素） 按钮单击 超链接单击 onmouseover：鼠标移上（大多数HTML元素） onmouseout：鼠标移出（大多数HTML元素） onload：文档载入时（主要是body元素） onfocus：元素得到输入焦点时（表单元素） onblur：元素失去焦点时（表单元素） onchange：元素内容改变，且失去焦点时（表单元素） onsubmit：表单提交时（form元素） 三、 DOM（BOM）常用对象及应用 Window对象 Document对象 Form对象 3.1 Window对象 JavaScript提供了用于表示浏览器窗口的内置window对象（Window类对象） 内置对象：直接使用 Window对象的常用方法 弹出对话框方法 alert() confirm() prompt() window是BOM对象模型的根对象，在JavaScript中，很多时候，对内置window根对象属性和方法的引用，可以省略“ window. ”这个前缀 以下两种调用方式等价 Window对象的常用方法 打开新窗口方法 window.open() 前缀（window.）不能省，省略会导致方法冲突,document对象也有open()方法 open方法参数: 第一个，新窗口显示内容的URL(相对或绝对地址) 第二个，窗口名称 第三个，特性列表（窗口大小，是否有状态栏等），可以不指定该参数，采用默认形式 open示例（广告窗口） 页面加载时弹出广告窗口（ex18_2） 永不消失的广告窗口（ex18_3） Window对象的常用方法 setTimeout方法，设置浏览器过多长时间以后执行指定的程序代码，设置时间值以毫秒为单位(ex19) setInterval方法，设置浏览器每隔多长时间定期调用指定的程序代码，设置时间值以毫秒为单位(ex19_2) Window对象的常用方法 moveBy方法 Window对象的常用属性 location Location类对象的引用，代表当前窗口所显示文档的URL 可以把一个新的URL赋给location，即会引起浏览器装载并显示新URL所指向的页面 location.reload() 重新装载当前页面，即刷新 history 对Hi