iT邦幫忙

2021 iThome 鐵人賽

DAY 18
1
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 19

【Day18】瀏覽器物件模型--BOM

我們學習前端語言就是為了跟瀏覽器溝通,讓網頁可以渲染出想要的效果,創造使用者互動的良好體驗。所以要跟瀏覽器溝通必須要熟悉HTML、CSS與JavaScript三種技術(有些看法不認為HTML與CSS是程式語言)。

HTML、CSS、JavaScript分別扮演這三種角色:

  • HTML負責網頁的結構與內容
  • CSS負責網頁的外觀與樣式
  • JavaScript負責網頁的互動與行為

我們透過這三種技術與網頁溝通,讓網頁的渲染引擎把我們寫的網頁渲染出來,前端語言在網頁上的操作方法都是由瀏覽器所提供的。也就是藉由操控BOM(Browser Object Model 瀏覽器物件模型)與旗下的DOM(Document Object Model 文件物件模型)所提供的API來加以實現。

雖然每家瀏覽器廠商的作法可能不太相同,但在瀏覽器上基本都遵循ECMA標準所提供的JavaScript來進行操作。

所以BOM(Browser Object Model)是甚麼呢?

BOM(Browser Object Model 瀏覽器物件模型)是瀏覽器提供的物件,也是瀏覽器所有功能的核心,但是它與網頁的內容無關。例如開啟關閉視窗、彈跳警告方塊、取得位址....

BOM 的核心是 window 物件,而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。

window物件在瀏覽器中扮演著兩種角色:

  • ECMA標準裡的「全域物件」(Global Object)
  • JavaScript用來與瀏覽器溝通的橋樑

我們一開始寫JavaScript最常寫的alert()

alert('洪七公和歐陽鋒牽手說:「We are the world!」');

我們常常省略alert()前面的window,其實它作為全域物件的屬性應該是寫成這樣:

window.alert('洪七公和歐陽鋒牽手說:「We are the world1」');

而你在全域範圍所下的變數:

var man = '郭靖';
console.log(window.man); //郭靖

在全域範圍所宣告的變數、物件、函式,都是全域物件window的屬性,只是我們通常都把前面的window省略不打。

讓我們來看看常用的window屬性

window.screen

當我們在瀏覽器的console視窗打了window.screen可以得到以下資訊:

window.location

而在瀏覽器的console視窗打了window.location會出現href的訊息:

window.navigator

而在瀏覽器的console視窗打了window.navigator會出現瀏覽器的相關資訊:


上一篇
【Day17】期間限定:函式的參數
下一篇
文件物件模型--DOM
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言