JavaScript 之 BOM

时间 2019-12-05

原文原文链接

BOM

描述

BOM表示为浏览器对象模型
BOM是由一系列对象构成的，这些对象能够理解为是浏览器提供的

Window对象

表示当前运行HTML页面的浏览器
Window对象既是JavaScript访问浏览器的窗口，也是ECMAScript规范中的全局对象(Global对象)

<body>
<script>
    // 测试window对象
    console.log(window);

    var v = 100;/* 全局变量 */
    function fn(){/* 函数 */
        console.log('this is funciton');
    }
    // 做为全局变量或函数使用的话
    console.log(v);
    fn();

    // 全局变量是window对象的属性；函数是window对象的方法
    console.log(window.v);
    window.fn();

    // 预约义函数是Global对象的方法 - 在浏览器环境中，window对象表明Global对象
    parseInt();
    // window对象的属性或方法调用 - 容许省略"window."
    window.parseInt();

</script>
</body>

window对象的属性

<script>
    // BOM中其余对象是做为window对象的属性存在
    console.log(window.navigator);
    console.log(window.location);
    console.log(window.history);
    console.log(window.document);
    // window对象的self属性 - 表示window对象自己(是只读属性)
    console.log(window);
    console.log(window.self);// 仍是window对象
    // window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
    console.log(window.innerWidth, window.innerHeight);

</script>

window对象的方法

<body>
<!-- 点击按钮时，打开提示框 -->
<button id="btn">按钮</button>
<div id="dialog"></div>

<script>
    // 提示框
    // window.alert('xxxxxx');
    // 肯定框
    // var flag = window.confirm('你肯定退出吗？');
    // alert(flag);
    // 输入框
    /*var result = window.prompt('请输入你的用户名:');
    alert(result);*/

    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var dialog = document.getElementById('dialog');
        dialog.style.display = 'block';
    });
</script>
</body>

navigator对象

navigator对象就是判断用户的浏览器以及操做系统
经过navigator对象的userAgent属性来判断

<body>
<script>
    console.log('浏览器的代码名: ' + navigator.appCodeName);
    console.log('浏览器的名称: ' + navigator.appName);
    console.log('浏览器的平台和版本信息: ' + navigator.appVersion);
    console.log('运行浏览器的操做系统平台: ' + navigator.platform);

    console.log(navigator.userAgent);
</script>
</body>

定时器

能够分为延迟执行和周期执行

延迟执行

表示将指定的代码延迟特定的时间后在进行执行

setTimeout()方法

表示设置一个定时器浏览器
- 用于在指定时间后显示指定内容
该方法接收两个参数app
- 第一个参数 - 一个函数(表示延迟执行代码的逻辑)
- 第二个参数 - 表示延迟执行的时间(单位为毫秒 - 1000毫秒=1秒)
该方法具备返回值 - 表示当前定时器的标识
注意 - 定时器会打乱代码的默认执行流程

clearTimeout()方法

表示清除指定的定时器
该方法经过定时器的标识来清除指定的定时器

示例代码

<script>
    /* 测试代码 */
    console.log( '这是测试...' );
    /* 添加延迟执行的定时器 - 该方法是Window对象下的方法，因此能够省略 [Window.] */
    var s = setTimeout( function () {
        console.log( '这也是测试...' );
    }, 2000 );

    /* 清除指定的定时器 */
    clearTimeout( s );

    /* 测试代码 */
    console.log( '这仍是测试...' );
</script>

周期执行

表示将指定的代码每隔一段时间(定时器设置的时间)执行一次
周期执行会造成相似于循环语句中死循环的显示效果

setInterval()方法

表示设置一个定时器函数
- 用于在指定时间后显示指定内容
该方法接收两个参数测试
- 第一个参数 - 一个函数(表示延迟执行代码的逻辑)
- 第二个参数 - 表示延迟执行的时间(单位为毫秒 - 1000毫秒=1秒)
该方法具备返回值 - 表示当前定时器的标识
注意 - 定时器会打乱代码的默认执行流程

clearTimeout()方法

表示清除指定的定时器
该方法经过定时器的标识来清除指定的定时器

示例代码

<script>
    /* 测试代码 */
    console.log( '这是测试...' );

    /* 添加周期执行的定时器 - 该方法是Window对象下的方法，因此能够省略 [Window.] */
    var s = setInterval( function () {
        console.log( '这也是测试...' );
    }, 2000 );

    /* 清除指定的定时器 */
    clearTimeout( s );

    /* 测试代码 */
    console.log( '这仍是测试...' );
</script>