《javascript3(中的浏览器对象) .ppt》由会员分享,可在线阅读,更多相关《javascript3(中的浏览器对象) .ppt(27页珍藏版)》请在三一办公上搜索。
1、JavaScript 中的浏览器对象,2,回顾,定义数组a,大小为10,存放的数据分别是 1-10,对应的js代码为?希望知道数组的大小,使用哪个属性?代码阅读,请问输出结果是多少?var a=3“,b=4;alert(isNaN(a);alert(a+b);alert(eval(a+b);,3,回顾,代码阅读,请问输出结果是多少?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();,4,目标,理解事件处理程序
2、的概念 了解JavaScript 中的常用事件 掌握常用的浏览器对象:window documenthistory,5,事件处理,事件是发生并得到处理的操作,事件:电话振铃,处理事件,6,JavaScript 事件处理程序,JavaScript 事件处理程序就是一组语句,在事件(如点击鼠标或移动鼠标等)发生时执行,事件,处理事件,事件处理程序的基本语法是:事件名=JavaScript 代码或调用函数 例如:表示鼠标按下时,将调用执行函数check()。,7,JavaScript 事件,8,function myfun1()if(document.myform.card.value=请注意格式:
3、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()方法再次获得焦点,即鼠标光标回到卡号文本框,9,卡号:密码:,onFocus和onB
4、lur 事件-2,表单元素样式,添加事件处理,10,onMouseOver和onMouseDown事件,图片切换 低价转让哈士奇弟弟 移过来看看俺啊,添加事件处理:切换图片,onMouseOver=src=dog2.jpg 表示本图片的图片名称替换为dog2.jpg。请注意:由于外面两端已有双引号,为区别起见,dog2.jpg改用为单引号括起来。,11,浏览器对象简介 2-1,http:/,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,12,浏览器对象简介 2-2,浏
5、览器对象的分层结构,13,Window 对象 7-1,属性,14,Window 对象 7-2,方法,15,Window 对象 7-3,function openwindow()window.open(google.htm);function closewindow()window.close();,使用 Open 方法打开新窗口,使用 Close 方法关闭窗口,添加单击事件,因为window是最顶层的根,所以可以省略window.open(google.htm);可简写为:open(google.htm);close()方法也是如此。,16,open(”打开窗口的url”,”窗口名”,”窗口特
6、征”)窗口的特征如下,可以任意组合: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,scroll
7、bars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);,17,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 方法打开广告新窗口,添加页面加载事件,18,1.插入一个层Layer1,z-index=1;2.层中插入一幅图片
8、。,3.定时器函数setTimeout()的用法:setTimeout(“调用的函数名”,间隔的毫秒数)表示每隔多少毫秒,就循环调用某个函数来执行清除某个定时器:clearTimeout()方法。例如:var myclocksetTimeout(”move()”,500);if()clearTimeout(myclock);;,Window 对象 7-6,19,function move()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=
9、Math.random()*500;setTimeout(move(),1000);随机漂浮的广告,Window 对象 7-7,定义层图片移动的函数move(),每隔1秒调用move()函数随机改变层的位置,从而实现随机漂浮的效果,getElementById(“ID名称”)方法:根据ID名称获取HTML元素,这里表示获取层对象Layer1。left和top表示层Layer1的左边距和上边距,设定为随机的值。,20,Document 对象 3-1,属性,21,Document 对象 3-2,方法,22,Document 对象 3-3,无标题文档function change(color)doc
10、ument.bgColor=color;移过来我变色给你看看!变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,23,History对象 4-1,history 对象 方法,Back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页,等价于forward()方法;go(-1)代表后退1页,等价于back()方法;,24,Location对象 4-2,Location 对象 属性,方法,25,History 对象和 Location 对象 4-3,下拉菜单menu1,26,History 和 Location 对象 4-4,function jump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色,根据用户的选择,修改跳转的网址,添加选项改变事件,27,总结,JavaScript 程序是事件驱动程序onFocus获得焦点事件,表示获得鼠标光标,onBlur失去焦点事件,刚好与之相反浏览器对象是一个分层次的结构,window是顶层的根对象打开窗口使用window对象的open()方法设置定时器,使用window对象的setTimeout()方法location对象的back()和forward()方法等同于前进、后退按钮,