iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

追求JS小姊姊30天系列 第 27

追求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),就等於是往下一頁

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

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


screen

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

window.screen()

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

-- to be continued --


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


reference:

008
瀏覽器物件模型 BOM


上一篇
追求JS小姊姊系列 Day26 -- 不是被已讀,而是JS回覆你卻沒看到:`console`
下一篇
追求JS小姊姊系列 Day28 -- 工具人給不完的Promise,`妳`都不要
系列文
追求JS小姊姊30天30

1 則留言

0
Chiahsuan
iT邦新手 5 級 ‧ 2021-10-12 19:22:19

從哪裡BOM出來的青梅竹馬!

文章標題大師~~~/images/emoticon/emoticon32.gif

看來是轉錯行了... 嗎? /images/emoticon/emoticon02.gif

我要留言

立即登入留言