項目7

故宮輪播圖——BOM對象學校組織觀看紀錄片《我在故宮修文物》，講的是中國的頂級“工匠”在故宮修文物的故事。從紀錄片中張華得知，濰坊就有兩位傳承人被選入故宮修文物。想去故宮修文物并不容易，不僅要有過硬的技藝，還要“過五關(guān)斬六將”。張華沒有去過故宮，深深地被紀錄片中的各種修補工作吸引了，于是開始搜索有關(guān)故宮的一些知識，瀏覽到故宮博物院的網(wǎng)站時，發(fā)現(xiàn)首頁最上面的圖片很特別，如圖所示。情境導入■

理解BOM的基本概念和組成?！?/p>

掌握Window對象的定時器（setInterval）、延時器（setTimeout）的語法與作用。■

掌握Screen對象的作用及常用屬性，了解如何獲取屏幕信息。■

熟悉Navigator對象的常用屬性，能夠獲取瀏覽器及系統(tǒng)的相關(guān)信息?！?/p>

認識Location對象的功能及URL語法格式，了解其在頁面導航和URL操作中的應(yīng)用。■

了解History對象的用途，掌握使用History對象進行瀏覽器歷史列表操作的方法。項目目標■

能夠使用定時器實現(xiàn)輪播圖自動切換，通過延時器實現(xiàn)輪播圖無縫銜接?！?/p>

能夠使用Screen對象獲取并操作屏幕信息，如分辨率、可用寬度和高度等?！?/p>

能夠利用Navigator對象檢測用戶的版本，以及運行瀏覽器的操作系統(tǒng)等信息。■

能夠通過Location對象實現(xiàn)頁面的跳轉(zhuǎn)、刷新以及獲取和設(shè)置URL參數(shù)?！?/p>

能夠使用History對象進行頁面的前進、后退操作?！?/p>

能夠綜合運用BOM中的核心對象，實現(xiàn)基礎(chǔ)的瀏覽器控制和交互功能?！?/p>

培養(yǎng)全局思維，能夠從瀏覽器環(huán)境整體角度理解BOM各對象的關(guān)聯(lián)關(guān)系?！?/p>

增強創(chuàng)新意識和探索精神，鼓勵其嘗試使用BOM實現(xiàn)新穎的交互效果和功能?！?/p>

培養(yǎng)團隊協(xié)作能力，使其能夠在團隊項目中合理利用BOM知識實現(xiàn)網(wǎng)頁基礎(chǔ)交互功能，提升用戶體驗。■

培養(yǎng)耐心和細致的品質(zhì)，確保在復雜環(huán)境中準確使用BOM對象，避免出現(xiàn)錯誤或沖突。任務(wù)7.2使用Screen對象任務(wù)7.3使用Navigator對象任務(wù)7.4使用Location對象任務(wù)7.5使用History對象任務(wù)7.1認識BOM對象認識BOM對象任務(wù)7.1BOM是JavaScript中用于訪問和操作瀏覽器窗口的一個核心模型。BOM包括Window、History、Location、Navigator、Screen等，它們各自承擔著不同的角色和功能，能夠控制和訪問瀏覽器窗口的各種行為和特征。任務(wù)7.1認識BOM對象BOM對象的說明和典型應(yīng)用場景如表所示。7.1.1

BOM對象概述對象說明典型應(yīng)用場景WindowBOM

的頂層對象，代表瀏覽器窗口，是其他BOM對象的根控制窗口行為（打開/關(guān)閉、彈窗等）History管理瀏覽器歷史列表，支持前進、后退、跳轉(zhuǎn)等操作頁面前進/后退導航Location提供當前URL的詳細信息，支持跳轉(zhuǎn)、刷新等操作頁面重定向、獲取URL參數(shù)Navigator包含有關(guān)瀏覽器的信息，如瀏覽器名稱、版本等瀏覽器兼容性檢測Screen提供有關(guān)客戶端屏幕的信息響應(yīng)式布局適配在BOM對象體系中，Window位于頂層，可以使用標識符window直接訪問下層對象。Window是可以省略的，如上述代碼可以直接寫成如下語句。7.1.2

Window對象詳解window.document.write("hello!");//window.document是BOM中訪問文檔對象的入口（document作為Window對象的屬性存在，屬于BOM的對象體系）document.write(“hello!”);Window

對象既是

BOM

的頂層對象，也代表瀏覽器一個窗口。Window

對象的屬性包括基本屬性、坐標屬性和尺寸屬性，分別用于獲取窗口的層級關(guān)系、位置信息和尺寸信息。7.1.2

Window對象詳解分類屬性說明基本屬性parent返回父窗口self返回對當前窗口的引用（與

window等價）windowwindow屬性與self屬性等價，均返回當前窗口引用坐標屬性scrollX頁面水平滾動距離（別名pageXOffset）scrollY頁面垂直滾動距離（別名pageYOffset）尺寸屬性innerHeight視口高度（不含瀏覽器邊框、菜單欄、地址欄、狀態(tài)欄等）innerWidth視口寬度（不含瀏覽器邊框、菜單欄、地址欄、狀態(tài)欄等）outerHeight返回整個瀏覽器窗口的外部高度（包括標題欄、工具欄、邊框等，只讀）outerWidth返回整個瀏覽器窗口的外部寬度（包括標題欄、工具欄、邊框等，只讀）Window對象的方法涵蓋對話框操作、定時器和延時器設(shè)置、窗口的打開和關(guān)閉、窗口位置和大小的調(diào)整等功能。7.1.2

Window對象詳解分類方法說明對話框操作alert()打開警示對話框confirm()打開確認對話框prompt()打開提示對話框定時器和延時器設(shè)置setInterval(exp,time)設(shè)置定時器，每隔time毫秒（ms）重復執(zhí)行exp（函數(shù)或代碼字符串），返回唯一定時器ID（用于取消）setTimeout(exp,time)設(shè)置延時器，延遲time毫秒后執(zhí)行一次exp（函數(shù)或代碼字符串），返回唯一延時器ID（用于取消）clearInterval()取消由setInterval()方法設(shè)置的定時操作clearTimeout()取消由setTimeout()方法設(shè)置的延時操作窗口的打開和

關(guān)閉close()關(guān)閉瀏覽器窗口open(url,name,features)打開新瀏覽器窗口或標簽頁；參數(shù)包括

url（可選，新窗口加載的頁面）、name（可選，窗口名稱）、features（可選，窗口特征字符串，如"width=500,height=300"）；返回新窗口的

Window對象窗口位置和大小的調(diào)整

moveBy()根據(jù)給定的坐標移動窗口moveTo()將窗口移動到指定位置resizeBy(x,y)按照給定的數(shù)據(jù)調(diào)整窗口的大小resizeTo(x,y)將窗口設(shè)置為指定的大小focus()獲得焦點blur()失去焦點

1.設(shè)置定時器setInterval()方法用于按照指定的周期（以ms計）來循環(huán)調(diào)用函數(shù)或計算表達式，即設(shè)置定時器。設(shè)置定時器的語法格式如下。code/function表示要執(zhí)行的一段JavaScript代碼或一個函數(shù)；milliseconds表示周期性執(zhí)行或調(diào)用code/function的時間間隔，以ms計。設(shè)置定時執(zhí)行一段JavaScript代碼的代碼如下。7.1.2

Window對象詳解setInterval(code/function,milliseconds);setInterval("alert('hello')",2000);//不推薦使用字符串代碼（存在安全風險）也可以通過自定義函數(shù)的方式來實現(xiàn)。通過執(zhí)行自定義函數(shù)的方式來設(shè)置定時器時，自定義函數(shù)可以帶參數(shù)，然后將參數(shù)輸出。7.1.2

Window對象詳解function

ShowMessage(){

alert("hello");}setInterval(ShowMessage,2000);function

alertFunc(str)

{alert(str);}setInterval("alertFunc('hello')",

2000);2.設(shè)置延時器setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式，即設(shè)置延時器。設(shè)置延時器的語法格式如下。code/function表示要執(zhí)行的一段JavaScript代碼或一個函數(shù)；milliseconds表示延遲的時間，以ms計。7.1.2

Window對象詳解setTimeout(code/function,milliseconds);2.設(shè)置延時器設(shè)置延時執(zhí)行一段JavaScript代碼的代碼如下。上述代碼表示2s后彈出“hello”，這里通過代碼字符串的方式來實現(xiàn)，也可以通過自定義函數(shù)的方式來實現(xiàn)。7.1.2

Window對象詳解setTimeout("alert('hello')",2000);function

ShowMessage(){alert("hello");}setTimeout(ShowMessage,2000);2.設(shè)置延時器通過執(zhí)行自定義函數(shù)的方式來設(shè)置延時器時，自定義函數(shù)可以帶參數(shù)，然后將參數(shù)輸出。若想在延時器啟動后取消它，則可以將setTimeout()方法的返回值傳遞給clearTimeout()方法。7.1.2

Window對象詳解function

alertFunc(str)

{alert(str);}setTimeout("alertFunc('hello')",

2000);lettimerId=setTimeout(showMessage,2000);clearTimeout(timerId);【任務(wù)實踐7-1】實時更新的時鐘——定時器顯示一個實時更新的時鐘，用戶可以隨時啟動或停止時鐘的顯示。任務(wù)目標任務(wù)分析使用setInterval()方法每隔一定的時間更新時鐘的顯示。通過Date對象獲取當前時間，并使用toLocaleTimeString()方法格式化時間。提供啟動和停止時鐘顯示的函數(shù)，通過調(diào)用setInterval()方法來啟動定時更新，以及通過clearInterval()方法來停止定時更新?！救蝿?wù)實踐7-1】實時更新的時鐘——定時器【任務(wù)實踐7-1】實時更新的時鐘——定時器3.打開和關(guān)閉窗口open()方法用于打開一個新的瀏覽器窗口或標簽頁。URL表示要打開的指定窗口的URL，如果沒有指定URL，則打開一個新的空白窗口；name表示target屬性值或窗口的名稱；specs表示窗口的特征列表，使用逗號進行分隔，其可選參數(shù)如表所示。7.1.2

Window對象詳解window.open(URL,name,specs)參數(shù)說明width窗口的寬度，最小值為100pxheight窗口的高度，最小值為100pxleft窗口的左邊距top窗口的上邊距【任務(wù)實踐7-2】打開/關(guān)閉新窗口——open()/close()方法通過Window對象的open()方法打開人郵教育社區(qū)窗口，通過close()方法關(guān)閉人郵教育社區(qū)窗口和主窗口。任務(wù)目標任務(wù)分析通過open()方法打開新窗口，可以使用自定義函數(shù)的方法來實現(xiàn)，定義一個打開窗口的函數(shù)openWin()，通過超鏈接調(diào)用函數(shù)的方法來調(diào)用函數(shù)，即javascript:openWin()。通過close()方法關(guān)閉新窗口，使用自定義函數(shù)的方法來實現(xiàn)，定義一個關(guān)閉窗口的函數(shù)closeWin()，通過超鏈接調(diào)用函數(shù)的方法來調(diào)用函數(shù)，即javascript:closeWin()。通過close()方法直接關(guān)閉主窗口?！救蝿?wù)實踐7-2】打開/關(guān)閉新窗口——open()/close()方法<scripttype="text/javascript">

letnewWin=null;//引用打開的新窗口

functionopenWin(){//打開新窗口

newWin=open("","learningWindow",

"width=400,height=100,left=120,top=110");

}

functioncloseWin(){

if(newWin!==null&&!newWin.closed){

newWin.close();

newWin=null;

}else{

alert("窗口已關(guān)閉或未成功打開");

}

}

</script>4.改變窗口的大小

resizeTo(x,y)方法用于改變窗口的大小，x和y分別表示改變后的寬度和高度，單位是px而resizeBy(x,y)方法也用于改變窗口的大小，但是x和y表示在原來的基礎(chǔ)上擴大或縮小的數(shù)值，它們?yōu)檎龜?shù)表示擴大，為負數(shù)表示縮小。7.1.2

Window對象詳解window.resizeTo(400,400); //窗口大小調(diào)整為400px×400pxwindow.resizeBy(-500,-500); //窗口大小在原來的基礎(chǔ)上各縮小500px【任務(wù)實踐7-3】動態(tài)調(diào)整窗口大小——resizeTo()和resizeBy()方法使用resizeTo()和resizeBy()方法動態(tài)調(diào)整窗口的大小，并展示窗口的當前大小。任務(wù)目標任務(wù)分析使用open()方法打開新窗口。定義函數(shù)來使用resizeTo()和resizeBy()方法動態(tài)調(diào)整窗口的大小。使用document.write()方法或其他方法顯示窗口的當前大小。【任務(wù)實踐7-3】動態(tài)調(diào)整窗口大小——resizeTo()和resizeBy()方法【任務(wù)實踐7-3】動態(tài)調(diào)整窗口大小——resizeTo()和resizeBy()方法【任務(wù)實踐7-3】動態(tài)調(diào)整窗口大小——resizeTo()和resizeBy()方法

5.改變窗口的位置moveTo(x,y)方法用于移動窗口，x和y分別代表窗口距離屏幕左上角的水平和垂直距離，單位是px；moveBy(x,y)方法用于移動窗口，x代表在原來的基礎(chǔ)上向左移動（x

<

0）或向右移動的距離，y代表在原來的基礎(chǔ)上向上移動（y

<

0）或向下移動的距離。我們可以通過

screenLeft

和

screenTop

屬性（或screenX和

screenY

屬性，它們提供相同的信息）來分別獲取窗口相對于屏幕左邊和上邊的位置。7.1.2

Window對象詳解window.moveTo(100,100); //窗口移動到(100,100)window.moveBy(10,-50); //窗口在水平方向上向右移動10px，向上移動50px【任務(wù)實踐7-4】靈活改變窗口位置——moveTo()和moveBy()方法

使用moveTo()和moveBy()方法改變窗口的位置，并展示當前位置的信息。任務(wù)目標任務(wù)分析使用open()方法打開新窗口。定義函數(shù)來使用

moveTo()

和

moveBy()

方法動態(tài)改變窗口的位置。使用screenLeft、screenTop（或screenX、screenY）屬性來獲取并顯示窗口的當前位置。【任務(wù)實踐7-4】靈活改變窗口位置——moveTo()和moveBy()方法

【任務(wù)實踐7-4】靈活改變窗口位置——moveTo()和moveBy()方法

使用Screen對象任務(wù)7.2窗口的screen屬性會引用Screen對象，它包含有關(guān)客戶端屏幕的信息。任務(wù)7.2使用Screen對象屬性說明width返回屏幕的總寬度（與任務(wù)欄無關(guān)）height返回屏幕的總高度（與任務(wù)欄無關(guān)）availHeight返回屏幕的可用高度（扣除系統(tǒng)任務(wù)欄、菜單欄等固定占用區(qū)域）availWidth返回屏幕的可用寬度（扣除系統(tǒng)任務(wù)欄、菜單欄等固定占用區(qū)域）colorDepth返回像素的顏色總位深度pixelDepth返回顯示屏幕的顏色分辨率（bit/px），現(xiàn)代瀏覽器中與colorDepth返回值一致【任務(wù)實踐7-5】顯示當前屏幕的信息——Screen對象使用Screen對象顯示屏幕信息，包括分辨率和可用區(qū)域等。任務(wù)目標任務(wù)分析使用Screen對象的屬性獲取屏幕的信息。在頁面輸出結(jié)果，以提高用戶的交互體驗?！救蝿?wù)實踐7-5】顯示當前屏幕的信息——Screen對象

<buttonid="screenInfoBtn"onclick="displayScreenInfo()">顯示屏幕信息</button>

<divid="screenInfo"></div>

<script>

//顯示屏幕信息

functiondisplayScreenInfo(){

constinfoDiv=document.getElementById("screenInfo");

infoDiv.innerHTML=`

<h3>屏幕信息</h3>

<p>分辨率：${screen.width}px×${screen.height}px</p>

<p>可用區(qū)域：${screen.availWidth}px×${screen.availHeight}px</p>

<p>顏色深度：${screen.colorDepth}bit</p>

<p>像素分辨率：${screen.pixelDepth}bit</p>

`;

}

</script>【能力提升】Screen對象的應(yīng)用Screen對象常用于響應(yīng)式布局，即根據(jù)用戶屏幕尺寸動態(tài)調(diào)整頁面布局。//響應(yīng)式布局應(yīng)用示例：根據(jù)屏幕寬度調(diào)整頁面布局

if(screen.availWidth<768){document.body.classList.add("mobile-layout");}else{document.body.classList.remove("mobile-layout");}實踐中需重點掌握Screen對象的核心用途（獲取屏幕尺寸、適配布局），理解其在響應(yīng)式開發(fā)中的應(yīng)用價值，養(yǎng)成根據(jù)屏幕尺寸動態(tài)調(diào)整頁面的編碼習慣。使用Navigator對象任務(wù)7.3窗口的navigator屬性就會引用Navigator對象，它是指瀏覽器對象，包含瀏覽器的信息。任務(wù)7.3使用Navigator對象屬性說明appCodeName返回瀏覽器的引擎名稱，如返回“Mozilla”appName返回瀏覽器名稱，現(xiàn)代瀏覽器為兼容舊網(wǎng)站，多返回“Netscape”，建議通過userAgent屬性判斷瀏覽器類型appVersion返回瀏覽器的平臺和版本信息cookieEnabled返回指明瀏覽器中是否啟用cookie的布爾值platform返回運行瀏覽器的操作系統(tǒng)userAgent返回客戶端發(fā)送給服務(wù)器的User-Agent字符串，包含瀏覽器名稱、版本、操作系統(tǒng)、渲染引擎等信息（現(xiàn)代瀏覽器可能為兼容舊網(wǎng)站刻意修改部分內(nèi)容）

【任務(wù)實踐7-6】顯示當前瀏覽器和操作系統(tǒng)信息——Navigator對象

通過Navigator對象顯示當前瀏覽器的信息。任務(wù)目標任務(wù)分析直接使用Navigator對象的屬性獲取瀏覽器和操作系統(tǒng)的信息。使用document.write()方法輸出結(jié)果。【任務(wù)實踐7-6】顯示當前瀏覽器和操作系統(tǒng)信息——Navigator對象

<scripttype="text/javascript">

document.write("操作系統(tǒng)信息："+navigator.platform+"<br/>");

document.write("瀏覽器名稱："+navigator.appName+"<br/>");

document.write("是否啟用cookie："+navigator.cookieEnabled+"<br/>");

document.write("瀏覽器版平臺和版本信息："+navigator.appVersion+"<br/>");

document.write("用戶代理："+navigator.userAgent+"<br/>");

</script>【任務(wù)實踐7-6】顯示當前瀏覽器和操作系統(tǒng)信息——Navigator對象

使用Location對象任務(wù)7.4窗口的location屬性會引用Location對象，它包含有關(guān)當前URL的詳細信息。在網(wǎng)絡(luò)世界中，URL是信息資源的一種字符串表示方法，也就是我們常說的網(wǎng)址。一個典型的URL語法格式如下。任務(wù)7.4使用Location對象

protocol://hostname[:port]/path/[;parameters][?querystring]#fragment各部分的具體說明如下。①protocol：表示通信協(xié)議，如HTTP、HTTPS等。②hostname：表示主機名，是指服務(wù)器的域名系統(tǒng)主機名或IP地址。③port：表示端口號，是一個整數(shù)，可以省略，省略時表示使用對應(yīng)協(xié)議的默認端口，如HTTP的默認端口是80，HTTPS的默認端口是443。④path：表示訪問資源的具體路徑，通常表示服務(wù)器上的目錄或文件地址。⑤;parameters：早期

URL

設(shè)計中用于指定資源的“參數(shù)”，格式為;name=value，多個參數(shù)用“;”分隔。在現(xiàn)代Web開發(fā)中已很少使用，逐漸被querystring替代，但部分老系統(tǒng)仍可能兼容。⑥querystring：表示查詢字符串，用于向動態(tài)網(wǎng)頁傳遞參數(shù)，格式為“名=值”，多個參數(shù)之間用“&”連接。⑦fragment：表示指定資源中的信息片段，如在進行錨點連接時的連接參數(shù)。任務(wù)7.4使用Location對象

Location對象提供了多個常用的屬性和方法，分別如表所示。任務(wù)7.4使用Location對象

屬性說明hash返回URL的錨點部分host返回URL的主機名和端口hostname返回URL的主機名href返回完整的URLpathname返回URL的路徑port返回URL服務(wù)器使用的端口號protocol返回URL協(xié)議search返回URL的查詢部分方法說明assign()載入新的文檔reload()重新載入當前文檔replace()用新的文檔替換當前文檔【任務(wù)實踐7-7】登錄成功，自動跳轉(zhuǎn)——Location對象使用Location對象實現(xiàn)用戶登錄成功后的頁面自動跳轉(zhuǎn)功能。任務(wù)目標任務(wù)分析頁面需要顯示一個倒計時，告知用戶將在多少秒后自動跳轉(zhuǎn)。倒計時結(jié)束時，使用Location對象實現(xiàn)頁面自動跳轉(zhuǎn)功能?！救蝿?wù)實踐7-7】登錄成功，自動跳轉(zhuǎn)——Location對象

<h4>登錄成功</h4>

<p>

<spanid="second">5</span>s后回到主頁

<ahref="/">返回</a>

</p>

<scripttype="text/javascript">

leti=5;

setInterval(count,1000);

functioncount(){

i--;

document.getElementById("second").innerHTML=i;

if(i<=0){

location.href="/";

//location.assign("/")

}

}

</script>【任務(wù)實踐7-7】登錄成功，自動跳轉(zhuǎn)——Location對象使用History對象任務(wù)7.5窗口的history屬性會引用History對象，它記錄了用戶（在瀏覽器窗口中）訪問過的URL。任務(wù)7.5使用History對象

屬性/方法說明length返回瀏覽器歷史列表中的URL數(shù)量back()加載瀏覽器歷史列表中的前一個URLforward()加載瀏覽器歷史列表中的后一個URLgo(num)加載歷史列表中的指定頁面，num為整數(shù)（0表示刷新當前頁，正數(shù)表示前進

num步，負數(shù)表示后退num步）【任務(wù)實踐7-8】頁面“前進”和“后退”——History對象通過History對象實現(xiàn)頁面間的“前進”和“后退”導航，理解瀏覽器歷史記錄的基本操作。任務(wù)目標任務(wù)分析設(shè)計兩個關(guān)聯(lián)頁面：第一個頁面包含“前往第二個頁面”按鈕和“前進”按鈕；第二個頁面包含“后退”按鈕。核心技術(shù)點：●

使用location.assign()方法實現(xiàn)頁面跳轉(zhuǎn)（同時在瀏覽器歷史記錄中添加新條目）?！?/p>

使用history.back()方法實現(xiàn)“后退”（加載歷史記錄中的前一個頁面）?！?/p>

使用history.forward()方法實現(xiàn)“前進”（加載歷史記錄中的下一個頁面）。注意：“前進”按鈕只有在有“歷史前進記錄”時才生效（如從第二個頁面后退到第一個頁面后，“前進”按鈕才可用）。【任務(wù)實