前情提要：

工具人揭露了殘酷事實，JS有一個青梅竹馬的存在！

我： 到底是怎麼樣的人物？
工具人們：他叫劉覽氣，比我們強多了，擁有更多的能力。

簡單認識 劉覽氣

JavaScript本身並沒有提供網頁的操作方法，也就是說網頁的操作都是由瀏覽器本身所提供。

瀏覽器內的JavaScript包含了：

1. JavaScript核心
2. BOM
3. DOM

其中BOM DOM的部分是由瀏覽器執行環境提供，所以兩者在node環境下不會存在。

BOM

全名為：Browser Object Model，中文譯名為：瀏覽器物件模型

BOM也是一個物件，它提供了許多properties讓我們去跟瀏覽器溝通與操作。

在瀏覽器裡 window扮演兩種角色：

1. ECMAScript標準的全域物件
2. JavaScript與瀏覽器的溝通窗口

作為溝通窗口，這件事怎麼說呢？
讓我用promt,confirm,alert溝通給你看：

alert 單純跳出訊息

confirm 跳出有選項的訊息

promt 跳出輸入選項的訊息

那除了作為窗口外，BOM是以window物件作為核心，包含了：

以下會簡單帶到幾個語法：

navigator

用來存取使用者的瀏覽器資訊。

例如可以使用language 查詢使用者偏好的語言，它是一個唯讀的屬性，回傳值為字串。

navigator.language()

location

跳轉到特定頁面可以用href或是replace

使用href

window.location.href = "https://diarysophie.gitbooks.io/web-development/content/chapter5.html"

使用replace

window.location.replace = "https://diarysophie.gitbooks.io/web-development/content/chapter5.html"

兩者的差異

使用replace來換頁，雖然在document.referrer會紀錄前一頁的網址，但無法使用history的方式來返回。

history

常用的方法 -- 頁面移動：

1. 移動（往前往後皆可）: window.history.go()
   當你輸入負值(-1)，等於是往前一頁

window.history.go(-1) === window.history.back()
// true

因此類推，當你輸入正值(1)，就等於是往下一頁。

2. 往前一頁: window.history.forward()
3. 往下一頁: window.history.back()

雖然我們透過history在不同頁面移動，但基於隱私問題，無法取得詳細網址。

screen

會回傳當前螢幕的各種資訊，包含螢幕寬高、甚至是色彩深度(colorDepth)

window.screen()

色彩深度數字代表的是可包含的色彩種類以及色彩呈現的準確度。
越高的越準確，以筆者的筆電來說，回傳值為24，可包含1600萬種色彩。

-- to be continued --

那今天就到這邊摟！
每天的休息，是為了後面的追求，明天見。

reference:

008
瀏覽器物件模型 BOM