JavaScript编程技术.ppt

《JavaScript编程技术.ppt》由会员分享，可在线阅读，更多相关《JavaScript编程技术.ppt（30页珍藏版）》请在三一办公上搜索。

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

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

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

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

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

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

7、个选项时，可以使用单选按钮对象常用事件onChange值发生变化时 onClick单选按钮被选定或取消选定常用属性checked单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中value设置或获取单选按钮的值,男女,常用事件onChange当选项发生改变时产生常用属性value下拉列表框中，被选选项的值selectedIndex返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推,下拉列表框-事件和属性,例4表单验证,JavaScript 最常见的应用之一就是验证表单,表单验证,function check()

8、var f=document.reg_form;q=();if(f.uname.value=)alert(请输入姓名);();return false;else if(f.pw 6)|(f.pwd.value=)alert(请输入至少 6 个字符的密码！);();return false;,检查姓名,检查密码,表单验证,else if(q=-1)alert(请输入有效的电子邮件地址);();return false;else if(99|)alert(请输入有效的年龄！);();return false;,检查邮件地址,检查年龄,总结,浏览器对象是一个分层次的结构，window是顶层的根对象事

9、件处理：事件源，事件，事件处理程序默认事件处理程序添加自定义事件处理程序常用表单对象的事件、属性和方法表单验证应用,作业,试编写JavaScript脚本程序，实现用户注册表单的验证，界面如下图所示，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（action属性值为提交成功网页）。,知识拓展window 对象,Window对象的属性在文档对象模型的层次结构中，所有下层对象都是其上层对象的子对象。而子对象其实也是父对象的属性。,知识拓展 window 对象,window对象的方法,知识拓展 Window 对象(例),function o

10、penwindow()window.open(google.htm);function closewindow()window.close();,使用 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高级应用,实训目的通过本次训练，使学生了解JavaScript脚本语言浏览器对象，掌握JavaScript验证输入表单的方法。实训内容按要求设计一个用户注册表单，并实现验证功能，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（action属性值为提交成功网页）。实训要求总结在实训过程中遇到的问题,