[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()方法可以在历史记录间任意跳转。用得也不多，就不讲了。