大家好，我是IT修真院鄭州分院第三期的學員高雪峰，一枚正直、純潔、善良的前端程序員
今天給大家分享一下，修真院官網JS（職業）任務4，深度思考中的知識點——BOM
1.背景介紹
Browser Object Model，瀏覽器對象模型，簡稱BOM，是JavaScript在使用過程中極其重要的組成部分，也是在瀏覽器實現JavaScript的核心。多年來，BOM缺少一個比較統一的標準，基本上都是各大瀏覽器提供商各自為政，對其進行擴展補充。W3C為了把瀏覽器中的JavaScript最基本部分標準化，已經將BOM的主要方面納入到了HTML5標準中。接下啦，我們來認識一下它。
2.知識剖析
2.1什么是BOM？
BOM，瀏覽器對象模型。其核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重的角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象，這意味著在網頁中定義的任何一個對象、變量、函數，都以window作為其Global對象，因此有權訪問parseInt()等方法。它包含的對象有：window對象、location對象、screen對象、history對象等。
window對象作為ECMAScript規定的Global對象，所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。但使用var定義全局變量，和直接使用window對象定義全局屬性，也存在細微的差別：全局變量不能通過delete操作符刪除，而window定義的屬性可以。
var name = '大娃';
function sayName(){
alert(this.name);
}
alert(window.name); //'大娃'
sayName();? //'大娃'
window.sayName();? //'大娃'
//delete刪除變量的演示 IE8之前對window使用方法會拋出錯誤
var age = 28;
window.color = 'red';
delete window.age;
delete window.color;
console.log(window.age);? //28
console.log(window.color);? //undefined
2.2 窗口關系：top、parent、self的區別
top、parent、self都是window對象的屬性。
top: 其始終指向最高（最外）層的框架，也就是瀏覽器窗口。
parent：其始終指向當前框架的直接上層框架。
self：其始終指向window。這里的window就同self的本意一樣，指的是當前window，不是瀏覽器窗口。
2.3 窗口位置
window對象的位置的屬性和方法很多。原因就像開場的時候介紹的那樣，起初由于各瀏覽器提供商的各自為政導致的。抄錄一段紅寶書中的話：
IE、Safari、Opera 和Chrome都提供了screenLeft和screenTop屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性定義了相同的窗口位置信息，Safari、Chrome同時支持這兩個屬性。Opera雖然支持這兩個屬性，但是與screenLeft和screenTop屬性并不對應。
var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;
2.4 窗口大小
窗口大小的屬性，各大瀏覽器供應商還是比較一致的（IE9+）。目前有四個屬性：innerWidth、innerHeight、outerWidth和outerHeight。innerWidth、innerHeight表示該容器中頁面視圖的大小（減去邊框的寬度）。outerWidth、outerHeight表示瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個框架訪問）。在Chrome中，會返回同樣的值，表示視口（viewport）大小而非瀏覽器窗口大小。
在各瀏覽器中，使用document.documentElement.clientWidth和document.documentElement.clientHeight保存頁面的視口信息。IE6混雜模式下，需通過document.body.clientWidth和document.body.clientHeight獲取相同的信息。
2.5 導航和打開、關閉窗口
使用window.open()方法既可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口。這個方法接收4個參數:要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。使用window.close()方法自動關閉窗口，不常使用。
通常只需傳遞第一個參數，最后一個參數只在不打開新窗口的情況下使用。傳遞了第二個參數，該參數可以已有窗口或者框架的名稱，也可以是_self、_parent、_top、_blank。若不存在第二個參數的名稱，則等同于設置_blank,即打開新窗口。第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性。
document.onclick = function(){
//在新窗口中打開高度為500，寬度為500，縱坐標為0，橫坐標為200的qq網頁（第三個參數內填入相關的數值）
window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
}
3.常見問題
問題: 如何顯示不同的對話框信息？
4.解決方案
瀏覽器通過alert()、confirm()、prompt()、print()方法來調用系統對話框向用戶顯示信息。通過這三個方法打開的對話框都是同步和模態的，也就是說顯示這些對話框的時候代碼會停止執行，而關掉這些對話框后代碼又會恢復執行。
alert()：接收一個字符串并將其顯示給用戶。
confirm()：接收一個字符串，并將其顯示給用戶。返回的布爾值:true表示單擊OK，false表示單擊Cancel或者右上角的關閉按鈕。
prompt()：接收兩個參數，要顯示給用戶的文本提示和文本輸入域的默認值(可以是一個空字符串)。如果用戶單擊了OK按鈕，則返回文本輸入域的值；如果用戶單擊了Cancel或者右上角的關閉按鈕，則該方法返回null。
print()：打印對話框是異步顯示的，能夠將控制權立即交還給腳本。
控制臺打印一下內容看不同的效果：
alert(Hello World!);
confirm("Are you sure?");
prompt("What is your name?" ,"Mike");
print(this);
5.編碼實戰
參看上邊簡單的demo演示，暫無更多demo！
6.擴展思考
問題: _self、_parent、_top、_blank的區別？
target="_blank"，將鏈接的內容打開在新的瀏覽器窗口中；
_self，是指在本身這個網頁窗口來打開新的網頁鏈接；
_parent表示父窗口進行新的網頁跳轉；
_top表示整頁窗口進行新的網頁跳轉。
7.參考文獻
參考一：《JavaScript高級程序設計》
參考二: BOM之window對象：http://www.tuicool.com/articles/vYzqaa6
參考三：BOM的window對象的屬性及其方法：http://www.cnblogs.com/lfbs/p/5913692.html
參考四：BOM window對象方法：http://www.cnblogs.com/yd09023/p/5865280.html
8.更多討論
討論點：大家對于window對象還有哪些認識，分享一下？
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-04-bom.html#/
視頻鏈接：https://v.qq.com/x/page/f0514wzflte.html
文本鏈接：http://www.jnshu.com/daily/25827?dailyType=others&total=143&page=1&uid=7446&sort=0&orderBy=3
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
你可以直接點擊此鏈接：http://jnshu.com/login/1/84959420
