1、第八章,JavaScript 中的瀏覽器對象,2,回顧,定義數(shù)組a，大小為10，存放的數(shù)據(jù)分別是 1-10，對應(yīng)的js代碼為？ 希望知道數(shù)組的大小，使用哪個屬性？ 代碼閱讀，請問輸出結(jié)果是多少？ var a=3“ , b=4; alert (isNaN(a); alert (a+b ); alert (eval(a+b) ); ,3,回顧,代碼閱讀，請問輸出結(jié)果是多少？ var s=abcdefg ; alert ( s.indexOf(cd,0) ) ; alert (s.substr(1,2) ; alert (Math.round(9.38) ; var now=new Date( );

2、 alert (now.getMonth( ) ; ,4,目標(biāo),理解事件處理程序的概念 了解JavaScript 中的常用事件 掌握常用的瀏覽器對象： window document history,5,事件處理,事件是發(fā)生并得到處理的操作,事件：電話振鈴,處理事件,6,JavaScript 事件處理程序,JavaScript 事件處理程序就是一組語句，在事件（如點擊鼠標(biāo)或移動鼠標(biāo)等）發(fā)生時執(zhí)行,事件,處理事件,事件處理程序的基本語法是： 事件名= JavaScript 代碼或調(diào)用函數(shù) 例如： 表示鼠標(biāo)按下時，將調(diào)用執(zhí)行函數(shù)check( ) 。,7,JavaScript 事件,8, funct

3、ion 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,文本框獲得鼠標(biāo)焦點時（onFocus）調(diào)用的函數(shù)： 清空卡號文本框,文本框失去鼠標(biāo)焦點時（onBlur

4、）調(diào)用的函數(shù)： 判斷格式是否正確,focus( )方法 再次獲得焦點，即鼠標(biāo) 光標(biāo)回到卡號文本框,9, 卡號： 密碼： ,onFocus和onBlur 事件-2, ,表單元素樣式,添加事件處理,10,onMouseOver和onMouseDown事件, 圖片切換 低價轉(zhuǎn)讓哈士奇弟弟 移過來看看俺啊 ,添加事件處理 ： 切換圖片,onMouseOver=src=dog2.jpg 表示本圖片的圖片名稱替換為dog2.jpg。 請注意： 由于外面兩端已有雙引號，為區(qū)別起見，dog2.jpg改用為單引號括起來。,11,瀏覽器對象簡介 2-1,Window 窗口對象,location 地址對象,docu

5、ment 文檔對象,FORM 表單對象,瀏覽器對象的分層結(jié)構(gòu),window.document.myform.text1,12,瀏覽器對象簡介 2-2,瀏覽器對象的分層結(jié)構(gòu),13,Window 對象 7-1,屬性,14,Window 對象 7-2,方法,15,Window 對象 7-3, function openwindow( ) window.open(google.htm); function closewindow( ) window.close ( ); ,使用 Open 方法 打開新窗口,使用 Close 方法 關(guān)閉窗口,添加單擊事件,因為window是最頂層的根，所以可以省略 wi

6、ndow.open(google.htm); 可簡寫為： open(google.htm); close（）方法也是如此。,16,open（”打開窗口的url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意組合： height： 窗口高度； width： 窗口寬度； top： 窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，yes為顯示； menubar，scrollbars 表示菜單欄和滾動欄。 resizable： 是否允許改變窗口大小，yes或1為允許 location： 是否顯示地址欄，yes或1為允許 status：是否顯示

7、狀態(tài)欄內(nèi)的信息，yes或1為允許；,Window 對象 7-4,我們需要預(yù)先制作好廣告頁面，假設(shè)為adv.htm，打開廣告窗口的語句如下 ： open(“adv.htm”, “”, “toolbars=0, scrollbars=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,

8、 resizable=0, width=650, height=150); 看看和我一起打開的廣告窗口 ,Window 對象 7-5,使用 Open 方法 打開廣告新窗口,添加頁面加載事件,18,1.插入一個層Layer1， z-index=1； 2.層中插入一幅圖片。,3.定時器函數(shù)setTimeout （）的用法： setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)） 表示每隔多少毫秒，就循環(huán)調(diào)用某個函數(shù)來執(zhí)行 清除某個定時器：clearTimeout（）方法。 例如： var myclocksetTimeout（”move( )”,500）; if () clearTimeout（my

9、clock）;；,Window 對象 7-6,19, function move( ) document.getElementById(Layer1).style.left= Math.random()*500; document.getElementById(Layer1).style.top= Math.random()*500; setTimeout(move(),1000); 隨機漂浮的廣告 ,Window 對象 7-7,定義層圖片移動 的函數(shù)move( ),每隔1秒調(diào)用move( )函數(shù)隨機改變層的位置，從而實現(xiàn)隨機漂浮的效果,getElementById(“ID名稱”) 方法：根據(jù)

10、ID名稱獲取HTML元素， 這里表示獲取層對象Layer1。 left和top表示層Layer1的左邊距和上邊距，設(shè)定為隨機的值。,20,Document 對象 3-1,屬性,21,Document 對象 3-2,方法,22,Document 對象 3-3, 無標(biāo)題文檔 function change(color) document.bgColor=color ; 移過來我變色給你看看！ 變紅色| 變藍(lán)色| 變黃色 ,利用document對象的bgColor屬性改變背景色,添加鼠標(biāo)懸停事件,23,History對象 4-1,history 對象 方法,Back ( ) 方法相當(dāng)于后退按鈕 fo

11、rward ( ) 方法相當(dāng)于前進按鈕 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; . -請選擇季節(jié)景色- 春天美景 夏天一色 ,根據(jù)用戶的選擇， 修改跳轉(zhuǎn)的網(wǎng)址,添加選項改變事件,27,總結(jié),JavaScript 程序是事件驅(qū)動程序