DOM編程-window對象

1、第二章第二章DOM編程編程window對象對象回顧回顧請簡述一下腳本執(zhí)行的原理。請簡述一下腳本執(zhí)行的原理。在在JavaScript中有哪些控制語句及其含義？中有哪些控制語句及其含義？如何創(chuàng)建一個(gè)有參函數(shù)以及如何調(diào)用它？如何創(chuàng)建一個(gè)有參函數(shù)以及如何調(diào)用它？預(yù)習(xí)檢查預(yù)習(xí)檢查解釋名詞解釋名詞“根節(jié)點(diǎn)根節(jié)點(diǎn)”、“子節(jié)點(diǎn)子節(jié)點(diǎn)”和和“相鄰節(jié)點(diǎn)相鄰節(jié)點(diǎn)“。window對象常用的屬性有哪些？對象常用的屬性有哪些？請解釋請解釋setTimeout( )方法的功能。方法的功能。本章任務(wù)本章任務(wù)演示示例演示示例1 1：廣告窗口特效廣告窗口特效 演示示例演示示例2 2：時(shí)鐘顯示特效時(shí)鐘顯示特效 制作廣告窗口特效制作

2、廣告窗口特效 制作時(shí)鐘顯示特效制作時(shí)鐘顯示特效本章目標(biāo)本章目標(biāo)會(huì)運(yùn)用會(huì)運(yùn)用DOM模型查找某個(gè)模型查找某個(gè)HTML元素元素會(huì)使用會(huì)使用window對象的對象的open( )方法制作各種樣式方法制作各種樣式的廣告窗口的廣告窗口會(huì)使用會(huì)使用window對象的對象的setTimeout( )方法和方法和Date對象制作日期顯示效果對象制作日期顯示效果HTML文檔的樹狀結(jié)構(gòu)文檔的樹狀結(jié)構(gòu)根節(jié)點(diǎn)根節(jié)點(diǎn)根節(jié)點(diǎn)根節(jié)點(diǎn)的子節(jié)點(diǎn)的子節(jié)點(diǎn)有什么辦法對有什么辦法對HTML中的內(nèi)容進(jìn)行動(dòng)態(tài)改變呢？中的內(nèi)容進(jìn)行動(dòng)態(tài)改變呢？演示示例演示示例3 3：動(dòng)態(tài)改變動(dòng)態(tài)改變HTMLHTML中的內(nèi)容中的內(nèi)容使用使用Document O

3、bject Model相鄰節(jié)點(diǎn)相鄰節(jié)點(diǎn)什么是什么是DOM DOMDocument Object Model ,它是它是W3C國際組織的國際組織的一套一套Web標(biāo)準(zhǔn)，它定義了訪問標(biāo)準(zhǔn)，它定義了訪問HTML文檔對象的一套屬性、文檔對象的一套屬性、方法和事件方法和事件 。function changeLink() document.getElementById(myAnchor).innerHTML=搜狐搜狐 ;document.getElementById(myAnchor).href=http:/ ; 淘寶淘寶修改內(nèi)容修改內(nèi)容修改屬性修改屬性HTML文檔的每個(gè)節(jié)點(diǎn)都是對象，類似文檔的每個(gè)節(jié)點(diǎn)都是

4、對象，類似WinForm中的控件，都具備屬性、方法和事件中的控件，都具備屬性、方法和事件定位鏈接元定位鏈接元素（對象）素（對象）DOM對象模型對象模型-1http:/window 窗口對象窗口對象location地址對象地址對象FORM表單對象表單對象瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1 document文檔對象文檔對象DOM對象模型對象模型-2瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象的分層結(jié)構(gòu)Window對象常用的屬性對象常用的屬性名稱名稱 說明說明 status 指定瀏覽器狀態(tài)欄中顯示的臨時(shí)消息指定瀏覽器狀態(tài)欄中顯示的臨時(shí)消息 screen

5、有關(guān)客戶有關(guān)客戶端的屏幕和顯示性能的信息。端的屏幕和顯示性能的信息。 history 有關(guān)客戶訪問過的有關(guān)客戶訪問過的URL的信息。的信息。location有關(guān)當(dāng)前有關(guān)當(dāng)前 URL 的信息。的信息。 document表示瀏覽器窗口中的表示瀏覽器窗口中的HTML文檔文檔常用的屬性常用的屬性常用的方法常用的方法onLoad事件：在窗口或框架完成文檔加載時(shí)觸發(fā)事件：在窗口或框架完成文檔加載時(shí)觸發(fā)window對象常用的方法和事件對象常用的方法和事件名稱名稱 說明說明 alert (提示信息提示信息)顯示一個(gè)帶有提示信息和確定按鈕的對話框顯示一個(gè)帶有提示信息和確定按鈕的對話框 confirm(提示信息提

6、示信息“)顯示一個(gè)顯示一個(gè)帶有提示信息、確定和取消按鈕的對帶有提示信息、確定和取消按鈕的對話框話框 open (url,name)打開具有指定名稱的新窗口，并加載給定打開具有指定名稱的新窗口，并加載給定 URL 所指定的文檔；如果沒有提供所指定的文檔；如果沒有提供 URL，則打開一，則打開一個(gè)空白文檔個(gè)空白文檔close ( )關(guān)閉當(dāng)前窗口關(guān)閉當(dāng)前窗口showModalDialog( )在一個(gè)模式窗口中顯示指定的在一個(gè)模式窗口中顯示指定的HTML文檔文檔setTimeout(函數(shù)函數(shù),毫秒數(shù)毫秒數(shù)) 設(shè)置定時(shí)器：經(jīng)過指定毫秒值后執(zhí)行某個(gè)函數(shù)設(shè)置定時(shí)器：經(jīng)過指定毫秒值后執(zhí)行某個(gè)函數(shù) 如何使用如何

7、使用window對象對象-1function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶.; if (window.screen.width = 1024 & window.screen.height = 768) window.open(register.html); else window.alert(請?jiān)O(shè)置分辨率為請?jiān)O(shè)置分辨率為1024x768，然后再打開，然后再打開); function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.clo

8、se( ); 示例完整代碼示例完整代碼在窗口狀態(tài)欄在窗口狀態(tài)欄中設(shè)置文本中設(shè)置文本設(shè)置窗口設(shè)置窗口的高度的高度使用使用open方法方法打開新窗口打開新窗口彈出警告對話框彈出警告對話框彈出確認(rèn)對話框彈出確認(rèn)對話框關(guān)閉當(dāng)關(guān)閉當(dāng)前窗口前窗口添加單添加單擊事件擊事件因?yàn)橐驗(yàn)閣indow是最頂層的根，所以可以省略是最頂層的根，所以可以省略window.open(google.htm);可簡寫為：可簡寫為：open(google.htm);close( )方法也是如此。方法也是如此。如何使用如何使用window對象對象-2-1open（”打開窗口的打開窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”

9、）窗口的特征如下，可以任意組合：窗口的特征如下，可以任意組合：height： 窗口高度；窗口高度； width： 窗口寬度；窗口寬度； top： 窗口距離屏幕上方的象素值；窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值；：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，是否顯示工具欄，yes為顯示；為顯示； menubar，scrollbars 表示菜單欄和滾動(dòng)欄。表示菜單欄和滾動(dòng)欄。 resizable： 是否允許改變窗口大小，是否允許改變窗口大小，yes或或1為允許為允許 location： 是否顯示地址欄，是否顯示地址欄，yes或或1為允許為允許 statu

10、s：是否顯示狀態(tài)欄內(nèi)的信息，：是否顯示狀態(tài)欄內(nèi)的信息，yes或或1為允許；為允許；我們需要預(yù)先制作好注冊頁面，假設(shè)為我們需要預(yù)先制作好注冊頁面，假設(shè)為register.html，打開注冊窗口的語句如下，打開注冊窗口的語句如下 open(register.html, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0,menubars=0,width=700,height=550,scrollbars=1);通過通過open方法方法打開注冊頁面打開注冊頁面之后的效果之后的效果如何使用如何使用window對象對象-2-2function openwindo

11、w( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請?jiān)O(shè)置分辨率為請?jiān)O(shè)置分辨率為1024x768，然后再打開，然后再打開); function closewindo

12、w( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); 示例完整代碼示例完整代碼使用使用 Open 方法方法打開注冊新窗口打開注冊新窗口添加單添加單擊事件擊事件如何使用如何使用window對象對象-3function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注冊窗口注冊窗口, toolbar

13、s=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請?jiān)O(shè)置分辨率為請?jiān)O(shè)置分辨率為1024x768，然后再打開，然后再打開);function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); 用戶注冊用戶注冊 退退 出出示例完整代碼示例完整代碼使用超鏈接調(diào)使用超鏈接調(diào)用方法來打開用方法來打開注冊新窗口注冊新窗口如何使用如何使用window對象對象-4functio

14、n openwindow( ) open(adv.htm, 廣告窗口廣告窗口, toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250);   示例完整代碼示例完整代碼窗口完成文檔窗口完成文檔加載時(shí)觸發(fā)打加載時(shí)觸發(fā)打開廣告窗口開廣告窗口如何使用如何使用window對象對象-5function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶.; if (window.screen.

15、width = 1024 & window.screen.height = 768) window.showModalDialog(register.html, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700, height=550,scrollbars=1); else window.alert(請?jiān)O(shè)置分辨率為請?jiān)O(shè)置分辨率為1024x768，然后再打開，然后再打開); function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) wind

16、ow.close( ); H3用戶注冊用戶注冊 退退 出出示例完整代碼示例完整代碼打開模式窗口，打開模式窗口，被打開窗口保持被打開窗口保持輸入焦點(diǎn)。輸入焦點(diǎn)。使用超鏈接調(diào)使用超鏈接調(diào)用方法來打開用方法來打開模式窗口模式窗口小結(jié)小結(jié)1編寫如左圖所示，具有自動(dòng)打開廣告窗口和在瀏編寫如左圖所示，具有自動(dòng)打開廣告窗口和在瀏覽器狀態(tài)欄中顯示覽器狀態(tài)欄中顯示“歡迎你歡迎你.”信息的頁面。信息的頁面。廣告廣告窗口窗口狀態(tài)欄狀態(tài)欄信息信息練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-1如何實(shí)現(xiàn)如演示示例如何實(shí)現(xiàn)如演示示例3中所示的時(shí)鐘效果？中所示的時(shí)鐘效果？演示示例演示示例3 3：時(shí)鐘

17、效果演示時(shí)鐘效果演示由于涉及到時(shí)間的顯示問題，所以要用到日期對象由于涉及到時(shí)間的顯示問題，所以要用到日期對象Date。還有時(shí)間在不停地走，因此需要不斷地調(diào)用一個(gè)函數(shù)，所還有時(shí)間在不停地走，因此需要不斷地調(diào)用一個(gè)函數(shù)，所以要用到以要用到Windows的定時(shí)器的定時(shí)器setTimeout( )方法。方法。Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-2Date 對象存儲(chǔ)的日期為自對象存儲(chǔ)的日期為自 1970 年年 1 月月 1 日日 00:00:00 以以來的毫秒數(shù)來的毫秒數(shù)var 日期對象日期對象 = new Date (年、月、日等參數(shù)年、月、日等參數(shù))例如：例如：var mydate=new Dat

18、e(July 29, 2007,10:30:00 ) 如果沒有參數(shù)，表示當(dāng)前日期和時(shí)間如果沒有參數(shù)，表示當(dāng)前日期和時(shí)間例如：例如：var today = new Date( ) Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-3Date 方法的分組方法的分組方法分組方法分組說說 明明 setXxx這些方法用于設(shè)置時(shí)間和日期值這些方法用于設(shè)置時(shí)間和日期值getXxx 這些方法用于獲這些方法用于獲取時(shí)間和日期值取時(shí)間和日期值Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-4用作用作 Date 方法的參數(shù)的整數(shù)范圍：方法的參數(shù)的整數(shù)范圍： 值值整整 數(shù)數(shù) Seconds 和和 minutes0 至至 59 Hours0

19、 至至 23 Day0 至至 6（星期（星期幾）幾） Date1 至至 31（月份中的天數(shù)）（月份中的天數(shù)） Months0 至至 11（一月（一月至十二月）至十二月） Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-5-1function disptime( ) var now= new Date( ) ; var hour = now.getHours() ; if (hour=0 & hour =12) document.write(上午好上午好!) if (hour12 & hour= 18) document.write(下午好下午好!) ; if (hour18 & hour 24) doc

20、ument.write(晚上好晚上好!) ; document.write(今天日期今天日期:+now.getYear()+年年+(now.getMonth( )+1)+月月+now.getDate()+日日) ; document.write(現(xiàn)在時(shí)間現(xiàn)在時(shí)間:+now.getHours()+點(diǎn)點(diǎn)+now.getMinutes( )+分分) ; 查看完整代碼查看完整代碼獲得當(dāng)前日期和時(shí)間獲得當(dāng)前日期和時(shí)間獲得小時(shí)，即當(dāng)前是幾點(diǎn)獲得小時(shí)，即當(dāng)前是幾點(diǎn)月份數(shù)字月份數(shù)字011，注意注意1判斷上午、下午還是晚上判斷上午、下午還是晚上Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-5-2上一頁上一頁P(yáng)PT示例中

21、時(shí)鐘不能動(dòng)態(tài)改變，怎么辦？示例中時(shí)鐘不能動(dòng)態(tài)改變，怎么辦？由于時(shí)間在不停地走，所以應(yīng)該每隔由于時(shí)間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時(shí)間秒調(diào)用顯示時(shí)間的方法。如何解決？的方法。如何解決？使用使用setTimeout( )方法方法每隔每隔1秒調(diào)用顯示時(shí)間的方法秒調(diào)用顯示時(shí)間的方法setTimeout的用法：的用法： setTimeout（“調(diào)用的函數(shù)調(diào)用的函數(shù)”,”定時(shí)的時(shí)間定時(shí)的時(shí)間”） 例：例：var myTimesetTimeout( “disptime( )”, 1000 ) ;每隔每隔1000毫秒執(zhí)行函毫秒執(zhí)行函數(shù)數(shù)disptime( )一次一次Date對象做時(shí)鐘顯示對象做時(shí)鐘顯示-

22、6function disptime( ) var time = new Date( ); /獲得當(dāng)前時(shí)間獲得當(dāng)前時(shí)間 var hour = time.getHours( ); /獲得小時(shí)、分鐘、秒獲得小時(shí)、分鐘、秒 var minute = time.getMinutes( ); var second = time.getSeconds( );document.myform.myclock.value =hour+:+minute+:+second+ ;var myTime = setTimeout(disptime(),1000); H2當(dāng)前時(shí)間：當(dāng)前時(shí)間： 查看完整代碼查看完整代碼設(shè)置文

23、本框的內(nèi)容設(shè)置文本框的內(nèi)容為當(dāng)前時(shí)間為當(dāng)前時(shí)間設(shè)置定時(shí)器每隔設(shè)置定時(shí)器每隔1秒秒(1000毫秒毫秒),調(diào)用函數(shù)調(diào)用函數(shù)disptime()執(zhí)行執(zhí)行小結(jié)小結(jié)2編寫如左圖所示，具有在網(wǎng)頁中指定位編寫如左圖所示，具有在網(wǎng)頁中指定位置顯示動(dòng)態(tài)時(shí)鐘效果的頁面。置顯示動(dòng)態(tài)時(shí)鐘效果的頁面。練習(xí)答案練習(xí)答案練習(xí)代碼練習(xí)代碼自動(dòng)動(dòng)態(tài)變自動(dòng)動(dòng)態(tài)變化的時(shí)鐘化的時(shí)鐘history 和和location對象對象-1history 對象對象方法方法 名稱名稱 說明說明 back( )加載加載 History 列表中的上一個(gè)列表中的上一個(gè) URL。 forward( )加載加載 History 列表中的下一個(gè)列表中的下一個(gè) URL。 go(url or number)加載加載 History 列表中的一個(gè)列表中的一個(gè) URL，或要求瀏覽器，或要求瀏覽器移動(dòng)指定的頁面數(shù)。移動(dòng)指定的頁面數(shù)。 back ( )方法相當(dāng)于后退按鈕方法相當(dāng)于后退按鈕forward ( ) 方法相當(dāng)于前進(jìn)按鈕方法相當(dāng)于前進(jìn)按鈕go (1)代表前進(jìn)代表前進(jìn)1頁，等價(jià)于頁，等價(jià)于forward( )方法；方法；go(-1) 代表后退代表后退1頁，等價(jià)于頁，等價(jià)于back( )方法；方法；history 和和locati