第08课 JavaScript 中的浏览器对象

第八章JavaScript中的浏览器对象2回顾定义数组a，大小为10，存放的数据分别是1-10，对应的js代码为？希望知道数组的大小，使用哪个属性？代码阅读，请问输出结果是多少？SCRIPTlanguage=JavaScript“vara=3“,b=4;alert(isNaN(a));alert(a+++b);alert(eval(a+++b));/SCRIPT3回顾代码阅读，请问输出结果是多少？SCRIPTlanguage=JavaScript“vars=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()。7JavaScript事件事件名说明onClick鼠标单击onChange文本内容或下拉菜单中的选项发生改变onFocus获得焦点，表示文本框等获得鼠标光标。onBlur失去焦点，表示文本框等失去鼠标光标。onMouseOver鼠标悬停，即鼠标停留在图片等的上方onMouseOut鼠标移出，即离开图片等所在的区域onMouseMove鼠标移动，表示在DIV层等上方移动onLoad网页文档加载事件onSubmit表单提交事件onMouseDown鼠标按下onMouseUp鼠标弹起8cardpassmyformHEADSCRIPTlanguage=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/HEADonFocus和onBlur事件-1文本框获得鼠标焦点时（onFocus）调用的函数：清空卡号文本框文本框失去鼠标焦点时（onBlur）调用的函数：判断格式是否正确focus()方法再次获得焦点，即鼠标光标回到卡号文本框9BODYFORMname=myformH2卡号：INPUTname=cardtype=textonFocus=myfun1()“value=请注意格式：10xxxxxx“onBlur=myfun2()BR密码：INPUTname=passtype=text/H2/FORM/BODYonFocus和onBlur事件-2STYLEtype=text/css!--input{background-color:#55FFFF;font-size:20px;border:1pxsolid;}--/STYLE表单元素INPUT样式添加事件处理10onMouseOver和onMouseDown事件HTMLHEADTITLE图片切换/TITLE/HEADBODYAhref==“dog1.jpg”name=“picture”width=“400”height=“155”onMouseOver=“src=‘dog2.jpg’”onMouseOut=“src=‘dog1.jpg’”低价转让哈士奇弟弟/AH1移过来看看俺啊/H1/BODY/HTML添加事件处理：切换图片onMouseOver=src='dog2.jpg'表示本图片的图片名称替换为dog2.jpg。请注意：由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。11浏览器对象简介2-1浏览器对象的分层结构13Window对象7-1属性名称说明document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。screen包含有关客户端的屏幕和显示性能的信息。14Window对象7-2方法名称说明alert(“m提示信息)显示包含消息的对话框。confirm（“提示信息”）显示一个确认对话框，包含一个确定取消按钮Prompt（”提示信息“）弹出提示信息框，输入数据open(url,name)打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口setTimeout（”函数”,毫秒数）设置定时器：经过指定毫秒值后执行某个函数clearTimeout(定时器对象)15Window对象7-3HTMLHEADSCRIPTfunctionopenwindow(){window.open(google.htm);}functionclosewindow(){window.close();}/SCRIPT/HEADBODYFORMINPUTTYPE=buttonVALUE=打开窗口onClick=openwindow()INPUTTYPE=buttonVALUE=关闭窗口onClick=closewindow()/FORMBODY使用Open方法打开新窗口使用Close方法关闭窗口添加单击事件因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close（）方法也是如此。16open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；Window对象7-4我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);17HTMLHEADSCRIPTlanguage=JavaScriptfunctionopenwindow(){open(adv.htm,,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);}/SCRIPT/HEADBODYonLoad=openwindow()H2看看和我一起打开的广告窗口/H2/BODY/HTMLWindow对象7-5使用Open方法打开广告新窗口添加页面加载事件181.插入一个层Layer1，z-index=1；2.层中插入一幅图片。3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：varmyclock＝setTimeout（”move()”,500）;if(…)clearTimeout（myclock）;；Window对象7-619headscriptlanguage=JavaScriptfunctionmove(){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:1Ahref==piaofu.jpgwidth=150height=100border=0/A/DIVH2随机漂浮的广告/H2/BODYWindow对象7-7定义层图片移动的函数move()每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果getElementById(“ID名称”)方法：根据ID名称获取HTML元素，这里表示获取层对象Layer1。left和top表示层Layer1的左边距和上边距，设定为随机的值。20Document对象3-1属性名称说明alinkColor设置或检索文档中所有活动链接的颜色bgColor设置或检索Document对象的背景色body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前URL的信息title包含文档的标题url设置或检索当前文档的URLvlinkColor设置或检索用户访问过的链接的颜色21Document对象3-2方法名称说明clear()清除当前文档close()关闭输出流并强制显示发送的数据write(text)将文本写入文档22Document对象3-3HTMLHEADTITLE无标题文档/TITLESCRIPTlanguage=JavaScriptfunctionchange(color){document.bgColor=color;}/SCRIPT/HEADBODYH2移过来我变色给你看看！/H2FONTsize=4SPANonMouseOver=change('red')变红色/SPAN|SPANonMouseOver=change('blue')变蓝色/SPAN|SPANonMouseOver=change('yellow')变黄色/SPAN/FONT/BODY利用document对象的bgColor属性改变背景色添加鼠标悬停事件23History对象4-1history对象方法名称说明back()加载History列表中的上一个