《脚本语言（三）ppt培训课件》由会员分享，可在线阅读，更多相关《脚本语言（三）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事件 o
2、nSubmit事件 onMouseDown事件 和 onMouseUp事件 表单元素事件处理 小结 作业布置,事件处理,事件是发生并被处理的操作,事件：电话铃响,处理事件,JavaScript 事件处理程序,JavaScript 事件处理程序是指诸如鼠标单击、鼠标移动等事件发生时执行的一组语句,onClick事件,能够触发onClick事件的窗体元素： Button（Submit、Reset 和 Normal） Checkbox Radio button Text box Text area Link, onClick 事件处理程序,单击表单元素触发onClick事件, onClick 事件处
3、理程序浅蓝色浅黄色浅绿色,能够触发 onChange 事件的表单元素：SelectTextTextarea,onChange事件, onChange 事件处理程序function display() var newValue; newValue=F1.S1.value;“ + newValue)alert (“您已将选项更改为 “ + newValue) 监视器 鼠标 CPU,onFocus 事件,能够触发onFocus事件的窗体元素： Button Text Textarea Password Checkbox Layer Window Select Submit Reset,onBlur事
4、件,能够触发 onBlur事件的窗体元素： Button Text Textarea Password Checkbox Layer Window Select Submit Reset,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= “鼠标
5、在澳大利亚上面“;if (num=2)document.forms0.elements0.value = “鼠标在新加坡上面“;if (num=3)document.forms0.elements0.value = “鼠标在法国上面“; ,onMouseOut事件,澳大利亚 新加坡 法国,onLoad事件,您好！,onSubmit事件, onSubmit 事件处理程序示例var dataOK=false; function checkData () if (document.myForm.threeChar.value.length = 3) return true; else alert(“
6、请刚好输入 3 个字符。 “ + document.myForm.threeChar.value + “ 无效。“) ;return false; 输入 3 个字符：,能够触发onMouseDown事件和onMouseUp事件的 窗体元素： Button Document Link, 使用 MouseDown 和 MouseUP,onMouseDown事件 和 onMouseUp事件,表单元素简介 2-1,onclick,表单元素简介 2-2,Textbox 的 onBlur 事件处理程序输入一个值,文本框 3-1,onBlur,onBlur,HTML,文本框 3-2,onChange,onC
7、hange,Textbox 的 onChange 事件处理程序输入一个值,世界,在浏览器窗口中，如果文本框接收焦点，则会调用 onFocus 事件处理程序。当用户按下键盘上的 Tab 键，或用鼠标单击文本框时，将会激活事件处理程序，并调用与事件处理程序相关的函数 如果用户在文本框内选择值，将会调用 onSelect 事件处理程序。选择值既可以使用鼠标，也可以使用键盘,文本框 3-3,onFocus,onSelect,onFocus,onSelect,Focus 方法和 Select 方法function doSelect() document.myForm.myTextarea.select(
8、); function getFocus() document.myForm.myTextarea.focus(); function ischange() alert(“文本区中的内容已经改变！“); 反馈：请在此输入您的建议。您的建议有助于我们改进服务。,文本区,I,命令按钮 2-1,Button 对象var textarr=new Array(“学习 JavaScript 很有趣“,“JavaScript 用于客户端验证“,“JavaScript 入门一点也不难“); function rtext(f) var index=Math.floor(Math.random()*3);f.ra
9、ntext.value=textarrindex; ,JavaScript 用于客户端验证,命令按钮 2-2,Submit button 对象和 Reset button 对象function validate(frm)if (frm.pwd.value.length用户登录用户名 ： 密码 ： 重新键入密码：,jsmith,*,*,*,复选框,CHECKBOX 对象function rfocus(f)f.form.t1.value=f.value + “ received focus“; function reg(news)var letters=“;var flag=0;for (i=0;
10、i以下是您订阅的时事通讯 “);document.write(letters + “); elsealert(“您尚未选择时事通讯“); ,欢迎订阅时事通讯 请选择您要订阅的时事通讯：C C+ C# JAVA Visual Basic Oracle SQL Server,Oracle received focus,C received focus,C+ received focus,单选按钮对象 3-1,属性,单选按钮对象 3-2,单选按钮对象 3-3,使用 Option button 对象function check() gender = document.forms0.gender;ans
11、wer = document.forms0.answer;txt = “;for (i = 0;i请指定您的性别男 女,您选择了 男,您选择了 女,列表框对象 4-1,属性,列表框对象 4-2,方法,列表框对象 4-3,使用事件处理程序function func_display() var x=document.forms.myForm.Car;alert(x.optionsx.selectedIndex.text); Toyota Ferrari Mercedez,Toyota Ferrari Mercedes,Ferrari,Ferrari,Toyota Ferrari Mercedes,
12、Mercedes,Mercedez,列表框对象 4-4,删除选项function func_remove() var x=document.forms.myForm.mySelect;x.remove(x.selectedIndex); Toyota Ferrari Mercedez,Toyota Ferrari Mercedez,Ferrari,Toyota,Toyota,Ferrari Mercedez,表单验证,表单验证function validate()f=document.reg_form;if(f.uname.value=“)alert(“输入姓名“);f.uname.focus
13、();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事件 表单元素事件处理,作业布置,简答题 无,
