[Javascript 進階程式設計]學習心得記錄11 js的BOM

    BOM（浏覽器對象模型）是web中js的核心，而BOM的核心對象就是window對象。在浏覽器中，window對象有雙重角色，它既是通過js通路浏覽器的一個接口，又是規定的Global對象。此外，還有location等對象，因為整體比較簡單，下面說一些值得注意的東西，普通的我就直接粘代碼略過了。

一，window對象

1.全局作用域

    前面說對象的時候寫過Global對象了，在全局作用域中聲明的變量和函數都會變成window對象的屬性和方法。不過，有兩件值得注意的事情：首先，全局變量不能通過delete操作符删除，而直接在window對象上的定義的屬性可以。

var age = 29;
        window.color = "red";
        
        //throws an error in IE < 9, returns false in all other browsers
        delete window.age;

        //throws an error in IE < 9, returns true in all other browsers
        delete window.color;    //returns true
        
        alert(window.age);      //29
        alert(window.color);    //undefined           

    另外，嘗試通路未聲明的變量會抛出錯誤，但是通過查詢window對象，可以知道某個可能未聲明的變量是否存在。

2.視窗位置和視窗大小

擷取視窗位置相容，移動是moveTo,moveBy

var leftPos = (typeof window.screenLeft == "number") ? 
                          window.screenLeft : window.screenX;
        var topPos = (typeof window.screenTop == "number") ? 
                          window.screenTop : window.screenY;

        alert("Left: " + leftPos);
        alert("Top: " + topPos);           

擷取頁面視口的大小

var pageWidth = window.innerWidth,
            pageHeight = window.innerHeight;
            
        if (typeof pageWidth != "number"){
            if (document.compatMode == "CSS1Compat"){
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }

        alert("Width: " + pageWidth);
        alert("Height: " + pageHeight);           

3.導航和打開視窗

window.open()方法，既可以導航到一個特定的URL，也可以打開一個新的浏覽器視窗。這個方法接收4個參數：要加載的URL、視窗目标、一個特性字元和一個表示新頁面是否取代浏覽器曆史記錄中目前加載頁面的布爾值。這個方法我用得不多，沒有細看，貼個教程http://blog.csdn.net/vastskyjoe/article/details/4122104。

4.逾時調用和間歇調用

    逾時調用：在指定的時間過後執行代碼；間歇調用：每隔指定的時間就執行一次代碼。

    逾時調用使用的是window對象的setTimeout()方法，接收兩個參數：要執行的代碼和以毫秒表示的時間。其中，第一個參數可以是包含js代碼的字元串（和eval()函數參數一樣），也可以是一個函數。會傳回逾時調用ID，可以傳入clearTimeout()方法，取消逾時任務。

//set the timeout
        var timeoutId = setTimeout(function() {
            alert("Hello world!");
        }, 1000);
        
        //nevermind ?cancel it
        clearTimeout(timeoutId);           

    間歇調用用法類似，setInterval()方法

var num = 0;
        var max = 100;
        
        function incrementNumber() {
            num++;
        
            //if the max has not been reached, set another timeout
            if (num < max) {
                setTimeout(incrementNumber, 500);
            } else {
                alert("Done");
            }
        }
        
        setTimeout(incrementNumber, 500);           

二，location對象

    window.location和document.location引用的是同一個對象，可以通過下面的對象屬性對URL進行查詢和操作

屬性	描述
hash	設定或傳回從井号 (#) 開始的 URL（錨）。
host	設定或傳回主機名和目前 URL 的端口号。
hostname	設定或傳回目前 URL 的主機名。
href	設定或傳回完整的 URL。
pathname	設定或傳回目前 URL 的路徑部分。
port	設定或傳回目前 URL 的端口号。
protocol	設定或傳回目前 URL 的協定。
search	設定或傳回從問号 (?) 開始的 URL（查詢部分）。

function getQueryStringArgs(){
        
            //get query string without the initial ?
            var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
            
                //object to hold data
                args = {},
            
                //get individual items
                items = qs.length ? qs.split("&") : [],
                item = null,
                name = null,
                value = null,
                
                //used in for loop
                i = 0,
                len = items.length;
            
            //assign each item onto the args object
            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;
        }

        //assume query string of ?q=javascript&num=10
        
        var args = getQueryStringArgs();
        
        alert(args["q"]);     //"javascript"
        alert(args["num"]);   //"10"           

三、history對象

    history對象儲存着使用者上網的曆史記錄，從視窗被打開的那一刻算起。使用go()方法可以在曆史記錄間任意跳轉。用得也不多，就不講了。