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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。