《web前端技術(shù)》(趙敏)003-0教案 第23課 BOM

PAGE1PAGE1PAGE2PAGE2

課題第24課BOM課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解BOM（2）熟悉window對象、location對象、history對象、navigator對象和screen對象的屬性和方法素質(zhì)目標(biāo)：（1）探索BOM的相關(guān)知識，增強自主學(xué)習(xí)意識（2）加強實戰(zhàn)演練，提升專業(yè)技能，增強實踐能力教學(xué)重難點教學(xué)重點：BOM教學(xué)難點：window對象、location對象、history對象、navigator對象和screen對象的屬性和方法教學(xué)方法問答法、討論法、講授法、實踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計第1節(jié)課：→→→傳授新知（20min）→實戰(zhàn)拓展（20min）第2節(jié)課：→傳授新知（15min）→實戰(zhàn)拓展（20min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)了解BOM【學(xué)生】完成課前任務(wù)通過課前任務(wù)，讓學(xué)生提前了解了解BOM，為課堂上學(xué)習(xí)相關(guān)知識點做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（3min）【教師】提出問題什么是BOM？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識BOM（browserobjectmodel）是指瀏覽器對象模型，它提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)，方便開發(fā)者使用瀏覽器開放的功能開發(fā)出功能更強大的網(wǎng)站。通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（25min）11.2BOM11.2.1認(rèn)識BOM【教師】講解BOM的概念在實際的網(wǎng)頁開發(fā)中，經(jīng)常需要使用JavaScript操作瀏覽器窗口及窗口上的控件，以實現(xiàn)用戶和網(wǎng)頁的交互。為便于訪問瀏覽器的部分功能，瀏覽器為開發(fā)者提供了內(nèi)置對象，這些內(nèi)置對象統(tǒng)稱為瀏覽器對象。各內(nèi)置對象按照一定的形式組織起來的模型統(tǒng)稱為瀏覽器對象模型，即BOM，…（詳見教材）【教師】展示圖“BOM的結(jié)構(gòu)”并講解BOM的結(jié)構(gòu)BOM由多個對象組成，其中的核心對象是window，它是其他內(nèi)置對象的基礎(chǔ)。其他內(nèi)置對象都以屬性的形式添加在window對象下，也可以稱為window的子對象?！ㄔ斠娊滩模菊n堂拓展】由于歷史原因，BOM沒有明確的規(guī)范，現(xiàn)實中存在個別瀏覽器廠商按照自己的想法隨意擴展BOM的情況，這就導(dǎo)致各瀏覽器的BOM不一致。W3C（萬維網(wǎng)聯(lián)盟）將各大瀏覽器通用的BOM標(biāo)準(zhǔn)化，形成了HTML5中的規(guī)范?！緦W(xué)生】聆聽、記錄、理解11.2.2window對象【教師】講解window對象，并演示例子輔助理解window對象表示瀏覽器打開的窗口。如果網(wǎng)頁文檔中包含<frame>或<iframe>標(biāo)簽，那么瀏覽器會為每個框架創(chuàng)建一個window對象，并將它們放在frames集合中。window對象是全局對象，訪問同一個窗口中的屬性和方法時，可以省略window字樣，但如果要跨窗口訪問，則必須寫上相應(yīng)窗口的名稱（或別名）…（詳見教材）【教師】展示表“window對象的常用屬性和方法”并講解window對象的常用屬性和方法上表所展示的方法中，使用alert()、confirm()和prompt()方法可彈出對話，…（詳見教材）1．打開和關(guān)閉瀏覽器窗口open(URL,name,features,replace)方法中包含4個參數(shù)，URL表示將要打開的網(wǎng)頁地址，如果為空則打開空白頁；target表示網(wǎng)頁加載的形式…（詳見教材）【課堂拓展】features參數(shù)為字符串，多個可選值之間使用逗號分隔，如果target參數(shù)不是打開新窗口，那么features參數(shù)設(shè)置無效?！窘處煛空故颈怼皌arget參數(shù)的可選值”和表“features參數(shù)的可選值”并講解內(nèi)容值得注意的是，使用open()方法打開新窗口后，返回值為新窗口的窗口對象，使用該對象的close()方法可以關(guān)閉該窗口。例如：…（詳見教材）【例11-8】打開一個固定大小的新窗口顯示百度首頁，且新窗口可以顯示地址字段、菜單欄、滾動條、狀態(tài)欄（以下提供部分代碼），使用IE瀏覽器加載該網(wǎng)頁文檔，…（詳見教材）【課堂拓展】（1）建議用IE瀏覽器加載例11-8的頁面，如果用Chrome瀏覽器加載，固定窗口大小效果將不能顯示。（2）請不要混淆方法window.open()與方法document.open()，它們的功能完全不同。為了使代碼清楚明白，請使用window.open()，而不要使用open()。2．設(shè)置和取消定時器window對象可以提供定時器的功能。定時器的作用是在規(guī)定的時間內(nèi)自動執(zhí)行某個函數(shù)或表達(dá)式。在JavaScript中，定時器包括兩種，一種是在指定時間后調(diào)用函數(shù)或計算表達(dá)式，使用setTimeout()和clearTimeout()方法設(shè)置和取消；另一種是按照指定周期來調(diào)用函數(shù)或指定表達(dá)式，使用setInterval()和clearInterval()方法設(shè)置和取消?！ㄔ斠娊滩模纠?1-9】使用setTimeout()和clearTimeout()方法設(shè)置和取消定時器…（詳見教材）【例11-10】使用setInterval()和clearInterval()方法設(shè)置和取消定時器…（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果11.2.3location對象【教師】講解location對象，并演示例子輔助理解location對象即地址欄對象，用于獲取或管理瀏覽器地址欄中的相關(guān)數(shù)據(jù)，如獲取當(dāng)前網(wǎng)頁地址，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁等…（詳見教材）【教師】展示表“l(fā)ocation對象的常用屬性和方法”并講解內(nèi)容使用location對象的屬性可以獲取當(dāng)前URL的大部分信息。在日常開發(fā)中，通常通過獲取URL地址傳遞的參數(shù)執(zhí)行指定的操作。此外，通常也會通過對href屬性賦值進行網(wǎng)頁的跳轉(zhuǎn)，代碼如下：…（詳見教材）除了通過對href屬性賦值實現(xiàn)跳轉(zhuǎn)之外，使用location對象的三個方法同樣可以實現(xiàn)網(wǎng)頁跳轉(zhuǎn)，代碼如下：…（詳見教材）【課堂拓展】location對象是一個特殊的對象，它既是window對象的屬性，也是document對象的屬性，也就是說，window.location和document.location指向的是同一個對象。在日常開發(fā)中通常使用window.location或直接使用location?！緦W(xué)生】聆聽、記錄、理解、觀看效果通過教師的講解和演示例子，使學(xué)生了解BOM的概念、window對象、location對象實戰(zhàn)拓展（20min）編寫程序，實現(xiàn)電子時鐘自動走動的效果，并提供一個按鈕控制電子時鐘是否停止走動。【教師】先展示最終效果，并講解做題思路，然后要求學(xué)生編寫程序，有疑問可互相討論，或詢問老師，在學(xué)生做完后可進行講解通過實戰(zhàn)拓展，鍛煉學(xué)生的編程能力第二節(jié)課問題導(dǎo)入（5min）【教師】提出問題History對象，navigator對象，screen對象都是什么？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（15min）【教師】講解history對象，navigator對象，screen對象，演示例子輔助理解11.2.4history對象history對象即歷史對象，用于記錄瀏覽器的歷史訪問操作，存儲瀏覽器當(dāng)前窗口訪問過的所有網(wǎng)頁歷史記錄，使用該對象可以對用戶訪問過的網(wǎng)頁歷史記錄進行操作?！ㄔ斠娊滩模窘處煛空故颈怼癶istory對象的常用屬性和方法”并講解內(nèi)容上表所展示的方法中，go()方法支持傳入一個數(shù)字，傳入正數(shù)表示前進指定頁數(shù)，傳入負(fù)數(shù)表示后退指定頁數(shù)，代碼如下：…（詳見教材）【課堂拓展】值得注意的是，go(-1)和back()方法功能一致，都表示返回到上一個頁面；go(1)和forward()方法功能一致，都表示前進到下一個頁面。11.2.5navigator對象navigator對象即瀏覽器對象，主要用于獲取瀏覽器的相關(guān)信息，如當(dāng)前瀏覽器名稱、瀏覽器版本等。每個瀏覽器的navigator對象都有一套自己的屬性，…（詳見教材）【教師】展示表“navigator對象的常用屬性和方法”并講解內(nèi)容…（詳見教材）【例11-11】獲取Chrome瀏覽器的基本信息…（詳見教材）【課堂拓展】由于一些歷史原因，navigator對象提供的屬性大多不能反映當(dāng)前瀏覽器的真實情況，如appCodeName在非火狐瀏覽器上同樣返回Mozilla。日常開發(fā)中常使用userAgent屬性判斷網(wǎng)頁當(dāng)前運行環(huán)境。11.2.6screen對象screen對象即屏幕對象，用于獲取當(dāng)前設(shè)備屏幕的相關(guān)信息，如當(dāng)前設(shè)備屏幕的寬度和高度、屏幕分辨率等。需要注意的是，不同瀏覽器的screen對象可能支持不同的屬性。…（詳見教材）【教師】展示表“screen對象的屬性及說明”并講解內(nèi)容【例11-12】獲取設(shè)備屏幕的相關(guān)信息…（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果通過教師的講解和演示，讓學(xué)生掌握history對象，navigator對象，screen對象的相關(guān)知識實戰(zhàn)演練（20min）實現(xiàn)線上點菜功能【教師】先演示下最終效果，再講解練習(xí)中較為重要和學(xué)生容易出錯的地方，再要求學(xué)生制作“實現(xiàn)線上點菜功能”項目，遇到不會的問題可以掃描微課二維碼觀看視頻“實現(xiàn)線上點菜功能”（詳見教材），可討論或咨詢老師，可互相幫助日常生活中，我們?nèi)ワ埖瓿燥垥r，偶爾會使用手機或平板點菜下單，本次實戰(zhàn)演練就將實現(xiàn)簡單的線上點菜功能步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第11章\實戰(zhàn)演練”文件夾，然后打開“order.html”文件，在<script>…</script>標(biāo)簽中編寫JavaScript代碼。（詳見教材）步驟2為“添加菜品”按鈕綁定單擊事件。單擊事件觸發(fā)后，判斷輸入框中的內(nèi)容是否為空，如果為空則提示用戶輸入，否則調(diào)用addFood()函數(shù)，傳入輸入框中的內(nèi)容，最后將輸入框內(nèi)容情況。……（詳見教材）步驟3定義添加菜品的函數(shù)addFood()，在函數(shù)內(nèi)部創(chuàng)建對應(yīng)的<li>、<span>及<button>節(jié)點，并調(diào)用appendTextNode()函數(shù)為對應(yīng)節(jié)點添加文本內(nèi)容；然后調(diào)用appendClassAttribute()和appendClickAttribute()函數(shù)為<button>節(jié)點添加class屬性及onclick屬性；最后將<span>節(jié)點和<button>節(jié)點添加到<li>節(jié)點，<li>節(jié)點添加到<ul>列表中。……（詳見教材）步驟4完善其余功能。定義節(jié)點操作的函數(shù)appendTextNode()，函數(shù)中使用createTextNode()方法創(chuàng)建一個文本節(jié)點，并添加到相應(yīng)的節(jié)點中；appendClassAttribute()和appendClickAttribute()函數(shù)中都使用createAttribute()方法創(chuàng)建對應(yīng)的屬性節(jié)點class和onclick；deleteNode()函數(shù)中通過parentNode屬性獲取當(dāng)前訂單的li元素，然后通過removeChild()方法將li元素從列表中刪除?！ㄔ斠娊滩模┎襟E5使用瀏覽器運行該網(wǎng)頁，…。添加多個菜品后，…。……（詳見教材）制作項目，觀看微課，討論通過制作“實現(xiàn)線上點菜功能”，使學(xué)生鞏固所學(xué)知識，鍛煉動手操作能力課堂小結(jié)（3min）【教師】簡要總結(jié)本節(jié)課的要點本節(jié)課主要介紹了BOM的相關(guān)知識。通過本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點掌握以下內(nèi)容。（1）BOM是指瀏覽器對象模型，它由多個對象組成，其中的核心對象是window。window對象表示瀏覽器打開的窗口。（2）location對象即地址欄對象，用于獲取或管理瀏覽器地址欄中的相關(guān)數(shù)據(jù)，如獲取當(dāng)前網(wǎng)頁地址，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁等。（3）history對象即歷史對象，用于記錄瀏覽器的歷史訪問操作，存儲瀏覽器當(dāng)前窗口訪問過的所有網(wǎng)頁歷史記錄，使用該對象可以對用戶訪問過的網(wǎng)頁歷史記錄進行操作。（4）navigator對象即瀏覽器對象，主要用于獲取瀏覽器的相關(guān)信息，如當(dāng)前瀏覽器名稱、瀏覽器版本等。（5）screen對象即屏幕對象，用于獲取當(dāng)前設(shè)備屏幕的相關(guān)信息，如當(dāng)前設(shè)備屏幕的寬度和高度、屏幕分辨率等?！緦W(xué)生】總結(jié)回顧