Web前端開發(fā)-交互式設(shè)計(jì)（JavaScript+jQuery） 課件 單元6 BOM編程

Web前端開發(fā)—交互式設(shè)計(jì)

（JavaScript+jQuery）主編：孫佳帝

孫文江編委：白哲佳張卓2023年電子工業(yè)出版社CONTENTS目錄JavaScript概述01JavaScript語言基礎(chǔ)02JavaScript函數(shù) 03面向?qū)ο缶幊?04JavaScript內(nèi)置對象05BOM編程06DOM編程07DOM事件08利用JQuery編程09設(shè)計(jì)個(gè)性化網(wǎng)站10Web前端開發(fā)—交互式設(shè)計(jì)06單元6BOM編程

Web前端開發(fā)—交互式設(shè)計(jì)6.1認(rèn)識(shí)BOM1.什么是BOM？BOM被稱為瀏覽器對象模型，它的主要功能是操作HTML內(nèi)容之外的一些信息，為了實(shí)現(xiàn)JavaScript與瀏覽器之間的“對話”，比如新建窗口、Cookie設(shè)置、瀏覽器版本信息的顯示、瀏覽器窗口寬高的顯示等。它的作用是將相關(guān)的元素組織包裝起來，提供給程序設(shè)計(jì)人員使用，從而降低開發(fā)人員的勞動(dòng)量，提高設(shè)計(jì)Web頁面的能力。BOM一直沒有被標(biāo)準(zhǔn)化，不過各主流瀏覽器均支持BOM，都遵守最基本的規(guī)則和用法，W3C也將BOM主要內(nèi)容納入了HTML5規(guī)范之中。2.BOM的層次結(jié)構(gòu)

6.2window對象1.window對象常用屬性屬性描述closed返回窗口是否已被關(guān)閉defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本document對document

對象的只讀引用history對history

對象的只讀引用innerHeight返回窗口文檔顯示區(qū)的高度innerWidth返回窗口文檔顯示區(qū)的寬度innerWidth返回窗口文檔顯示區(qū)的寬度localStorage在瀏覽器中存儲(chǔ)鍵/值對。沒有過期時(shí)間length設(shè)置或返回窗口中的框架數(shù)量location返回一個(gè)包含有關(guān)文檔當(dāng)前位置信息的

location

對象name設(shè)置或返回窗口的名稱navigator對navigator

對象的只讀引用opener返回對創(chuàng)建此窗口的窗口的引用outerHeight返回窗口的外部高度，包含工具條與滾動(dòng)條outerWidth返回窗口的外部寬度，包含工具條與滾動(dòng)條pageXOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的x

坐標(biāo)pageYOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的y

坐標(biāo)parent返回父窗口screen對screen

對象的只讀引用screenLeft返回瀏覽器左邊框到屏幕左邊緣的距離screenTop返回瀏覽器上邊框到屏幕頂端邊緣的距離self返回對當(dāng)前窗口的引用status設(shè)置窗口狀態(tài)欄中的文本top返回頂層的父窗口2.window對象常用方法（1）對話框操作警告對話框，語法格式：alert("文本");詢問回答對話框，語法格式：window.confirm(question);提示對話框，語法格式：mpt(str1,str2);（2）窗口控制窗口位置：

moveTo()和moveBy()窗口大?。?/p>

resizeTo()和resizeBy()滾動(dòng)條的偏移位置：scrollTo()和scrollBy()2.window對象常用方法（3）定時(shí)器按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式：setInterval()在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式：setTimeout()取消由setInterval()方法設(shè)置的定時(shí)器：clearInterval()取消由setTimeout()方法設(shè)置的定時(shí)器：clearTimeout() 【案例6-1】制作彈出對話框特效【案例分析】用戶應(yīng)在注冊后才能訪問購物網(wǎng)站，若用戶沒有注冊則應(yīng)單擊登錄頁面中的“用戶注冊”按鈕，在彈出的注冊頁面中進(jìn)行注冊。若用戶在登錄頁面中單擊“退出”按鈕，則彈出詢問回答對話框。該對話框顯示一行信息“您確定要退出系統(tǒng)嗎？，以及“確定”按鈕和“取消”按鈕。若單擊“確定”按鈕，則關(guān)閉登錄頁面；若單擊“取消”按鈕，則關(guān)閉詢問回答對話框。本案例首先制作一個(gè)包含“用戶注冊”按鈕和“退出”按鈕的頁面，再制作一個(gè)用于顯示信息的注冊頁面。通過編寫JavaScript腳本，實(shí)現(xiàn)當(dāng)單擊“用戶注冊”按鈕時(shí)，打開注冊頁面，當(dāng)單擊“退出”按鈕時(shí)，關(guān)閉注冊頁面?！窘鉀Q方案】1.編寫HTML結(jié)構(gòu)。代碼清單為open.html、register.html。（1）編寫登錄頁面。代碼清單為open.html。（2）編寫注冊頁面。代碼清單為register.html。2.編寫JavaScript腳本。代碼清單為open.js。functionopenwindow(){window.status="系統(tǒng)當(dāng)前狀態(tài)：您正在注冊用戶";//設(shè)置窗口狀態(tài)欄中的文本

if(window.confirm("您確定要前往注冊頁面嗎？")){window.open("register.html");}}functionclosewindow(){//彈出詢問回答對話框，若用戶單擊“確定”按鈕，則關(guān)閉注冊頁面

if(window.confirm("您確定要退出系統(tǒng)嗎？")){opener=null;window.close();}}【案例6-2】實(shí)現(xiàn)購物節(jié)倒計(jì)時(shí)功能【案例分析】在購物節(jié)中往往會(huì)出現(xiàn)倒計(jì)時(shí)來提示顧客搶購時(shí)間、購物節(jié)開始時(shí)間和購物節(jié)剩余時(shí)間。本案例首先創(chuàng)建靜態(tài)頁面，并編寫相應(yīng)的CSS樣式。然后利用Date對象獲取當(dāng)前時(shí)間，并設(shè)置截止時(shí)間來獲取時(shí)間差。最后定義變量，遞歸每秒調(diào)用的函數(shù)，顯示動(dòng)態(tài)效果?！窘鉀Q方案】1.編寫HTML結(jié)構(gòu)。代碼清單為countdown.html。2.編寫CSS樣式。代碼清單為countdown.css。3.編寫JavaScript腳本。代碼清單為countdown.js。window.onload=function(){

setInterval(function(){

varnowTime=newDate();//獲取當(dāng)前時(shí)間

varendTime=newDate("2022-11-1100:00:00");varseconds=parseInt((endTime.getTime()-nowTime.getTime())/1000);vard=parseInt(seconds/3600/24);//天數(shù)

varh=parseInt((seconds/3600)%24);//小時(shí)

varm=parseInt((seconds/60)%60);//分鐘

vars=parseInt(seconds%60);//秒

document.getElementById("countdown").innerHTML="距購物節(jié)還有"

+d+"天"

+h+"小時(shí)"

+m+"分鐘"

+s+"秒";

},1000);};6.3document對象1.document對象常用屬性屬性描述body返回文檔的body

元素title返回文檔的title

元素forms返回文檔的所有form

元素images返回文檔的所有img

元素links返回文檔的所有a

元素cookie返回文檔的cookiedocumentElement返回當(dāng)前文檔的URLreferrer返回使瀏覽者到達(dá)當(dāng)前文檔的

URL2.document對象常用方法方法描述getElementById()通過id

獲取元素getElementsByTagName()通過標(biāo)簽名獲取元素getElementsByClassName()通過class

獲取元素getElementsByName()通過name

獲取元素querySelector()通過選擇器獲取第一個(gè)元素querySelectorAll()通過選擇器獲取所有元素createElement()創(chuàng)建元素節(jié)點(diǎn)createTextNode()創(chuàng)建文本節(jié)點(diǎn)write()輸出內(nèi)容writeln()輸出內(nèi)容并換行【案例6-3】制作復(fù)選框全選效果【案例分析】當(dāng)用戶在購物網(wǎng)站中選擇完要購買的物品后，將會(huì)進(jìn)入購物車頁面進(jìn)行付款，在購物車頁面中，左上角有“全選”復(fù)選框，當(dāng)用戶勾選“全選”復(fù)選框時(shí)，則選中所有商品，當(dāng)用戶取消勾選“全選”復(fù)選框時(shí)則取消對所有商品的選擇。本案例首先創(chuàng)建靜態(tài)頁面。然后定義“全選”復(fù)選框的單擊事件處理程序。最后在該事件處理程序中獲取所有產(chǎn)品的復(fù)選框，實(shí)現(xiàn)選中和取消選擇功能?！窘鉀Q方案】1.編寫HTML結(jié)構(gòu)。代碼清單為shopping.html。2.編寫JavaScript腳本。代碼清單為shopping.js。functioncheck(){

varoInput=document.getElementsByName("product");for(vari=0;i<oInput.length;i++){

if(document.getElementById("all").checked==true){

oInput[i].checked=true;

}else{

oInput[i].checked=false;

}

}}6.4 history對象1.history對象常用屬性history對象存儲(chǔ)了互動(dòng)瀏覽器的瀏覽歷史，用戶可以通過window對象的history屬性訪問該對象，實(shí)際上history屬性僅存儲(chǔ)最近訪問的、有限條目的URL信息。出于安全方面的考慮，history對象不能直接獲取用戶瀏覽過的URL，但可以使瀏覽器實(shí)現(xiàn)“后退”和“前進(jìn)”的功能。history對象的常用屬性為length，用來返回用戶訪問過的網(wǎng)址數(shù)量。2.history對象常用方法方法描述back()移動(dòng)到上一個(gè)網(wǎng)址，等同于單擊瀏覽器的“后退”按鈕。對于第一個(gè)訪問的網(wǎng)址，該方法無效。forward()移動(dòng)到下一個(gè)網(wǎng)址，等同于單擊瀏覽器的“前進(jìn)”按鈕。對于最后一個(gè)訪問的網(wǎng)址，該方法無效。go()接收一個(gè)整數(shù)作為參數(shù)，以當(dāng)前網(wǎng)址為基準(zhǔn)，移動(dòng)到參數(shù)指定的網(wǎng)址，go(1)相當(dāng)于forward()，go(-1)相當(dāng)于back()。如果參數(shù)超過實(shí)際存在的網(wǎng)址范圍，則該方法無效；如果不指定參數(shù)，則默認(rèn)參數(shù)為0，相當(dāng)于刷新當(dāng)前頁面?！景咐?-4】實(shí)現(xiàn)頁面跳轉(zhuǎn)【案例分析】用戶在購物網(wǎng)站中購買完物品后可以在購物商城頁面中單擊“購物車”“收藏”“瀏覽記錄”超鏈接和“前進(jìn)”“后退”按鈕來進(jìn)行頁面的跳轉(zhuǎn)及返回購物商城頁面。本案例首先創(chuàng)建四個(gè)靜態(tài)頁面，用來模擬購物商城頁面、購物車頁面、收藏頁面、瀏覽記錄頁面。然后運(yùn)用history對象的forward()方法和back()方法來模擬頁面的前進(jìn)和后退?！窘鉀Q方案】1.編寫HTML結(jié)構(gòu)。代碼清單為main.html、shoppingcart.html、collect.html、browse.html。（1）編寫購物商城頁面。代碼清單為main.html。（2）編寫購物車頁面。代碼清單為shoppingcart.html。（3）編寫收藏頁面。代碼清單為collect.html。（4）編寫瀏覽記錄頁面。代碼清單為browse.html。【解決方案】2.編寫JavaScript腳本。代碼清單為main.js。//獲取頁面中的標(biāo)簽varbtn1=document.getElementById("btn1");varbtn2=document.getElementById("btn2");//單擊事件btn1.onclick=function(){//返回前一頁

history.back(1);//后退};btn2.onclick=function(){//進(jìn)入下一頁

history.forward(1);//前進(jìn)};6.5location對象1.location對象常用屬性（1）在URL中，包含網(wǎng)絡(luò)協(xié)議、服務(wù)器的主機(jī)名、端口、路徑、參數(shù)及錨點(diǎn)。語法格式：protocol://hostname[:port]/path/[;parameters][?query]#fragmentURL組成部分描述protocol網(wǎng)絡(luò)協(xié)議，如

HTTP、FTP、Mailto

等hostname服務(wù)器的主機(jī)名，如port端口，可選，省略時(shí)使用默認(rèn)端口，如

HTTP

協(xié)議的默認(rèn)端口為80path路徑，如/web/index.html;parameters字符“;”將URL

中的名值對列表與其他部分分割開，為應(yīng)用程序提供了訪問資源所需要的附加信息query參數(shù)，使用鍵/值對的形式，通過&符號(hào)進(jìn)行分隔，如a=3&b=4fragment表示頁面內(nèi)部的錨點(diǎn)，如#res1.location對象常用屬性（2）location對象常用屬性屬性描述hash返回一個(gè)URL

的錨點(diǎn)host返回一個(gè)URL

的服務(wù)器主機(jī)名和端口hostname返回

URL

的服務(wù)器主機(jī)名href返回完整的URLpathname返回

URL

的路徑port返回一個(gè)URL

服務(wù)器使用的端口protocol返回一個(gè)網(wǎng)絡(luò)協(xié)議search返回一個(gè)URL

的查詢部分【案例6-5】獲取URL參數(shù)【案例分析】用戶在完成購物網(wǎng)站的注冊后，則會(huì)進(jìn)入登錄頁面。用戶在登錄時(shí)，需要在登錄頁面（login.html）中提交表單。如果用戶輸入的信息正確，則該信息被提交給index.html，這樣用戶就可以在網(wǎng)站首頁中看到自己使用的用戶名。本案例首先創(chuàng)建靜態(tài)頁面login.html、index.html。然后運(yùn)用表單和location.search屬性來獲取用戶輸入的信息。接著利用分隔符分隔參數(shù)里的鍵和值。最后把數(shù)據(jù)寫入div元素中?！窘鉀Q方案】1.編寫HTML結(jié)構(gòu)。代碼清單為login.html、index.html。（1）編寫登錄頁面。代碼清單為login.html。（2）編寫網(wǎng)站首頁。代碼清單為index.html。2.編寫JavaScript腳本。代碼清單為index.js。//獲取location.search屬性返回的用戶輸入的信息varparams