追求JS小姊姊系列 Day27 -- 从哪里BOM出来的青梅竹马！

前情提要：

工具人揭露了残酷事实，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