[工学]第05章 JavaScript与XHTML文档.ppt

Web技术原理及应用 Web系统与技术,烟台大学计算机学院 陈智育,第5讲 JavaScript与XHTML文档,内容,5.1 JavaScript的执行环境 5.2 文档对象模型DOM 5.3 在JavaScript中访问元素 5.4 事件和事件处理 5.5 处理主体元素的事件 5.6 处理按钮元素的事件 5.7 处理文本框和密码元素的事件 5.9 navigator对象 5.10 DOM树的遍历和修改,5.1 JavaScript的执行环境,与文档结构相对应的对象层次 Window对象表示浏览器显示文档的窗口 Window对象为脚本提供最大的封闭引用环境 所有全局变量都是Window的属性 Window对象的document属性 窗口显示的Document对象的引用 Document对象 forms数组-文档中表单的引用 elements数组-表单中元素的引用 其他: images,5.2 文档对象模型,DOM标准版本 DOM0: 非标准规范; 早期浏览器实现的文档模型版本; 所有JavaScript可用的浏览器都支持 DOM1: 1998年发布, 针对XHTML和XML文档 DOM2: 2000年发布, FX2比IE7支持完整 DOM3: 2004年发布, 最新版本 DOM是一种抽象模型, 定义了XHTML文档和应用程序之间的接口(API) DOM中文档为树状结构,5.2 文档对象模型,JavaScript和DOM的绑定 视文档的元素为对象 元素属性为对象属性, 名称一致 例: type和name为对象的属性 利用DOM, JavaScipt可处理文档相关事件和动态修改元素属性,内容和样式,5.2 文档对象模型,浏览器查看文档的DOM结构,table2.html,5.2 文档对象模型,浏览器查看文档的DOM结构 IE Develop toolbar,5.2 文档对象模型,浏览器查看文档的DOM结构 IE Webdeveloper v2,5.2 文档对象模型,浏览器查看文档的DOM结构 FX附加组件: DOM Inspector,5.3 在JavaScript中访问元素,几种方式 1. DOM地址(缺点: 文档变化) document.forms0.element0 2. 使用元素name属性(缺点: 需name, 新标准) document.myForm.pushMe 3. 使用getElementById方法(DOM1中定义) document.getElementById(“pushMe“),5.3 在JavaScript中访问元素,使用复选框和单选框相关联的隐式数组访问元素 数组名同name属性值, . . var numChecked = 0; /计算选中的复选框的数目 var dom = document.getElementById(“topGroup“); for (index = 0; index dom.toppings.length; index+) if (dom.toppingsindex.checked) numChecked+;,5.4 事件和事件处理,DOM0 事件模型 事件处理的基本概念 事件驱动编程: 检测事件并为这些事件提供相应的计算(代码执行顺序无法预测) 事件(event): 某些特殊情况发生时的通知, 与浏览器或用户操作相关 事件处理程序(handler): 为响应发生的相应事件而执行的脚本代码 事件注册: 将事件处理程序连接到事件的过程 document.write不能用在事件处理程序中,5.4 事件和事件处理,事件,属性和标签 使用事件对应的标签属性, 可将事件和事件处理程序关联起来 这些属性的名称和关联的事件密切相关 鼠标单击 - onclick 按键 - onkeypress - onxxx P167 表5-1 事件及其标签属性,5.4 事件和事件处理,事件,属性和标签 同一个事件属性可用在多种不同的标签中 例: onclick可用于, 也可用于 不同标签可支持的事件属性也不同 例: 支持onclick, 而不支持 P168 表5-2 事件属性及其标签 常用的事件属性, 可应用的标签, 事件描述 onclick, , 单击输入元素,5.4 事件和事件处理,事件,属性和标签 注册事件处理程序的两种方式: 将事件处理程序脚本(函数)指派给事件标签属性 对象相关事件属性进行赋值完成注册 document.getElementById(“my”).onclick=hello; 须位于处理程序函数和表单元素后; 仅赋值函数名称,5.5 处理主体元素的事件,常用事件: load和unload 例: 文档主体加载完成后, 弹出一个警告消息,load.html,load.js,5.6 处理按钮元素的事件,例: 选择单选按钮, 用对话框显示相应的信息 click事件触发调用alert方法,5.6 处理按钮元素的事件,例: radio_click.html,5.6 处理按钮元素的事件,例: radio_click.js,5.6 处理按钮元素的事件,例: 另一种实现, 通过对象属性完成事件注册; 注册语句必须出现在处理程序函数和表单之后 三个文件 XHTML文件: radio_click2.html 事件处理脚本文件: radio_click2.js 处理程序注册脚本文件: radio_click2r.js,5.6 处理按钮元素的事件,例: radio_click2.html,5.6 处理按钮元素的事件,例: radio_click2.js,隐式数组,可省略,5.6 处理按钮元素的事件,例: radio_click2r.js,另一种方法: 给每个单选按钮分配一个id属性, 并使用id完成注册 对象属性赋值的方式注册事件 缺点: 不能为注册函数指定参数 优点: 代码分离; 动态注册,5.7 处理文本框和密码框元素的事件,4种事件: blur, focus, change, select focus事件 例: 使文本框不能获得焦点, 防止修改 使用blur方法(p168 focus), 强制元素失去焦点 onfocus = this.blur,5.7 处理文本框和密码框元素的事件,focus事件-例nochange.html 头部引入脚本文件nochange.js 建立表格, 最后一列单元格插入文本框 总价计算和显示,5.7 处理文本框和密码框元素的事件,focus事件-例nochange.js,5.7 处理文本框和密码框元素的事件,验证表单输入 JavaScript一种常见应用: 在送往服务器处理之前,先检查表单输入是否有错 好处: 可节省服务器资源和网络资源 需要完成的工作: 检测错误并产生alert消息 让出错元素获取焦点(focus方法) 选定该元素高亮显示(select方法) 若出错, 事件处理函数应返回false, 阻止浏览器后续操作(如submit).,5.7 处理文本框和密码框元素的事件,验证表单输入 例: 校验密码输入 表单: 2个密码输入框, 提交按钮, 重置按钮 事件处理函数由提交按钮触发 3个文件,5.7 处理文本框和密码框元素的事件,验证表单输入-例pswd_chk.html 头部引入pswd_chk.js(定义函数chkPasswords),5.7 处理文本框和密码框元素的事件,验证表单输入-例pswd_chk.js 定义事件处理函数,5.7 处理文本框和密码框元素的事件,验证表单输入-例pswd_chkr.js 注册事件,例(略)-姓名和电话号码有效性校验, 需用正则表达式进行模式匹配,5.9 navigator对象,navigator对象表示正在使用的浏览器 可用来确定浏览器类型, 并指定合适的程序 两个常用属性 appName: 表浏览器的名称 appVersion: 表版本号 例:,5.9 navigator对象,例navigate.html和navigate.js,5.10 DOM树的遍历和修改,DOM树的遍历Traversal 节点相关属性: parentNode, previousSibling, nextSibling, childNodes, firstChild, lastChild 例: 显示无序列表mylist的项数 DOM树的修改 相关方法: insertBefore, replaceChild, removeChild, appendChild,var dom = document.getElementById(“myList“); var listItems = dom.childNodes.length; document.write(“Number of list items is: “ + listItems + “);,附: 修改样式,使用style属性 名称变化: 样式特性: background-color JavaScript不支持”-”(P116) 对象属性: dom.style.backgroundColor 例: P202 6.5.1 修改颜色,P95 3.8 颜色 p.standout color: blue; backgroud-color: red; ,附: 修改样式-例dynColors.html,附: 修改样式-例dynColors.js,附: 修改内容,元素对象的innerHtml属性 表示元素的内容,可在脚本中读写 有开始和结束标签的元素才可用, 如 表单元素的内容可通过value属性来访问 P205 6.6 动态修改内容,附: 修改内容-例dynValue.html,附: 修改内容-例dynValue.js,数组定义, P137,小结,执行环境: Window, document, forms 文档对象模型: 抽象API, 树状结构 访问元素: 3种方式, 隐式数组 事件和事件处理: 概念, 名称, 含义, 标签, 注册 处理主体元素的事件: onload 处理按钮元素的事件: onclick, 两种