前言

第一次在課程上聽到 BOM 的時候，大吃一驚，剛剛才學了一個 DOM，又來一個 BOM 是怎樣！？
寫這篇文章的時候，又再 review 了一次，現在慢慢才有個雛形出來。
如果你是因為關鍵字找到這篇的，不要緊張，因為我也是跟你用一樣的關鍵字來找什麼是BOM、DOM 的。

BOM v.s DOM

JavaScript 並沒有提供網頁的操作方法，前端開發者在網頁的操作方法都是「瀏覽器」（JavaScript 操作平台）提供的。

這些操作方法基本上會分別由這兩種物件所擁有：「BOM」與「DOM」。

在瀏覽器上的 JavaScript 包含了：

JavaScript 核心 (以 ECMAScript 標準為基礎)

BOM (Browser Object Model，瀏覽器物件模型)

DOM (Document Object Model，文件物件模型)

前端開發者就是透過 Javascript 去呼叫 BOM 和 DOM 提供的 API 來控制瀏覽器的行為跟網頁的內容。

BOM

BOM (BOM, Browser Object Model) 是瀏覽器提供的物件，讓我們可以透過 JavaScript 直接跟瀏覽器溝通或做操作。

BOM 核心是 window 物件。

如上圖所示，window 物件提供的特性主要為 document、frames、history、location、navigator、screen。

1. window: 存取操作瀏覽器視窗

window 是全域物件，假設宣告了 var b =1 ，就可以在在全域物件（global object） window 底下找到屬性 b。

以下 code 為例：

var b = 1;

console.log(window.b);

Output

1

window 下有幾種方法：

• window
  window 物件提供幾種方法來操控視窗，
  例如：
  open(), resize(), resizeBy(), moveTo(), moveBy() 和 close().
• alert
  alert 就是我們最常使用的提醒視窗，以下兩種寫法都行。

window.alert(message);

alert(message);

• confirm
  Example
  可以利用 confirm 來出現彈跳視窗詢問 yes or no問題
• prompt
  可以利用彈跳視窗詢問問題，並且可以輸入答案

如果我們的 code 是這樣：

let question = prompt('What is your favorite programming language?');

let answer = question.toLowerCase() === 'javascript' ? `It's great!` :
    `It's ${question}`;

alert(answer);

那我們就能夠看到這樣的彈跳視窗：

• setTimeout

載入後延遲指定時間後,去執行一次的方法,只執行一次

下面的例子是指在 3 秒後，會 alert Hello

setTimeout(function(){ alert("Hello"); }, 3000);

• setInterval

載入後,每隔指定的時間就執行一次的方法，會不段重複。
所以一樣的例子放到這的時候，就會無限鬼打牆。3秒就執行一次，再執行一次（裁判，可以打了又打，打了又打嗎？）

setInterval(function(){ alert("Hello"); }, 3000);

2. screen: 存取使用者的螢幕畫面資訊
3. location: 存取操作頁面的網址 (URL)
4. history: 操作瀏覽器的上一頁、下一頁
5. navigator: 存取瀏覽器資訊

以上字數已爆棚，本來想明天 DOM 見，現在是明天繼續 BOM。