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();

今天就介紹到這結束了。