pink老師有點意思~

目標

能夠說出什麼是BOM
能夠知道瀏覽器的頂級對象 window
能夠寫出頁面加載時間以及注意事項
能夠寫出兩種定時器函數並說出區別
能夠說出 JS執行機制
能夠使用 location 對象完成頁面之間的跳轉
能夠知曉 navigator 對象涉及的屬性
能夠使用 history 提供的方法實現頁面刷新

1. BOM 概述

1.1 什麼是BOM

BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立於內容而與瀏覽器窗口進行交互的對象，其核心對象是 window

BOM由一系列相關的對象構成，並且每個對象都提供了很多方法和屬性，

BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA，DOM 的標準化是 W3C，BOM最初是Netscape 瀏覽器的標準的一部分

DOM	BOM
文檔對象模型	瀏覽器對象模型
DOM 就是把（文檔）當做一個（對象）來看待	把（瀏覽器）當做一個（對象）來看待
DOM 的頂級對象是 document	BOM 的頂級對象是 window
DOM主要學習的是操作頁面元素	BOM 學習的是瀏覽器窗口交互的一些對象
DOM是 W3C 標準規範	BOM 是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

1.2 BOM的構成

BOM 比DOM 更大，它包含 DOM

widow 對象是瀏覽器的頂級對象，它具有雙重角色

他是 JS 訪問瀏覽器的窗口的一個接口
他是一個全局對象，定義在作用域中的變量，函數都會變成 window 對象的屬性和方法。在調用的時候可以省略 window，前面學習的對話框都屬於 window對象方法，如alert(), prompt() 等。

注意：window下的一個特殊屬性 window.name

    <script>
        // window.document.querySelector()
        var num = 10;
        console.log(window.num);

        function fn() {
            console.log(11);

        }
        fn();
        window.fn();

        // alert(11);
        // window.alert(11);
        console.dir(window);

        console.log(window.name);
    </script>

2. window 對象的的常見事件

2.1 窗口（頁面）加載事件（兩種）

window.onload = function(){}

window.addEventListener(‘load’, function() {} )

window.onload 是窗口（頁面）加載事件，當文檔內容完全加載完成會觸發該事件（包括圖像，腳本文件，css文件等），就調用的處理函數

注意：

有了window.onload 就可以把 JS 代碼寫到頁面的上方，因爲 onload 是等頁面內容全部加載完畢，再去執行處理函數。
window.onload 傳統註冊事件方式只能寫一次，如果有多個，會以最後一個 window.onload 爲準。
如果使用 addEventListener 則沒有限制

注意：

DOMContentLoaded 事件觸發是，僅當DOM加載完成，不包括樣式表，圖片，flash等等。
ie9以上才支持
如果頁面的圖片很多的話，從用戶訪問到onload觸發可能需要較長的時間，交互效果就不能實現，必然影響用戶的體驗，此時用DOMContentLoaded 事件比較合適

document.addEventListener(‘DOMContentLoaded’,function() {})

<body>
    <script>
        // 注意：傳統的方式只能識別最後一個

        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('點擊我');
        //     })
        // }
        // window.onload = function() {
        //     alert('22');
        // }

        // 這種方式可以識別很多個
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('點擊我');
            })
        })

        window.addEventListener('load', function() {
            alert('22');
        })

        document.addEventListener('DOMContentLoaded', function() {
            alert('33');
            // load 等頁面內容全部加載完畢，包含頁面dom元素 圖片 flash css 等等
            // DOMContentLoaded 是 DOM 加載完畢，不包含圖片 flash css 等就可以執行 加載速度比 load 更快一點
        })
    </script>
    <button>點擊</button>
</body>

2.2 調整窗口大小事件

window.onresize = function(){ }

window.addEventListener(“resize”, function(){ });

window.onresize 是調整窗口大小加載事件，當觸發時就調用的處理函數

注意：

注意只要窗口發生像素變化，就會觸發這個事件。
我們經常利用這個事件完成響應式佈局。window.innerWidth 當前屏幕的寬度

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);
                console.log('變化了');

                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div style="width: 100px; height: 100px; background-color: pink;"></div>
</body>

3. 定時器

3.1 兩種定時器

window 對象給我們提供了2個非常好用的方法 - 定時器

3.1.1 setTimeout()

window.setTimeout(調用函數，[延遲的毫秒數])；

setTimeout()方法用於設置一個定時器，該定時器在定時器到期後執行調用函數。
注意：

window 可以省略。
這個調用函數可以直接寫函數，或者寫 函數名, 或採取字符串 ‘函數名()’ 三種形式，第三種不推薦
延遲的毫秒數省略默認是0，如果寫，必須是毫秒
因爲定時器可能有很多，所以我們經常給定時器賦值一個標識符

<body>
    <script>
        // 1. setTimeout
        // 語法規範： window.setTimeout(調用函數，延遲時間)；
        // 1. 這個window在調用的時候可以省略
        // 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認是0
        // 3. 這個時間調用可以直接寫函數 還可以寫函數名 還有一個寫法 '函數名()'
        // 4. 頁面中可能有很多的定時器，我們經常給定時器加個標識符 （起個名字）

        setTimeout(function() { /* 1 */
            console.log('時間到了');
        }, 2000);


        function callback() {
            console.log('爆雜');
        }
        var time1 = setTimeout(callback, 3000); /* 2 */
        var time2 = setTimeout(callback, 5000); /* 2 */

        setTimeout('callback()', 3000); /* 3 */ /* 不提倡 */
    </script>
</body>

拓展1：

setTimeout() 這個調用函數我們也稱爲回調函數 callback
普通函數是按照代碼順序直接調用
而這個函數，需要等待時間，時間到了採取調用這個函數，因此稱爲回調函數
簡單理解：回調，就是回頭調用的意思，上一件事幹完，再回頭調用這個函數。
例 element.onclick = function(){ } 或者 element.addEventListener(“click”, fn);裏面的函數也是回調函數

拓展2：

window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通過調用 setTimeout() 建立的定時器。
注意：

window 可以省略
裏面的參數就是定時器的標識符

<body>
    <button>點擊停止定時器</button>
    <script>
        var btn = document.querySelector('button');

        var timer = setTimeout(function() { /* 1 */
            console.log('時間到了');
        }, 2000);

        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

3.1.2 setInterval()

setInterval(回調函數，[間隔的毫秒數])；

setInterval() 方法重複調用一個函數，每間隔這個時間，就用一次回調函數。

注意：

window 可以省略。
這個調用函數可以直接寫函數，或者寫 函數名, 或採取字符串 ‘函數名()’ 三種形式，第三種不推薦
延遲的毫秒數省略默認是0，如果寫，必須是毫秒
因爲定時器可能有很多，所以我們經常給定時器賦值一個標識符

<body>
    <button>點擊停止定時器</button>
    <script>
        // 1. setInterval
        // 語法規範： window.setInterval(調用函數, 延遲時間);
        var btn = document.querySelector('button');

        var timer = setInterval(function() { /* 1 */
            console.log('時間到了');
        }, 1000);
        // 2. setTimeout 延遲時間到了，就去調用這個函數，只調用一次 就結束了這個定時器
        // 3. setInterval 每間隔這個延遲時間，就去調用這個回調函數，會調用很多次，重複調用這個函數
    </script>
</body>

案例：倒計時https://blog.csdn.net/weixin_45773503/article/details/106205120
清除 setInterval 定時器

<body>
    <button class="begin">開啓定時器</button>
    <button class="stop">停止定時器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 定義成全局變量   null是一個空對象  要賦值
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('hello');
            }, 1000)
        })
        stop.addEventListener('click', function() {
            clearInterval(timer)
        })
    </script>
</body>

2.1 發送短信案例https://blog.csdn.net/weixin_45773503/article/details/106210439

3.2 this指向問題

<body>
    <button>點擊</button>
    <script>
        // 1. this 指向問題 一般情況下 this 的最終指向全局變量window（注意定時器裏面的this指向window）
        console.log(this);
        window.fn();

        function fn() {
            console.log(this);
        }
        window.setTimeout(function() {
            console.log(this);
        }, 1000);

        // 2. 方法調用中誰調用this指向誰
        var o = {
            sayHi: function() {
                console.log(this);
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this 指向的是btn這個按鈕
        // }

        btn.addEventListener('click', function() {
                console.log(this);
            })
            // 3. 構造函數中this指向構造函數的實例

        function Fun() {
            console.log(this); // this 指向的是Fun 實例對象
        }

        var fun = new Fun();
        console.log(fun);
    </script>
</body>

4 JS 執行隊列問題

4.1 JS 是單線程

JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。這是因爲JavaScript這門腳本語言誕生的使命所致——JavaScript 是爲了處理頁面中用戶的交互，以及操作 DOM 而誕生的。比如，我們對某個 DOM 元素進行添加和刪除操作，不能同時進行，應該先進行添加，之後在刪除
單線程就意味着，所有的任務都要排隊，前一個任務結束，纔會執行後一個任務，這樣所導致的問題就是：如果 JS 執行的事件過長，這樣就會造成頁面渲染的不連貫，導致頁面加載阻塞的感覺

引出問題：

    <script>
        console.log(1);

        setTimeout(function() {
            console.log(3);
        }, 1000)

        console.log(2);
    </script>

4.2 同步和異步

爲了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出WEB Worker 標準，允許JavaScript腳本創建多個線程。於是，JS中出現了同步和異步

同步：
前一個任務結束後再去執行後一個任務，程序的執行順序與任務的排列順序是一致的，同步的，比如做飯的同步做法：先燒水煮飯，等水開了（10分鐘後），再去切菜，炒菜

異步：
你在做一件事情的時候，因爲這件事情會花費很長時間，在做這件事情的同事你還可以去處理其他的事情，比如做飯的異步做法：先燒水煮飯，同時切菜，炒菜

他們的本質區別：這條流水線上各個流程的執行順序不同

4.3 JS執行機制

5. location 對象

1.什麼是location對象

window對象給我們提供了一個 location 屬性用於 獲取或設置窗體的URL，並且可以用於解析URL。因爲這個屬性返回的是一個對象，所以我們將這個屬性也稱爲 location對象。

2. URL

3. location對象屬性

重點記住：href 和 search

栗子1 點擊跳轉頁面

<body>
    <button>點擊</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 1. 點擊按鈕跳轉
        btn.addEventListener('click', function() {
            location.href = 'http://baidu.com'; // 點擊按鈕跳轉
        })

        // 2. 實現5s後自動跳轉
        fn();
        setInterval(fn, 1000)
        var timer = 5;

        function fn() {
            if (timer == 0) {
                clearInterval(fn)
                location.href = 'http://baidu.com'; // 點擊按鈕跳轉
            } else {
                div.innerHTML = '您將在' + timer + '秒之後跳轉';
                timer--;
            }

        }
    </script>
</body>

栗子2 實現不同頁面之間的數據傳遞

第一個登陸頁面，裏面有提交表單，action 提交到 index.html頁面
第二個頁面可以使用第一個頁面的參數，這樣實現了一個數據不同頁面之間的傳遞效果
第二個頁面之所以可以使用第一個頁面的數據，是利用了URL裏面的location.search參數
在第二個頁面中，需要把這個參數提取
第一步去掉？利用 substr
第二步利用=好分割鍵和值 split（‘=’）

第一個頁面：

<body>
    <form action="index.html">
        用戶名：<input type="text" name='uname'>
        <input type="submit" value="登錄">
    </form>
</body>

第二個頁面：

<body>
    <script>
        console.log(location.search); // uname = andy
        // 1. 先去掉 ？   substr('起始的位置',截取幾個字符);  都是數字不是字符 第二個參數默認爲到末尾
        var params = location.search.substr(1);
        console.log(params);

        // 2. 利用 = 把字符串分割爲數組 split('=');
        var arr = params.split('=');
        // console.log(arr);
        document.write(arr[1] + '歡迎您！')
    </script>
</body>

4. location對象方法

location隊形方法	返回值
location.assign()	跟 href 一樣，可以跳轉頁面（也稱爲重定向頁面）
location.replace	替換當前頁面，因爲不記錄歷史，所以不能後退頁面
location.reload()	重新加載頁面，相當於刷新按鈕或者 f5 如果參數爲 true 強制刷新 ctrl+f5

<body>
    <button>點擊</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 記錄瀏覽歷史。可以後退
            // location.assign('http://www.baidu.com');

            // 不記錄瀏覽歷史，所以不能實現後退
            // location.replace('http://baidu.com');

            // 刷新
            location.reload(true);
        })
    </script>
</body>

6. navigator 對象

7. history 對象

1. 方法

2. 栗子：

index：

<body>
    <a href="list.html">點擊我去往list頁</a>
    <button>前進</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.forward();
            //history.go(1);/* 向後一個頁面 */
        })
    </script>
</body>

list：

<body>
    <a href="index.html">點擊我去往首頁</a>
    <button>後退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.back();
            //history.go(-1);
        })
    </script>
</body>

BOM （作爲學習筆記）

pink老師 有點意思~

目標

1. BOM 概述

1.1 什麼是BOM

1.2 BOM的構成

2. window 對象的的常見事件

2.1 窗口（頁面）加載事件（兩種）

2.2 調整窗口大小事件

3. 定時器

3.1 兩種定時器

3.1.1 setTimeout()

3.1.2 setInterval()

3.2 this指向問題

4 JS 執行隊列問題

4.1 JS 是單線程

4.2 同步和異步

4.3 JS執行機制

5. location 對象

1.什麼是location對象

2. URL

3. location對象屬性

栗子1 點擊跳轉頁面

栗子2 實現不同頁面之間的數據傳遞

4. location對象方法

6. navigator 對象

7. history 對象

1. 方法

2. 栗子：

pink老師有點意思~