第十四章 JavaScript_Window對象

1、JavaScriptJavaScript08 window08 window對象對象WEB基礎(chǔ)目標vwindow對象 vwindow對象屬性及方法 v對話框 v狀態(tài)欄 v窗口操作 v超時與時間間隔 v框架操作 瀏覽器對象簡介http:/Window 窗口對象location地址對象document文檔對象FORM表單對象瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1 q瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象的分層結(jié)構(gòu)瀏覽器對象簡介window對象 v window對象介紹對象介紹 q簡而言之，window對象是瀏覽器窗口對文檔提供一個顯示的容器，是每一個加載文檔的父對象。

2、window對象還是所有其他對象的頂級對象，通過對window對象的子對象進行操作，可以實現(xiàn)更多的動態(tài)效果。v window對象的使用方法對象的使用方法 qwindow對象代表當(dāng)前打開的瀏覽器窗口，其作為頂級對象。window對象的方法和屬性的調(diào)用和其它對象一樣，區(qū)別是window對象不需要創(chuàng)建即可直使用。需要注意的是window對象名稱是小寫。q常用屬性 名稱名稱 說明說明 document表示給定瀏覽器窗口中的 HTML 文檔。 history 包含有關(guān)客戶訪問過的URL的信息。location包含有關(guān)當(dāng)前 URL 的信息。 name設(shè)置或檢索窗口或框架的名稱。 status 設(shè)置或檢索窗

3、口底部的狀態(tài)欄中的消息。 screen包含有關(guān)客戶端的屏幕和顯示性能的信息。 window對象屬性q常用屬性 window對象屬性名稱名稱 說明說明 outerHeight窗口邊界的垂直尺寸，pxouterWidth窗口邊界的水平尺寸，pxpageXOffset網(wǎng)頁x-position的位置pageYOffset網(wǎng)頁y-position的位置innerHeight窗口內(nèi)容區(qū)的垂直尺寸，pxinnerWidth窗口內(nèi)容區(qū)的水平尺寸，pxscreenX窗口左邊界的X坐標screenY窗口上邊界的Y坐標v常用方法名稱 說明 alert (提示信息)顯示一個帶有提示信息和確定按鈕的對話框 confir

4、m(提示信息“)顯示一個帶有提示信息、確定和取消按鈕的對話框 open (url,name)打開具有指定名稱的新窗口，并加載給定 URL 所指定的文檔；如果沒有提供 URL，則打開一個空白文檔close ( )關(guān)閉當(dāng)前窗口showModalDialog( )在一個模式窗口中顯示指定的HTML文檔prompt(提示字串，默認值) 顯示提示信息，并提供可輸入的字段window對象方法v常用方法名稱 說明 setTimeout(函數(shù),毫秒數(shù)) 設(shè)置延時器：經(jīng)過指定毫秒值后執(zhí)行某個函數(shù) clearTimeout(延時器對象)移除延時器setInterval(表達式，毫秒)設(shè)置定時器：經(jīng)過指定毫秒值后執(zhí)

5、行某個函數(shù) clearInterval(定時器對象)移除定時器resizeTo(寬度，高度)絕對調(diào)整窗口大小window對象方法使用使用window對象對象function 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(請設(shè)置分辨率為請設(shè)置分辨率為1024x768，然后再打開，然后再打開); functi

6、on closewindow( ) if(window.confirm(您確認要退出系統(tǒng)嗎？您確認要退出系統(tǒng)嗎？) window.close( ); 在窗口狀態(tài)欄在窗口狀態(tài)欄中設(shè)置文本中設(shè)置文本設(shè)置窗口設(shè)置窗口的高度的高度使用使用open方法方法打開新窗口打開新窗口彈出警告對話框彈出警告對話框彈出確認對話框彈出確認對話框關(guān)閉當(dāng)關(guān)閉當(dāng)前窗口前窗口添加單添加單擊事件擊事件因為因為window是最頂層的根，所以可以省略是最頂層的根，所以可以省略window.open(google.htm);可簡寫為：可簡寫為：open(google.htm);close( )方法也是如此。方法也是如此。使用使用wi

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

8、為允許 location： 是否顯示地址欄，是否顯示地址欄，yes或或1為允許為允許 status：是否顯示狀態(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方法方法打開注冊頁面打開注冊頁面之后

9、的效果之后的效果使用Window對象對象function 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, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請設(shè)置分辨率為請設(shè)置分辨率為

10、1024x768，然后再打開，然后再打開); function closewindow( ) if(window.confirm(您確認要退出系統(tǒng)嗎？您確認要退出系統(tǒng)嗎？) window.close( ); 使用使用 Open 方法方法打開注冊新窗口打開注冊新窗口添加單添加單擊事件擊事件使用Window對象對象function 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(regist

11、er.html, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請設(shè)置分辨率為請設(shè)置分辨率為1024x768，然后再打開，然后再打開);function closewindow( ) if(window.confirm(您確認要退出系統(tǒng)嗎？您確認要退出系統(tǒng)嗎？) window.close( ); 用戶注冊用戶注冊 退退 出出使用超鏈接調(diào)使用超鏈接調(diào)用方法來打開用方法來打開注冊新窗口注冊新窗口使用Window對象對象-

12、模式窗口模式窗口function 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.showModalDialog(register.html, 注冊窗口注冊窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700, height=550,scrollbars=1); else window.alert(請設(shè)置分辨率為

13、請設(shè)置分辨率為1024x768，然后再打開，然后再打開); function closewindow( ) if(window.confirm(您確認要退出系統(tǒng)嗎？您確認要退出系統(tǒng)嗎？) window.close( ); H3用戶注冊用戶注冊 退退 出出打開模式窗口，打開模式窗口，被打開窗口保持被打開窗口保持輸入焦點。輸入焦點。使用超鏈接調(diào)使用超鏈接調(diào)用方法來打開用方法來打開模式窗口模式窗口對話框?qū)υ捒騫 輸入對話框輸入對話框 q 很多情況下需要向網(wǎng)頁中的程序輸入數(shù)據(jù)，簡單的鼠標交互顯然不能滿足。此時就可以使用window對象提供的輸入對話框，通過該對話框可以輸入數(shù)據(jù)。通過window的pro

14、mpt方法即可顯示輸入對話框，使用方法如下：對話框?qū)υ捒騰輸入對話框輸入對話框?qū)嵗龑嵗隣顟B(tài)欄狀態(tài)欄 v狀態(tài)欄介紹 q 瀏覽器的狀態(tài)欄通常位于窗口的底部，用于顯示一些任務(wù)狀態(tài)信息等。在通常情況下，狀態(tài)顯示當(dāng)前瀏覽器的工作狀態(tài)或用戶交互提示信息 ,如圖所示。狀態(tài)欄v 默認狀態(tài)欄信息 q 默認情況下，狀態(tài)欄里的信息都是空的，只有在加載網(wǎng)頁或?qū)⑹髽朔旁诔溄由蠒r，狀態(tài)欄中才會顯示與任務(wù)目標相關(guān)的瞬間信息。window對象的defaultStatus屬性可以用來設(shè)置在狀態(tài)欄中的默認文本，當(dāng)不顯示瞬間信息時，狀態(tài)欄可以顯示這個默認文本。defaultStatus屬性是一個可讀寫的字符串 。v 狀態(tài)欄瞬間信

15、息 q 在默認情況下，將鼠標放在一個超鏈接上時，狀態(tài)欄會顯示該超鏈接的URL，此時的狀態(tài)欄信息就是瞬間信息。當(dāng)鼠標離開超鏈接時，狀態(tài)欄就會顯示默認的狀態(tài)欄信息，瞬間信息消失 。超時與時間間隔 v 延遲代碼執(zhí)行 q 使用window對象的setTimeout方法可以延遲代碼的執(zhí)行時間，也可以用該方法來指定代碼的執(zhí)行時間。setTimeout方法的語法代碼如下所示：超時與時間間隔超時與時間間隔 v 取消延遲執(zhí)行取消延遲執(zhí)行 q window對象中的對象中的clearTimeout方法可以取消延方法可以取消延遲執(zhí)行的代碼。因為在實際應(yīng)用中，如果有時出遲執(zhí)行的代碼。因為在實際應(yīng)用中，如果有時出現(xiàn)特殊情

16、況，不再需要程序自延遲執(zhí)行的時候，現(xiàn)特殊情況，不再需要程序自延遲執(zhí)行的時候，就得想辦法取消延遲。就得想辦法取消延遲。clearTimeout方法可以做方法可以做到這一點。語法如下所示：到這一點。語法如下所示：window.clearTimeout(id)01/javascript開始02function showClock()/自定義函數(shù)0304d=new Date()/創(chuàng)建一個時間對象05window.status=d.toLocaleString()/在狀態(tài)欄中顯示當(dāng)前時間06ident=window.setTimeout(showClock(),1000);/設(shè)置1秒鐘更新一次0708

17、09 10 11 12 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（myclock）;；飄浮廣告示例function move( )document.getElementById(Layer1).style.left= Math.ra

18、ndom()*500;document.getElementById(Layer1).style.top= Math.random()*500;setTimeout(move(),1000);隨機漂浮的廣告定義層圖片移動的函數(shù)move( ) 每隔1秒調(diào)用move( )函數(shù)隨機改變層的位置，從而實現(xiàn)隨機漂浮的效果getElementById(“ID名稱”) 方法：根據(jù)ID名稱獲取HTML元素，這里表示獲取層對象Layer1。left和top表示層Layer1的左邊距和上邊距，設(shè)定為隨機的值。飄浮廣告示例代碼超時與時間間隔 v周期性執(zhí)行代碼周期性執(zhí)行代碼 q 代碼延遲執(zhí)行機制在執(zhí)行一次后就失效，而

19、在應(yīng)代碼延遲執(zhí)行機制在執(zhí)行一次后就失效，而在應(yīng)用中，有時希望某個程序能反復(fù)執(zhí)行，比如說倒用中，有時希望某個程序能反復(fù)執(zhí)行，比如說倒計時等，需要每秒執(zhí)行一次。為此可以使用計時等，需要每秒執(zhí)行一次。為此可以使用window方法的方法的setInterval方法，該函數(shù)設(shè)置一方法，該函數(shù)設(shè)置一個定時器，每當(dāng)定時時間到時就調(diào)用一次用戶設(shè)個定時器，每當(dāng)定時時間到時就調(diào)用一次用戶設(shè)定的定時器函數(shù)。定的定時器函數(shù)。 v停止周期性執(zhí)行代碼停止周期性執(zhí)行代碼 q 使用使用setInterval方法可以設(shè)定計時器，設(shè)定計時方法可以設(shè)定計時器，設(shè)定計時器時將返回一個計時器的引用。當(dāng)不再需要的時器時將返回一個計時器的

20、引用。當(dāng)不再需要的時候可以使用候可以使用clearInterval方法移除計時器，其接方法移除計時器，其接收一個計時器收一個計時器ID作為參數(shù)，語法如下作為參數(shù)，語法如下：時鐘代碼時鐘代碼如何實現(xiàn)在窗口狀態(tài)欄中顯示時鐘效果？ 由于時間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時間的方法。如何解決？使用使用setInterval( )方法方法每隔每隔1秒調(diào)用顯示時間的方法秒調(diào)用顯示時間的方法v setInterval的用法：v setInterval （“調(diào)用的函數(shù)”,”定時的時間”） v 例：var myTime setInterval( “disptime( )”, 1000 ) ;每隔每隔100

21、0毫秒執(zhí)行函毫秒執(zhí)行函數(shù)數(shù)disptime( )一次一次時鐘代碼時鐘代碼function disptime( ) var time = new Date( ); /獲得當(dāng)前時間獲得當(dāng)前時間 var hour = time.getHours( ); /獲得小時、分鐘、秒獲得小時、分鐘、秒 var minute = time.getMinutes( ); var second = time.getSeconds( ); window.status =hour+:+minute+:+second+ ; var myTime = setInterval(disptime(),1000);設(shè)置狀態(tài)欄的內(nèi)

22、容設(shè)置狀態(tài)欄的內(nèi)容為當(dāng)前時間為當(dāng)前時間設(shè)置定時器每隔設(shè)置定時器每隔1秒秒(1000毫秒毫秒),調(diào)用函數(shù)調(diào)用函數(shù)disptime()執(zhí)行執(zhí)行框架操作框架操作 v框架介紹框架介紹 q 框架是指一個瀏覽器窗口中，同時顯示的多個相框架是指一個瀏覽器窗口中，同時顯示的多個相互獨立的網(wǎng)頁。簡單的說，在上網(wǎng)瀏覽網(wǎng)頁時，互獨立的網(wǎng)頁。簡單的說，在上網(wǎng)瀏覽網(wǎng)頁時，時常會看到一些特別的頁面，這種頁面將網(wǎng)頁分時常會看到一些特別的頁面，這種頁面將網(wǎng)頁分割成不同的幾個區(qū)域，這些區(qū)域是相對獨立但又割成不同的幾個區(qū)域，這些區(qū)域是相對獨立但又有一定的聯(lián)系的，可以在不同的地方加載不同的有一定的聯(lián)系的，可以在不同的地方加載不同的網(wǎng)頁，這里所應(yīng)用的正是框架。網(wǎng)頁，這里所應(yīng)用的正是框架。 q 在在window對象中有一個對象中有一個frames屬性，該屬性返屬性，該屬性返回一個數(shù)組，數(shù)組中的元素代表著框架中所包含回一個數(shù)組，數(shù)組中的元素代表著框架中所