Javascript高级程序设计第八章知识点总结

理解Window对象——BOM的核心

8.1window对象

BOM（Browser Object Model）的核心对象是window，他表示浏览器中的一个实例。关于什么是BOM的博客文章

8.1.1 全局作用域

1. 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

   var age=9;
   function sayAge(){
   alert(this.age);
   }
   alert(window.age); // 9
   sayAge(); //9
   window.sayAge(); //9

2. 定义全局变量和在window对象上直接定义属性的差别：
   全局变量不能用delete操作符删除； var age=9;
   直接在window对象的定义的属性可以。window.color=”red”
3. 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个未声明的变量是否存在
   var newValue=oldValue; //抛出错误，oldValue未定义
   var newValue=window.oldValue; //不会抛出错误，因为这是一次属性查询

8.1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。
top指向最高层的框架，即window，最好使用top引用这些框架。至于parent，parent对象是中国指向当前框架的上层框架，在没有框架的情况下parent对象等于top.

8.1.3 窗口位置

window.screenTop //位于页面可见区域上方的浏览器工具栏的像素高度。
window.screenLeft //是位于页面可见区域左边的浏览器工具栏的像素高度。
window.moveTo(0,0) //将窗口移动到屏幕的左上角
window.moveBy(0,100) //将窗口向下移动100像素

8.1.4 窗口大小

确定窗口大小的四个属性（标准模式）：
innerWidth:指页面视图区的宽度（减去边框宽度）
innerHeight:指页面视图区的高度（减去边框宽度）
outerWidth:指页面视图容器的宽度
outerHeight:指页面视图容器的高度
（混杂模式）：
body.clientWidth
body.clientHeight

    <script type="text/javascript">

        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);
    </script>

以上代码中通过检查document.compatMode来确定页面是否处于标准模式。

document.compatMode用来判断当前浏览器的渲染方式，BackCompat：标准兼容模式关闭
CSS1Compat：标准兼容模式开启

最好检测用户是否使用移动设备，然后再决定使用哪个属性
调整浏览器窗口大小
window.resizeTo(100,100) //调整到100乘100；
window.resizeBy(100,50) //调整到200乘150；

8.1.5 导航和打开窗口

window.open()方法既可以导航到一个特定的URl，也可以打开一个新的浏览器窗口，这个方法可以接受4个参数：要加在的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加在页面的布尔值。方法中属性的设置选项，都快可以用逗号分隔明值对列表来指定。
创建的window对象有个opener出行，期中保存着打开它的原始窗口对象。（只在弹出窗口的最外层window对象有定义）
alert(wroxWin.openerr==window);

8.1.6 间歇调用和超时调用

超时调用：指定时间执行代码。第一个参数不建议用字符串，可导致性能损失。如果队列是的空的，那么添加的代码会立即执行。setTimeout(a,1000);

    <script type="text/javascript">

        var timeoutId = setTimeout(function() {
            alert("Hello world!");
        }, 1000);  //超时调用

        clearTimeout(timeoutId); //取消超时调用

    </script>

间歇调用:每隔一段时间执行。setInterval(a,100);

    var num = 0;
    var max = 10;
    var intervalId = null;

    function incrementNumber() {
        num++;

        //if the max has been reached, cancel all pending executions
        if (num == max) {
            clearInterval(intervalId);
            alert("Done");
        }
    }

    intervalId = setInterval(incrementNumber, 500);

一般使用超时调用模拟间歇调用是一种最佳模式。

        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);

8.1.7 系统对话框

调用系统对话框向用户显示消息
alert():包含指定文本和一个OK按钮
confirm()：显示一个带有确认和取消的按钮
prompt()：除了显示确认和取消外，，还会显示一个文本输入域