BOM對(duì)象（瀏覽器對(duì)象模型）

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

window對(duì)象

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

//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頁(yè)面的區(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打開頁(yè)面的方法：window.open();
第一個(gè)參數(shù)：設(shè)置打開的url鏈接（必填項(xiàng)）
第二個(gè)參數(shù)：設(shè)置在那個(gè)窗口、選項(xiàng)卡下打開新鏈接（可選）
第三個(gè)參數(shù)：設(shè)置打開的新窗口的坐標(biāo)、尺寸、提供的功能等信息（可選）

//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ù)：確認(rèn)：true;取消：false

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

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

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

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

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



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

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


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

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

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

location對(duì)象

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

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

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

                window.location.

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

screen對(duì)象

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

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

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

history對(duì)象

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

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

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

history.forward()：向前進(jìn)一頁(yè)

例子：

//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對(duì)象

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