浏览器的内置对象培训课件.pptVIP

第 3 节 浏览器的内置对象 目标 理解事件处理程序的概念 了解JavaScript 中的常用事件 掌握常用的浏览器对象： window document history location 事件处理 JavaScript 事件处理程序 JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行 JavaScript 事件 onFocus和onBlur 事件-1 onFocus和onBlur 事件-2 onMouseOver和onMouseDown事件 浏览器对象简介 2-1 浏览器对象简介 2-2 Window 对象 7-1 Window 对象 7-2 Window 对象 7-3 Window 对象 7-4 Window 对象 7-5 Document 对象 3-1 Document 对象 3-2 Document 对象 3-3 History对象 4-1 history 对象 方法 Location对象 4-2 Location 对象 属性 History 和 Location 对象 4-4 History 和 Location 对象 4-5 总结 JavaScript 程序是事件驱动程序 onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反 浏览器对象是一个分层次的结构，window是顶层的根对象 打开窗口使用window对象的open 方法 设置定时器，使用window对象的setTimeout 方法 location对象的back 和forward 方法等同于前进、后退按钮 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的”焦点事件“用例 2）提问：我们应该使用哪些事件呢？引导学员的思路。 3）讲解代码。 这些事件的详细解释参见学生用书9.2 节. 获得焦点和失去焦点事件学员不容易理解。 演示： 1）点击某个文本框，该文本框获得鼠标光标，就称为获得焦点事件。 2）同样道理，点击文本框外面的区域，此文本框失去鼠标光标，就称为失去焦点事件。 3）告诉学员这些事件我们在后面的学习和上机练习中都会用到。 现重点讲解几个常用的事件，进入下一页幻灯片。 讲解要点： 1）强调每个对象和我们前面学习的字符串对象、日期对象等一样， 只要是对象，都包含属性和方法，方法也就是该对象的一系列函数。 告诉学员： 1）前面学习过的alert和prompt以及马上要讲的confird都是window对象的方法 2）重点讲解突出标注的三个新方法： confirm 、open 、close 方法。 3）confirm弹出确认对话框，点击确定返回true ，取消返回false 4 open 和close 用于打开一个新窗口或者关闭窗口，下面举例讲解，点击进入下一页幻灯片。 强调bgColor背景色属性，后面将讲解相关例子。 事件是发生并得到处理的操作 事件：电话振铃 处理事件 事件 处理事件 事件处理程序的基本语法是： 事件名 JavaScript 代码或调用函数 例如： INPUT type ”BUTTON” … onClick “alert “单击我！” ;” INPUT type ”BUTTON” … onMouseDown “check ” 表示鼠标按下时，将调用执行函数check 。 鼠标按下 onMouseDown 鼠标弹起 onMouseUp 表单提交事件 onSubmit 网页文档加载事件 onLoad 鼠标移动，表示在 层等上方移动 onMouseMove 鼠标移出，即离开图片等所在的区域 onMouseOut 鼠标悬停，即鼠标停留在图片等的上方 onMouseOver 失去焦点，表示文本框等失去鼠标光标。 onBlur 获得焦点，表示文本框等获得鼠标光标。 onFocus 文本内容或下拉菜单中的选项发生改变 onChange 鼠标单击 onClick 说明 事件名 card pass myform SCRIPT language JavaScript function myfun1 if document.myform.card.value 请注意格式：10xxxxxx document.myform.card.value ; function myfun2 var a document.myform.card.value; if a.substr 0,2 ! 10 || isNaN a alert 格式错误，请重新输入 ; document.myfo