《JavaScript脚本语言(三).ppt》由会员分享，可在线阅读，更多相关《JavaScript脚本语言(三).ppt（36页珍藏版）》请在三一办公上搜索。
1、WEB 编 程,计算机科学与技术系XXX,第七讲 JavaScript脚本语言（三）,内容回顾,JavaScript 内置函数定义函数调用函数JavaScript 对象（String 对象、Math 对象、Date 对象）Window 对象（Document 对象、Event 对象、Frame 对象、History对象、Location 对象、Navigator 对象、Screen 对象）,本讲内容,事件处理概念onClick事件onChange事件onFocus 事件和onBlur事件onMouseOver事件onMouseOut事件onLoad事件onSubmit事件onMouseDown
2、事件 和 onMouseUp事件 表单元素事件处理 小结作业布置,事件处理,事件是发生并被处理的操作,事件：电话铃响,处理事件,JavaScript 事件处理程序,JavaScript 事件处理程序是指诸如鼠标单击、鼠标移动等事件发生时执行的一组语句,onClick事件,能够触发onClick事件的窗体元素：Button（Submit、Reset 和 Normal）CheckboxRadio buttonText boxText areaLink,onClick 事件处理程序,单击表单元素触发onClick事件,onClick 事件处理程序浅蓝色浅黄色浅绿色,能够触发 onChange 事件的
3、表单元素：Select Text Textarea,onChange事件,onChange 事件处理程序function display()var newValue;newValue=F1.S1.value;+newValue)alert(您已将选项更改为+newValue)监视器 鼠标CPU,onFocus 事件,能够触发onFocus事件的窗体元素：ButtonTextTextareaPasswordCheckboxLayerWindowSelectSubmitReset,onBlur事件,能够触发 onBlur事件的窗体元素：ButtonTextTextareaPasswordCheck
4、boxLayerWindowSelectSubmitReset,onFocus事件和onBlur事件 示例,onMouseOver事件,单击此处,使用 onMouseOver 和 onMouseOut var num=0;function showLink(num)if(num=0)document.forms0.elements0.value=鼠标在选择区域外面;if(num=1)document.forms0.elements0.value=鼠标在澳大利亚上面;if(num=2)document.forms0.elements0.value=鼠标在新加坡上面;if(num=3)docume
5、nt.forms0.elements0.value=鼠标在法国上面;,onMouseOut事件,澳大利亚新加坡法国,onLoad事件,您好！,onSubmit事件,onSubmit 事件处理程序示例var dataOK=false;function checkData()if(document.myForm.threeChar.value.length=3)return true;else alert(请刚好输入 3 个字符。+document.myForm.threeChar.value+无效。);return false;输入 3 个字符：,能够触发onMouseDown事件和onMous
6、eUp事件的窗体元素：ButtonDocumentLink,使用 MouseDown 和 MouseUP,onMouseDown事件 和 onMouseUp事件,表单元素简介 2-1,onclick,表单元素简介 2-2,Textbox 的 onBlur 事件处理程序输入一个值,文本框 3-1,onBlur,onBlur,HTML,文本框 3-2,onChange,onChange,Textbox 的 onChange 事件处理程序输入一个值,世界,在浏览器窗口中，如果文本框接收焦点，则会调用 onFocus 事件处理程序。当用户按下键盘上的 Tab 键，或用鼠标单击文本框时，将会激活事件处理
7、程序，并调用与事件处理程序相关的函数如果用户在文本框内选择值，将会调用 onSelect 事件处理程序。选择值既可以使用鼠标，也可以使用键盘,文本框 3-3,onFocus,onSelect,onFocus,onSelect,Focus 方法和 Select 方法function doSelect()document.myForm.myTextarea.select();function getFocus()document.myForm.myTextarea.focus();function ischange()alert(文本区中的内容已经改变！);反馈：请在此输入您的建议。您的建议有助于
8、我们改进服务。,文本区,I,命令按钮 2-1,Button 对象var textarr=new Array(学习 JavaScript 很有趣,JavaScript 用于客户端验证,JavaScript 入门一点也不难);function rtext(f)var index=Math.floor(Math.random()*3);f.rantext.value=textarrindex;,JavaScript 用于客户端验证,命令按钮 2-2,Submit button 对象和 Reset button 对象function validate(frm)if(frm.pwd.value.leng
9、th用户登录用户名：密码：重新键入密码：,jsmith,*,*,*,复选框,CHECKBOX 对象function rfocus(f)f.form.t1.value=f.value+received focus;function reg(news)var letters=;var flag=0;for(i=0;i以下是您订阅的时事通讯);document.write(letters+);elsealert(您尚未选择时事通讯);,欢迎订阅时事通讯请选择您要订阅的时事通讯：CC+C#JAVAVisual BasicOracleSQL Server,Oracle received focus,C
10、received focus,C+received focus,单选按钮对象 3-1,属性,单选按钮对象 3-2,单选按钮对象 3-3,使用 Option button 对象function check()gender=document.forms0.gender;answer=document.forms0.answer;txt=;for(i=0;i请指定您的性别男女,您选择了 男,您选择了 女,列表框对象 4-1,属性,列表框对象 4-2,方法,列表框对象 4-3,使用事件处理程序function func_display()var x=document.forms.myForm.Car;
11、alert(x.optionsx.selectedIndex.text);ToyotaFerrariMercedez,ToyotaFerrariMercedes,Ferrari,Ferrari,ToyotaFerrariMercedes,Mercedes,Mercedez,列表框对象 4-4,删除选项function func_remove()var x=document.forms.myForm.mySelect;x.remove(x.selectedIndex);ToyotaFerrariMercedez,ToyotaFerrariMercedez,Ferrari,Toyota,Toyot
12、a,FerrariMercedez,表单验证,表单验证function validate()f=document.reg_form;if(f.uname.value=)alert(输入姓名);f.uname.focus();return false;if(f.gender0.checked=false,if(f.age.value 99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();return false;欢迎来到 Aptech姓名：性别：男女密码：电子邮件地址：年龄：,John James,*,J,25,本讲小结,事件处理概念onClick事件onChange事件onFocus 事件和onBlur事件onMouseOver事件onMouseOut事件onLoad事件onSubmit事件onMouseDown事件 和 onMouseUp事件 表单元素事件处理,作业布置,简答题无,
