Web程序设计jsp课件-JavaScript2.ppt

复习2-1 希望知道数组的大小，使用哪个属性？ 代码阅读，请问输出结果是多少？ SCRIPT language=JavaScript“ var a=3“ , b=4; alert (isNaN(a)); alert (a+++b ); alert (eval(a+++b) ); /SCRIPT 复习2-2 代码阅读，请问输出结果是多少？ SCRIPT language=JavaScript“ var s=abcdefg ; alert ( s.indexOf(cd,0) ) ; alert (s.substr(1,2)) ; alert (Math.round(9.38)) ; var now=new Date( ); alert (now.getMonth( )) ; /SCRIPT 主要内容 理解事件处理程序的概念 了解JavaScript 中的常用事件 掌握常用的浏览器对象： window document history 掌握处理表单元素的事件 文本域 按钮 下拉列表 事件处理 JavaScript 事件处理程序 JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行 JavaScript 事件 onFocus和onBlur2-1 onFocus和onBlur2-2 onMouseOver和onMouseOut 浏览器对象简介 2-1 浏览器对象简介 2-2 Window 对象 5-1 Window 对象 5-2 Window 对象 5-3 Window 对象 5-4 Window 对象 5-5 Document 对象 3-1 Document 对象 3-2 Document 对象 3-3 History对象 history 对象 方法 Location对象 Location 对象 属性 history与location3-1 history与location3-2 history与location3-3 小结 JavaScript 程序是事件驱动程序 onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反 浏览器对象是一个分层次的结构，window是顶层的根对象 打开窗口使用window对象的open( )方法 设置定时器，使用window对象的setTimeout( )方法 location对象的back( )和forward( )方法等同于前进、后退按钮 小测试 常用的浏览器对象有哪些？ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？ history对象的哪个方法相当于IE浏览器中的后退按钮？ 希望动态改变网页的背景色，应使用哪个对象的bgColor属性？ IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息 事件处理程序简介 2-1 文本框对象 文本框对象 – 事件处理程序 文本框示例3-1 文本框示例3-3 命令按钮对象 “按钮”-事件处理 按钮示例 复选框对象 复选框-事件处理 复选框示例4-1 复选框示例4-2 样式表 input { border: 1px solid #FF0000; } 单选按钮对象 单选按钮-事件和属性 单选按钮示例 下拉列表框 下拉列表框-事件和属性 下拉列表框示例3-2 小结 OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序 JavaScript的主要功能之一是用于表单验证 实验 参考下图编写注册界面，对注册信息进行验证 设计网上书店 JavaScript调试2-1 在IE中显示错误信息 工具—Internet选项—高级 JavaScript调试2-2 Developer工具栏 获得焦点和失去焦点事件演示： 1）点击某个文本框，该文本框获得鼠标光标，就称为获得焦点事件。 2）同样道理，点击文本框外面的区域，此文本框失去鼠标光标，就称为失去焦点事件。 3）告诉学生这些事件我们在后面的学习和上机练习中都会用到。 现重点讲解几个常用的事件，进入下一页幻灯片。 讲解步骤： 1）先演示效果 2）提问：我们应该使用哪些事件呢？引导学生的思路。 3）讲解代码。 讲解要点： 讲解步骤： 1）先演示效果 2）提问：我们应该使用哪些事件呢？引导学生的思路。 3）讲解代码。 讲