Javascript课件4.pptVIP

第十章 处理表单和表单元素事件 回顾 常用的浏览器对象有哪些？ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？ history对象的哪个方法相当于IE浏览器中的后退按钮？ 希望动态改变网页的背景色，应使用哪个对象的bgColor属性？ IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息 目标 使用与以下各项关联的事件处理程序 ： 文本框 文本区域 命令按钮 复选框 单选按钮 组合框 编写用于验证表单的 JavaScript 代码 事件处理程序和表单元素简介 2-1 文本框对象 文本框对象 – 事件处理程序 文本框对象 命令按钮对象 “按钮 - 事件处理程序 复选框对象 复选框 - 事件处理程序 单选按钮对象 单选按钮 - 事件和属性 下拉列表框 下拉列表框-事件和属性 表单验证 2-1 总结 OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序 JavaScript的主要功能之一是用于表单验证 表单验证 2-2 <SCRIPT LANGUAGE="JavaScript"> function validate( ) { var f=document.reg_form; if(f.uname.value=="") { alert("请输入姓名"); f.uname.focus(); return false; } if (f.gender[0].checked==false && f.gender[1].checked==false) { alert("请指定性别"); f.gender[0].focus(); return false; } if ((f.password.value.length < 6) || (f.password.value == "")) { alert("请输入至少 6 个字符的密码！"); f.password.focus(); return false; } 检查姓名 检查性别 检查密码 表单验证 2-2 q=f.email.value.indexOf("@"); if (q==-1) { alert("请输入有效的电子邮件地址"); f.email.focus(); return false; } if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value)) { alert("请输入有效的年龄！"); f.age.focus(); return false; } } </SCRIPT> <FORM name="reg_form" onSubmit="return validate()" action="submit.htm"> 检查邮件地址 检查年龄 参考答案： 1）window ，location，history，document等 2）onload 事件，open（）方法 3）back（）方法 4）document对象 5）location 告诉学员： 任何特定事件处理程序都有一列与其关联的表单元素。 本章将讨论各种表单元素以及这些元素的常用事件处理程序。 文本框、文本区域、按钮和复选框等各种表单元素都支持不同类型的事件处理程序。 讲解步骤： 1.先演示例子：参考TG10-Source文件夹中的“文本框”用例。 2.提问：如何实现，应使用文本框哪些事件？哪些方法 引导： 1）onFocus，onBlur，onchange事件 ) select（）和focus( )方法 3.实现步骤： 1）使用DreamWeaver设计页面，如上图所示。 2）添加无边框样式，进入下一页幻灯片。 讲解要点： onChange事件 onChange 事件将跟踪用户在文本框中所作的修改,当用户在文本框中完成修改之后，将激活该事件。 select（）方法 选中文本内容，突出显示输入区域，一般用于提示用户重新输入。 readonly属性 某些文本框希望用户不能修改，例如，某个拍卖网站的起拍价，一般是卖方或拍卖公司定价， 所以希望用户不能修改，这时可以指定readonly只读属性 讲解这些事件，为后面的例子讲解打基础。 讲解步骤： 演示添加无边框样式：HTML选择器INPUT 。 3）添加脚本代码，进入下一页幻灯片 讲解要点： 1）帐号文本框添加onFocus和onBlur焦点事件： 帐号文本框获得