保安日記：JavaScript學習第十一篇之BOM

卓曉暉發表於2020-10-20
JavaScript

BOM

什麼是 BOM
BOM ( Browser Object Model）)即瀏覽器物件模型，它提供了獨立於內容而與瀏覽器視窗進行互動的物件，其核心物件是window。
BOM由一系列相關的物件構成，並且每個物件都提供了很多方法與屬性。
BOM缺乏標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape瀏覽器標準的一部分。
在這裡插入圖片描述
在這裡插入圖片描述

BOM的構成

BOM比DOM更大在這裡插入圖片描述
window物件是瀏覽器的頂級物件，它具有雙重角色。

  1. 它是JS訪問瀏覽器視窗的一個介面。
  2. 它是一個全域性物件。定義在全域性作用域中的變數、函式都會變成window物件的屬性和方法。
    在呼叫的時候可以省略window，前面學習的對話方塊都屬於window物件方法，如alert()、prompt)等。
    注意:window下的一個特殊屬性window.name

window 物件的常見事件

視窗載入事件

window .onload = function() {}
//或者
window .addEventListener( "load" ,function () { });

window.onload是視窗(頁面）載入事件,當文件內容完全載入完成會觸發該事件(包括影像、指令碼檔案、CSS檔案等),就呼叫的處理函式。
注意∶

  1. 有了window.onload就可以把JS程式碼寫到頁面元素的上方，因為onload是等頁面內容全部載入完畢，再去執行處理函式。
  2. window.onload傳統註冊事件方式只能寫一次，如果有多個，會以最後一個window.onload為準。 只要使用addEventListener 則沒有限制
document.addEventListener ( 'DOMContentLoaded' ,function() {})

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

調整視窗大小事件
window.onresize是調整視窗大小載入事件，當觸發時就呼叫的處理函式。

window . onresize = function(){}
window .addEventListener ("resize" , function () {});

注意∶
1.只要視窗大小發生畫素變化，就會觸發這個事件。
2.我們經常利用這個事件完成響應式佈局。window.innerWidth當前螢幕的寬度

定時器 - setTimeout()

<body>
    <script>
        // 1. setTimeout 
        // 語法規範：  window.setTimeout(呼叫函式, 延時時間);
        function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我們不提倡這個寫法
    </script>
</body>

注意：
1.window可以省略
2.這個呼叫函式可以直接寫函式，或者寫函式名或者採取字串‘函式名('三種形式。第三種不推薦
3.延遲的毫秒數省略預設是0，如果寫，必須是毫秒。
4.因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號。
5.setTimeout()這個呼叫函式我們也稱為回撥函式callback.普通函式是按照程式碼順序直接呼叫。
而這個函式，需要等待時間，時間到了才去呼叫這個函式，因此稱為回撥函式。

定時器 - setInterval()
跟setTimeout 功能、注意點都一樣


<body>
    <script>
        // 1. setInterval 
        // 語法規範：  window.setInterval(呼叫函式, 延時時間);
        setInterval(function() {
            console.log('繼續輸出');
        }, 1000);
        
    </script>
</body>


區別：
1. setTimeout  延時時間到了，就去呼叫這個回撥函式，只呼叫一次 就結束了這個定時器
2. setInterval  每隔這個延時時間，就去呼叫這個回撥函式，會呼叫很多次，重複呼叫這個函式

清除定時器 - window.clearTimeout(timeoutID)

<body>
    <button>點選停止定時器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

注意：
 1.window可以省略
 2.clearTimeout()方法取消了先前通過呼叫setTimeout(）建立的定時器。裡面的引數就是識別符號

停止 setInterval()定時器
setInterval()方法取消了先前通過呼叫setInterval(）建立的定時器。裡面的引數就是識別符號，同樣window可以省略

案例
點選傳送簡訊，60秒內禁用button按鈕

 <body>
    手機號碼： <input type="number" /> <button>傳送</button>
    <script>
      // 按鈕點選之後，會禁用 disabled 為 true
      // 同時按鈕裡面的內容會變化， 注意 button 裡面的內容通過 innerHTML修改
      // 裡面秒數是有變化的，因此需要用到定時器
      // 定義一個變數，在定時器裡面，不斷遞減
      // 如果變數為0 說明到了時間，我們需要停止定時器，並且復原按鈕初始狀態
      var btn = document.querySelector("button");
      var time = 60; // 定義剩下的秒數
      btn.addEventListener("click", function () {
        btn.disabled = true;
        var timer = setInterval(function () {
          if (time == 0) {
            // 清除定時器和復原按鈕
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = "傳送";
            time = 60;
          } else {
            btn.innerHTML = "還剩下" + time + "秒";
            time--;
          }
        }, 1000);
      });
    </script>
  </body>

JS執行機制：

js屬於單執行緒語言，h5後允許js指令碼建立多個執行緒，引入同步和非同步
同步任務
同步任務都在主執行緒上按順序執行，形成一個執行棧。
非同步任務
JS的非同步是通過回撥函式實現的。
一般而言，非同步任務有以下三種型別:
1、普通事件，如click、resize等
2、資源載入，如load、error等
3、定時器，包括setlnterval、setTimeout等
非同步任務相關回撥函式新增到任務佇列中(任務佇列也稱為訊息佇列）。
執行機制

  1. 先執行執行棧中的同步任務。
  2. 非同步任務（回撥函式）放入任務佇列中。
  3. 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的非同步任務，於是被讀取的非同步任務結束等待狀態，進入執行棧，開始執行。
    在這裡插入圖片描述

在這裡插入圖片描述

location 物件

URL
統一資源定位符(Uniform Resource Locator,URL)是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它。
URL的一般語法格式為∶
protocol://host[:port] /path/ [ ?query]#fragment
http:/ / www.itcast.cn/index.html?name=andy&age=18#link

在這裡插入圖片描述
location 物件的屬性
在這裡插入圖片描述
案例自動跳轉

<body>
    <button>點選</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您將在' + timer + '秒鐘之後跳轉到首頁';
                timer--;
            }
        }, 1000);
    </script>
</body>

location 物件方法
在這裡插入圖片描述

<body>
    <button>點選</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 記錄瀏覽歷史，所以可以實現後退功能
            location.assign('http://www.itcast.cn');
            // 不記錄瀏覽歷史，所以不可以實現後退功能
            location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>
</body>

navigator 物件

navigator物件包含有關瀏覽器的資訊，它有很多屬性，我們最常用的是userAgent，該屬性可以返回由客戶機傳送伺服器的user-agent頭部的值。
下面程式碼可以判斷使用者那個終端開啟頁面，實現跳轉

if((navigator.userAgent.match(/(phonelpad|pod]iPhone|iPod|ios|iPad|Android|
MobilelBlackBerry|IEMobilelMQQBrowser|JUC| rennec|wOSBrowser|BrowserNG| Webos
lsymbian|Windows Phone)/i))) {

window . location.href = "";//手機
}else {
window . location.href = "";//電腦
}

history 物件

window物件給我們提供了一個history 物件，與瀏覽器歷史記錄進行互動。該物件包含使用者(在瀏覽器視窗中)訪問過的URL。

在這裡插入圖片描述

<body>
    <a href="list.html">點選我去往列表頁</a>
    <button>前進</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>

相關文章