JS Browser BOM

---

JS Window Screen

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

• screen.width 屬性返回以像素計的訪問者屏幕寬度

• screen.height 屬性返回以像素計的訪問者屏幕的高度

• screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去諸如窗口工具條之類的界面特徵

• screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去諸如窗口工具條之類的界面特徵

• screen.colorDepth 屬性返回用於顯示一種顏色的比特數，有8，14，24(rgb)，32

• screen.pixelDepth 屬性返回屏幕的像素深度，對於現代計算機，顏色深度和像素深度是相等的

---

JS Window Location

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

• location.href 屬性返回當前頁面的地址 URL

• location.hostname 屬性返回（當前頁面的）因特網主機的名稱

• location.pathname 屬性返回當前頁面的路徑名

• location.protocol 屬性返回頁面的 web 協議

• location.port 屬性返回（當前頁面的）互聯網主機端口的編號，如果端口號是默認值（對於 http 爲 80，對於 https 爲 443），則大多數瀏覽器將顯示 0 或不顯示

• location.assign() 方法加載新文檔 window.location.assign(" url ")

---

JS Window History

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

• history.back() 方法加載歷史列表中前一個 URL，等同於在瀏覽器中點擊後退

• history forward() 方法加載歷史列表中下一個 URL，等同於在瀏覽器中點擊前進

---

JS Window Navigator

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

• navigator.cookieEnabled 屬性如果 cookie 已啓用，返回 true，否則返回 false

• navigator.appName 屬性返回瀏覽器的應用程序名稱

• navigator.appCodeName 屬性返回瀏覽器的應用程序代碼名稱

• navigator.product 屬性返回瀏覽器引擎的產品名稱

• navigator.appVersion 屬性返回有關瀏覽器的版本信息

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

來自 navigator 對象的信息通常是誤導性的，不應該用於檢測瀏覽器版本，因爲：

• 不同瀏覽器能夠使用相同名稱
• 導航數據可被瀏覽器擁有者更改
• 某些瀏覽器會錯誤標識自身以繞過站點測試
• 瀏覽器無法報告發布晚於瀏覽器的新操作系統

• navigator.platform 屬性返回瀏覽器平臺（操作系統）

• navigator.language 屬性返回瀏覽器語言

• navigator.onLine 屬性 假如瀏覽器在線返回 true

• navigator.javaEnabled() 方法 如果 Java 已啓用返回 true

---

JS 彈出框

JavaScript 有三種類型的彈出框：警告框、確認框和提示框

• alert() 警告框

• confirm() 確認框，確認 true，取消 false

• prompt() 提示框，如果用戶單擊“確定”返回輸入值，如果用戶單擊“取消”返回 NULL

---

JS Timing 事件

JavaScript 可以在時間間隔內執行，這就是所謂的定時事件（ Timing Events）

• setTimeout() 方法

  setTimeout(function, milliseconds) 在等待指定的毫秒數後執行函數

  clearTimeout() 方法停止執行 setTimeout() 中規定的函數，在函數執行之前

  	myVar = setTimeout(function, milliseconds);
  	clearTimeout(myVar);
  

• setInterval() 方法

  setInterval(function, milliseconds) 在每個給定的時間間隔重複給定的函數

  clearInterval() 方法停止 setInterval() 方法中指定的函數的執行

  	myVar = setInterval(function, milliseconds);
  	clearInterval(myVar);
  

---

---

JS Cookies

Cookie 讓您在網頁中存儲用戶信息

---

創建 cookie

document.cookie 屬性創建、讀取、刪除 cookie

• 創建 cookie：document.cookie = "username=Bill Gates";

• 添加有效日期（UTC 時間），默認情況下，在瀏覽器關閉時會刪除 cookie：document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

• 通過 path 參數可以告訴瀏覽器 cookie 屬於什麼路徑，默認情況下，cookie 屬於當前頁：document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

---

讀取 cookie

• var x = document.cookie;

document.cookie 會在一條字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

---

改變 cookie
可以像創建 cookie 一樣改變它：document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
舊 cookie 被覆蓋。

---

刪除 cookie

刪除 cookie 時不必指定 cookie 值：

直接把 expires 參數設置爲過去的日期即可刪除：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

應該定義 cookie 路徑以確保刪除正確的 cookie
如果不指定路徑，一些瀏覽器不會刪除 cookie

---

Cookie 字符串

document.cookie 屬性看起來像一個正常的文本字符串，但它不是

即使向 document.cookie 寫一份完整的 cookie 字符串，當再次讀取時，只能看到它的名稱-值對

如果設置了新 cookie，則舊的 cookie 不會被覆蓋，新的 Cookie 會被添加到 document.cookie

如果讀取 document.cookie，得到的東西會像這樣：cookie1 = value; cookie2 = value;

如果想找到一個指定 cookie 的值，必須編寫 JS 函數來搜索 cookie 字符串中的 cookie 值

---

實例

/* 設置 cookie 的函數 */

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/* 獲取 cookie 的函數 */

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

/* 檢測 cookie 的函數 */

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}