JavaScript 中的浏览器对象

ACCP V4.0,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,第七章,JavaScript,中的浏览器对象,回顾,希望知道数组的大小，使用哪个属性？,代码阅读，请问输出结果是多少？,var a=3“,b=4;,alert,(isNaN(a);,alert,(a+b);,alert,(eval(,a,+b);,回顾,代码阅读，请问输出结果是多少？,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();,目标,理解事件处理程序的概念,了解,JavaScript,中的常用事件,掌握常用的浏览器对象：,window,document,history,事件处理,事件是发生并得到处理的操作,事件：电话振铃,处理事件,JavaScript,事件处理程序,JavaScript,事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：,事件名,=JavaScript,代码或调用函数,例如：,表示鼠标按下时，将调用执行函数,check(),。,JavaScript,事件,事件名,说明,onClick,鼠标单击,onChange,文本内容或下拉菜单中的选项发生改变,onFocus,获得焦点，表示文本框等获得鼠标光标。,onBlur,失去焦点，表示文本框等失去鼠标光标。,onMouseOver,鼠标悬停，即鼠标停留在图片等的上方,onMouseOut,鼠标移出，即离开图片等所在的区域,onMouseMove,鼠标移动，表示在,层等上方移动,onLoad,网页文档加载事件,onSubmit,表单提交事件,onMouseDown,鼠标按下,onMouseUp,鼠标弹起,card,pass,myform,function myfun1(),if(document.myform.card.value=,请注意格式：,10 xxxxxx),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(),方法,再次获得焦点，即鼠标,光标回到卡号文本框,卡号：,密码：,onFocus,和,onBlur,事件,-2,表单元素,样式,添加事件处理,onMouseOver,和,onMouseDown,事件,图片切换,低价转让哈士奇弟弟,移过来看看俺啊,添加事件处理：,切换图片,onMouseOver=,src=dog2.jpg,表示本图片的图片名称替换为,dog2.jpg,。,请注意：,由于外面两端已有双引号，为区别起见，,dog2.jpg,改用为单引号括起来。,浏览器对象简介,2-1,http:/,Window,窗口对象,location,地址对象,document,文档对象,FORM,表单对象,浏览器对象的分层结构,window.document.myform.text1,浏览器对象简介,2-2,浏览器对象的分层结构,Window,对象,7-1,属性,名称,说明,document,表示给定浏览器窗口中的,HTML,文档。,history,包含有关客户访问过的,URL,的信息。,location,包含,有关当前,URL,的信息。,name,设置或检索窗口或框架,的名称。,status,设置或检索窗口底部的状态栏中的消息。,screen,包含有关客户,端的屏幕和显示性能的信息。,Window,对象,7-2,方法,名称,说明,alert(“m,提示信息,),显示包含消息的对话框。,confirm,（“提示信息”）,显示一个确认对话框，包含一个确定取消按钮,Prompt,（”提示信息“）,弹出提示信息框,open(url,name),打开具有指定名称的新窗口，并加载给定,URL,所指定的文档；如果没有提供,URL,，则打开一个空白文档,close(),关闭当前窗口,setTimeout,（”函数”,毫秒数）,设置定时器：经过指定毫秒值后执行某个函数,clearTimeout(,定时器对象,),Window,对象,7-3,function openwindow(),window.open(google.htm);,function closewindow(),window.close();,使用,Open,方法,打开新窗口,使用,Close,方法,关闭窗口,添加单击事件,因为,window,是最顶层的根，所以可以省略,window.open(google.htm);,可简写为：,open(google.htm);,close,（）方法也是如此。,open,（”打开窗口的,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”);,function openwindow(),open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);,看看和我一起打开的广告窗口,Window,对象,7-5,使用,Open,方法,打开广告新窗口,添加页面加载事件,1.,插入一个层,Layer1,，,z-index=1,；,2.,层中插入一幅图片。,3.,定时器函数,setTimeout,（）的用法：,setTimeout,（“调用的函数名”，间隔的毫秒数）,表示每隔多少毫秒，就循环调用某个函数来执行,清除某个定时器：,clearTimeout,（）方法。,例如：,var myclock,setTimeout,（”,move()”,500,）,;,if(),clearTimeout,（,myclock,）,;,；,Window,对象,7-6,function move(),document.,getElementById,(Layer1).style.left=Math.random()*500;,document.getElementById(Layer1).style.top=Math.random()*500;,setTimeout,(move(),1000);,随机漂浮的广告,Window,对象,7-7,定义层图片移动,的函数,move(),每隔,1,秒调用,move(),函数随机改变层的位置，从而实现随机漂浮的效果,getElementById(“,ID,名称,”,),方法：根据,ID,名称获取,HTML,元素，,这里表示获取层对象,Layer1,。,left,和,top,表示层,Layer1,的左边距和上边距，设定为随机的值。,Document,对象,3-1,属性,名称,说明,alinkColor,设置或检索文档中所有活动链接的颜色,bgColor,设置或检索,Document,对象的背景色,body,指定文档正文的开,始和结束,linkColor,设置或检索文档链接的颜色,location,包含关于当前,URL,的信息,title,包含文档的标题,url,设置或检索当前文档的,URL,vlinkColor,设置或检索用户访问过的链接的颜色,Document,对象,3-2,方法,名称,说明,clear(),清除当前文档,close(),关闭输出流并强制显示发送的数据,write(text),将文本写入文档,Document,对象,3-3,无标题文档,function change(color),document.bgColor=color;,移过来我变色给你看看！,变红色,|,变蓝色,|,变黄色,利用,document,对象的,bgColor,属性改变背景色,添加鼠标悬停事件,History,对象,4-1,history,对象,方法,名称,说明,back(),加载,History,列表中的上一个,URL,。,forward(),加载,History,列表中的下一个,URL,。,go(url or number),加载,History,列表中的一个,URL,，或要求浏览器移动指定的页面数。,Back(),方法相当于后退按钮,forward(),方法相当于前进按钮,go(1),代表前进,1,页，等价于,forward(),方法；,go(-1),代表后退,1,页，等价于,back(),方法；,Location,对象,4-2,Location,对象,属性,名称,说明,host,设置或检索位置或,URL,的主机名和端口号,hostname,设置或检索位置或,URL,的主机名部分,href,设置或检索完整的,URL,字符串,名称,说明,assign(url),加载,URL,指定的新的,HTML,文档。,reload(),重新加载当前页,replace(url),通过加载,URL,指定的文档来替换当前文档,方法,History,对象和,Location,对象,4-3,下拉菜单,menu1,History,和,Location,对象,4-4,function jump(),location.href,=document.myform.menu1.value;,.,-,请选择季节景色,-,春天美景,夏天一色,根据用户的选择，,修改跳转的网址,添加选项改变事件,总结,JavaScript,程序是事件驱动程序,onFocus,获得焦点事件，表示获得鼠标光标，,onBlur,失去焦点事件，刚好与之相反,浏览器对象是一个分层次的结构，,window,是顶层的根对象,打开窗口使用,window,对象的,open(),方法,设置定时器，使用,window,对象的,setTimeout(),方法,history,对象的,back(),和,forward(),方法等同于前进、后退按钮,