浏览器物件模型 BOM

音乐请下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！