第4章 Javascript浏览器对象与事件

第四章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对象-5open(”打开窗口的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()函数随机改