BOM對象（瀏覽器對象模型）

BOM簡單來說就是提供獨立于瀏覽器內(nèi)容和瀏覽器窗口進行的交互對象，也就是說BOM負責(zé)和瀏覽器打交道。
通過BOM我們可以知道與瀏覽器窗口交互的一些對象，可以移動，調(diào)整瀏覽器大小的window對象（核心對象），可以用于導(dǎo)航的location對象與history對象，可以獲取瀏覽器，操作系統(tǒng)與用戶屏幕信息的navigator與screen對象，可以使用document作為訪問HTML文檔的入口，管理框架的frames對象等。

window對象

獲取瀏覽器窗口坐標：screenX、screenY,這里存在兼容問題，在老版的火狐里，只能通過screenX、screenY來獲取坐標，其他瀏覽器還可以通過screenLeft、screenTop獲取坐標)

//html:
  <button id="getLocation" type="button" name="button">獲取窗口位置</button>
//JS:
var getLocation = document.getElementById('getLocation');
        getLocation.onclick = function () {
            console.log(window.screenX);
            console.log(window.screenY);
        }

獲取瀏覽器窗口的寬高：innerWidth、innerHeight(寬高并不是完整的瀏覽器窗口，而是用來渲染html頁面的區(qū)域尺寸)

//html:
 <button id='getSize' type="button" name="button">獲取瀏覽器的寬高</button>
//JS:
var getSize = document.getElementById('getSize');
        getSize.onclick = function () {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        }

通過js打開頁面的方法：window.open();
第一個參數(shù)：設(shè)置打開的url鏈接（必填項）
第二個參數(shù)：設(shè)置在那個窗口、選項卡下打開新鏈接（可選）
第三個參數(shù)：設(shè)置打開的新窗口的坐標、尺寸、提供的功能等信息（可選）

//html:
<button id='open' type="button" name="button">打開百度</button>
//JS:
var openTag = document.getElementById('open');
        openTag.onclick = function () {
            window.open('http://www.baidu.com', '', 'width=600,height=300,left=100,top=100,resizable=no');
        }

警告框：給用戶以彈窗的形式提示警告信息，用戶關(guān)閉窗口后，我們獲取不到任何用戶操作產(chǎn)生的數(shù)據(jù)

//js:
alert('hello')

判斷框：給用戶以彈窗的形式提示警告信息后，用戶可以同意或不同意該信息，我們能獲取到用戶操作產(chǎn)生的數(shù)據(jù)：確認：true;取消：false

//JS:
var bol = confirm('是否同意以上需求？')
console.log(bol);

信息收集框：以彈框的形式，讓用戶輸入一段簡單的文本，我們可以獲取到這段輸入的文本信息。如果用戶點擊確定按鈕，則返回用戶輸入的數(shù)據(jù)，如果用戶沒有輸入直接點擊確定，則獲取到的是空字符串,如果用戶點擊取消（關(guān)閉）按鈕，則返回null,函數(shù)需要兩個參數(shù)，第一個表示要輸入文本的提示信息，第二個表示默認情況下的文本.

var str = prompt('請輸入姓名','小淡同學(xué)');
console.log(str);

定時器
定時器：讓某段代碼按照定時器設(shè)定的時間執(zhí)行
分類：循環(huán)定時器、延時定時器
循環(huán)定時器：相當(dāng)于for循環(huán)，可以讓某段代碼重復(fù)執(zhí)行，區(qū)別是：可以設(shè)置兩次執(zhí)行的間隔時間
延時定時器：讓某段代碼推遲一段時間再執(zhí)行

JS:
  // setInterval():開啟循環(huán)定時器
            // 第一個參數(shù)是函數(shù)類型：把需要重復(fù)執(zhí)行的代碼封裝在這個函數(shù)中，一般是匿名函數(shù)
            // 第二個參數(shù)是number類型：以毫秒為單位的時間
            // var timer = setInterval(function () {
            //     alert('hello')
            // }, 3000);
            // console.log(timer);



            // clearInterval(): 取消循環(huán)定時器
            // 參數(shù)是開啟定時器時保存的定時器id
            // clearInterval(timer)

            // function stop() {
            //     // clearInterval(timer);
            // }


            // 延時定時器
            // setTimeout()
            // 第一個參數(shù)是函數(shù)類型：需要延遲執(zhí)行的代碼
            // 第二個參數(shù)是number類型：以毫秒為單位的時間
            // var timer = setTimeout(function () {
            //     alert('三秒的彈出');
            // },3000);

            // 清理延時定時器的方法：clearTimeout()
            // 參數(shù)是延時定時器的id
            // clearTimeout(timer);

小結(jié)：屬于window對象下的方法、屬性，在取值、調(diào)用時，一般可以省略window，但是如果需要區(qū)分屬性、方法的歸屬，則要把window對象加上

location對象

location對象中的屬性、方法操作的是瀏覽器的url區(qū)域

//html:
<button onclick='action()' type="button" name="button">點擊</button>
//js:
function action() {
                console.log(window.location.hash);
//關(guān)于window.location.hash用法，
//在處理根據(jù)首字母A-Z查詢時用錨點鏈接實現(xiàn)時，
//可以一下關(guān)于window.location.hash用法
//借閱博客https://www.cnblogs.com/nifengs/p/5104763.html
                console.log(window.location.port);//返回web端口
                console.log(window.location.hostname);//返回主機域名
                console.log(window.location.href);
                console.log(window.location.toString());
                console.log(window.location.pathname);//返回當(dāng)前頁面路徑和文件名

                // window.location.assign('http://www.baidu.com')

                window.location.

                // 頁面刷新操作
                // location.reload():不穿參數(shù)，是從瀏覽器緩存中把頁面再加載一邊，傳參true是從服務(wù)器中把頁面再請求一遍
                window.location.reload(true)
            }

screen對象

screen對象：設(shè)備的屏幕對象，常通過該對象下的屬性和方法獲取屏幕尺寸信息

screen.availHeight\screen.availWidth: 獲取的是屏幕的總高、寬減去系統(tǒng)組件所占的高度、寬度（瀏覽器可以占用的寬高）

小結(jié)：一般用在移動端開發(fā)時獲取移動設(shè)備的屏幕尺寸信息，因為移動設(shè)備屏幕比例種類多，必要情況下需要手動計算屏幕尺寸，安排元素布局位置

history對象

history對象下的屬性和方法常用與操作頁面在歷史記錄中的各個頁面間的跳轉(zhuǎn)操作。

history.go()在歷史記錄中跳轉(zhuǎn)，參數(shù)為一個數(shù)值型的數(shù)，表示向前或向后跳轉(zhuǎn)的頁面數(shù)。
參數(shù)為-1：后退一頁。
參數(shù)為1：前進一頁
參數(shù)為2：前進兩頁。

history.back():向后退一頁。
在擁有根據(jù)A-Z查詢的排序表頁面時，如果A-Z查詢時使用錨點鏈接實現(xiàn)的話，history.back返回的不是上一級頁面，而是上一級錨點。

history.forward()：向前進一頁

例子：

//domo1.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function backPage() {
                history.go(-1);
            }

            function forwordPage() {
                history.go(1);
            }
        </script>
    </head>
    <body>
        I`am demo one
        <button onclick='backPage()' type="button" name="button"></button>

        <a href="./demo2.html">click to demo2</a>

        <button onclick='forwordPage()' type="button" name="button">click to demo2</button>
    </body>
</html>


//domo2.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function backPage() {
                history.go(-2);
            }
        </script>
    </head>
    <body>

        I`am demo two;

        <button onclick='backPage()' type="button" name="button"></button>

    </body>
</html>

navigator對象

navigator對象識別客戶端瀏覽器的事實標準
常用屬性：
appCodeName:瀏覽器代碼名的字符串
appName:官方瀏覽器名的字符串
appVersion:瀏覽器版本信息
systemLanguage:操作系統(tǒng)的語音
Language瀏覽器主語言
onLine是否連接了因特網(wǎng)
cookieEnabled是否啟用cookie
userAgent用戶代理頭