《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第13周）一、教學基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第6章使用JavaScript腳本（6.10-6.12節(jié)）二、教學目標（一）知識目標掌握BOM（瀏覽器對象模型）的核心對象（window、location、history、navigator）的屬性與方法，能實現(xiàn)瀏覽器窗口控制、頁面跳轉(zhuǎn)、歷史記錄操作等功能。理解HTML5Web存儲的優(yōu)勢，掌握localStorage的基本用法（保存、獲取、刪除數(shù)據(jù)）及復雜數(shù)據(jù)（數(shù)組、對象）的存取方式。能綜合運用BOM、localStorage及DOM操作，完成“防范電信詐騙”“宋韻卿裳”等案例中的交互功能開發(fā)。（二）思政目標通過localStorage本地存儲案例，培養(yǎng)數(shù)據(jù)安全意識，理解用戶隱私保護的重要性。在“防范電信詐騙”案例開發(fā)中，強化社會責任感，體會技術(shù)服務社會的價值。從“宋韻卿裳”案例的傳統(tǒng)文化傳承中，激發(fā)文化自信，培養(yǎng)“技術(shù)+文化”的融合創(chuàng)新思維。三、教學重難點（一）教學重點BOM核心對象的應用：window：open()、close()、setTimeout()location：href、reload()、replace()history：back()、forward()、go()localStorage的操作：setItem()、getItem()、removeItem()、clear()，及JSON格式轉(zhuǎn)換（JSON.stringify()、JSON.parse()）。綜合案例中的交互邏輯：輪播切換、本地存儲留言、動態(tài)DOM操作。（二）教學難點window.open()的參數(shù)配置及瀏覽器彈窗限制的處理。localStorage與sessionStorage的區(qū)別及應用場景選擇。案例中多技術(shù)點的整合（如BOM控制+DOM操作+本地存儲）。四、教學方法講授法：系統(tǒng)講解BOM對象、Web存儲的概念及語法。案例演示法：結(jié)合教材示例（例6-61至例6-67），實時演示窗口控制、本地存儲數(shù)據(jù)的效果。情境教學法：在“防范電信詐騙”案例中融入反詐知識，結(jié)合技術(shù)實現(xiàn)講解社會意義。項目驅(qū)動法：實踐課以“本地存儲式留言板”為任務，綜合應用所學知識。五、教學過程（一）第一學時：BOM對象及操作（40分鐘）導入（5分鐘）情境提問：“如何實現(xiàn)網(wǎng)頁自動跳轉(zhuǎn)？如何控制瀏覽器前進/后退？”引出主題：BOM提供了與瀏覽器交互的接口，是實現(xiàn)頁面控制的核心。BOM核心對象講解（30分鐘）window對象：方法：open(URL,name,features)（打開新窗口）、close()（關(guān)閉窗口）、setTimeout(code,ms)（延遲執(zhí)行）。案例：點擊按鈕打開新窗口（例6-61），5秒后自動返回。location對象：屬性：href（完整URL）、pathname（路徑）。方法：reload()（刷新頁面）、replace(URL)（替換當前頁面，不保留歷史）。案例：點擊按鈕跳轉(zhuǎn)到首頁（location.href="index.html"）。history對象：方法：back()（后退）、forward()（前進）、go(n)（跳轉(zhuǎn)n步，n為負數(shù)后退）。案例：模擬瀏覽器前進/后退按鈕功能（例6-65）。navigator對象：屬性：userAgent（瀏覽器信息）、platform（操作系統(tǒng)）。應用：判斷瀏覽器類型（如是否為Chrome）。課堂練習（5分鐘）任務：編寫代碼實現(xiàn)“3秒后自動跳轉(zhuǎn)到百度首頁”，使用setTimeout()和location.href。（二）第二學時：localStorage及綜合案例（40分鐘）復習導入（5分鐘）回顧：BOM對象的層級關(guān)系（window包含location、history等）。提問：“如何在關(guān)閉瀏覽器后仍保留用戶輸入的信息？”引出Web存儲。localStorage講解（15分鐘）基本用法：保存：localStorage.setItem("name","Tom")獲?。簂ocalStorage.getItem("name")刪除：localStorage.removeItem("name")清空：localStorage.clear()復雜數(shù)據(jù)存儲：數(shù)組/對象需先用JSON.stringify()轉(zhuǎn)換為字符串，讀取時用JSON.parse()還原。案例：存儲用戶信息對象{name:"Tom",age:20}并讀取。綜合案例解析（20分鐘）“防范電信詐騙”案例：輪播切換：用setInterval()實現(xiàn)自動輪播，結(jié)合location控制頁面跳轉(zhuǎn)。交互邏輯：導航欄懸停切換對應內(nèi)容，停止自動輪播（6.12.1節(jié)）。“宋韻卿裳”案例：本地存儲：保存用戶選擇的發(fā)型，刷新后仍顯示選中狀態(tài)。動態(tài)DOM：可嘗試用createElement()創(chuàng)建發(fā)型選項，點擊后更新頭像。（三）實踐學時：本地存儲式留言板（40分鐘）任務布置（5分鐘）需求：頁面包含輸入框、“發(fā)表”按鈕、留言列表。輸入內(nèi)容后點擊發(fā)表，留言實時顯示在列表中，并通過localStorage保存。刷新頁面后，留言列表從localStorage中讀取并顯示。每條留言后有“刪除”按鈕，點擊可刪除對應留言及本地存儲數(shù)據(jù)。開發(fā)指導（25分鐘）步驟1：搭建HTML結(jié)構(gòu)（輸入框、按鈕、ul列表）。步驟2：編寫發(fā)表功能：獲取輸入值→創(chuàng)建li節(jié)點→添加到ul→用localStorage.setItem()保存（數(shù)組形式）。步驟3：編寫刪除功能：點擊按鈕→獲取留言索引→從DOM和數(shù)組中刪除→更新localStorag