JS的学习（Lesson5）.ppt

第6章上机　 表单验证的相关事件和辅助特效 相关回顾 怎样使用图片代替提交按钮，并实现表单提交？ 怎样判断键盘按下的键值？ 怎样实现回车切换输入效果？ 怎样实现内容动态显示的层特效？ 上机目标 制作具有提交功能的图片按钮 制作回车的tab切换效果 制作内容动态显示的层特效 训练技能点 能够制作带提示文字的输入框 能够制作回车切换输入的效果 能够制作内容动态显示的层特效 阶段2 需求说明： 在阶段1的基础上增加确认密码和验证码的检查 设置带有文字提示的验证码文本框 人工添加代码提交表单 阶段4 需求说明： 对阶段3练习进行完善，增加密码框和电子邮件框在失去焦点时的输入验证，制作即时错误信息 * * 讲解 教员讲解上机目标 讲解需求说明 带提示文字的文本框，获得焦点时内容自动清空 使用图片代替提交按钮 阶段1 训练要点： 图片代替提交按钮 带提示文字的文本框 需求说明： 本阶段只验证QQ号码输入是否为空 　　讲解实现思路和关键代码 完成时间：10分钟 参考代码 阶段1 实现思路和关键代码： 图片代替提交按钮，图片添加onClick事件 表单提交：document.myform.submit( ) 有文字提示的文本框：设置文本框的初始值，添加onFocus事件，在事件中将value值清空。 参考代码 完成时间：15分钟 提示文字的文本框 图片代替按钮实现提交 共性问题集中讲解 阶段2 常见调试问题及解决办法 代码规范问题 训练要点： onKeydown键盘事件 innerHtml和innerText改变显示内容 需求说明： 键盘回车实现tab键切换输入的效果 文本框失去焦点，提示错误信息 讲解需求说明 初始页面获得焦点 按下回车键，用户名框失去焦点，密码框获得焦点 即时错误提示信息 密码框获得焦点 阶段3 　　讲解实现思路和关键代码 完成时间：15分钟 参考代码 阶段3 实现思路和关键代码： 获取键盘事件的键值event.keyCode 判断对应控件的类型event.srcElement.type 错误信息提示层的设置DIV id=“… style=display:inline 使用innerHTML动态改变信息提示内容 参考代码 完成时间：15分钟 回车切换输入后，即时显示错误提示信息 阶段4 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 训练要点： 如何获得DIV层对象 DIV层对象的显示与隐藏 需求说明： 讲解需求说明 阶段5 讲解实现思路和关键代码 完成时间：10分钟 参考代码 阶段5 关键思路和参考代码： 添加已确定显示内容的层 根据单选按钮的onClick事件调用相应的层显示 需求说明： 选择贷款类型显示相应的信息 参考代码 完成时间：15分钟 阶段6 选择贷款类别 显示添加好内容的层信息 阶段6 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 总结 总结并布置作业 讲解要点： 假定该系统的数据库设计需要两张表：帐户信息表(bank)存放帐户的信息， 交易信息表(transInfo)存放每次的交易信息。 演示：“示例1：为什么需要触发器.sql”，演示时请设置为较大字体， 以便后排的学员能看清演示的结果。 提问学员：上述结果有什么错误？您一定发现了，当张三取钱200元时，虽然交易信息表(transInfo)中保存了取钱200元的交易信息，但帐户表(bank)中的余额仍是1000，没有自动跟随修改。显然，我们应该根据交易类型是“支取”还是“存入”，自动减少或增加帐户表中的余额。而且，它还应该具有事务的特征：一旦交易失败，余额修改也应该自动取消 。 提问学员：如何解决呢？这种特殊的业务规则使用普通约束行吗 ？ 答案显然是否定的 。 使用事务行吗？事务能保证一旦交易失败，余额修改也自动取消。但实现不了自动修改的触发功能 。 最优的解决方案就是采用触发器，它是一种特殊的存储过程，并且也具有事务的功能。它能多表之间执行特殊的业务规则或保持复杂的数据逻辑关系 。 s 讲解要点： 假定该系统的数据库设计需要两张表：帐户信息表(bank)存放帐户的信息， 交易信息表(transInfo)存放每次的交易信息。 演示：“示例1：为什么需要触发器.sql”，演示时请设置为较大字体， 以便后排的学员能看清演示的结果。 提问学员：上述结果有什么错误？您一定发现了，当张三取钱200元时，虽然交易信息表(transInfo)中保存了取钱200元的交易信息，但帐户表(bank)中的余额仍是1000，没有自动跟随修改。显然，我们应该根据交易类型是“