第8章BOM《JavaScript前端開發(fā)案例教程（第2版）》學(xué)習(xí)目標(biāo)/Target

了解BOM的概念，能夠說出BOM的作用

掌握BOM對象的使用，能夠通過BOM對象實(shí)現(xiàn)瀏覽器操作

掌握窗口事件的使用，能夠在窗口加載、卸載或改變大小時(shí)執(zhí)行特定的代碼

掌握定時(shí)器方法的使用，能夠通過定時(shí)器延遲一段時(shí)間執(zhí)行代碼或間歇執(zhí)行代碼

熟悉同步和異步的概念，能夠說出同步和異步的區(qū)別章節(jié)概述/Summary在實(shí)際開發(fā)中，使用JavaScript開發(fā)網(wǎng)頁交互效果時(shí)，經(jīng)常需要獲取瀏覽器的一些信息，控制瀏覽器的刷新和頁面跳轉(zhuǎn)。為了能夠使JavaScript控制瀏覽器，瀏覽器提供了BOM。本章將對BOM進(jìn)行詳細(xì)講解。目錄/Contents010203BOM簡介BOM對象窗口事件04定時(shí)器05動(dòng)手實(shí)踐：制作交通信號燈BOM簡介8.1

先定一個(gè)小目標(biāo)！了解什么是BOM，能夠說出BOM的概念并列舉常見的BOM對象8.1BOM簡介8.1BOM簡介瀏覽器對象模型（BrowerObjectModel，BOM）是瀏覽器提供的用于JavaScript與瀏覽器窗口進(jìn)行交互的一系列對象。8.1BOM簡介由于沒有統(tǒng)一的BOM標(biāo)準(zhǔn)，每個(gè)瀏覽器都有自己的BOM實(shí)現(xiàn)方法，BOM的瀏覽器兼容性較差。常見的BOM對象有：8.1BOM簡介在BOM中，頂級對象是window，表示瀏覽器窗口，其他對象都是window對象的屬性。document對象表示文檔，它既屬于BOM又屬于DOM；location對象用于操作瀏覽器地址；navigator對象用于獲取瀏覽器的基本信息；history對象用于操作歷史記錄；screen對象用于獲取屏幕信息。BOM對象8.2

先定一個(gè)小目標(biāo)！掌握window對象，能夠使用window對象獲取窗口相關(guān)的信息8.2.1window對象window對象：在JavaScript中具有雙重角色，它既是瀏覽器窗口對象又是一個(gè)全局對象。全局對象在書寫時(shí)可以省略，舉例如下。document可以寫成window.document。console可以寫成window.console。alert()可以寫成window.alert()。prompt()可以寫成mpt()。8.2.1window對象在開發(fā)中，定義在全局作用域中的變量、函數(shù)，其實(shí)都是window對象的屬性、方法，下面通過代碼演示這一現(xiàn)象，示例代碼如下。8.2.1window對象//全局作用域中的變量是window對象的屬性varnum=10;console.log(window.num); //輸出結(jié)果：10//全局作用域中的函數(shù)是window對象的方法functionfn(){return11;}console.log(window.fn()); //輸出結(jié)果：11window對象中除了document、location、navigator、screen和history屬性外，還有哪些屬性和方法？8.2.1window對象window對象中其他常用的屬性和方法如下。8.2.1window對象分類名稱說明屬性name設(shè)置或獲取窗口的名稱opener獲取創(chuàng)建了此窗口的window對象parent獲取當(dāng)前窗口的父窗口window對象self獲取當(dāng)前窗口的window對象，等價(jià)于window屬性window獲取當(dāng)前窗口的window對象top獲取最頂層窗口的window對象（頁面中有多個(gè)框架時(shí)）方法alert()彈出帶有一段消息和一個(gè)確認(rèn)按鈕的警告框彈出帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框confirm()彈出提示用戶輸入的對話框prompt()打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口open()關(guān)閉瀏覽器窗口close()focus()把鍵盤焦點(diǎn)給予一個(gè)窗口scrollBy()按照指定的像素值來滾動(dòng)內(nèi)容scrollTo()把內(nèi)容滾動(dòng)到指定的坐標(biāo)

先定一個(gè)小目標(biāo)！掌握location對象，能夠使用location對象獲取當(dāng)前URL地址相關(guān)的信息8.2.2location對象location對象用于操作瀏覽器地址，通過location對象可以獲取當(dāng)前窗口的URL地址相關(guān)的信息。location對象既是window對象的屬性又是document對象的屬性。8.2.2location對象location對象常用的屬性和方法如下。分類名稱說明屬性search獲取或設(shè)置當(dāng)前URL的查詢字符串（又稱為URL參數(shù)），即URL中“?”之后的部分hash獲取當(dāng)前URL的錨點(diǎn)部分（從“#”開始的部分）host獲取當(dāng)前URL的主機(jī)名和端口hostname獲取當(dāng)前URL的主機(jī)名href獲取當(dāng)前URLpathname獲取當(dāng)前URL中的路徑名port獲取當(dāng)前URL中的端口號protocol獲取當(dāng)前URL協(xié)議方法assign()觸發(fā)窗口加載并顯示指定URL的內(nèi)容replace()用給定的URL來替換當(dāng)前的資源reload()刷新當(dāng)前頁面8.2.2location對象8.2.2location對象location對象常用屬性和方法的說明如下。search屬性通常用于在向服務(wù)器查詢信息時(shí)傳入查詢條件，如頁碼、搜索的關(guān)鍵字、排序方式等；reload()方法只有1個(gè)可選參數(shù)forceReload，它是一個(gè)布爾值，當(dāng)值為true時(shí)，將強(qiáng)制瀏覽器從服務(wù)器加載頁面資源，當(dāng)值為false或者未傳參時(shí)，瀏覽器則可能從緩存中讀取頁面。assign()在打開指定URL時(shí)，會(huì)生成一條新的歷史記錄，而replace()方法不會(huì)生成新的記錄，并且在調(diào)用replace()方法后，用戶不能返回到前一個(gè)頁面。Tip下面以URL為例演示location對象的常用屬性。http://:5500/test.html?name=a#data8.2.2location對象當(dāng)通過上述URL打開頁面時(shí)，location對象常用屬性的獲取結(jié)果如下。console.log(location.search); //輸出結(jié)果：?name=aconsole.log(location.hash); //輸出結(jié)果：#dataconsole.log(location.host); //輸出結(jié)果：:5500console.log(location.hostname); //輸出結(jié)果：console.log(location.href); //輸出結(jié)果與原URL地址相同console.log(location.pathname); //輸出結(jié)果：/test.htmlconsole.log(location.port); //輸出結(jié)果：5500console.log(tocol); //輸出結(jié)果：http:下面通過代碼演示location對象常用方法的使用。8.2.2location對象location.assign('index.html'); //加載當(dāng)前目錄下的index.htmllocation.replace('index.html'); //將當(dāng)前頁面替換為index.htmllocation.reload(); //刷新當(dāng)前頁面

先定一個(gè)小目標(biāo)！掌握navigator對象，能夠使用navigator對象獲取瀏覽器相關(guān)的信息8.2.3navigator對象8.2.3navigator對象navigator對象用于獲取有關(guān)瀏覽器的信息，不同瀏覽器的差異較大。

分類名稱說明屬性appCodeName獲取瀏覽器的內(nèi)部名稱appName獲取瀏覽器的完整名稱appVersion獲取瀏覽器的平臺和版本信息cookieEnabled獲取指明瀏覽器中是否啟用Cookie的布爾值platform獲取運(yùn)行瀏覽器的操作系統(tǒng)平臺userAgent獲取由瀏覽器發(fā)送到服務(wù)器的User-Agent的值方法javaEnabled()是否在瀏覽器中啟用Java下面以userAgent屬性為例演示該屬性的使用。varmsg=navigator.userAgent;console.log(msg);8.2.3navigator對象獲取瀏覽器發(fā)送到服務(wù)器的User-Agent的值8.2.3navigator對象Chrome瀏覽器的輸出結(jié)果如下。Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/77.0.3865.75Safari/537.36Firefox瀏覽器的輸出結(jié)果如下。Mozilla/5.0(WindowsNT6.1;Win64;x64;rv:69.0)Gecko/20100101Firefox/69.0IE瀏覽器（IE9）的輸出結(jié)果如下。Mozilla/5.0(compatible;MSIE9.0;WindowsNT6.1;WOW64;Trident/7.0;SLCC2;.NETCLR2.0.50727;.NETCLR3.5.30729;.NETCLR3.0.30729;MediaCenterPC6.0;.NET4.0C;.NET4.0E;InfoPath.3)

先定一個(gè)小目標(biāo)！掌握history對象，能夠使用history對象實(shí)現(xiàn)瀏覽器前進(jìn)和后退8.2.4history對象history對象可以對用戶在瀏覽器中訪問過的歷史記錄進(jìn)行操作。出于安全方面的考慮，history對象不能直接獲取用戶瀏覽過的歷史記錄，但可以控制瀏覽器的“后退”和“前進(jìn)”等功能。

分類名稱說明屬性length返回歷史列表中的ULR數(shù)方法back()加載history列表中的前一個(gè)URLforward()加載history列表中的下一個(gè)URLgo()加載history列表中的某個(gè)具體頁面history對象常用的屬性和方如下。8.2.4history對象下面演示history對象的使用。history.forward(); //控制瀏覽器“前進(jìn)一頁”history.back(); //控制瀏覽器“后退一頁”history.go(2); //控制瀏覽器“前進(jìn)兩頁”history.go(-2); //控制瀏覽器“后退兩頁”8.2.4history對象當(dāng)go()方法的參數(shù)delta的值是負(fù)整數(shù)時(shí)，表示“后退”指定的頁數(shù)；是正整數(shù)時(shí)，表示“前進(jìn)”指定的頁數(shù)；是0或省略使表示刷新頁面。Tip

先定一個(gè)小目標(biāo)！掌握screen對象，能夠使用screen對象獲取屏幕的相關(guān)信息8.2.5screen對象screen對象用于獲取屏幕相關(guān)的信息，如屏幕的寬度和高度等。

屬性說明width獲取整個(gè)屏幕的寬height獲取整個(gè)屏幕的高availWidth獲取瀏覽器窗口在屏幕上可占用的水平空間availHeight獲取瀏覽器窗口在屏幕上可占用的垂直空間8.2.5screen對象下面演示screen對象的使用。console.log(screen.width); //示例結(jié)果：1920console.log(screen.height); //示例結(jié)果：1080console.log(screen.availWidth); //示例結(jié)果：1920console.log(screen.availHeight); //示例結(jié)果：1032上述代碼中screen屬性獲取的結(jié)果都是數(shù)字型像素值。screen.availHeight屬性的獲取結(jié)果比screen.height屬性的獲取結(jié)果小了48px，這是因?yàn)閃indows系統(tǒng)的任務(wù)欄占用了48px的屏幕可用空間。8.2.5screen對象窗口事件8.3

先定一個(gè)小目標(biāo)！掌握窗口加載與卸載事件，能夠在窗口加載和卸載時(shí)執(zhí)行特定操作8.3.1窗口加載與卸載事件8.3.1窗口加載與卸載事件窗口事件是指window對象的事件，它與整個(gè)窗口有關(guān)。常用的窗口事件有窗口加載與卸載事件、窗口大小事件。窗口加載、卸載事件的使用場景：如果要在窗口加載完成后執(zhí)行某些代碼，或在窗口卸載時(shí)執(zhí)行某些代碼時(shí)可以使用。8.3.1窗口加載與卸載事件事件名稱說明load當(dāng)頁面加載完畢后觸發(fā)unload當(dāng)頁面卸載時(shí)觸發(fā)窗口加載與卸載事件如下。針對load和unload事件的說明如下。load事件會(huì)在網(wǎng)頁文檔以及外鏈的文件（包括圖像文件、JS文件、CSS文件等）全部加載完成后才會(huì)觸發(fā)；unload事件會(huì)在用戶關(guān)閉網(wǎng)頁時(shí)觸發(fā)。窗口加載與卸載事件有兩種注冊方式，示例代碼如下。//方式1window.onload=function(){};window.onunload=function(){};//方式2window.addEventListener('load',function(){});window.addEventListener('unload',function(){});方式1只能注冊一個(gè)事件處理函數(shù)，方式2可以注冊多個(gè)事件處理函數(shù)，只需多次調(diào)用window.addEventListener()即可。8.3.1窗口加載與卸載事件當(dāng)網(wǎng)頁中的圖片有很多時(shí)，如果圖片加載速度慢，窗口加載事件的觸發(fā)可能需要較長的時(shí)間，這樣會(huì)影響到用戶的體驗(yàn)。怎么解決呢？我們可以使用document.DOMContentLoaded事件，它會(huì)在文檔加載完成時(shí)觸發(fā)，與圖像文件、JavaScript文件和CSS文件等外部文件是否加載完成無關(guān)，適用于頁面中外部文件有很多的情況。多學(xué)一招：document.DOMContentLoaded8.3.1窗口加載與卸載事件document.DOMContentLoaded事件不兼容IE9之前版本的瀏覽器。Tip

先定一個(gè)小目標(biāo)！掌握窗口大小事件，能夠在窗口大小調(diào)整時(shí)執(zhí)行特定操作8.3.2窗口大小事件在開發(fā)中，如何知道用戶當(dāng)前是否正在調(diào)整瀏覽器窗口大小？8.3.2窗口大小事件在開發(fā)中，如果需要知道用戶是否正在調(diào)整瀏覽器窗口大小，可以使用窗口大小事件resize，該事件有兩種注冊方式，如下所示。//方式1window.onresize=function(){};//方式2window.addEventListener('resize',function(){});8.3.2窗口大小事件接下來通過案例演示當(dāng)用戶調(diào)整窗口大小時(shí)，在控制臺輸出當(dāng)前頁面的寬度，示例代碼如下。8.3.2窗口大小事件<script>window.addEventListener('resize',function(){console.log(document.body.clientWidth); //用于獲取頁面的寬度});</script>定時(shí)器8.4

先定一個(gè)小目標(biāo)！掌握定時(shí)器方法，能夠完成定時(shí)器的設(shè)置與清除8.4.1定時(shí)器方法8.4.1定時(shí)器方法輪播圖效果和倒計(jì)時(shí)效果可以使用定時(shí)器相關(guān)方法實(shí)現(xiàn)。window對象提供了setTimeout()和setInterval()兩種設(shè)置定時(shí)器的方法，以及clearTimeout()、clearInterval()兩種清除定時(shí)器的方法。方法說明setTimeout(fn,delay)在達(dá)到指定時(shí)間（以毫秒計(jì)）后調(diào)用函數(shù)或執(zhí)行一段代碼setInterval(fn,delay)按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或執(zhí)行一段代碼clearTimeout(定時(shí)器ID)清除由setTimeout()設(shè)置的定時(shí)器clearInterval(定時(shí)器ID)清除由setInterval()設(shè)置的定時(shí)器8.4.1定時(shí)器方法setTimeout()和setInterval()方法的相同點(diǎn)和不同點(diǎn)如下。相同點(diǎn)：這兩個(gè)方法都可以在一個(gè)固定時(shí)間段內(nèi)執(zhí)行代碼。不同點(diǎn)：setTimeout()方法只執(zhí)行一次代碼，而setInterval()方法會(huì)在指定的時(shí)間后自動(dòng)重復(fù)執(zhí)行代碼。8.4.1定時(shí)器方法setTimeout()和setInterval()方法都有2個(gè)參數(shù)，說明如下。第1個(gè)參數(shù)表示到達(dá)延遲時(shí)間后執(zhí)行的代碼，可以傳入普通函數(shù)、匿名函數(shù)或字符串代碼。第2個(gè)參數(shù)表示延遲時(shí)間的毫秒值。8.4.1定時(shí)器方法定時(shí)器的清除方法setTimeout()和setInterval()方法的返回值為定時(shí)器ID（定時(shí)器的唯一標(biāo)識）。將定時(shí)器ID作為參數(shù)傳給clearTimeout()或clearInterval()方法可以清除定時(shí)器。下面以setTimeout()方法為例演示定時(shí)器的設(shè)置，示例代碼如下。//傳入普通函數(shù)setTimeout(fn,3000);functionfn(){console.log('JavaScript');}//傳入匿名函數(shù)setTimeout(function(){alert('JavaScript');},3000);//傳入字符串代碼setTimeout('alert("JavaScript");',3000);8.4.1定時(shí)器方法下面以clearTimeout()方法為例演示定時(shí)器的清除，示例代碼如下。//設(shè)置定時(shí)器時(shí)，保存定時(shí)器idvartimer=setTimeout(function(){alert('JavaScript');},3000);//清除定時(shí)器時(shí)，傳入要清楚的定時(shí)器IDclearTimeout(timer);8.4.1定時(shí)器方法當(dāng)通過clearTimeout()方法清除定時(shí)器后，該定時(shí)器將不再執(zhí)行。

先定一個(gè)小目標(biāo)！掌握60秒內(nèi)只能發(fā)送一次短信案例的開發(fā)，能夠利用定時(shí)器相關(guān)的方法實(shí)現(xiàn)短信的發(fā)送8.4.2【案例】60秒內(nèi)只能發(fā)送一次短信本案例將會(huì)利用setInterval()和clearInterval()方法完成一個(gè)發(fā)送短信的案例，要求60秒內(nèi)只能發(fā)送一次短信。8.4.2【案例】60秒內(nèi)只能發(fā)送一次短信8.4.2【案例】60秒內(nèi)只能發(fā)送一次短信案例分析在頁面中放一個(gè)文本框和一個(gè)“發(fā)送”按鈕，文本框用于輸入手機(jī)號碼，輸入完成后，單擊“發(fā)送”按鈕，該按鈕在60秒以內(nèi)不能再次被單擊，防止重復(fù)發(fā)送短信。并且，在單擊“發(fā)送”按鈕之后，該按鈕中的文字會(huì)變?yōu)椤斑€剩下60秒”，并且“60”會(huì)每秒減1。當(dāng)60秒過去后，按鈕恢復(fù)為初始狀態(tài)。左圖為頁面初始效果，右圖為單擊發(fā)送按鈕之后的效果。8.4.2【案例】60秒內(nèi)只能發(fā)送一次短信

先定一個(gè)小目標(biāo)！熟悉同步和異步的概念，能夠說出同步和異步的區(qū)別8.4.3同步和異步JavaScript的執(zhí)行機(jī)制是單線程，意味著所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)，如果其中一個(gè)任務(wù)執(zhí)行的時(shí)間過長，就會(huì)阻塞后面的任務(wù)。8.4.3同步和異步例如，有3個(gè)任務(wù)正在排隊(duì)，第1個(gè)任務(wù)是在控制臺輸出“1”，第2個(gè)任務(wù)是5秒后在控制臺輸出“2”，第3個(gè)任務(wù)是在控制臺輸出“3”。當(dāng)程序執(zhí)行到任務(wù)2時(shí)，程序就被阻塞了5秒，之后才能執(zhí)行第3個(gè)任務(wù)。如何解決這個(gè)問題呢？8.4.3同步和異步8.4.3同步和異步我們可以通過定時(shí)器來解決，使用setTimeout()設(shè)置一個(gè)5秒的定時(shí)器，將第2個(gè)任務(wù)放到定時(shí)器函數(shù)中，示例代碼如下。console.log(1); //第1個(gè)任務(wù)setTimeout(function(){console.log(2); //第2個(gè)任務(wù)},5000);console.log(3); //第3個(gè)任務(wù)當(dāng)調(diào)用setTimeout()方法后，該方法會(huì)立即執(zhí)行完成，然后執(zhí)行后面的代碼，在控制臺中輸出3。而為setTimeout()傳入的函數(shù)，它會(huì)在到達(dá)指定時(shí)間后執(zhí)行。8.4.3同步和異步程序中有“異步”和“同步”兩種操作方式，使用定時(shí)器解決阻塞的問題，這樣的操作稱為異步操作。關(guān)于“異步”和“同步”操作方式具體解釋如下。同步：前一個(gè)任務(wù)結(jié)束后再執(zhí)行后一個(gè)任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的。異步：在處理一件任務(wù)的同時(shí)，可以去處理其他的任務(wù)。8.4.3同步和異步有這樣一個(gè)問題：當(dāng)定時(shí)器的時(shí)間設(shè)為0的時(shí)候，到底是定時(shí)器傳入的回調(diào)函數(shù)優(yōu)先執(zhí)行，還是setTimeout()后面的代碼優(yōu)先執(zhí)行呢？多學(xué)一招：JavaScript執(zhí)行機(jī)制console.log(1);setTimeout(function(){console.log(2