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