# BOM 簡單介紹
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`

瀏覽器所有功能的核心，與網頁內容無關

BOM的核心是 <font color=red>**window物件(global object)**</font>，代表瀏覽器的視窗

### <font color=#184289>window 在瀏覽器中的主要角色是：</font>

<font color=#81A815> **1. JavScript 用來和瀏覽器溝通的窗口**</font>

<font color=#81A815>**2. 全域物件 Global object**</font>

var i=1;
console.log(window.i);

說明:
所有在全域宣告的變數、函式、物件等，都會變成全域window的屬性
因此上面的程式碼用 var 宣告的 i ，可以透過 window.i 來顯示出來

#### <font color=#5C206A>let const 可以透過 window 來呼叫嗎?</font>


說明:
Global environment record 下分成兩種不同的環境紀錄，依據不同的語法宣告的內容綁定在不同地方
**let 、 const、 class** =>` Declarative environment record`
**var 、 function declarations** => `Object environment record`
全域物件 window 參照的是 `Object environment record`
所以 var 和 function declarations 的變數都可以用 window. 印出

## <font color=#156E62> BOM的核心是 window物件 </font>


### <font color=#184289> window主要內容: </font>

* document : 代表整個 HTML 文件，是 Document 的實例
* navigator : 用來取得瀏覽器的資料
* frames[] : 收集視窗中有的iframe的對應物件
* history : 瀏覽器的歷史，基於安全考量無法直接透過JS取得瀏覽歷史，但可以操作回到上(下)一頁

window.history.back() => 回到上一頁
window.history.forward() => 回到下一頁
window.history.go(2) => 回到下兩頁

* location : 代表 HTML 頁面的 URL，有內建方法可以重載或取代頁面。

window.location.reload() => 重新整理
window.location.replace('https://www.youtube.com/') => 用()裡面的網頁取代現在的網頁，前往youtube~

* screen : 視窗目前所處的螢幕資訊，像是寬、高、顏色深度等。

### <font color=#184289> window內建的方法: </font>

* window.alert : 跳出警告視窗
* window.confirm : 跳出確認視窗，有確認跟取消兩個按鈕
* window.prompt : 跳出可以輸入的視窗
* window.close : 關閉視窗
* window.open :　開新視窗