JavaScript學習4：BOM之window對象

標籤：js   對象   

        BOM也叫做瀏覽器物件模型，它提供了很多個物件，用於訪問瀏覽器的功能。BOM缺少規範，每個瀏覽器供應商又按照自己的想法去擴充它，那麼瀏覽器共有的對象就成了事實的標準，所以，BOM本身是沒有標準的或者說是還沒有哪個組織去為它制定標準。

        本文我們主要來看BOM中的核心對象：Window對象

        Window對象是BOM的核心對象，它表示瀏覽器的一個執行個體。Window對象處於JavaScript結構的最頂層（如所示），對於每個開啟的視窗，系統都會自動為其定義window對象。

       

        1 對象的屬性和方法

        Window對象有一系列的屬性，這些屬性本身也是對象。Window對象下的屬性和方法，可以使用window.屬性和window.方法()或者直接屬性和方法()的方式調用。舉個例子：window.alert()和alert()是一樣的意思。

        由於window對象的屬性和方法較多，這裡不再一一列舉。大家自己可以查閱文檔資料。

        2系統對話方塊

        瀏覽器是通過alert()、confirm()和prompt()方法來調用系統對話方塊向使用者顯示資訊的。系統對話方塊與瀏覽器中顯示的網頁沒有關係，也不包含HTML。

        舉個簡單的輸入提示框的例子：     

<span style="font-size:18px;">var num=prompt('請輸入第一個數字',0);var num1=prompt('請輸入第二個數字',0);var num2= Number(num)+Number(num1);alert('兩個數位和是：'+ num2); </span>

        當然還有其他的提示框，比如調用系統的列印、尋找對話方塊等等，還可以對瀏覽器的狀態列的初始值進行設定。

        3建立視窗

        使用window.open()方法可以導航到一個特定的URL，也可以開啟一個新的瀏覽器視窗，它可以接受四個參數：1.要載入的URL；2.視窗的名稱或者視窗目標；3.一個特定的字串；4.一個表示新頁面是否取代瀏覽器記錄中當前載入頁面的布爾值。

        舉個例子說明一下如何使用        

<span style="font-size:18px;">open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');</span>

        4間歇調用和逾時調用

        JavaScript是單線程語言，但它允許通過設定逾時值和間歇時間值來控制碼在特定的時刻執行。前者在指定的時間過後執行代碼，而後者則是每隔指定的時間就執行一次。

        逾時調用需要使用window對象的setTimeout()方法，它接受兩個參數：要執行的代碼和毫秒數的逾時時間。調用setTimeout()方法之後，該方法會返回一個數值ID，表示逾時調用。這個逾時調用的ID是計劃執行代碼的唯一標識，可以通過它來取消逾時調用。

        要取消尚未執行的逾時調用計劃，可以調用clearTimeout()方法並將相應的逾時調用ID作為參數傳遞給它。

      間歇調用和逾時調用類似，只不過它會按照指定的時間間隔重複執行代碼，直至間歇調用被取消或者頁面被卸載。設定間歇調用的方法是setInterval()，它接受的參數與setTimeout()相同。

        取消間歇調用方法和取消逾時調用類似，使用clearInterval()方法。但取消間歇調用的重要性遠遠高於取消逾時調用，因為在不加幹涉的情況下，間歇調用將會一直執行到頁面關閉。

        一般認為，使用逾時調用來類比間歇調用是一種最佳模式。在開發環境下，很少使用真正的間歇調用，因為需要根據情況來取消ID，並且可能會造成同步的一些問題，因此不建議使用間歇調用。下面我們使用js寫一個5秒的定時器：     

<span style="font-size:18px;">var num=0;var max=5;function timer(){    //聲明一個定時器num++;if(num==max){alert('5秒後結束！');}else{setTimeout(timer,1000);}}setTimeout(timer,1000);  //執行定時器</span>

        至此，對於BOM的window對象就介紹完了，沒有什麼高深的東西和牛逼的技巧，都是基礎的東西，但是這是我們的必經之路，萬丈高樓平地起！

JavaScript學習4：BOM之window對象