Javascript课件4.ppt
第十章,处理表单和表单元素事件,2,回顾,常用的浏览器对象有哪些？希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？history对象的哪个方法相当于IE浏览器中的后退按钮？希望动态改变网页的背景色，应使用哪个对象的bgColor属性？IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息,3,目标,使用与以下各项关联的事件处理程序：文本框 文本区域 命令按钮 复选框 单选按钮 组合框 编写用于验证表单的 JavaScript 代码,4,事件处理程序和表单元素简介 2-1,当事件发生时，将执行与之相关的 JavaScript 代码,当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码,5,事件处理程序和表单元素简介 2-2,当用户单击“注册”按钮时，将弹出一条消息。,function button_click()alert(“请向本网站注册);,6,文本框对象,文本框元素用于在表单中输入字、词或一系列数字可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素,7,文本框对象 事件处理程序,8,文本框对象,card,price,number,tot,myform,9,文本框对象,添加无边框样式,10,文本框对象-onChange 事件处理程序,function clearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;function check()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();document.myform.card.select();function compute()var price=document.myform.price.value;var number=document.myform.number.value;document.myform.tot.value=price*number;,onFocus事件调用的函数clearText（）清空帐号文本框中的内容,onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字,onChange事件调用的函数compute()用来计算总价,11,文本框对象,.帐号：.单价：￥.数量：个总价：￥.,帐号文本框添加onFocus和onBlur焦点事件,价格只读属性,数量文本框添加onChange事件,12,命令按钮对象,命令按钮对象是网页中最常用的元素之一,13,“按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,14,命令按钮事件处理程序,userName,pass1,pass2,type=reset,type=submit,myform,15,命令按钮对象,function check()var userName=document.myform.userName.value;var pass1=document.myform.pass1.value;var pass2=document.myform.pass2.value;if(pass1=pass2)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎+userName+光临！);return true;else alert(密码不能为空！n请输入密码);return false;else alert(确认码必须和输入的密码相同！);return false;,onSubmit事件调用的函数：输入数据检查,如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填,16,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用 标签,请选择您的爱好 电影 电影,17,复选框-事件处理程序,18,复选框-事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,19,复选框-事件处理程序,function buy()var s=;if(document.myform.checkbox1.checked=true)/如果被选中 s=s+document.myform.checkbox1.value+“n”;/累计选中的商品 if(document.myform.checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s=s+document.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品:+s+);,单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品,是为了原样显示字符串中的换行”n”格式,onClick=buy()“,20,复选框-事件处理程序,function buy()var s=;for(var i=0;i+s+);/其他代码略/其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox,21,单选按钮对象,当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用 标签,男女,22,单选按钮-事件和属性,23,单选按钮-事件处理程序,为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组,24,单选按钮事件处理程序,function buy()var s=;for(var i=0;i+s+);else if(confirm(您准备卖出下物品，确定吗？：n+s)=true)document.write(您卖出了以下物品:+s+);,根据用户是买家还是卖家，弹出不同的确认信息框,判断是否选中第一个单选按钮(买家),25,下拉列表框,-请选择开户帐号的城市-北京市 上海市 重庆市 天津市 四川省 山东省 湖北省,26,下拉列表框-事件和属性,options0,options1,selectedIndex属性：表示被选中的索引号：3,value属性：被选中选项的值,27,下拉列表框-事件处理程序,28,下拉列表框-事件处理程序,userName,myselect,mycity,myform,29,下拉列表框-事件处理程序,function myfun1()var d=document.myform.myselect.selectedIndex;if(d=1|d=2|d=3|d=4)/北京、上海、重庆、天津 document.myform.city.value=document.myform.myselect.optionsd.text;function myfun2()var userName=document.myform.userName.value;var province=document.myform.myselect.value;var city=document.myform.city.value;document.write();document.write(您的注册信息如下：);document.write();document.write(姓名：+userName);document.write(帐号开户省份：+province);document.write(帐号开户城市：+city);,.,下拉列表框onChange事件调用的函数：判断选择的省份是否是直辖市,单击”快速注册“图片时调用的函数myfun2()，显示注册信息,30,表单验证 2-1,JavaScript 最常见的用法之一就是验证表单对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法,31,表单验证 2-2,function validate()var f=document.reg_form;if(f.uname.value=)alert(请输入姓名);f.uname.focus();return false;if(f.gender0.checked=false,检查姓名,检查性别,检查密码,32,表单验证 2-2,q=f.email.value.indexOf();if(q=-1)alert(请输入有效的电子邮件地址);f.email.focus();return false;if(f.age.value 99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();return false;,检查邮件地址,检查年龄,33,总结,OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序JavaScript的主要功能之一是用于表单验证,
