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