JavaScript之Bom對象

概念：Browser Object Model 瀏覽器對象模型
將瀏覽器的各個組成部分封裝成對象。

（一）、Window：窗口對象

1、Window：窗口對象方法

1.1 與彈出框有關的方法：

1.1.1 alert()方法：顯示帶有一段消息和一個確認按鈕的警告框

定義和用法
alert() 方法用於顯示帶有一段消息和一個確認按鈕的警告框。
語法
alert(message) 也可以寫成 window.alert(message)
message 要在 window 上彈出的對話框中顯示的純文本（而非 HTML 文本）

1.1.2 confirm()：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框

var flag = confirm("您確定要退出嗎？");
alert(flag);

如果用戶點擊確定按鈕，則方法返回true
如果用戶點擊取消按鈕，則方法返回false

1.1.3 prompt()：顯示可提示用戶輸入的對話框

var result =  prompt("請輸入用戶名：");
alert(result);
//返回值：獲取用戶輸入的值。

1.2 與打開關閉有關的方法：

1.2.1 open()：打開一個新的瀏覽器窗口。

open();//會自動打開一個窗口

通過點擊按鈕來打開一個窗口，返回一個新的window對象。

<html>
<head>
    <script type="text/javascript">
        function open_win() {
            window.open("http://www.w3school.com.cn")
        }
    </script>
</head>
<body>
    <input type=button value="打開窗口" onclick="open_win()">
</body>
</html>

1.2.2 close()：關閉瀏覽器窗口。

下面爲通過按鈕打開新的window對象，並且能夠通過關閉按鈕關閉新打開的window對象。

<input id="openBtn" type="button" value="打開窗口">
<input id="closeBtn" type="button" value="關閉窗口">
      
    <script>
        var openBtn =  document.getElementById("openBtn");
        var newWindow;
        //綁定單擊事件
        openBtn.onclick = function(){
            //打開新窗口
            newWindow = open("https://www.w3school.com.cn/jsref/met_win_open.asp");
        }
        var closeBtn =  document.getElementById("closeBtn");
        //綁定單擊事件
        closeBtn.onclick = function(){
            //打開新窗口
            newWindow.close();
        }
    </script>

屬性
特點：

Window對象不需要創建可以直接使用window對象。 window.方法名()；
window引用可以省略。方法名()；

1.3 與定時器有關的方法：

1.3.1 一次性定時器：setTimeout()和clearTimeout()

setTimeout()：在指定的毫秒數後調用函數或計算表達式。
返回值：唯一標識，用於取消定時器。

setTimeout(code,millisec)

//code	必需。要調用的函數後要執行的 JavaScript 代碼串。
//millisec	必需。在執行代碼前需等待的毫秒數。

下面顯示倒計時兩秒彈出窗口

setTimeout("fun()",2000);
function fun(){
	alert('boom~~');
}

clearTimeout()：取消由 setTimeout() 方法設置的 timeout。

var id = setTimeout("fun()",2000);
clearTimeout(id);//取消setTimeout()返回值爲id的timeout 
function fun(){
	alert('boom~~');
}

1.3.2 循環定時器：setInterval()和clearInterval()

setInterval() ：按照指定的週期（以毫秒計）來調用函數或計算表達式。
下面顯示每兩秒彈出一次

setInterval(fun,2000);
function fun(){
	alert('boom~~');
}

clearInterval()：取消由 setInterval() 設置的 timeout。

利用window對象實現輪播圖案例

分析：
1.在頁面上使用img標籤展示圖片
2.定義一個方法，修改圖片對象的src屬性
3.定義一個定時器，每隔3秒調用方法一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    
</head>

<body>
    <img id="img" src="banner_1.jpg" width="100%">
    <script>
        //修改圖片src屬性
        var number = 1;
        function fun (){
            number ++;
            //判斷number是否大於3
            if(number>3){
                number = 1;
            }
            //獲取img對象
            document.getElementById("img").src = "banner_"+ number +".jpg";
           
        }
        //定義定時器
        setInterval("fun()",3000);
    </script>
</body>
</html>

2、Window：窗口對象屬性

2.1 獲取其他BOM對象

2.1.1 history：對History對象的只讀引用。

//獲取當前頁面的歷史對象
var h1 = history;
alert(h1);

2.1.2 location：用於窗口或框架的 Location 對象。

2.1.3 Navigator：對 Navigator 對象的只讀引用。

2.1.4 Screen：對Screen對象的只讀引用。

2.2 獲取DOM對象

2.2.1 document：對 Document 對象的只讀引用

window.document.getElementById("");
//也可以省略前面的window
document.getElementById("");

（二）、Location：地址欄對象

2.1 Location 對象方法

2.1.1 reload()：重新加載當前文檔。【刷新】

<body>
    <input type="button" id="btn" value="刷新">
    <script>
        //reload方法,定義一個按鈕，點擊按鈕，刷新當前頁面
        //1.獲取按鈕
        var btn = document.getElementById("btn");
        //2.綁定單擊事件
        btn.onclick = function (){
            //3.刷新頁面
            location.reload();
        }
    </script>
</body>

2.2 Location 對象屬性

2.2.1 href：設置或返回完整的 URL。

獲取當前頁面的href

//獲取href
var href = location.href;
alert(href);

點擊按鈕，去訪問www.itcast.cn官網

var goItcast = document.getElementById("goItcast");
//2.綁定單擊事件
goItcast.onclick = function (){
    //3.訪問www.itcast.cn官網
    location.href = "https://www.itcast.cn";
}

2.3 案例：倒計時頁面自動跳轉

分析：

顯示頁面效果。
倒計時讀秒效果實現
2.1定義一個方法,獲取span標籤,修改span標籤體內容
2.2定義一個定時器，一秒執行該方法
在方法中判斷時間如果<=0 , 則跳轉到首頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自動跳轉</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head> 
<body>
  
    <p>
        <span id="time">5</span>秒之後,自動跳轉到首頁...
    </p>
    <script>
        var second = 5;
        var time = document.getElementById("time");

        //定義一個方法,獲取span標籤,修改span標籤體內容
        function showTime(){
            second--;
            //判斷時間如果<=0 , 則跳轉到首頁
            if(second<=0){
                //跳轉到首頁
                location.href = "https://www.baidu.com";
            }          
            time.innerHTML = second+"";
        }
        //設置定時器,1秒執行該方法
        setInterval(showTime,1000);
    </script>
</body>
</html>

（三）、History：地址欄對象

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問

3.1 History 對象屬性

3.1.1 length：返回當前窗口歷史列表中的 URL 數量。

<body>
    <input type="button" id="btn" value="獲取歷史記錄個數">
    <script>
        //1.獲取按鈕
        var btn = document.getElementById("btn");
        //2.綁定單擊事件
        btn.onclick = function(){
            //3.獲取當前窗口歷史記錄的個數
            var length = history.length;
            alert(length);
        }
    </script>
</body>

3.2 History 對象方法

back()、forward()、go()加載 history 列表中的某個頁面。

back()：加載 history 列表中的前一個 URL。
forward()：加載 history 列表中的下一個 URL。
go()：加載 history 列表中的某個具體頁面。正數：前進幾個歷史記錄；負數：後退幾個歷史記錄。

下面的例子可以在頁面上創建一個前進按鈕：

<html>
<head>
    <script type="text/javascript">
        function goForward() {
            window.history.forward()
        }
    </script>
</head>
<body>
    <input type="button" value="Forward" onclick="goForward()" />
</body>
</html>