Javascript學習指南（第2版）筆記(五) 瀏覽器對象、cookie

1、window對象
2、同源安全性原則
3、cookie

     瀏覽器物件模型（BOM）是一組從瀏覽器上下文繼承而來的對象，這也是絕大多數 JavaScript應用程式中函數啟動並執行上下文。有時它也被稱之為 DOM Level 0，或者就叫 DOM。

     BOM是一組有限的公用 Web對象，也是一個層次化的對象集，每個層次上的對象都可以通過它們的父物件來訪問，比如 window[navigator, location, frames, screen, history, document[forms, cookie, link/anchors, images, embeds/plug-ins, all]]。

     訪問對象時，你可以：
     var theImage = document.form[0].elements["someelement"].value;

1、window對象

     瀏覽器的 window對象封裝了整個瀏覽器環境，包括 window的"chrome"（組成瀏覽器表單的萬用群組件）、實際的 Web頁面，以及頁面中的事件。

     通過 window可以手動設定瀏覽器狀態條上的狀態，執行開啟一個新視窗、重新調整已顯示視窗的大小、關閉視窗等操作。不過隨著動態 Web效果和 Ajax的流行，這種彈出式視窗越來不被喜歡。

window對象的方法和屬性可以分成4類：

a. 建立新視窗，維護現有視窗行為

     彈出式對話方塊：alert、confirm和 prompt
     建立自訂視窗：window.open()
     維護視窗：通過視窗的引用能夠完成該視窗的維護，要維護父視窗則使用關鍵字 opener，要維護包含當前運行指令碼的視窗，則應該使用關鍵字 self。

b. 在視窗中建立帶分區的文檔（幀和iframes）

     frame對象定義了以下元素：parent、length和 name。對於跨幀通訊而言，name和 parent屬性特別重要。其父元素 frameset（幀集，包括幀的視窗）可以通過每個幀的名字訪問所有子幀（也可以通過幀數組，以對象數量作為索引值）；每個幀都可以通過通用的關鍵字 parent來訪問該幀集。兄弟幀元素之間可以通過 parent和對方的 name屬性來訪問。

     和標準的幀不一樣，iframe是內嵌在頁面中的。你可以為其指定高度和寬度，如果將它們都設定為0，那麼它就將被隱藏起來。iframe會把它嵌入到的頁面視為自己的父元素，這也是它和更高層頁面進行通訊的方法。通常，你可以使用 document的 getElementById方法來訪問它，也可以使用 target屬性載入其內容。

c. 定時器的建立和控制

     有兩類定時器：一類是一次性的，另一類是周期性使用的。兩種定時器都能取消，一次性定時器方法只會被調用一次。

要想建立一個不重複觸發的定時器，可以使用 setTimeout方法：
var tmOut = setTimeout("func", 5000, "param1", param2,,,,, paramn);

如果想清除這個定時器，可以使用 clearTimeout方法：
clearTimeout(tmOut);

如果你想周期性地使用這個定時器，那麼應調用 setInterval方法：
var tmOut = setInterval("functionName", 5000);

     同樣，如果想暫停或取消這個周期性定時器，可以使用 clearInterval方法。如果你想實現一個周期性定時器，但又想在參數中指定一個函數文字量，那麼你可以在每次定時器到期時再用 setTimeout函數重新設定這個定時器。

註：
     在 IE瀏覽器中，setInterval和 setTimeout方法是不支援在最後添加函數調用所需參數的。

d. 用來控制瀏覽器其他元素

history對象
     history對象負責維護瀏覽器中頁面載入操作的記錄。同樣，其方法和屬效能夠完成通過瀏覽器的後退和前進按鈕所能實現的導航操作。

screen對象
     screen對象所包含的資訊是螢幕顯示有相關的，包括其寬度、高度，以及顏色或像素濃淡。雖然他們不是很常用，但他們對於那些需要修改瀏覽器視窗大小、建立需要特定調色盤的帶色彩對象等功能而言是不錯的選擇。

navigator對象
     navigator對象中提供的是和瀏覽器或其他訪問該頁面的使用者代理程式相關的資訊。通過它可以檢查作業系統、瀏覽器或瀏覽器族、安全性原則、語言以及 cookie是否啟用。

document對象
1.連結和錨
     document對象的 links集合是由頁面中所有超連結組成的，它的存取方法和數組一樣。

2.映像
     和連結一樣，映像也有其對應的對象，也可以直接設定他們的屬性，如表示映像 URL的 src屬性。

3.innerHTML
     使用 innerHTML 屬性可以修改頁面中任何一個 HTML元素，它之所以仍然流行，是因為通過它修改頁面元素時無需構建整個頁面的內容，你只需建立一個 HTML格式的字串，然後通過 innerHTML就可以添加到 Web頁面中。不過，使用 innerHTML意味著無論向 Web頁面添加了什麼，他們都無法融合到頁面的 document樹上，因此如果你混合使用 innerHTML和新的 DOM方法將會帶來很大的破壞。

2、同源安全性原則

     同源安全性原則確保了不同網域名稱、協議或連接埠的頁面之間不能夠通過指令碼進行通訊。同源安全性原則將應用於不同頁面之間的通訊，包括父視窗中的表單和內嵌視窗之間的通訊，如幀及 iframe。

3、cookie

     cookie的意義就是一個帶有到期時間、網域名稱、路徑的小型的鍵/值對，之所以需要提供這些訊息，是為了確保正確的伺服器能夠讀取到正確的 cookie。這些資訊將作為 Web請求的一部分發送，因此在伺服器端和瀏覽器都能訪問這些資料。

設定、讀取、刪除 cookie

// if cookie enabled
window.onload = function() {
    if (navigator.cookieEnabled) {
        var sum = readCookie("sum");
        if (sum) {
            var iSum = parseInt(sum) + 1;
            alert("cookie count is " + iSum);
            
            if (iSum > 5) {
                eraseCookie("sum");                
            } else {
                setCookie("sum", iSum);
            }
        } else {
            alert("no cookie, setting now");
            setCookie("sum", 0);
        }
    }
}

// 將 cookie有效期間設定為 2016年
function setCookie(key, value) {
    var cookieDate = new Date(2016, 11, 10, 19, 30, 30);
    document.cookie = key + "=" + encodeURI(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}

// 在每個 cookie之前用分號隔開
function readCookie(key) {
    var cookie = document.cookie;
    var first = cookie.indexOf(key + "=");
    
    // 存在 cookie
    if (first >= 0) {
        var str = cookie.substring(first, cookie.length);
        var last = str.indexOf(";");
        
        // 如果是最後一個 cookie
        if (last < 0) last = str.length;
        
        // 擷取 cookie的值
        str = str.substring(0, last).split("=");
        return decodeURI(str[1]);
    } else {
        return null;
    }
}

// 將 cookie的有效期間設定成過去，以達到刪除 cookie的目的
function eraseCookie (key) {
    var cookieDate = new Date(2000, 11, 10, 19, 30, 30);
    document.cookie = key + "= ; expirse=" + cookieDate.toGMTString() + "; path/";
}