BOM ( Browser Object Model ) 浏览器物件模型(上)

常听到 JavaScript 负责行为与互动。但其实JavaScript 并没有提供网页的操作方法，前端开发者在网页的操作方法都是「浏览器」提供的。 这些操作方法基本上会分别由这两种物件所拥有：「BOM」与「DOM」。

所以在浏览器上的 JavaScript 包含了：

1. JavaScript 核心 (以 ECMAScript 标准为基础)

2. BOM (Browser Object Model，浏览器物件模型)

3. DOM (Document Object Model，文件物件模型)

前端开发者就是透过 JavaScript 去呼叫 BOM 与 DOM 提供的 API，进一步透过它们去控制浏览器的行为与网页的内容。

BOM 是浏览器提供的物件，让我们可以透过 JavaScript 直接跟浏览器沟通或操作。

1. BOM 核心是 window 物件
   1. window 物件提供的特性主要为
      1. document 文件物件模型
      2. history 提供进入浏览历史的纪录
      3. frames 框架用途。已从 web 标准中废弃，要避免使用
      4. location 存取浏览器页面的网址(URL)相关资讯
      5. screen 存取使用者的萤幕画面相关资讯
      6. navigator 存取使用者的浏览器资讯

window.history

1. 使用语法 : 回上一页 window.history.back();
2. 使用语法 : 到下一页 window.history.forward();

///page1
<h1>第一页</h1>
<a href="page2.html">连到第二页</a>
<input type="button" id="next" value="到下一页">
 
<script>
document.getElementById('next').onclick = function () {
    window.history.forward();
}
</script>

///page2
<h1>第二页</h1>
<a href="page1.html">连到第一页</a>
<input type="button" id="back" value="回上一页">
 
<script>     
document.getElementById('back').onclick = function () {
    window.history.back();
}
</script>

用 JS 设计列印功能 — print()

1. 常用在票券、QRcord、发票、订单资讯的输出。
2. 点击元素即可列印的写法：
   1. 指定 DOM
   2. 绑定 click 事件并执行函式，里面放入语法 window.print();

今天就介绍到这结束了。