音樂請下BOOM BOOM POW

BOM 係蝦米？

• Browser Object Model 的縮寫，中文譯作瀏覽器物件模型
• 沒有實作標準和嚴格的規範，瀏覽器供應商可以自由發揮（？）
• 描述與瀏覽器進行互動的方法和介面

話不多說直接來認識這些物件吧～

window

• window 物件是 BOM 的核心，代表瀏覽器視窗，提供許多方法讓我們跟瀏覽器互動，最常使用的三種方法如下：

1. 跳出提醒視窗 window.alert(message)

window.alert('快交鐵人賽文章！')

2. 確認對話框 window.confirm(message)

window.confirm('交鐵人賽文章了沒？')

// 使用者按確定會回傳true，按取消則回傳false

3. 提問對話框window.prompt(message, default)

const article = window.prompt('交幾篇鐵人賽文章了？', 0)

if (article >= 30) {
    alert('恭喜完成鐵人賽!')
} else {
    alert('快去寫文章！')
}

• JS 中所有全域宣告的物件，方法，變數都會變成 window 物件的成員
  • 全域變數成為 window 物件的屬性
  • 在全域宣告的函式成為 window 物件的方法

// 在瀏覽器的console

function printDate() {
    const time = new Date();
    const date = time.getDate();
    console.log(date);
}

window.printDate(); // 當天日期

在 Node 環境下，全域物件是 global，但千萬不要舉一反三，以為在全域宣告的變數也會成為global的屬性喔～終端機會報錯！！！

navigator

• 用來存取使用者的瀏覽器資訊，看來看去覺得沒什麼用。

screen

• 該物件提供使用者螢幕資訊：像是螢幕的像素寬高，色彩深度（深度越高，可用顏色就越多）

有趣小知識：色彩深度是以「n位元顏色」（n-bit colour）來表示。若色彩深度是n位元，代表有2的n次方種顏色。
例如：1位元顏色代表黑白兩色

location

• 被用來取得當前網頁的網址或是將瀏覽器導向新的頁面

以下列網址作為範例，輸入window.location會取得目前頁面網址的相關資訊（見下圖）

https://www.w3schools.com/js/js_window_location.asp

Kuro 大大在討論location時，提到了 DOM 元素的 a 標籤也提供類似 location 的屬性，可以輕鬆地解析網址。做法是先建立 a 標籤的元素，再將網址存入元素的屬性中，之後就可以如同 location 物件取得host、protocol、port、pathname...的屬性，覺得非常有趣～
以下來練習一下：

history

• 包含了瀏覽器的歷史紀錄，但由於隱私考量，無法知道切換頁面的詳細網址
• 常用方法：
  • history.back(): 回到上一頁
  • history.forward(): 到下一頁
  • history.go(): 括號中可放入正負整數，例如 history.go(-2)代表回到上上頁，history.go(1)，代表到下一頁。

認識完了 BOM，明天繼續認識 DOM。

參考資料：
w3schools
BOM - wiki
色彩深度 - 維基百科

參考書籍：

0 陷阱！0 誤解！8 天重新認識 JavaScript！