JavaScript BOM

BOM與Window

BOM:瀏覽器對象模型。
window 對象:它表明瀏覽器的窗口。

全部全局 JavaScript 對象，函數和變量自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。document 對象也是 window 對象屬性。
全局函數是 window 對象的方法。

窗口尺寸
window.innerHeight : 瀏覽器窗口的內高度（以像素計）
window.innerWidth : 瀏覽器窗口的內寬度（以像素計）
窗口方法
window.open() : 打開新窗口
window.close() : 關閉當前窗口
window.moveTo() : 移動當前窗口
window.resizeTo() : 從新調整當前窗口

Window屬性

history

window.history 對象包含瀏覽器歷史。

history.back(): 等同於在瀏覽器點擊後退按鈕
history.forward(): 等同於在瀏覽器中點擊前進按鈕

location

window.location 對象可用於獲取當前頁面地址（URL）並把瀏覽器重定向到新頁面。

location.href 返回當前頁面的 href (URL)
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑或文件名
location.protocol 返回使用的 web 協議（http: 或 https:）
location.assign 加載新文檔

navigator

window.navigator 對象包含有關訪問者的信息。

userAgent: 返回由瀏覽器發送到服務器的用戶代理報頭（user-agent header）

screen

window.screen 對象包含用戶屏幕的信息。

Window方法

對話框

對話框會阻塞線程。

• 警告框：alert()

alert("我是一個警告框！");

• 確認框：confirm() : 返回true false

let r = confirm("請按按鈕");
if (r == true) {
    x = "您按了確認！";
} else {
    x = "您按了取消！";
}

• 提示框：prompt() 返回用戶輸入值

let person = prompt("請輸入您的姓名", "比爾蓋茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天過的怎麼樣？";
}

記時器

setTimeout()

setTimeout(function, milliseconds)在等待指定的毫秒數後執行函數。
clearTimeout()取消setTimeout設置。

let timeer = setTimeout(function () {
    console.log("123");
}, 1000);

clearTimeout(timeer);

setInterval()

setInterval(function, milliseconds)每隔指定的毫秒數執行代碼
clearInterval()取消setInterval()設置

let timer = setInterval(function () {
    console.log("123");
}, 1000);
clearTimeout(timer);

Window事件

• load:文檔和全部圖片完成加載時
• unload:離開當前文檔時
• beforeunload:和 unload 相似，可是它提供詢問用戶是否確認離開的機會
• resize:拖動改變瀏覽器窗口大小時
• scroll:拖動瀏覽器時