04第四讲JavaScript编程技术(二).ppt

1、第四讲 JavaScript编程技术（二）,4.24.4网页事件与对象模型,*温故*,温故 网页中嵌入脚本有哪几种方式？ 如何定义函数？如何调用函数？ 如何设置或获取表单元素的值？ 作业中的问题 获取文本框中的数据：document.表单名.文本框名.value 函数定义： 4个函数，不带参数。 一个函数，带一个参数，function cal(x)，根据参数不同，进行不同的运算。 语法格式出现错误，如：case 1:-case1:,*知新*,文档对象模型(DOM) JavaScript 中的常用事件 常用对象属性、方法与事件处理 文本框 文本区域 命令按钮 复选框 单选按钮 组合框 表单验证,

2、JavaScript对象,JavaScript处理的对象主要有三种 JavaScript内置对象 String、Math、Array、Date等 浏览器对象 window、document、location、history 文档对象(重点) document对象的下级对象,浏览器对象与文档对象分层模型 下图是一个对象树，要引用某个对象就要把父级对象名都列出来。,浏览器对象与文档对象,浏览器对象与文档对象分层结构,Window 窗口对象,location 地址对象,document 文档对象,FORM 表单对象,浏览器对象的分层结构,window.document.myform.text1,Ja

3、vaScript事件处理,事件处理三要素：事件源、事件、事件处理程序 事件源：事件产生者，大部分网页标记都能产生事件，如按钮、超链接、图像、段落等 事件：事件源能够识别的一种行为 事件处理程序：事件发生后触发的程序,事件处理程序的基本语法是： 事件名=JavaScript 代码或调用函数 例如： 事件源：按钮；事件：单击(onClick)；处理程序：alert(),JavaScript 事件概述,例1 IMG对象鼠标事件处理, 图片切换 移过来看看 ,添加事件处理：切换图片,onMouseOver= src=star.jpg 表示本图片的图片名称替换为star.jpg。 请注意： 由于外面两端

4、已有双引号，为了区别，star.jpg改用为单引号括起来。,document 对象属性及方法概述,document对象的属性,例2 document对象的 bgColor属性与相应事件处理, 无标题文档 function change(color) document.bgColor=color ; 移过来我变色给你看看！ 变红色| 变蓝色| 变黄色 ,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,文本框对象常用的事件、方法、属性,文本框元素用于在表单中输入数据,命令按钮与表单对象,命令按钮的onClick事件（命令有三种类型） button：需要编写事件处理程序 s

5、ubmit、reset：有默认的onClick事件处理程序 单击submit按钮时，触发表单的onSubmit事件 单击reset按钮，将表单元素恢复为默认值 为submit、reset按钮的onClick事件添加自定义事件处理程序 onClick=return 自定义函数() 首先调用自定义函数，然后根据返回值决定是否执行默认的事件处理程序，如果返回true，则执行，否则不执行。 表单的onSubmit事件 默认事件处理程序：向服务器提交表单数据 添加自定义事件处理程序： onSubmit=return 自定义函数() 首先调用自定义函数，根据返回值决定是否向服务器提交表单数据，如果返回tr

6、ue，则提交，否则不提交。,例3 提交按钮与表单验证,提交表单前，检测表单，用户名和密码不能为空，密码与确认密码必须一致，否则不提交数据。,例3网页界面设计,首先调用自定义函数check()，如果check()返回真，则执行submit默认事件处理程序，否则不执行,例3函数定义,不合法时返回false,合法则返回true,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象 常用事件 onChange值发生变化时 onClick单击复选框时 常用属性 checked 复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 val

7、ue 设置或获取复选框的值,请选择您的爱好： 电影 音乐,单选按钮对象,当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象 常用事件 onChange值发生变化时 onClick单选按钮被选定或取消选定 常用属性 checked 单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 value 设置或获取单选按钮的值,男 女,常用事件 onChange当选项发生改变时产生 常用属性 value 下拉列表框中，被选选项的值 selectedIndex 返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推,下

8、拉列表框-事件和属性,例4表单验证,JavaScript 最常见的应用之一就是验证表单,表单验证, function check( ) var f=document.reg_form; q=f.email.value.indexOf(); if(f.uname.value=) alert(请输入姓名); f.uname.focus(); return false; else if (f.pwd.value.length 6) | (f.pwd.value = ) alert(请输入至少 6 个字符的密码！); f.password.focus(); return false; ,检查姓名,检查

9、密码,表单验证,else if (q=-1) alert(请输入有效的电子邮件地址); f.email.focus(); return false; else if (f.age.value 99 | isNaN(f.age.value) alert(请输入有效的年龄！); f.age.focus(); return false; ,检查邮件地址,检查年龄,总结,浏览器对象是一个分层次的结构，window是顶层的根对象 事件处理：事件源，事件，事件处理程序 默认事件处理程序 添加自定义事件处理程序 常用表单对象的事件、属性和方法 表单验证应用,作业,试编写JavaScript脚本程序，实现用户

10、注册表单的验证，界面如下图所示，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（action属性值为提交成功网页）。,知识拓展window 对象,Window对象的属性 在文档对象模型的层次结构中，所有下层对象都是其上层对象的子对象。而子对象其实也是父对象的属性。,知识拓展 window 对象,window对象的方法,知识拓展 Window 对象 (例), function openwindow( ) window.open(google.htm); function closewindow( ) window.close ( );

11、,使用 Open 方法 打开新窗口,使用 Close 方法 关闭窗口,添加单击事件,window是最顶层的根，可以省略 window.open(google.htm); 可简写为： open(google.htm); close（）方法也是如此。,知识拓展 History对象,history 对象 方法,Back ( ) 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；,知识拓展 Location对象,Location 对象 属性 方法,实训四 JavaScript高级应用,实训目的