3.JavaScript浏览器对象(精品)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,浏览器对象,http:/,PHPChina,工作室,知识回顾,定义数组,a,，大小为,10,，存放的数据分别是,1-10,，对应的,js,代码为？,希望知道数组的大小，使用哪个属性？,代码阅读，请问输出结果是多少？,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,onFocus,和,onBlur,事件,-1,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,）调用的函数：,判断格式是否正确,focus(),方法,再次获得焦点，即鼠标,光标回到卡号文本框,卡号：,密码：,onFocus,和,onBlur,事件,-2,添加事件处理,onMouseOver,和,onMouseDown,事件,图片切换,低价转让哈士奇弟弟,移过来看看俺啊,添加事件处理：,切换图片,onMouseOver,=,src,=dog2.jpg,表示本图片的图片名称替换为,dog2.jpg,。,请注意：由于外面两端已有双引号，为区别起见，,dog2.jpg,改用为单引号括起来。,浏览器对象简介,2-1,http:/,www.google.co,m,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,);,其他方法也是如此。,Window,对象,7,-,4,open,（”打开窗口的,url,”,，”窗口名”，”窗口特征”）,窗口的特征如下，可以任意组合：,height,：窗口高度；,width,：窗口宽度；,top,：窗口距离屏幕上方的象素值；,left,：窗口距离屏幕左侧的象素值；,toolbar,：,是否显示工具栏，,yes,为显示；,menubar,，,scrollbars,表示菜单栏和滚动栏。,resizable,：,是否允许改变窗口大小，,yes,或,1,为允许,location,：,是否显示地址栏，,yes,或,1,为允许,status,：,是否显示状态栏内的信息，,yes,或,1,为允许；,我们需要预先制作好广告页面，假设为,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.,层中插入一幅图片。,Window,对象,7,-,6,3.,定时器函数,setTimeout,（）的用法：,setTimeout,（“调用的函数名”，间隔的毫秒数）,表示每隔多少毫秒，就循环调用某个函数来执行,清除某个定时器：,clearTimeout,（）方法。,例如：,var,myclock,setTimeout,（”,move()”,500,）,;,if(),clearTimeout,（,myclock,）,;,function move(,),document.,getElementById,(Layer1).style.left=,Math.random,()*500;,document.getElementById(Layer1).style.top=,Math.random,()*500;,setTimeout,(move(),10,00);,随机漂浮的广告,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,指定的文档来替换当前文档,方法,Location,对象,4,-,3,下拉菜单,menu1,Location,对象,4,-,4,function jump(),location.href,=document.myform.menu1.value;,.,-,请选择季节景色,-,春天美景,夏天一色,根据用户的选择，,修改跳转的网址,添加选项改变事件,课堂重点,JavaScript,程序是事件驱动程序,onFocus,获得焦点事件，表示获得鼠标光标，,onBlur,失去焦点事件，刚好与之相反,浏览器对象是一个分层次的结构，,window,是顶层的根对象,打开窗口使用,window,对象的,open(),方法,设置定时器，使用,window,对象的,setTimeout,(),方法,location,对象的,back(),和,forward(),方法等同于前进、后退按钮,谢 谢,http:/,