今天來把剩下的 BOM 事件做一個繼續的動作 （LOL），根據下圖 BOM 還有以下幾個特性，我們來看看，這些特性應該如何應用：

1. screen: 存取使用者的螢幕畫面資訊

如同字面上解釋的，瀏覽器可以獲取你正在看的謎片的資訊（開玩笑），到開發者工具的時候，console 裡面打 window.screen，你就可以拿到以下這些資訊。

為什麼我們要拿使用者螢幕資訊呢？
簡單來說，就是有佈局上的需求，例如，在排版的時候，我們希望一塊 div 填滿高度，但是不希望使用者可以 scroll，而且上下可能還有 fixed 的 header footer就得去算出這塊 div 到底要多高。

再來，可以判斷使用者現在螢幕的比例

可能你的版面對於比例有嚴格要求，像是遊戲畫面就是一種對比例很要求的東西。

那我們要怎麼去算出畫面高度呢？用目測或者拿尺都不可以

以下 code為例，可以點進去試試看。這裡有三種高度：

screen : 整個螢幕的解析度大小
page : 整個網頁內容長度
client : 瀏覽器窗口的大小

如果在網頁排版上十分要求的網頁，在 window screen 就非常重要了，以下網站，是前端非常強大的網站。

https://tw.tradingview.com/chart/MjVhl8cA/?fbclid=IwAR0RvQph1K9LpmugtqlzmayOFL_iF2xcaIItncBoiLaueMQW9KBCKaOZSCc

2. location: 存取操作頁面的網址 (URL)

來來來，首先一樣去 console.log 看看，我們可以拿到什麼東西。
可以看得出來我是在哪個網站上，按右鍵的嗎？

一樣來了解一下，location 可以應用在哪邊。

跳轉網頁的應用

基本款

HTML 結構 做兩個 button 出來

<div class="container">
  <button class="btn btn_astro" id="btnAstro" title="Astro">Astro</button>
  <button class="btn btn_hex" id="btnHex" title="Hex">Hex</button>
</div>

JavaScript 行為

這裡做的事，是當我們按 button 的時候，會讓 JavaScript 去把跳轉網址加進去。

let btnAstro = document.querySelector("#btnAstro");
let btnHex = document.querySelector("#btnHex");

function astroLink() {
  location.href = "https://astro.5xruby.tw/";
}

function hexLink() {
  location.href = "https://www.hexschool.com/";
}
btnAstro.addEventListener("click", astroLink);
btnHex.addEventListener("click", hexLink);

加入變數跳轉網頁

今天有兩個 influencer，他們要來競爭誰最帥的活動，這兩個 influencer 都在他們自己的宣傳的網站放了一個button 連結，我們要把這兩個 influencer的名字加在最後面，再跳轉，可以做到嗎？

可以。機會是一定有的，重點是機會大不大呢？（香港、澳門有看 NBA 的朋友應該懂這個梗）

條件

點 朧朧 提供的 button連結時，網址為
https://www.wozuishuai.com/?candidate=longlong
點 傑傑 提供的 button連結時，網址為
https://www.wozuishuai.com/?candidate=JJ

HTML 結構

<button class="astro jq-astro" title="vote 朧朧" data-id="longlong">
  我要把票投給朧朧
</button>
<button class="yahoo jq-hex" title="vote 傑傑" data-id="JJ">
  我要把票投給傑傑
</button>

JavaScript 行為

let jqAstro = document.querySelector(".jq-astro");
let jqHex = document.querySelector(".jq-hex");

let wozuishuaiUrl = "https://www.wozuishuai.com/";

let astroId = jqAstro.getAttribute("data-id");
let hexId = jqHex.getAttribute("data-id");

function longLink() {
  location.href = `${woZuishuaiUrl}?candidate=${astroId}`;
}
jqAstro.addEventListener("click", longLink);

function jjLink() {
  location.href = `${woZuishuaiUrl}?candidate=${hexId}`;
}
jqHex.addEventListener("click", jjLink);

3. history: 操作瀏覽器的上一頁、下一頁

4. navigator: 存取瀏覽器資訊

以上，明天見。 歡迎留言指教，或是打個卡。