JavaScript第四课全解.ppt

Form对象及其元素对象 Form对象：是文档对象的一个主要元素。Form对象中包含有许多用于收集用户输入内容的元素对象，例如，文本框、按钮等，通过这些元素对象，form将用户输入的数据传递到服务器端进行处理。 引用form对象 使用form标记中的name属性值document.form1 document.form2 使用forms数组对象document.forms[0] document.forms[1] document.forms[“form1”] Form对象及其元素对象 Form对象的常用属性、方法和事件 Form中的元素对象form中的元素对象一般都可以与html的标记一一对应。 引用form中的元素对象 通过元素的名称document.form1.username 通过form的元素数组对象的方法document.form1.elements[0]document.form1.elements[“username”] * 这些事件的详细解释参见学生用书9.2 节. 获得焦点和失去焦点事件学员不容易理解。 演示： 1）点击某个文本框，该文本框获得鼠标光标，就称为获得焦点事件。 2）同样道理，点击文本框外面的区域，此文本框失去鼠标光标，就称为失去焦点事件。 3）告诉学员这些事件我们在后面的学习和上机练习中都会用到。 现重点讲解几个常用的事件，进入下一页幻灯片。 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的”焦点事件“用例 2）提问：我们应该使用哪些事件呢？引导学员的思路。 3）讲解代码。 * 讲解要点： * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的” MouseOver和MouseDown事件“用例 2）提问：我们应该使用哪些事件呢？引导学员的思路。 3）讲解代码。 * 告诉学员： 任何特定事件处理程序都有一列与其关联的表单元素。 本章将讨论各种表单元素以及这些元素的常用事件处理程序。 文本框、文本区域、按钮和复选框等各种表单元素都支持不同类型的事件处理程序。 * 讲解要点： onChange事件 onChange 事件将跟踪用户在文本框中所作的修改,当用户在文本框中完成修改之后，将激活该事件。 select（）方法 选中文本内容，突出显示输入区域，一般用于提示用户重新输入。 readonly属性 某些文本框希望用户不能修改，例如，某个拍卖网站的起拍价，一般是卖方或拍卖公司定价， 所以希望用户不能修改，这时可以指定readonly只读属性 讲解这些事件，为后面的例子讲解打基础。 * 讲解步骤： 1.先演示例子：参考TG10-Source文件夹中的“文本框”用例。 2.提问：如何实现，应使用文本框哪些事件？哪些方法 引导： 1）onFocus，onBlur，onchange事件 ) select（）和focus( )方法 3.实现步骤： 1）使用DreamWeaver设计页面，如上图所示。 2）添加无边框样式，进入下一页幻灯片。 * 讲解步骤： 演示添加无边框样式：HTML选择器INPUT 。 3）添加脚本代码，进入下一页幻灯片 * 讲解要点： 1）帐号文本框添加onFocus和onBlur焦点事件： 帐号文本框获得焦点时，调用clearText( )清空提示信息， 失去焦点时调用check( )函数检查输入的数据是否有效 2）数量文本框添加onChange事件： 文本框的内容发生改变，即当用户修改或重新填写购买数量时，调用compute( )函数， 将自动计算购买总价的值。 * 提问学员： 前面我们学习过表单和表单元素，按钮分为哪三类？ 回答：提交按钮、重置按钮、普通按钮 * 讲解要点： onClick事件我们比较熟悉，我们重点学习onSubmit表单提交事件。 当客户端点击提交按钮，准备提交表单信息到远程服务器时，将产生onSubmit表单提交事件。利用此事件，我们可以在表单信息提交到服务器之前，检验客户端输入的数据是否合法、有效，如我们比较熟悉的电子邮件格式是否正确、年份输入是否合法等。 * 讲解步骤： 1.先演示例子：参考TG10-Source文件夹中的“按钮”用例。 2.提问：如何实现，应使用按钮的哪个事件？解题思路？ 引导： 1）onSubmit事件 ) 比较两个框的值是否相等即可。 3.实现步骤： 1）使用DreamWeaver设计页面，如上图所示。 2）添加细边框样式，上例已经演示过，给学员提一下就行。 3）编写脚本代码，点击进入下一页幻灯片。 * 讲解步骤： 1.先演示例子：参考TG10-Source文件夹中的“复选框”用例。 2.提问：如何实现，应使用复选框的哪些属性