这些日子我学到的JavaScript:Day26- BOM

BOM，是 JavaScript 与浏览器沟通的桥梁，JavaScript 可以透过 BOM 对浏览器进行各种操作，包含开启及关闭视窗、改变视窗大小、计时器、取得位址之类的。

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

什麽是 window？
浏览器物件模型有着阶层性的架构，最上层便是 window 物件，代表着浏览器视窗本身。
所有的 BOM 都可透过 window 来存取。window 物件的使用不须经过宣告，可以直接使用。事实上，在 JavcaScript 中，所有的全域变数、函式、物件，其实都是属於 window 物件。

关於 BOM 跟 window 物件，我在先前的笔记中曾经提过，如果没看过的话可以搭配着一起看喔：
JavaScript 初心者笔记: JS 内建物件 - 全域物件篇

以下将介绍一些常用的 window 功能。

回上一页、到下一页 - window.history
此功能可以应用在电商网站，引导使用者的购物流程。

回上一页：
1.指定 DOM
2.绑定 click 事件，点击後执行函式，函式中写入 window.history.back() 语法
document.querySelector('.back').onclick = function(){
window.history.back();
}
使用 history 语法後，浏览器就会开始记录使用者造访的网页、页数等等。

接着就可继续使用「下一页」语法。

到下一页：
跟回上页的做法雷同，差别只在 back() 要改成 forward()。

document.querySelector('.next').onclick = function(){
window.history.forward();
}
用 JS 设计列印功能 - print()
常用在票券、QRcord、发票、订单资讯的输出。
点击某元素即可列印的写法：

指定 DOM
绑定 click 事件并执行函式，里面放入 window.print(); 语法
提供当前网页的位址 - window.location
把网址列的东西罗列出来，让开发者可以捞自己想要的东西，也可以用此语法跳转到其他网址。
写法：window.location.href = "网址";
location 是最有用的 BOM 之一，因此其他特性跟方法请见补充资料：
JavaScript BOM — — “location 对象”的注意要点

另开新视窗 - window.open
写法：指定 DOM，绑定事件跟函式，放入 window.open('要前往的网址');
open() 里面的参数很多，除了第一个参数是网址以外，第二个参数不写的话预设为另开视窗。

动态撷取浏览器高度 — innerHeight
网页 banner 制作满版背景、图片时可以用。
window.innerHeight 可以侦测到视窗高度（如果开 chrome 开发者工具，会占掉视窗高度），而 window.outerHeight 则可以侦测整个浏览器的高度。此外，宽度的部分相对应地也有 innerWidth、outerWidth 喔。

如何用 JS 让图片自适应视窗大小
1.图片插入方式用 CSS background 属性
2.在 JS 中选取 DOM，动态更改 CSS 中的图片高度
3.document.querySelector('.图片class').style.height = window.innerHeight + "px";
如果希望使用者拖动浏览器大小的同时，图片高度也能跟着变化的话，要再加上 onresize() 方法去启动函式
window.onresize = function(){
document.querySelector('.图片class').style.height = window.innerHeight + "px"}