第07讲 JavaScript脚本语言ppt课件

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事件的窗体元素：ButtonSubmit、Reset 和 NormalCheckboxRadio buttonText boxText areaLinkonClick 事件处置程序事件处置程序 单击表单元素触发onClick事件onClick 事件处置程序事件处置程序浅蓝色浅蓝色浅黄色浅

3、黄色浅绿色浅绿色 可以触发可以触发 onChange 事件的表单元素：事件的表单元素： Select Text TextareaonChange事件onChange 事件处置程序事件处置程序function display()var newValue;newValue=F1.S1.value; + newValue)alert (您已将选项更改为您已将选项更改为 + newValue)监视器监视器 鼠标鼠标CPU onFocus 事件可以触发onFocus事件的窗体元素：ButtonTextTextareaPasswordCheckboxLayerWindowSelectSubmitReset

4、onBlur事件可以触发 onBlur事件的窗体元素：ButtonTextTextareaPasswordCheckboxLayerWindowSelectSubmitResetonFocus事件和onBlur事件 例如 onMouseOver事件单击此处单击此处运用运用 onMouseOver 和和 onMouseOut var num =0;function showLink(num) if (num=0) document.forms0.elements0.value = 鼠标在选择区域外面鼠标在选择区域外面; if (num=1) document.forms0.elements0.v

5、alue= 鼠标在澳大利亚上面鼠标在澳大利亚上面; 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.v

6、alue.length = 3) return true;else alert(请刚好输入请刚好输入 3 个字符。个字符。 + document.myForm.threeChar.value + 无效。无效。) ; return false;输入输入 3 个字符：个字符： 可以触发onMouseDown事件和onMouseUp事件的窗体元素：ButtonDocumentLink 运用运用 MouseDown 和和 MouseUPINPUT type = button name = text1 value= 更改颜色更改颜色 onMouseDown=(document.bgColor=aqua)

7、 onMouseUp=(document.bgColor=limegreen) onMouseDown事件 和 onMouseUp事件 表单元素简介 2-1onclick表单元素事件处理程序在以下情况下触发文本框onBlur文本框失去焦点文本框失去焦点onChange文本框的值被修改文本框的值被修改onFocus文本框接收焦点文本框接收焦点onSelect文本框的值被选定文本框的值被选定文本区onBlur光标退出文本区域光标退出文本区域onChange文本区的值被修改文本区的值被修改onFocus文本区接收焦点文本区接收焦点onSelect文本区内的值被选中文本区内的值被选中表单元素简介 2-

8、2表单元素事件处理程序在以下情况下触发命令按钮onBlur按钮失去焦点按钮失去焦点onClick按钮被单击按钮被单击onMouseDown鼠标按钮被按下鼠标按钮被按下onMouseUp鼠标按钮被释放鼠标按钮被释放onFocus按钮接收焦点按钮接收焦点选择框onBlur复选框失去焦点复选框失去焦点onClick复选框被选定或取消选定复选框被选定或取消选定onFocus复选框接收焦点复选框接收焦点Textbox 的的 onBlur 事件处置程序事件处置程序输入一个值输入一个值 文本框 3-1onBluronBlurHTML文本框 3-2onChangeonChangeTextbox 的的 onCh

9、ange 事件处置程序事件处置程序输 入 一 个 值输 入 一 个 值 世界在阅读器窗口中，假设文本框接纳焦点，那么会调用 onFocus 事件处置程序。当用户按下键盘上的 Tab 键，或用鼠标单击文本框时，将会激活事件处置程序，并调用与事件处置程序相关的函数假设用户在文本框内选择值，将会调用 onSelect 事件处置程序。选择值既可以运用鼠标，也可以运用键盘 文本框 3-3onFocusonSelectonFocusonSelectFocus 方法和方法和 Select 方法方法function doSelect() document.myForm.myTextarea.select();

10、 function getFocus() document.myForm.myTextarea.focus(); function ischange() alert(文本区中的内容曾经改动！文本区中的内容曾经改动！); 反响：反响：请在此输入您的建议。您的建议有助于我们改良效力。请在此输入您的建议。您的建议有助于我们改良效力。 文本区I命令按钮 2-1按钮类型事件处理程序在以下情况下触发submitonSubmit在单击在单击“提交提交”按钮时按钮时resetonClick在单击在单击“重置重置”按钮时按钮时Button 对象对象var textarr=new Array(学习学习 JavaS

11、cript 很有趣很有趣,JavaScript 用于客户端验证用于客户端验证,JavaScript 入门一点也不难入门一点也不难);function rtext(f) var index=Math.floor(Math.random()*3); f.rantext.value=textarrindex; JavaScript 用于客户端验证 命令按钮 2-2Submit button 对象和对象和 Reset button 对象对象function validate(frm) if (frm.pwd.value.length=0) alert(请输入密码请输入密码); return false

12、; else if(frm.pwd.value=frm.rpwd.value) alert(欢迎欢迎); return true; else alert(密码不匹配密码不匹配); return false; 用户登录用户登录用户名用户名 ：密码密码 ：重新键入密码：重新键入密码： jsmith*复选框CHECKBOX 对象对象function rfocus(f) f.form.t1.value=f.value + received focus;function reg(news) var letters=; var flag=0; for (i=0;inews.length;i+) if (n

13、ewsi.checked=true) flag=1; letters+=newsi.value + n;if(flag=1)document.write(以下是您订阅的时事通讯以下是您订阅的时事通讯 );document.write(letters + );elsealert(您尚未选择时事通讯您尚未选择时事通讯); 欢迎订阅时事通讯欢迎订阅时事通讯请选择您要订阅的时事通讯：请选择您要订阅的时事通讯：CC+C#JAVAVisual BasicOracleSQL ServerOracle received focusC received focusC+ received focus单项选择按钮对

14、象 3-1名称说明checked通过布尔值指定按钮的状态form指定包含元素的表单name设置控件按钮的名称type指定元素的类型value设置选项按钮的值属性属性单项选择按钮对象 3-2表单元素事件处理程序在以下情况下触发单选按钮onBlur单选按钮失去焦点onClick单选按钮被选定或取消选定onFocus单选按钮接收焦点单项选择按钮对象 3-3运用运用 Option button 对象对象function check() gender = document.forms0.gender; answer = document.forms0.answer; txt = ; for (i = 0

15、;igender.length;i+) if (genderi.checked) txt = txt + genderi.value + ; answer.value = 您选择了您选择了 + txt;请指定您的性别请指定您的性别男男女女 您选择了 男 您选择了 女列表框对象 4-1名称说明disabled用指定的布尔值禁用列表multiple可以选择多项form指定包含元素的表单selectedIndex以数字形式检索选定的选项length检索选项元素的数目options作为集合返回选项元素name设置列表名称属性属性列表框对象 4-2名称说明optionsindex. add(option

16、,insertBefore)将元素添加到列表optionsindex. remove(index)从列表中删除元素方法方法表单元素事件处理程序在以下情况下使用列表框onBlur列表框失去焦点onChange选项被选定或取消选定onFocus列表框接收焦点列表框对象 4-3运用事件处置程序运用事件处置程序function func_display() var x=document.forms.myForm.Car; alert(x.optionsx.selectedIndex.text);ToyotaFerrariMercedezToyotaFerrariMercedesFerrariFerra

17、riToyotaFerrariMercedesMercedesMercedez列表框对象 4-4删除选项删除选项function func_remove() var x=document.forms.myForm.mySelect; x.remove(x.selectedIndex);ToyotaFerrariMercedezToyotaFerrariMercedezFerrariToyotaToyotaFerrariMercedez表单验证 表单验证表单验证function validate() f=document.reg_form; if(f.uname.value=) alert(输入

18、姓名输入姓名); f.uname.focus(); return false; if (f.gender0.checked=false & f.gender1.checked=false) alert(请指定性别请指定性别); f.gender0.focus(); return false; if (f.password.value.length 6) | (f.password.value = ) alert(请输入至少有请输入至少有 6 个字符的密码！个字符的密码！); f.password.focus(); return false; q=f.value.indexOf(); if (q=-1) alert(不是有效的电子邮件不是有效的电子邮件); f.focus(); return false; if (f.age.value 99 | isNaN(f.