第四章JavaScript浏览器对象与事件处理《JavaScript程序设计》信息与电气工程学院软件工程系主讲:孙丽2回顾定义数组a,大小为10,存放的数据分别是1-10,对应的js代码为?希望知道数组的大小,使用哪个属性?代码阅读,请问输出结果是多少?scripttype=text/javascriptvara=3,b=4;alert(isNaN(a));alert(a+++b);alert(eval(a+++b));/script3回顾代码阅读,请问输出结果是多少?scripttype=text/javascriptvars=abcdefg;alert(s.indexOf(cd,0));alert(s.substr(1,2));alert(Math.round(9.38));varnow=newDate();alert(now.getMonth());/script4目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象:•window•document•history5事件处理事件是发生并得到处理的操作事件:电话振铃事件:电话振铃处理事件处理事件6JavaScript事件处理程序JavaScript事件处理程序就是一组语句,在事件(如点击鼠标或移动鼠标等)发生时执行事件事件处理事件处理事件事件处理程序的基本语法是:事件名=JavaScript代码或调用函数例如:INPUTtype=”BUTTON”…onClick=“alert(“单击我!”);”INPUTtype=”BUTTON”…onMouseDown=“check()”表示鼠标按下时,将调用执行函数check()。7目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象:•window•document•history8JavaScript事件事件名说明onClick鼠标单击onChange文本内容或下拉菜单中的选项发生改变onFocus获得焦点,表示文本框等获得鼠标光标。onBlur失去焦点,表示文本框等失去鼠标光标。onMouseOver鼠标悬停,即鼠标停留在图片等的上方onMouseOut鼠标移出,即离开图片等所在的区域onMouseMove鼠标移动,表示在DIV层等上方移动onMouseDown鼠标按下onMouseUp鼠标弹起onLoad网页文档加载事件onSubmit表单提交事件9onFocus和onBlur事件-1cardpassmyform10onFocus和onBlur事件-2HEADscripttype=text/javascriptfunctionmyfun1(){if(document.myform.card.value==请注意格式:10xxxxxx)document.myform.card.value=;}functionmyfun2(){vara=document.myform.card.value;if(a.substr(0,2)!=10||isNaN(a)){alert(格式错误,请重新输入);document.myform.card.focus();}}/script/HEAD文本框获得鼠标焦点时(onFocus)调用的函数:清空卡号文本框文本框失去鼠标焦点时(onBlur)调用的函数:判断格式是否正确focus()方法再次获得焦点,即鼠标光标回到卡号文本框onFocus.htmlonFocus.html11STYLEtype=text/css!--input{background-color:#55FFFF;font-size:20px;border:1pxsolid;}--/STYLE表单元素INPUT样式BODYFORMname=myformH2卡号:INPUTname=cardtype=textonFocus=myfun1()“value=请注意格式:10xxxxxx“onBlur=myfun2()BR密码:INPUTname=passtype=text/H2/FORM/BODY添加事件处理onFocus.htmlonFocus.htmlonFocus和onBlur事件-312htmlheadtitle图片切换/title/headbodyh3鼠标悬停效果,切换图片/h3imgsrc=1.jpgname=pictureonMouseOver=src='2.jpg'onMouseOut=src='1.jpg'“border=0width=200/body/html添加事件处理:切换图片onMouseOver=src='2.jpg'表示本图片的图片名称替换为2.jpg。请注意:由于外面两端已有双引号,为区别起见,2.jpg改用为单引号括起来。onMouseOver=src='2.jpg'表示本图片的图片名称替换为2.jpg。请注意:由于外面两端已有双引号,为区别起见,2.jpg改用为单引号括起来。onMouseOver和onMouseDown事件onMouseOver.htmlonMouseOver.html13目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象:•window•document•history14浏览器对象的分层结构浏览器对象简介2-216目标理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象:•window•document•history17属性名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。screen包含有关客户端的屏幕和显示性能的信息。Window对象-118方法名称说明alert(“m提示信息)显示包含消息的对话框。confirm(“提示信息”)显示一个确认对话框,包含一个确定、取消按钮Prompt(”提示信息“)弹出提示信息框open(url,name)打开具有指定名称的新窗口,并加载给定URL所指定的文档;如果没有提供URL,则打开一个空白文档close()关闭当前窗口setTimeout(”函数”,毫秒数)设置定时器:经过指定毫秒值后执行某个函数clearTimeout(定时器对象)Window对象-219Window对象-3(举例1)举例:window_open.htmlwindow_open.html20Window对象-4(举例1)htmlheadscriptfunctionopenwindow(){window.open(onFocus.html);}functionclosewindow(){window.close();}/script/headbodyforminputtype=buttonvalue=打开窗口onClick=openwindow()inputtype=buttonvalue=关闭窗口onClick=closewindow()/formbody使用Open方法打开新窗口使用Close方法关闭窗口添加单击事件因为window是昀顶层的根,所以可以省略window.open(google.htm);可简写为:open(google.htm);close()方法也是如此。window_open.htmlwindow_open.html21Window对象-5open(”打开窗口的url”,”窗口名”,”窗口特征”)窗口的特征如下,可以任意组合:height:窗口高度;width:窗口宽度;top:窗口距离屏幕上方的象素值;left:窗口距离屏幕左侧的象素值;toolbar:是否显示工具栏,yes为显示;menubar,scrollbar表示菜单栏和滚动栏。resizable:是否允许改变窗口大小,yes或1为允许location:是否显示地址栏,yes或1为允许status:是否显示状态栏内的信息,yes或1为允许;22Window对象-6(举例2)window_open2.htmlwindow_open2.html23Window对象-7(举例2)添加页面加载,退出事件htmlheadscripttype=text/javascriptfunctionopenwindow(){open(adv.html,,toolbar=0,scrollbar=0,location=0,statusbar=0,menubar=0,resizable=0,width=650,height=80);}/script/headbodyonload=openwindow()onunload=open('1.jpg')h2看看和我一起打开的广告窗口/h2h2当我关闭时,重新打开一个显示图片的窗口/h2/body/html我们需要预先制作好广告页面adv.html,打开广告窗口的语句open(…)window_open2.htmlwindow_open2.html24Window对象的主要事件onLoad•当该网页被用户端的浏览器所读取的时候发生的事件。一般放在body卷标中,如下:•bodyonload=”functionname()”•表示当该网页被用户端的浏览器一旦读取时,就执行该函数程序。onUnLoad•当该网页被用户关闭整个浏览器窗口的时候发生的事件。一般放在body卷标中,如下:•bodyonunload=”functionname()”•表示当该网页被用户关闭时,就执行该函数程序。onResize•当浏览窗口的大小被用户改变时所触发的事件。onMove•当用户利用鼠标将窗口移动时所触发的事件。25Window对象-8定时器函数setTimeout()的用法:•setTimeout(“调用的函数名”,间隔的毫秒数)•表示每隔多少毫秒,就循环调用某个函数来执行•清除某个定时器:clearTimeout()方法。•例如:varmyclock=setTimeout(“move()”,500);if(…)clearTimeout(myclock);举例:随机漂浮的广告26Window对象-9headscriptfunctionmove(){document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);}/script/headbodyonload=move()DIVid=Layer1style=position:absolute;left:14px;top:44px;width:150px;height:102px;z-index:1IMGsrc=piaofu.jpgwidth=150height=100border=0/A/DIVH2随机漂浮的广告/H2/BODY定义层图片移动的函数move()每隔1秒调用move()函数随机改