BOM 全稱為 Browser Object Model 翻譯為瀏覽器物件模型，用於Javascript 與瀏覽器對話

1、Window 物件 ：表示瀏覽器視窗，全域性的變數是window 物件的屬性，全域性的方法是window物件的方法

//甚至（HTML DOM 的）document 物件也是 window 物件屬性：
window.document.getElementById("headerObge");
//等同於：
document.getElementById("headerObge");

常用屬性：.innerHeight 和innerWidth用於確定瀏覽器視窗的尺寸，（以畫素作為單位）

不過不同瀏覽器版本支援不同，故可使用

// 包含所有瀏覽器支援的，用以下語句確定瀏覽器視窗尺寸
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 

其他方法：

window.open() - 開啟新視窗

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

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

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

2、JavaScript 有三種類型的彈出框：警告框（alert）、確認框（confirm）和提示框(prompt)

　　window.alert()方法可以不帶window字首來寫,如果要確保資訊傳遞給使用者，通常會使用警告框,當警告框彈出時，使用者將需要單擊“確定”來繼續

　　window.confirm()方法可以不帶window字首來編寫,如果您希望使用者驗證或接受某個東西，則通常使用“確認”框,當確認框彈出時，使用者將不得不單擊“確定”或“取消”來繼續進行。

　　window.prompt()方法可以不帶window字首來編寫,

//拆行：如需在彈出框中顯示折行，請在反斜槓後面加一個字元 n。
alert("Hello\nHow are you?");

3、Timing Events 定時事件，可以在時間間隔內執行

通過 JavaScript 使用的有兩個關鍵的方法：setTimeout() 和 setInterval() ， 都屬於 HTML DOM Window 物件的方法

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

window.setTimeout(function, milliseconds);  //可以不帶 window 字首來編寫
//第一個引數是要執行的函式。
//第二個引數指示執行之前的毫秒數

clearTimeout()方法停止執行setTimeout()中規定的函式。

setInterval(function, milliseconds) ：等同於 setTimeout()，但持續重複執行該函式。(在每個給定的時間間隔重複給定的函式)

window.setInterval(function, milliseconds);  //可以不帶 window 字首來寫。
//第一個引數是要執行的函式。
//第二個引數每個執行之間的時間間隔的長度。

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

4、Cookie 在網頁中儲存使用者資訊

Cookie 是在您的計算機上儲存在小的文字檔案中的資料，當 web 伺服器向瀏覽器傳送網頁後，連線被關閉，伺服器會忘記使用者的一切。Cookie 是為了解決“如何記住使用者資訊”而發明的，如當用戶登陸網頁時，選擇記住賬號密碼，他的資訊可以儲存在cookie 中，下次在訪問時cookie 就會記住他之前登陸的賬號資訊

當瀏覽器從伺服器請求一個網頁時，將屬於該頁的 cookie 新增到該請求中。這樣伺服器就獲得了必要的資料來“記住”使用者的資訊，如果瀏覽器已關閉本地 cookie 支援，則以下例項均無法工作

JavaScript 可以用document.cookie屬性建立、讀取、刪除 cookie。

//建立
document.cookie = "username=obge";
//path 引數，告訴瀏覽器 cookie 屬於什麼路徑。預設情況下，cookie 屬於當前頁 ，expires 引數新增有效日期（UTC 時間）
document.cookie = "username=Bill Gates; expires=Fri, 27 Nov 2020 12:00:00 UTC; path=/";

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

//修改
建立 cookie 一樣改變它，舊的被覆蓋

//刪除
刪除 cookie 時不必指定 cookie 值：直接把 expires 引數設定為過去的日期即可

Cookie 字串

document.cookie屬性看起來像一個正常的文字字串。但它不是。即使你向寫一份完整的 cookie 字串，當再次讀取時，你只能看到它的名稱-值對。

//如果設定了新 cookie，則舊的 cookie 不會被覆蓋。新的 Cookie 會被新增到 document.cookie，所以如果你讀取 document.cookie，你得到的東西會像這樣：
cookie1 = value; cookie2 = value;

Cookie 函式

<script>
//設定 cookie 的函式
//引數是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 過期的天數（exdays）。
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    //通過把 cookie 名稱、cookie 值和過期字串相加，該函式就設定了 cookie。
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

//獲取 cookie 的函式
//把 cookie 作為引數（cname）。
function getCookie(cname) {
  //建立變數（name）與要搜尋的文字（CNAME”=”）。
    var name = cname + "=";
    //解碼 cookie 字串，處理帶有特殊字元的 cookie，例如 “$”。
    var decodedCookie = decodeURIComponent(document.cookie);
    //用分號把 document.cookie 拆分到名為 ca（decodedCookie.split(';')）的陣列中。
    var ca = decodedCookie.split(';');
    //遍歷 ca 陣列（i = 0; i < ca.length; i++），然後讀出每個值 c = ca[i]。
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         //如果找到 cookie（c.indexOf(name) == 0），則返回該 cookie 的值（c.substring(name.length, c.length）。
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
     //如果未找到 cookie，則返回 ""。
    return "";
} 


//檢測cookie 的函式
function checkCookie() {
    var username = getCookie("username");
    //如果已設定 cookie，將顯示一個問候。
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        //如果未設定 cookie，會顯示一個提示框，詢問使用者的名字，並存儲使用者名稱 cookie 365 天，通過呼叫 setCookie 函式：
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
} 

</script>

5、其他物件：

5.1、Screen (使用者螢幕資訊)

可以單獨使用，也可以通過window獲取

常用屬性：

screen.width屬性返回以畫素計的訪問者螢幕寬度

screen.height屬性返回以畫素計的訪問者螢幕的高度

screen.availWidth屬性返回訪問者螢幕的寬度，以畫素計，減去諸如視窗工具條之類的介面特徵

screen.availHeight屬性返回訪問者螢幕的高度，以畫素計，減去諸如視窗工具條之類的介面特徵

screen.colorDepth屬性返回用於顯示一種顏色的位元數。　

screen.pixelDepth屬性返回螢幕的畫素深度

注意：所有現代計算機都使用 24 位或 32 位硬體的色彩解析度，更老的計算機使用 14 位：65,536 種不同的 "High Colors" 解析度，異常古老的計算機，以及老式的手機使用 8 位：256 中不同的 "VGA colors"，對於現代計算機，顏色深度和畫素深度是相等的

//HTML 中使用的 #rrggbb (rgb) 值代表 "True Colors" （16,777,216 中不同的顏色）
24 bits =16,777,216 種不同的 "True Colors"
32 bits = 4,294,967,296 中不同的 "Deep Colors"

5.2、Location :獲取當前頁面地址（URL）並把瀏覽器重定向到新頁面。

window.location 物件可不帶 window 字首書寫

常用屬性：

　　window.location.href屬性返回當前頁面的 URL

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

　　location.pathname 返回當前頁面的路徑或檔名

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

　　location.port屬性返回（當前頁面的）網際網路主機埠的編號

常用方法：

　　location.assign(url) 載入新文件

5.3、History 瀏覽器歷史

window.history 物件可不帶 window 書寫，為了保護使用者的隱私，JavaScript 訪問此物件存在限制

常用方法：

　　history.back()方法載入歷史列表中前一個 URL，這等同於在瀏覽器中點選後退按鈕。

　　history forward()方法載入歷史列表中下一個 URL,這等同於在瀏覽器中點選前進按鈕

5.4、Navigator 有關訪問者資訊

window.navigator 物件可以不帶 window 字首來寫

常用屬性：

　　cookieEnabled屬性返回 true，則表示瀏覽器cookie 已啟用，否則返回 false

　　appName屬性返回瀏覽器的應用程式名稱，返回"Netscape" 表示 IE11、Chrome、Firefox 以及 Safari 的應用程式名稱的統稱

　　appCodeName屬性返回瀏覽器的應用程式程式碼名稱，返回"Mozilla" 是 Chrome、Firefox、IE、Safari 以及 Opera 的應用程式程式碼名稱

　　product 屬性返回瀏覽器的產品名稱，不要依賴它！大多數瀏覽器都將 “Gecko” 作為產品名稱返回！

　　appVersion 屬性返回有關瀏覽器的版本資訊

　　userAgent屬性返回由瀏覽器傳送到伺服器的使用者代理報頭（user-agent header）

　　platform屬性返回瀏覽器平臺（作業系統）

　　language屬性返回瀏覽器語言

　　onLine屬性返回 true，表示瀏覽器線上

　　javaEnabled()方法返回 true，表示 Java 已啟用

注意：來自 navigator 物件的資訊通常是誤導性的，不應該用於檢測瀏覽器版本，因為：不同瀏覽器能夠使用相同名稱，導航資料可被瀏覽器擁有者更改，某些瀏覽器會錯誤標識自身以繞過站點測試，瀏覽器無法報告發布晚於瀏覽器的新作業系統。