瀏覽器物件模型BOM的基本使用

這是我參與11月更文挑戰的第16天，活動詳情檢視：2021最後一次更文挑戰

BOM

瀏覽器物件模型它允許 JavaScript 與瀏覽器對話

Window 物件

• 所有全域性 JavaScript 物件，函式和變數自動成為 window 物件的成員。
• 全域性變數是 window 物件的屬性。
• 全域性函式是 window 物件的方法。
• document 物件也是 window 物件屬性

視窗尺寸

1. window.innerHeight - 瀏覽器視窗的內高度（以畫素計）

2. window.innerWidth - 瀏覽器視窗的內寬度（以畫素計）

視窗方法

1. window.open() 開啟新視窗

2. window.close() 關閉當前視窗

3. window.moveTo() 移動當前視窗

4. window.resizeTo() 重新調整當前視窗

Screen物件

包含使用者螢幕的資訊

屬性

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Location物件

用於獲取當前頁面地址（URL）並把瀏覽器重定向到新頁面

方法

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

history 物件

方法

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

定時器

1. 物件方法：

2. setInterval

js setInterval(function(){alert("Hello")},3000); //間隔三秒執行函式

• clearInterval()

js clearInterval(function)

• settimeout

js window.setTimeout(function, milliseconds); //function為執行的函式 milliseconds為毫秒數

• clearTimeout

js clearTimeout(function) //function為被停止的函式

## Cookie

什麼是Cookie

Cookie 是一些資料, 儲存於你電腦上的文字檔案中

當 web 伺服器向瀏覽器傳送 web 頁面時，在連線關閉後，服務端不會記錄使用者的資訊

Cookie 的作用就是用於解決 "如何記錄客戶端的使用者資訊"

操作cookie

我們使用document.cookie來對cookie進行讀取，建立，刪除

建立cookie

js document.cookie="username=mxr; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

1. 第一個引數為要設定的cookie鍵值對
2. 第二個引數為設定過期時間
3. path 引數告訴瀏覽器 cookie 的路徑。預設情況下，cookie 屬於當前頁面

讀取cookie

js var x = document.cookie;

修改cookie

重新為cookie賦值將會覆蓋舊的cookie即完成修改

js document.cookie="username=cxy; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

刪除cookie

將日期改為之前的日期即可完成刪除

js document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";