【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会出现浏览器的相关资讯：