JS學習筆記（第8章）（BOM）

一、window對象

BOM的核心對象是window，它表示瀏覽器的一個實例。window既是經過Javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。

1.1 全局做用域

全部在全局做用域中聲明的變量、函數都會變成window對象的屬性和方法；

(1) 定義全局變量與在window對象上直接定義屬性的區別在於：全局變量不能經過delect操做符刪除，而直接在window對象上定義的屬性能夠。

var age = 29;
window.color = "red";
delect window.age;     //報錯
delect window.color;   //true

• 緣由在於使用var語句添加的window屬性有一個名爲[[Configurable]]的特性，這個特性的值被設置爲false,所以這樣定義的屬性不能夠經過delectable操做符刪除。

(2) 嘗試訪問未聲明的變量會拋出錯誤，可是經過查詢window對象，能夠知道某個可能未聲明的變量是否存在。

var newValue = olaValue;             //這裏會報錯，由於oldValue未定義
var newValue = window.oldValue;      //這裏不會報錯，由於這是一次屬性查詢

1.2 窗口關係及框架

若是頁面中包含框架，則每一個框架都擁有本身的window對象，而且保存在frames集合中。在frames集合中，能夠經過數值索引（從0開始，從左至右，從上到下）或者框架名稱來訪問相應的window對象。每一個window對象都有一個name屬性，其中包含框架的名稱。

• top對象始終指向最高（最外）層的框架，也就是瀏覽器窗口；
• parent（父）對象始終指向當前框架的直接上層框架；
  [在某些狀況下，parent有可能等於top；但在沒有框架的狀況下，parent必定等於top（此時它們都等於window）]
• self對象始終指向window；
• 全部這些對象都是window對象的屬性，能夠經過window.parent、window.top等形式來訪問；

1.3 窗口位置

• screenLeft屬性、screenTop屬性：分別用於表示窗口相對於屏幕左邊和上邊的位置；（IE、Safiari、Opera、Chrome）
• screenX屬性、screenY屬性：分別用於表示窗口相對於屏幕左邊和上邊的位置；（Firefox、Safari、Chrome）
• moveTo()方法、moveBy()方法：將窗口精確地移動到一個新位置，moveTo()接收的是新位置的x和y座標值，moveBy()接收的是在水平和垂直方向上移動的像素數。

window.moveBy(0,100);        //將窗口向下移動100像素
    window.moveTo(200,300);      //將窗口移動到（200，300）

1.4 窗口大小

（1）四個屬性：innerWidth、innerHeight、outerWidth、outerHeight

• 在IE9+、Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口自己的尺寸（不管是從最外層的window對象仍是從某個框架訪問）；
• 在Opera中，outerWidth和outerHeight表示頁面視圖容器（單個標籤頁對應的瀏覽器窗口）的大小；innerWidth和innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度）；
• 在Chrome中，outerWidth、outerHeight和innerWidth、innerHeight返回相同的值，即視口大小而非瀏覽器窗口大小

（2）取得視口大小

• 在IE、Safari、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth document.documentElement.clientHeight中保存了頁面視口的信息；
• 在IE6中，這些屬性必須在標準模式下有效；若是是混雜模式，則需經過document.body.clientWidth和document.body.clientHeight取得相同信息；
• 在混雜模式的Chrome中，都可使用。例：沒法肯定瀏覽器窗口自己大小，但卻可取得頁面視口的大小

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !="number"){
    if(document.compatMode=="CSS1Compat"){  //經過檢查document.compatMode來肯定頁面是否處於標準模式
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight
    }
    else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

（3）調整瀏覽器窗口大小

• resizeTo():接收兩個參數，接收瀏覽器窗口的新寬度和新高度
• resizeBy():接收兩個參數，接收新窗口與原窗口的寬度和高度之差

window.resiazeTo(100,100);    //調整到100*100
   window.resizeBy(100,50);      //調整到100*150

1.5 導航和打開窗口

window.open() 這個方法一般能夠接收四個參數：要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。

• 一般只需傳遞第一個參數，最後一個參數只在不打開窗新窗口的狀況下使用；
• 若是傳遞了第二個參數，並且該參數是已有窗口或框架的名稱，那麼就會在具備該名稱的窗口或框架中加載第一個參數指定的URL；第二個參數也能夠是任何一個特殊的窗口名稱，如_self、_parent、_top、_blank;
• 若是給window.open()傳遞的第二個參數並非一個已經存在的窗口或框架，那麼該方法就會根據在第三個參數位置上傳入的字符串建立一個新窗口或新標籤頁。

調用close()方法還能夠關閉新打開的窗口，這個方法僅適用於經過window.open()打開的彈出窗口；
新建立的window對象有一個opener屬性，其中保存着打開它的原始窗口對象。這個屬性只在彈出窗口中的最外層window對象（top）中有定義。將新建立的變遷也的opener屬性設置爲null，即表示在單獨的進程中運行新標籤頁。

1.6 間歇調用和超時調用

超時調用：表示在指定時間後執行代碼 setTimeout(要執行的代碼，以毫秒錶示的時間)、clearTimeout(超時調用ID)
注意:通過必定時間後改代碼也不必定執行，由於JS是一個單線程解釋器，任務會按照隊列執行，通過該時間將任務添加到隊列中。若是隊列爲空，添加的代碼就會當即執行，不然就要等前面的代碼執行完了之後再執行
間歇調用：表示每隔指定的時間就執行一次代碼 setINterval(要執行的代碼，以毫秒錶示的時間)、clearInterval(間歇調用ID)

//設置超時調用
var  timeoutId = setTimeout(function() {
    alert("Hello World");
},1000);
//取消
clearTimeout(timeoutId);


//設置間歇調用
var  timeintervalId = setTimeout(function() {
    alert("Hello World");
},1000);
//取消
clearTimeout(timeintervalId);

在開發環境下，不多使用真正的間隙調用，緣由是後一個間歇調用可能會在前一個間歇調用結束以前啓動。所以通常認爲使用超時調用來模擬間歇調用是一種最佳模式。以下，是採用超時調用模擬一個間歇調用。

//間歇調用
var num = 0;
var max = 10;
var intervalId = null; 
function incrementNumber() {
    num++;       
    //若是執行次數達到了max設定的值，則取消後續還沒有執行的調用
    if(num == max) {
        clearInterval(intervalId);
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber, 500);


//超時調用模擬間歇調用
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
    num++;
    //若是執行次數達到了max設定的值，則取消後續還沒有執行的調用
    if(num < max) {
       setTimeout(incrementNumber, 500);
    }else{
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

1.7 系統對話框

alert();
confirm();
prompt(要顯示給用戶的提示，文本輸入域的默認值)；
//顯示「打印」對話框
window.print();
//顯示「查找」對話框
window.find();

二、location對象

2.1 查詢字符串參數

function getQueryStringArgs() {
    //取得查詢字符串並去掉開頭的問號
    var qs = (location.search.length>0 ? location.search.substring(1) : ""),
    //保存數據的對象
    args = {},
    //取得每一項
    items = qs.length ? qs.split("&") : [],
    item = null,
        name = null,
        value = null,
        //在for循環中使用
        i = 0,
        len = items.length;
    //逐個將每一項添加到agrs對象中去
    for(i=0; i<len; i++) {
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if(name.length) {
            args[name] = value;
        }
    }
    return args;
}

2.2 位置操做

P208

replace(要導航到的URL)，在調用replace()方法以後，用戶不能會發哦前一個界面；
reload()做用是從新加載當前顯示的界面。
location.reload(); //從新加載（有可能從緩存中加載）
location.reload(true); //從新加載（從服務器從新加載）

三、navigator對象

Navigator 對象包含有關瀏覽器的信息。一般用於檢測顯示網頁的瀏覽器類型。

四、screen對象

Screen 對象包含有關客戶端顯示屏幕的信息。

五、history對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。
length屬性，go()、back()、forward()方法