北大青鸟：《HTML—JavaScript》课程电子教案（PPT教学课件）第九章 JavaScript 中的浏览器对象

北大青 7E 男 第九章 Javascript中的浏览器对象 ACCP V4.0

ACCP V4.0 第九章 JavaScript 中的浏览器对象

北大青鸟 TEC 回顶 口定义数组a,大小为10,存放的数据分别是 1-10,对应的j代码为? 口希望知道数组的大小,使用哪个属性? 口代码阅读,请问输出结果是多少? var a=3 ACCP V4.0

ACCP V4.0 2 回顾 ❑定义数组a，大小为10，存放的数据分别是 1-10，对应的js代码为？ ❑希望知道数组的大小，使用哪个属性？ ❑代码阅读，请问输出结果是多少？ var a="3“ , b="4"; alert (isNaN(a)); alert (a+"+"+b ); alert (eval(a+"+"+b) );

北大青 7E 男 回顶 口代码阅读,请问输出结果是多少? 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() ACCP V4.0

ACCP V4.0 3 回顾 ❑代码阅读，请问输出结果是多少？ 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( )) ;

北大青 7E 男 目标 口理解事件处理程序的概念 口了解 JavaScript中的常用事件 口掌握常用的浏览器对象: awindow 口 document History ACCP V4.0

ACCP V4.0 4 目标 ❑理解事件处理程序的概念 ❑了解JavaScript 中的常用事件 ❑掌握常用的浏览器对象： ❑window ❑document ❑history

北大青 7E 男 事件处理 口事件是发生并得到处理的操作 事件:电话振铃 处理事件 ACCP V4.0

ACCP V4.0 5 事件处理 ❑ 事件是发生并得到处理的操作 事件：电话振铃 处理事件

是: JavaScr事件处理程序 口 JavaScript事件处理程序就是一组语句,在事件(如点击 鼠标或移动鼠标等)发生时执行 事件处理程序的基本语法是: 事件名=" JavaScript代码或调用函数 例如: | NPUT type= BUTTON”…. on MouseDown=“ check() 表示鼠标按下时,将调用执行函数 check()。 ACCP V4.0

ACCP V4.0 6 JavaScript 事件处理程序 ❑ JavaScript 事件处理程序就是一组语句，在事件（如点击 鼠标或移动鼠标等）发生时执行 事件 处理事件 事件处理程序的基本语法是： 事件名=" JavaScript 代码或调用函数" 例如： 表示鼠标按下时，将调用执行函数check( )

北大青 7E 男 Javascript事件 事件名 说明 on click 鼠标单击 on Change 文本内容或下拉菜单中的选项发生改变 onFocus 获得焦点,表示文本框等获得鼠标光标。 on Blur 失去焦点,表示文本框等失去鼠标光标。 on MouseOver 鼠标悬停,即鼠标停留在图片等的上方 on Mouseout 鼠标移出,即离开图片等所在的区域 onMouseMove 鼠标移动,表示在层等上方移动 onload 网页文档加载事件 on Submit 表单提交事件 on Mouse Down 鼠标按下 onMouseUp 鼠标弹起 长e ACCP V4.0

ACCP V4.0 7 JavaScript 事件 事件名 说明 onClick 鼠标单击 onChange 文本内容或下拉菜单中的选项发生改变 onFocus 获得焦点，表示文本框等获得鼠标光标。 onBlur 失去焦点，表示文本框等失去鼠标光标。 onMouseOver 鼠标悬停，即鼠标停留在图片等的上方 onMouseOut 鼠标移出，即离开图片等所在的区域 onMouseMove 鼠标移动，表示在层等上方移动 onLoad 网页文档加载事件 onSubmit 表单提交事件 onMouseDown 鼠标按下 onMouseUp 鼠标弹起

些x2 on Focus和 on blur事件-1 文本框获得鼠标焦点时

ACCP V4.0 8 card pass myform 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.myform.card.focus(); } } onFocus和onBlur 事件-1 文本框获得鼠标焦点时 （onFocus）调用的函数： 清空卡号文本框 文本框失去鼠标焦点时 （onBlur）调用的函数： 判断格式是否正确 focus( )方法 再次获得焦点，即鼠标 光标回到卡号文本框

on Focus和 on blur事件-2 表单元素样式 input 添加事件处理 background-color:#55FFFF, font-size: 20px border: 1 px solid ACCP V4.0

ACCP V4.0 9 卡号： 密码： onFocus和onBlur 事件-2 表单元素样式 添加事件处理

北大青 男 on Mouse Over和 7E on Mouse Down事件 HT onMouseOver="src=dog2. jpg HE表示本图片的图片名称替换为oog2]pg 低价转让哈士奇弟弟 移过来看看俺啊 10 ACCP V4.0

ACCP V4.0 10 onMouseOver和 onMouseDown事件 图片切换 低价转让哈士奇弟弟 移过来看看俺啊 添加事件处理 ： 切换图片 onMouseOver="src='dog2.jpg'" 表示本图片的图片名称替换为dog2.jpg。 请注意： 由于外面两端已有双引号，为区别起见，dog2.jpg改用为单 引号括起来