第8章 BOM電子課件

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

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

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

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

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

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

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

先定一個小目標(biāo)！掌握window對象，能夠使用window對象獲取窗口相關(guān)的信息8.2.1window對象window對象：在JavaScript中具有雙重角色，它既是瀏覽器窗口對象又是一個全局對象。全局對象在書寫時可以省略，舉例如下。document可以寫成window.document。console可以寫成window.console。alert()可以寫成window.alert()。prompt()可以寫成mpt()。8.2.1window對象在開發(fā)中，定義在全局作用域中的變量、函數(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對象，等價于window屬性window獲取當(dāng)前窗口的window對象top獲取最頂層窗口的window對象（頁面中有多個框架時）方法alert()彈出帶有一段消息和一個確認按鈕的警告框彈出帶有一段消息以及確認按鈕和取消按鈕的對話框confirm()彈出提示用戶輸入的對話框prompt()打開一個新的瀏覽器窗口或查找一個已命名的窗口open()關(guān)閉瀏覽器窗口close()focus()把鍵盤焦點給予一個窗口scrollBy()按照指定的像素值來滾動內(nèi)容scrollTo()把內(nèi)容滾動到指定的坐標(biāo)

先定一個小目標(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的錨點部分（從“#”開始的部分）host獲取當(dāng)前URL的主機名和端口hostname獲取當(dāng)前URL的主機名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ù)器查詢信息時傳入查詢條件，如頁碼、搜索的關(guān)鍵字、排序方式等；reload()方法只有1個可選參數(shù)forceReload，它是一個布爾值，當(dāng)值為true時，將強制瀏覽器從服務(wù)器加載頁面資源，當(dāng)值為false或者未傳參時，瀏覽器則可能從緩存中讀取頁面。assign()在打開指定URL時，會生成一條新的歷史記錄，而replace()方法不會生成新的記錄，并且在調(diào)用replace()方法后，用戶不能返回到前一個頁面。Tip下面以URL為例演示location對象的常用屬性。http://:5500/test.html?name=a#data8.2.2location對象當(dāng)通過上述URL打開頁面時，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)前頁面

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

分類名稱說明屬性appCodeName獲取瀏覽器的內(nèi)部名稱appName獲取瀏覽器的完整名稱appVersion獲取瀏覽器的平臺和版本信息cookieEnabled獲取指明瀏覽器中是否啟用Cookie的布爾值platform獲取運行瀏覽器的操作系統(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)

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

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

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

屬性說明width獲取整個屏幕的寬height獲取整個屏幕的高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，這是因為Windows系統(tǒng)的任務(wù)欄占用了48px的屏幕可用空間。8.2.5screen對象窗口事件8.3

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

先定一個小目標(biāo)！掌握窗口大小事件，能夠在窗口大小調(diào)整時執(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)整窗口大小時，在控制臺輸出當(dāng)前頁面的寬度，示例代碼如下。8.3.2窗口大小事件<script>window.addEventListener('resize',function(){console.log(document.body.clientWidth); //用于獲取頁面的寬度});</script>定時器8.4

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

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

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