JavaScript编程技术.ppt

第四讲第四讲 JavaScript编程技术（二）编程技术（二）4.24.4网页事件与对象模型网页事件与对象模型*温故温故*o温故温故n网页中嵌入脚本有哪几种方式？网页中嵌入脚本有哪几种方式？n如何定义函数？如何调用函数？如何定义函数？如何调用函数？n如何设置或获取表单元素的值？如何设置或获取表单元素的值？o作业中的问题作业中的问题n获取文本框中的数据：获取文本框中的数据：document.表单名表单名.文本框名文本框名.valuen函数定义：函数定义：o4个函数，不带参数。个函数，不带参数。o一个函数，带一个参数，一个函数，带一个参数，function cal(x)，根据参数不同，进行，根据参数不同，进行不同的运算。不同的运算。n语法格式出现错误，如：语法格式出现错误，如：case 1:-case1:*知新知新*o文档对象模型文档对象模型(DOM)oJavaScript 中的常用事件中的常用事件o常用对象属性、方法与事件处理常用对象属性、方法与事件处理 n文本框文本框 n文本区域文本区域 n命令按钮命令按钮 n复选框复选框 n单选按钮单选按钮 n组合框组合框 o表单验证表单验证JavaScript对象对象oJavaScript处理的对象主要有三种处理的对象主要有三种nJavaScript内置对象内置对象oString、Math、Array、Date等等n浏览器对象浏览器对象owindow、document、location、historyn文档对象文档对象(重点重点)odocument对象的下级对象对象的下级对象o浏览器对象与文档对象分层模型浏览器对象与文档对象分层模型n下图是一个对象树，下图是一个对象树，要引用某个对象就要把父级对象名都列出来要引用某个对象就要把父级对象名都列出来。浏览器对象与文档对象浏览器对象与文档对象window窗口对象location地址对象document网页文档对象links超链接对象anchors锚记对象forms表单对象images图像对象form elements表单元素对象history历史对象浏览器对象与文档对象分层结构浏览器对象与文档对象分层结构http:/mWindow 窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构浏览器对象的分层结构window.document.myform.text1 JavaScript事件处理事件处理o事件处理三要素：事件源、事件、事件处理程序事件处理三要素：事件源、事件、事件处理程序 n事件源：事件产生者，大部分网页标记都能产生事件，如按钮、超链事件源：事件产生者，大部分网页标记都能产生事件，如按钮、超链接、图像、段落等接、图像、段落等n事件：事件源能够识别的一种行为事件：事件源能够识别的一种行为n事件处理程序：事件发生后触发的程序事件处理程序：事件发生后触发的程序事件处理程序的基本语法是：事件处理程序的基本语法是：事件名事件名=JavaScript=JavaScript 代码或调用函数代码或调用函数 例如：例如：INPUT type=button value=)/事件源：事件源：按钮；按钮；事件：事件：单击单击(onClick)(onClick)；处理程序：处理程序：alert()alert()JavaScript 事件概述事件概述 事件类型事件类型事件名事件名说明说明鼠标类鼠标类onClick鼠标单击对象时鼠标单击对象时onMouseOver 鼠标悬停在对象区域时鼠标悬停在对象区域时onMouseOut 鼠标移出对象区域时鼠标移出对象区域时onMouseMove鼠标在对象区域内移动时鼠标在对象区域内移动时onMouseDown 在对象区域内按下鼠标键时在对象区域内按下鼠标键时onMouseUp 在对象区域内弹起鼠标按键时在对象区域内弹起鼠标按键时编辑类编辑类onChange 值发生改变时值发生改变时onFocus 对象获得焦点时，如文本框获得鼠标光标。对象获得焦点时，如文本框获得鼠标光标。onBlur 失去焦点时失去焦点时表单类表单类onSubmit 单击单击submit按钮提交表单时按钮提交表单时文档类文档类onLoad 网页文档加载时网页文档加载时键盘类键盘类onKeyDown按下键盘按键时按下键盘按键时例例1 IMG对象鼠标事件处理对象鼠标事件处理图片切换 移过来看看添加事件处理：切换图片添加事件处理：切换图片onMouseOver=src=star.jpg 表示本图片的图片名称替换为表示本图片的图片名称替换为star.jpgstar.jpg。请注意：请注意：由于外面两端已有双引号，为了区别，由于外面两端已有双引号，为了区别，star.jpgstar.jpg改用为单引号括起来。改用为单引号括起来。document 对象属性及方法概述对象属性及方法概述名称名称 说明说明常用属性常用属性alinkColor活活动链动链接的接的颜颜色色(链链接被按下接被按下时时)vlinkColor访问过访问过的的链链接的接的颜颜色色 linkColor链链接的接的颜颜色色title包含文档的包含文档的标题标题formName以文档中包含的表以文档中包含的表单单名引用指定表名引用指定表单单forms以数组索引值表示所有表单以数组索引值表示所有表单URL当前文档的当前文档的 URLbgColordocument 对对象的背景色象的背景色 images以数以数组组索引索引值值表示所有表示所有图图像像 常用方法常用方法write(text)将文本写入文档将文本写入文档writeln(text)将文本分行写入文档将文本分行写入文档odocument对象的属性对象的属性例例2 document对象的对象的 bgColor属性与相应事件处理属性与相应事件处理无标题文档无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！移过来我变色给你看看！变红色变红色|变蓝色变蓝色|变黄色变黄色利用利用documentdocument对象对象的的bgColorbgColor属性改变属性改变背景色背景色添加鼠标悬停事件文本框对象常用的事件、方法、属性文本框对象常用的事件、方法、属性o文本框元素用于在表单中输入数据文本框元素用于在表单中输入数据事件事件onChange文本框的文本框的值值被修改被修改onFocus光光标进标进入文本框中入文本框中方法方法focus()获得焦点，即获得鼠标光标获得焦点，即获得鼠标光标select()选中文本内容，突出显示输入区域选中文本内容，突出显示输入区域属性属性readonly 只读，文本框中的内容不能修改只读，文本框中的内容不能修改 命令按钮与表单对象命令按钮与表单对象o命令按钮的命令按钮的onClick事件（命令有三种类型）事件（命令有三种类型）nbutton：需要编写事件处理程序：需要编写事件处理程序nsubmit、reset：有默认的：有默认的onClick事件处理程序事件处理程序o单击单击submit按钮时，触发表单的按钮时，触发表单的onSubmit事件事件o单击单击reset按钮，将表单元素恢复为默认值按钮，将表单元素恢复为默认值n为为submit、reset按钮的按钮的onClick事件添加自定义事件处理程序事件添加自定义事件处理程序oonClick=return 自定义函数自定义函数()o首先调用自定义函数，然后根据返回值决定是否执行默认的事件处理首先调用自定义函数，然后根据返回值决定是否执行默认的事件处理程序，如果返回程序，如果返回true，则执行，否则不执行。则执行，否则不执行。o表单的表单的onSubmitonSubmit事件事件n默认事件处理程序：向服务器提交表单数据默认事件处理程序：向服务器提交表单数据n添加自定义事件处理程序：添加自定义事件处理程序：onSubmit=return 自定义函数自定义函数()o首先调用自定义函数，根据返回值决定是否向服务器提交表单数据，首先调用自定义函数，根据返回值决定是否向服务器提交表单数据，如果返回如果返回true，则提交，否则不提交。则提交，否则不提交。例例3 提交按钮与表单验证提交按钮与表单验证o提交表单前，检测表单，用户名和密码不能为空，密码提交表单前，检测表单，用户名和密码不能为空，密码与确认密码必须一致，否则不提交数据。与确认密码必须一致，否则不提交数据。例例3网页界面设计网页界面设计首先调用自定义函数check()，如果check()返回真，则执行submit默认事件处理程序，否则不执行例例3函数定义函数定义不合法时返回false合法则返回true复选框对象复选框对象o当用户需要在选项列表中选择多项时，可以使用复选框对象当用户需要在选项列表中选择多项时，可以使用复选框对象o常用事件常用事件nonChange值发生变化时值发生变化时 nonClick单击复选框时单击复选框时o常用属性常用属性ncheckedo复选框是否被选中，选中为复选框是否被选中，选中为true，未选中为，未选中为false。您可以使用此属性。您可以使用此属性查看复选框的状态或设置复选框是否被选中查看复选框的状态或设置复选框是否被选中n valueo设置或获取复选框的值设置或获取复选框的值请选择您的爱好：电影音乐单选按钮对象单选按钮对象o当用户只需要从选项列表中选择一个选项时，可以使用单选当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象按钮对象o常用事件常用事件nonChange值发生变化时值发生变化时 nonClick单选按钮被选定或取消选定单选按钮被选定或取消选定o常用属性常用属性ncheckedo单选按钮是否被选中，选中为单选按钮是否被选中，选中为true，未选中为，未选中为false。您可以使用此。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中属性查看单选按钮的状态或设置单选按钮是否被选中nvalueo设置或获取单选按钮的值设置或获取单选按钮的值男女o常用事件常用事件nonChange当选项发生改变时产生当选项发生改变时产生o常用属性常用属性nvalueo下拉列表框中，被选选项的值下拉列表框中，被选选项的值nselectedIndexo返回被选择的选项的索引号，如果选中第一个返回返回被选择的选项的索引号，如果选中第一个返回0，第二个返回，第二个返回1，其他类推，其他类推下拉列表框下拉列表框-事件和属性事件和属性例例4表单验证表单验证oJavaScript 最常见的应用之一就是验证表单最常见的应用之一就是验证表单表单验证表单验证function check()var f=document.reg_form;q=();if(f.uname.value=)alert(请输入姓名);();return false;else if(f.pw 6)|(f.pwd.value=)alert(请输入至少 6 个字符的密码！);();return false;检查姓名检查密码表单验证表单验证else if(q=-1)alert(请输入有效的电子邮件地址);();return false;else if(99|)alert(请输入有效的年龄！);();return false;检查邮件地址检查年龄总结总结 o浏览器对象是一个分层次的结构，浏览器对象是一个分层次的结构，window是顶层的是顶层的根对象根对象o事件处理：事件源，事件，事件处理程序事件处理：事件源，事件，事件处理程序n默认事件处理程序默认事件处理程序n添加自定义事件处理程序添加自定义事件处理程序o常用表单对象的事件、属性和方法常用表单对象的事件、属性和方法o表单验证应用表单验证应用作业作业 o试编写试编写JavaScript脚本程序，实现用户注册表单的验证，脚本程序，实现用户注册表单的验证，界面如下图所示，验证要求：界面如下图所示，验证要求：在提交表单时对每一个表单输在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（部合法，则提交成功（action属性值为提交成功网页）。属性值为提交成功网页）。知识拓展知识拓展window 对象对象 名称名称 说明说明 document表示当前浏览器窗口中的表示当前浏览器窗口中的 HTML 文档。文档。history 表示客户访问过的表示客户访问过的URL的相关信息。的相关信息。location表示当前窗口显示的当前表示当前窗口显示的当前 URL 的信息。的信息。name设置或检索窗口或框架的名称。设置或检索窗口或框架的名称。status 表示当前浏览器的状态栏消息。表示当前浏览器的状态栏消息。screen表示用户屏幕，提供屏幕尺寸等信息。表示用户屏幕，提供屏幕尺寸等信息。其它其它oWindow对象的属性对象的属性n在文档对象模型的层次结构中，所有下层对象都是其上层对象在文档对象模型的层次结构中，所有下层对象都是其上层对象的子对象。而子对象其实也是父对象的属性。的子对象。而子对象其实也是父对象的属性。知识拓展知识拓展 window 对象对象 名称名称 说明说明 alert(提示信息提示信息)弹出消息对话框。弹出消息对话框。confirm（提示信息提示信息）弹出一个确认对话框，包含一个确定取消按钮弹出一个确认对话框，包含一个确定取消按钮prompt（提示信息提示信息,初始值）初始值）弹出提示信息框弹出提示信息框open(url,name)打开具有指定名称的新窗口，并加载给定打开具有指定名称的新窗口，并加载给定 URL 所指定的所指定的文档；如果没有提供文档；如果没有提供 URL，则打开一个空白文档，则打开一个空白文档close()关闭当前窗口关闭当前窗口setTimeout(函数函数,毫秒数毫秒数)设置定时器：经过指定毫秒值后执行某个函数设置定时器：经过指定毫秒值后执行某个函数 clearTimeout(定时器对象定时器对象)取消由取消由setTimeout()设置的定时器设置的定时器moveTo(x,y)将窗口移动到指定的坐标处，将窗口移动到指定的坐标处，x和和y均以像素为单位均以像素为单位moveBy(offsetx,offsety)将窗口移动指定的位移量将窗口移动指定的位移量其它其它owindow对象的方法对象的方法 知识拓展知识拓展 Window 对象对象(例例)function openwindow()window.open(google.htm);function closewindow()window.close();使用 Open 方法打开新窗口 使用 Close 方法关闭窗口添加单击事件windowwindow是最顶层的根，可以省略是最顶层的根，可以省略window.open(google.htm);window.open(google.htm);可简写为：可简写为：open(google.htm);open(google.htm);closeclose（）方法也是如此。（）方法也是如此。知识拓展知识拓展 History对象对象ohistory 对象对象 n方法方法 名称名称 说明说明 back()加加载载 History 列表中的上一个列表中的上一个 URL。forward()加加载载 History 列表中的下一个列表中的下一个 URL。go(url or number)加加载载 History 列列表表中中的的一一个个 URL，或或要要求求浏浏览览器移器移动动指定的指定的页页面数。面数。Back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；知识拓展知识拓展 Location对象对象oLocation 对象对象 n属性属性 n方法方法名称名称 说明说明 host设设置或置或检检索位置或索位置或 URL 的主机名和端口号的主机名和端口号hostname设设置或置或检检索位置或索位置或 URL 的主机名部分的主机名部分href设设置或置或检检索完整的索完整的 URL 字符串字符串名称名称说明说明assign(url)加载加载 URL 指定的新的指定的新的 HTML 文档。文档。reload()重新加载当前页重新加载当前页replace(url)通过加载通过加载 URL 指定的文档来替换当前文档指定的文档来替换当前文档实训四实训四 JavaScript高级应用高级应用o实训目的实训目的n通过本次训练，使学生了解通过本次训练，使学生了解JavaScript脚本语言浏览器对象，脚本语言浏览器对象，掌握掌握JavaScript验证输入表单的方法。验证输入表单的方法。o实训内容实训内容n按要求设计一个用户注册表单，并实现验证功能，验证要求：按要求设计一个用户注册表单，并实现验证功能，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（合法，则进行提示，如果全部合法，则提交成功（action属性属性值为提交成功网页）。值为提交成功网页）。o实训要求实训要求n总结在实训过程中遇到的问题总结在实训过程中遇到的问题