04第4讲JavaScript编程技术(二).ppt

第四讲 JavaScript编程技术（二） 4.2－4.4网页事件与对象模型 ***温故*** 温故 网页中嵌入脚本有哪几种方式？ 如何定义函数？如何调用函数？ 如何设置或获取表单元素的值？ 作业中的问题 获取文本框中的数据：[document.]表单名.文本框名.value 函数定义： 4个函数，不带参数。 一个函数，带一个参数，function cal(x){}，根据参数不同，进行不同的运算。 语法格式出现错误，如：case 1:--case1: ***知新*** 文档对象模型(DOM) JavaScript 中的常用事件 常用对象属性、方法与事件处理 文本框 文本区域 命令按钮 复选框 单选按钮 组合框 表单验证 JavaScript对象 JavaScript处理的对象主要有三种 JavaScript内置对象 String、Math、Array、Date等 浏览器对象 window、document、location、history 文档对象(重点) document对象的下级对象 浏览器对象与文档对象 浏览器对象与文档对象分层模型 下图是一个对象树，要引用某个对象就要把父级对象名都列出来。 浏览器对象与文档对象分层结构 JavaScript事件处理 事件处理三要素：事件源、事件、事件处理程序 事件源：事件产生者，大部分网页标记都能产生事件，如按钮、超链接、图像、段落等 事件：事件源能够识别的一种行为 事件处理程序：事件发生后触发的程序 JavaScript 事件概述 例1 －IMG对象鼠标事件处理 document 对象属性及方法概述 例2－ document对象的 bgColor属性与相应事件处理 文本框对象常用的事件、方法、属性 命令按钮与表单对象 例3－网页界面设计 复选框对象 单选按钮对象 下拉列表框-事件和属性 例4－表单验证 总结 浏览器对象是一个分层次的结构，window是顶层的根对象 事件处理：事件源，事件，事件处理程序 默认事件处理程序 添加自定义事件处理程序 常用表单对象的事件、属性和方法 表单验证应用 作业 试编写JavaScript脚本程序，实现用户注册表单的验证，界面如下图所示，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（action属性值为提交成功网页）。 知识拓展－window 对象 知识拓展－ window 对象 知识拓展－ Window 对象 (例) 知识拓展－ History对象 history 对象 方法 知识拓展－ Location对象 Location 对象 属性 方法 实训四 JavaScript高级应用 实训目的 通过本次训练，使学生了解JavaScript脚本语言浏览器对象，掌握JavaScript验证输入表单的方法。 实训内容 按要求设计一个用户注册表单，并实现验证功能，验证要求：在提交表单时对每一个表单输入元素进行有效性验证，如果不合法，则进行提示，如果全部合法，则提交成功（action属性值为提交成功网页）。 实训要求 总结在实训过程中遇到的问题 强调bgColor背景色属性，后面将讲解相关例子。 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” document对象“用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 提问： 前面我们学习过表单和表单元素，按钮分为哪三类？ 回答：提交按钮、重置按钮、普通按钮 讲解步骤： 1.先演示例子： 2.提问：如何实现，应使用按钮的哪个事件？解题思路？ 引导： 1）onSubmit事件 ) 比较两个框的值是否相等即可。 3.实现步骤： 1）使用DreamWeaver设计页面，如上图所示。 2）编写脚本代码，点击进入下一页幻灯片。 综合例子：表单验证 讲解要点： 1）js的主要功能之一就是表单验证：在提交到服务器之前，在客户端验证用户 填写的表单数据格式是否正确。 讲解要点： 1）强调每个对象和我们前面学习的字符串对象、日期对象等一样， 只要是对象，都包含属性和方法，方法也就是该对象的一系列函数。 告诉学员： 1）前面学习过的alert和prompt以及马上要讲的confird都是window对象的方法 2）重点讲解突出标注的三个新方法： confirm( ) 、open( ) 、close( )方法。 3）confirm弹出确认对话框，点击确定返回true ，取消返回false 4) open ( )和close( )用于打开一个新窗口或者关闭窗口，下面举例讲解，点击进入下一页幻灯