iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

前端藏寶圖系列 第 8

瀏覽器物件模型 BOM

音樂請下BOOM BOOM POW/images/emoticon/emoticon21.gif

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

  • 用來存取使用者的瀏覽器資訊,看來看去覺得沒什麼用/images/emoticon/emoticon19.gif

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。/images/emoticon/emoticon29.gif

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

參考書籍:

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


上一篇
資料傳輸格式 JSON
下一篇
未來世界的樹 - DOM Tree
系列文
前端藏寶圖30

2 則留言

0
MJ
iT邦新手 5 級 ‧ 2021-09-23 12:54:29

這範例是要寫催稿機器人的節奏ㄇ/images/emoticon/emoticon34.gif

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-23 19:29:16

BOOM BOOM POW XD

(每個範例都好可怕...)

我要留言

立即登入留言