《网页前端技术》JavaScript任务四.ppt

JavaScript 任务四 认识事件 案例分解 案例资讯 可移动的导航条 验证输入的注册信息是否正确 JavaScript 事件 JavaScript表单验证 教学目的： 掌握JavaScript 事件 掌握JavaScript表单验证 教学重点：掌握JavaScript 事件 掌握JavaScript表单验证 教学难点：掌握JavaScript 事件 掌握JavaScript表单验证 JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件 JavaScript也可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。 案例资讯 案例一 可移动的导航条 该案例实现的是一个可以移动的导航条，利用鼠标左键可以在页面中随便移动 1．JavaScript事件概述 2．javascript事件总结 1.JavaScript事件概述 事件就是用户或者浏览器自身执行的某种动作 （1）事件分析 （2）onClick事件 （3）onchange事件 （4）onSelect事件 （5）onFocus事件 （6）onBlur事件 （7）onLoad事件 （8）onUnLoad事件 （9）onMouseOver事件 （10）onMouseOut事件 （11）常用JavaScript事件介绍 2. JavaScript事件总结 （1）怎样注册事件处理代码 （2）事件对象的取得 （3）怎样获得事件源的引用 （4）事件的类型 （5）鼠标的当前坐标 案例步骤 可移动的导航条 打字机式字符输出创建html文件以后，我们可以在里面输入如下参考代码： 该案例的运行结果 如图所示： （用鼠标可以 让该导航条 在本页面内移动） 案例资讯 案例二 验证输入的注册信息 该案例实现的是一注册页面，在客户端实现对客户输入的信息进行验证 1.表单验证概述 2.JavaScript中的几个常见的表单验证 1．表单验证概述 客户端的表单验证是JavaScript的一个重要应用 表单作为接收用户输入数据的一种手段，对Web开发者非常有用。 案例步骤 验证输入的注册信息是否正确 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： 如果用户输入的不合法的话，会出现相应的消息提示对话框。 如果输入的用户名不合法的话，弹出消息提示框如图所示 如果两次输入的秘密不相一致的话，弹出消息提示框如图所示 如果两次输入的秘密不相一致的话，弹出消息提示框如图所示 如果没有输入密码提示问题时，弹出消息提示框如图所示 如果没有输入密码提示答案时，弹出消息提示框如图所示 如果输入的邮箱不合法的话，弹出消息提示框如图所示 如果输入的手机号码不合法的话，弹出消息提示框如图所示：