本節主要內容：
BOM的概念window對象提示框間隔調用和延遲調用學習目標：
一、BOM的概念
1.1 什麼是BOM?
BOM：Browser Object Model 是瀏覽器對象模型，BOM由多個對象構成，其中代表瀏覽器窗口的window對象是BOM的頂層對象也是核心對象，其他對象都是該對象的子對象。
1.2 BOM包含哪些內容？
瀏覽器介紹BOM對象包含(1)window 對象，是 JS 的最頂層對象，其他的 BOM 對象都是 window 對象的屬性。
(2)document 對象，文檔對象；
(3)location 對象，瀏覽器當前URL信息；
(4)navigator 對象，瀏覽器本身信息；
(5)screen 對象，客戶端屏幕信息；
(6)history 對象，瀏覽器訪問歷史信息；
在瀏覽器中，window對象有雙重角色，它既是通過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
1.3 BOM和DOM的關係
(1)DOM通過document對象來訪問、控制、修改html和xhtml等文檔中的內容
(2)BOM通過 window 對象來訪問、控制、修改瀏覽器中的內容
聯繫：BOM包含DOM。區別：DOM描述了處理網頁內容的方法和接口，即操作頁面內部
BOM描述了與瀏覽器進行交互的方法和接口，即操作頁面之間
二、window對象
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
2.1 window對象
因為window對象是js中的頂級對象，因此所有定義在全局作用域中的變量、函數都會變成window對象的屬性和方法，在調用的時候可以省略window。
例如：
打開窗口 window.open(url); 【等價於open(url);】
關閉窗口 window.close(); 【等價於close();】
獲取事件 window.event 【等價於event;】
獲取文檔 window.document 【等價於document】
2.2 window對象中常用的屬性
2.2.1 window.name
屬性：
window.name是window對象的一個屬性，默認值為空。
特性：
window.name值在不同的頁面（甚至不同域名）加載後依舊存在,
並且可以支持非常長的name值（2MB左右）
2.2.2瀏覽器距離屏幕的距離
window.screenX
window.screenY
2.2.3 window尺寸屬性
outerHeight屬性設置或返回一個窗口的外部高度，包括所有界面元素（如工具欄/滾動條）。
outerWidth屬性設置或返回窗口的外部寬度，包括所有的界面元素（如工具欄/滾動條）。
innerheight 返回窗口的文檔顯示區的高度。
innerwidth 返回窗口的文檔顯示區的寬度。
2.2.4 document對象
2.2.4 window.navigator對象
window.navigator對象包含大量有關Web瀏覽器的信息，在檢測瀏覽器及作業系統上非常有用。（這個對象和event一樣是一個全局變量，並且是唯一的）
navigator.appCodeName //瀏覽器代碼名的字符串表示
navigator.appName //官方瀏覽器名的字符串表示
navigator.appVersion //瀏覽器版本信息的字符串表示
navigator.userAgent //返回和瀏覽器內核相關的信息
navigator.cookieEnabled //如果啟用cookie返回true，否則返回false
navigator.javaEnabled() //如果啟用java返回true，否則返回false
navigator.platform //瀏覽器所在計算機平臺的字符串表示
navigator.plugins //安裝在瀏覽器中的插件數組
ps:如果window.navigator.userAgent出現了Mobile，可以確定用戶使用的是行動裝置。
2.2.5 Location 對象
location.hostname 返回 web 主機的域名location.pathname 返回當前頁面的路徑和文件名location.port 返回 web 主機的埠 （80 或 443）location.protocol 返回所使用的 web 協議（http: 或 https:）
search 屬性是一個可讀可寫的字符串，可設置或返回當前 URL 的查詢部分（問號 ? 之後的部分）
2.2.6 screen對象
2.3 window對象中常用的方法
2.5 實例：三級聯動菜單
三、提示框
3.1警告框
3.2 輸入框
prompt(alertMsg,defaultMsg);
表示警示框，作用是提示用戶信息，該方法執行後根據情況不同返回值略有不同。
a)點擊取消,返回值為null
b)沒有默認值
如果用戶沒有輸入內容，返回一個空字符串
如果用戶輸入了內容，返回值為用戶輸入的內容
c)有默認值
如果用戶沒有輸入內容，返回默認值
如果用戶修改了默認，返回值為用戶輸入的內容
3.3 確認框
3.4 實例：自定義右鍵菜單
3.5 實例：放大鏡效果
四、間隔調用和延遲調用
4.1 定時器
setInterval(表達式，毫秒數)
語法：var timer = null；
timer = setInterval(需要執行的函數，執行間隔時間ms)；
例如：var timer = null；
timer = setInterval(function(){
console.log('hello world!');
},2000);
總結說明：
要把定時器下邊的任務執行完畢後 才會去執行定時器的內容定時執行中this指向window每創建一個定時器 就會有一個唯一的id被返回 id從開始 之後累加
4.清除定時器時 不僅可以使用變量 也可以使用唯一Id清除
5.當定時執行的函數是包含參數時 則應該 將函數和參數 使用引號包裹起來
首先明確兩點：
1.JS 執行機制是單線程。
2.JS的Event loop是JS的執行機制
按照這種的分類方式JS的執行機制是：
異步的編程思想：
首先，判斷JS是同步還是異步，同步進入主線程，異步進入Event table
其次，異步任務在Event table中註冊函數，當滿足特定的條件，被推入Event queue（消息隊列）最後，同步任務進入主線程後一直執行，直到主線程空閒後，才會去Event queue中查看是否有可執行的異步任務，如果有就推入主線程中執行。
清除間隔調用
既然間隔調用每隔一段時間就會自動執行一次，那麼清除間隔調用就勢必存在。
語法：clearInterval(變量標識)
例如：clearInterval(timer);
上述代碼就能夠將剛剛創建的定時器移除掉，令其不在間隔一段時間後自動再次執行。
注意：
(1)間隔調用的返回值是一個數字隊列，因此通過訪問數字隊列來清除間隔調用也被允許。
注意：
(2) 如果間隔調用的函數需要傳入參數，則間隔調用需要使用如下的方式聲明
語法：var timer = null;
timer = setInterval(字符串,執行間隔事件ms)；
例如：var timer = null;
function show(words){console.log(words);}
timer = setInterval('show("hello world!")',2000);
(3) 間隔調用不是立即執行，而是在【任務隊列中的任務完成後】才執行間隔調用
(4) 因為間隔調用函數的實際執行者是window，因此間隔調用內部的this指向window
4.2 延時器
延遲調用又叫延遲調用函數。是一種能夠等待一定時間後在執行的函數。
語法：var timer = null;
timer = setTimeout(需要執行的函數，等待的時間);
例如：var wait = null；
wait = setTimeout(function(){
console.log('hello world!');
},2000);
根據語法所述，上述代碼所表示的含義為：等待2s後列印一句【hello world！】
注意：延遲調用除了在語法上和間隔調用略有不同外，其餘語法均相同。
(1)閱讀下列代碼，口算列印結果
setInterval(function () {console.log(1111);},0);setTimeout(function () {console.log(2222);},0);(2)閱讀下列代碼，口算列印結果
var div = document.getElementsByTagName("div").item(0); div.onclick = function () { setTimeout(function () {console.log(this);}, 1000); };
4.4 實例：時間走動
4.5 實例：倒計時
4.6 實例：進度條的加載
本文由尚學堂前端學院原創，歡迎關注，帶你一起學習Web前端知識！