《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第12周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第6章使用JavaScript腳本（6.7-6.9節(jié)）二、教學(xué)目標(biāo)（一）知識目標(biāo)掌握J(rèn)avaScript對象操作語句（with、for...in）的用法，理解this、new、in、delete等關(guān)鍵字及操作符的作用。掌握常用內(nèi)置對象（數(shù)組、字符串、數(shù)學(xué)、日期）的核心屬性與方法，能靈活運用其解決實際問題。理解DOM（文檔對象模型）的概念及樹狀結(jié)構(gòu)，掌握DOM節(jié)點的類型、訪問方式及增刪改查操作。能綜合運用對象操作、內(nèi)置對象及DOM操作實現(xiàn)簡單的網(wǎng)頁交互功能。（二）思政目標(biāo)通過for...in遍歷對象屬性等案例，培養(yǎng)邏輯清晰的編程思維和嚴(yán)謹(jǐn)?shù)拇a調(diào)試習(xí)慣。在DOM節(jié)點操作實踐中，體會“結(jié)構(gòu)-行為”分離的模塊化思想，提升代碼可維護性意識。結(jié)合案例開發(fā)，培養(yǎng)發(fā)現(xiàn)問題、分析問題并利用內(nèi)置API解決問題的能力，激發(fā)創(chuàng)新思維。三、教學(xué)重難點（一）教學(xué)重點for...in語句遍歷對象屬性的用法及this關(guān)鍵字在不同場景下的指向。內(nèi)置對象的核心方法：數(shù)組：push()、pop()、splice()、join()字符串：indexOf()、slice()、split()日期：getFullYear()、getHours()等獲取時間的方法數(shù)學(xué)：Math.random()、Math.floor()DOM節(jié)點的訪問（父子節(jié)點、兄弟節(jié)點）與操作（創(chuàng)建、插入、刪除、替換）。（二）教學(xué)難點this關(guān)鍵字在全局、對象方法、事件處理中的指向差異。DOM節(jié)點操作中childNodes與children的區(qū)別（包含文本節(jié)點vs僅元素節(jié)點）。動態(tài)創(chuàng)建DOM節(jié)點并添加到文檔流的完整流程（創(chuàng)建元素→設(shè)置屬性→添加到父節(jié)點）。內(nèi)置對象方法的參數(shù)細(xì)節(jié)（如splice()的刪除與插入功能）。四、教學(xué)方法講授法：系統(tǒng)講解對象操作語句、內(nèi)置對象及DOM的核心概念與語法。案例演示法：結(jié)合教材示例（例6-37至例6-60），實時運行代碼，直觀展示內(nèi)置對象方法及DOM操作效果。對比分析法：對比for...in與普通for循環(huán)的適用場景、this在不同場景下的指向差異。任務(wù)驅(qū)動法：實踐課通過“動態(tài)待辦事項列表”制作任務(wù)，綜合應(yīng)用對象遍歷、數(shù)組操作及DOM節(jié)點增刪。五、教學(xué)過程（一）第一學(xué)時：對象操作語句與內(nèi)置對象（40分鐘）導(dǎo)入（5分鐘）提問：“如何遍歷一個用戶對象的所有屬性（如姓名、年齡）？如何快速獲取當(dāng)前日期并格式化？”引出主題：對象操作語句用于便捷處理對象屬性，內(nèi)置對象封裝了常用功能，是高效開發(fā)的基礎(chǔ)。JavaScript對象的操作語句（15分鐘）with語句：語法：with(對象){直接訪問屬性/方法}，簡化對象屬性的連續(xù)訪問（例：with(Math){x=cos(PI)}）。說明：不推薦過度使用，可能降低代碼可讀性。for...in語句：語法：for(變量in對象){遍歷對象屬性}，用于枚舉對象的可枚舉屬性（例6-37）。案例：遍歷student對象的name、age屬性并輸出。對象關(guān)鍵字與操作符：this：指向當(dāng)前對象（全局環(huán)境指向window，對象方法中指向?qū)ο蟊旧恚录兄赶蛴|發(fā)元素）。new：創(chuàng)建對象實例（如newDate()）。in：判斷對象是否包含某屬性（如"age"instudent）。delete：刪除對象屬性（如deletestudent.age）。常用內(nèi)置對象（20分鐘）數(shù)組對象（Array）：核心方法：push()（添加元素）、pop()（刪除最后一個元素）、splice(index,howmany,items)（刪除/插入元素）、join(separator)（拼接為字符串）。案例：用splice()實現(xiàn)數(shù)組元素的排序（例6-42）。字符串對象（String）：核心方法：indexOf(substr)（查找子串位置）、slice(start,end)（截取子串）、split(separator)（分割為數(shù)組）。案例：用split()將日期字符串“2024-10-01”分割為年、月、日數(shù)組。數(shù)學(xué)對象（Math）：常用方法：Math.random()（生成0-1隨機數(shù)）、Math.floor(x)（向下取整）、Math.PI（圓周率常量）。案例：生成1-100的隨機整數(shù)（Math.floor(Math.random()*100)+1）。日期對象（Date）：常用方法：getFullYear()（年）、getMonth()（月，0-11）、getDate()（日）、getHours()（時）。案例：獲取當(dāng)前日期并格式化為“2024年9月3日”（例6-45）。（二）第二學(xué)時：DOM對象及操作（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）回顧：數(shù)組slice()與字符串slice()的異同，for...in遍歷數(shù)組下標(biāo)。提問：“如何用JavaScript動態(tài)在網(wǎng)頁中添加一個列表項？”引出DOM操作。DOM對象及操作（30分鐘）HTMLDOM簡介：概念：DOM將HTML文檔視為樹狀結(jié)構(gòu)，每個節(jié)點（元素、文本、屬性）都是對象。節(jié)點類型：元素節(jié)點（nodeType=1）、文本節(jié)點（nodeType=3）、屬性節(jié)點（nodeType=2）（表6-25）。DOM節(jié)點的訪問：子節(jié)點：childNodes（含文本節(jié)點）、children（僅元素節(jié)點）、firstElementChild、lastElementChild。父節(jié)點：parentNode、offsetParent（最近定位父節(jié)點）。兄弟節(jié)點：nextElementSibling、previousElementSibling。案例：訪問元素子節(jié)點（例6-48）。DOM節(jié)點的操作：創(chuàng)建節(jié)點：document.createElement(tagName)（元素）、document.createTextNode(text)（文本）。插入節(jié)點：parent.appendChild(child)（末尾插入）、parent.insertBefore(newNode,refNode)（指定位置插入）。刪除節(jié)點：parent.removeChild(child)。替換節(jié)點：parent.replaceChild(newNode,oldNode)。案例：動態(tài)創(chuàng)建并添加一個帶文本的li到ul中（例6-54）。案例解析（5分鐘）分析“節(jié)點的添加和刪除”案例（6.9.5節(jié)）：如何通過點擊鏈接創(chuàng)建節(jié)點，點擊“X”刪除節(jié)點，理解事件冒泡與節(jié)點關(guān)系的應(yīng)用。（三）實踐學(xué)時：動態(tài)待辦事項列表（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個待辦事項列表，功能如下：輸入框中輸入內(nèi)容，點擊“添加”按鈕，動態(tài)創(chuàng)建一個待辦項（li），包含內(nèi)容和“刪除”按鈕。點擊“刪除”按鈕，移除對應(yīng)的待辦項。用數(shù)組存儲所有待辦事項，添加/刪除時同步更新數(shù)組。提示：使用createElement創(chuàng)建節(jié)點，appendChild添加節(jié)點，removeChild刪除節(jié)點，addEventListener綁定事件。學(xué)生實踐（30分鐘）教師指導(dǎo)重點