《網(wǎng)頁設(shè)計與 Web 前端開發(fā)》教案 莫小梅 第10-16周 ? 使用JavaScript腳本（6.1-6.3節(jié)）- Vue框架（8.3、8.4節(jié)8.5節(jié)的后半部分）_第1頁
《網(wǎng)頁設(shè)計與 Web 前端開發(fā)》教案 莫小梅 第10-16周 ? 使用JavaScript腳本（6.1-6.3節(jié)）- Vue框架（8.3、8.4節(jié)8.5節(jié)的后半部分）_第2頁
《網(wǎng)頁設(shè)計與 Web 前端開發(fā)》教案 莫小梅 第10-16周 ? 使用JavaScript腳本（6.1-6.3節(jié)）- Vue框架（8.3、8.4節(jié)8.5節(jié)的后半部分）_第3頁
《網(wǎng)頁設(shè)計與 Web 前端開發(fā)》教案 莫小梅 第10-16周 ? 使用JavaScript腳本（6.1-6.3節(jié)）- Vue框架（8.3、8.4節(jié)8.5節(jié)的后半部分）_第4頁
《網(wǎng)頁設(shè)計與 Web 前端開發(fā)》教案 莫小梅 第10-16周 ? 使用JavaScript腳本（6.1-6.3節(jié)）- Vue框架（8.3、8.4節(jié)8.5節(jié)的后半部分）_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第10周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第6章使用JavaScript腳本（6.1-6.3節(jié)）二、教學(xué)目標(biāo)（一）知識目標(biāo)了解JavaScript的起源、特點及核心功能（頁面交互、數(shù)據(jù)驗證、動態(tài)效果等）。掌握在網(wǎng)頁中引入JavaScript的三種方式（內(nèi)嵌腳本、外部腳本文件、事件屬性/href值）及代碼規(guī)范。熟悉JavaScript基本元素：變量（var/let）、常量（const）、數(shù)據(jù)類型（number、string、boolean、null、undefined、object）、運算符（算術(shù)、賦值、比較、邏輯等）及數(shù)據(jù)類型轉(zhuǎn)換方法。理解DOM0級事件的概念，掌握常見事件（onclick、onmouseenter等）的綁定與解綁方法。掌握操作HTML元素屬性（常規(guī)屬性、自定義屬性）及CSS樣式（內(nèi)聯(lián)樣式、類名操作）的常用方法。（二）思政目標(biāo)通過規(guī)范編寫JavaScript代碼（如變量命名、注釋規(guī)范），培養(yǎng)嚴(yán)謹(jǐn)、細(xì)致的編碼習(xí)慣。結(jié)合事件交互案例，理解“用戶為中心”的開發(fā)理念，培養(yǎng)關(guān)注細(xì)節(jié)的工匠精神。在屬性與樣式操作實踐中，體會“結(jié)構(gòu)-樣式-行為”分離的模塊化思維，提升代碼可維護性意識。三、教學(xué)重難點（一）教學(xué)重點JavaScript的三種引入方式及適用場景（內(nèi)嵌腳本用于局部功能、外部腳本用于多頁面復(fù)用）。變量和常量聲明（var/let/const的區(qū)別）及數(shù)據(jù)類型的判斷與轉(zhuǎn)換。DOM0級事件的綁定（如element.onclick=function()）及事件觸發(fā)邏輯。元素屬性操作（getAttribute/setAttribute）與CSS樣式控制（style屬性、className）。（二）教學(xué)難點var/let/const的作用域差異（函數(shù)作用域與塊級作用域）。事件冒泡現(xiàn)象（如子元素事件觸發(fā)父元素事件）及處理思路。內(nèi)聯(lián)樣式操作中CSS屬性的駝峰命名法（如backgroundColor對應(yīng)background-color）。自定義屬性與JS對象屬性的區(qū)別（是否顯式存在于HTML標(biāo)簽中）。四、教學(xué)方法講授法：系統(tǒng)講解JavaScript基礎(chǔ)概念、語法規(guī)則及操作方法。案例演示法：結(jié)合教材示例（如例6-1至例6-20），實時演示代碼效果，對比不同寫法的差異。對比分析法：對比var/let/const的作用域、不同事件綁定方式的優(yōu)劣，加深理解。任務(wù)驅(qū)動法：實踐課通過“互動按鈕面板”制作任務(wù)，綜合應(yīng)用屬性操作、事件綁定和樣式控制。五、教學(xué)過程（一）第一學(xué)時：JavaScript基礎(chǔ)與事件（40分鐘）導(dǎo)入（5分鐘）展示靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的對比（如按鈕點擊無反應(yīng)vs彈出提示），提問：“如何讓網(wǎng)頁‘動起來’？”引出JavaScript的作用。簡要介紹本節(jié)課內(nèi)容：JavaScript的引入方式、代碼規(guī)范及事件處理。初識JavaScript（15分鐘）核心概念：解釋JavaScript的跨平臺特性、與Java的區(qū)別，及ECMAScript、DOM、BOM的組成關(guān)系。引入方式：內(nèi)嵌腳本：在<script>標(biāo)簽中直接編寫代碼（例6-1），說明可放置在<head>或<body>的注意事項。外部腳本：創(chuàng)建.js文件，通過<scriptsrc="路徑">引入（例6-2），強調(diào)src屬性與標(biāo)簽內(nèi)代碼不可共存。事件屬性/href值：如<buttononclick="alert('hi')">或<ahref="javascript:alert('hi')">（例6-3）。代碼規(guī)范：強調(diào)大小寫敏感、分號使用、注釋（//單行、/**/多行）的重要性。彈窗調(diào)試與DOM0級事件（15分鐘）彈窗工具：演示alert()（警告框）、confirm()（確認(rèn)框，返回布爾值）、prompt()（提示框，接收輸入）的用法，及console.log()在開發(fā)者工具中的調(diào)試應(yīng)用（例6-5）。DOM0級事件：事件綁定：通過element.事件名=函數(shù)綁定（如btn.onclick=function(){}），演示單擊、鼠標(biāo)移入/移出事件（例6-10）。事件解綁：賦值null（如btn.onclick=null）。小結(jié)（5分鐘）回顧引入方式的適用場景及事件綁定的基本語法。布置思考題：“外部腳本文件與內(nèi)嵌腳本相比，優(yōu)勢是什么？”（二）第二學(xué)時：基本元素與樣式操作（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對事件綁定的掌握：“如何實現(xiàn)按鈕點擊后隱藏自身？”引出本節(jié)課內(nèi)容：變量、數(shù)據(jù)類型及元素屬性與樣式操作。JavaScript基本元素（15分鐘）變量與常量：var（函數(shù)作用域、變量提升）、let（塊級作用域、不可重復(fù)聲明）、const（常量，不可修改）的對比。變量命名規(guī)則：字母/下劃線/$開頭，區(qū)分大小寫，避免關(guān)鍵字。數(shù)據(jù)類型：基本類型：number（數(shù)值）、string（字符串）、boolean（布爾）、null（空對象）、undefined（未定義）。引用類型：object（對象，含數(shù)組、自定義對象）。類型判斷：typeof操作符（注意typeofnull返回object的特殊性）。運算符與類型轉(zhuǎn)換：算術(shù)、賦值、比較（==

vs

===）、邏輯運算符的用法。顯式轉(zhuǎn)換：Number()、parseInt()、String()（例6-14）；隱式轉(zhuǎn)換：如"5"-2結(jié)果為3。操作元素屬性與CSS樣式（15分鐘）屬性操作：常規(guī)屬性：element.id、element.className（注意class屬性用className訪問）。自定義屬性：setAttribute("屬性名","值")與getAttribute("屬性名")（例6-16）。樣式操作：內(nèi)聯(lián)樣式：element.style.屬性名（如div.style.color="red"），強調(diào)駝峰命名（例6-20）。類名操作：element.className="類名"（添加預(yù)定義樣式，如6.3.4節(jié)的案例實踐）。案例：實現(xiàn)鼠標(biāo)移入元素時改變背景色，移出時恢復(fù)（結(jié)合onmouseenter/onmouseleave事件）。小結(jié)（5分鐘）梳理變量聲明、類型轉(zhuǎn)換、屬性與樣式操作的核心要點。預(yù)告實踐課任務(wù)：制作包含動態(tài)樣式和事件響應(yīng)的交互面板。（三）實踐學(xué)時：互動按鈕面板制作（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個包含3個按鈕的互動面板，功能如下：按鈕1：點擊后彈出輸入框，將輸入內(nèi)容顯示在面板的文本區(qū)域（用prompt()和innerHTML）。按鈕2：鼠標(biāo)移入時背景色變?yōu)樗{(lán)色，移出時恢復(fù)（用onmouseenter/onmouseleave和style屬性）。按鈕3：點擊后切換面板的自定義屬性data-status值（用setAttribute），并根據(jù)值切換面板邊框樣式（用className）。學(xué)生實踐（30分鐘）教師巡回指導(dǎo)，重點解決：let聲明變量時的塊級作用域問題（如循環(huán)中綁定事件的變量引用）。樣式屬性的駝峰命名錯誤（如background-color寫成backgroundColor）。事件冒泡導(dǎo)致的意外觸發(fā)（如面板點擊事件影響按鈕）。成果點評（5分鐘）選取2份作品，點評事件綁定的合理性、樣式控制的規(guī)范性及代碼可讀性。強調(diào)：合理使用變量作用域和事件綁定方式，可減少代碼沖突與冗余。六、教學(xué)反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第11周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第6章使用JavaScript腳本（6.4-6.6節(jié)）二、教學(xué)目標(biāo)（一）知識目標(biāo)掌握J(rèn)avaScript條件語句（if單/雙/多分支、switch）的語法及應(yīng)用場景。掌握循環(huán)語句（for、while、do-while）的使用，理解break與continue的區(qū)別。掌握函數(shù)的定義（聲明式、表達式）、調(diào)用方式、參數(shù)傳遞（形參、實參、不定參arguments）及返回值用法。理解變量作用域（全局作用域、局部作用域、塊級作用域）及var/let/const的差異。掌握函數(shù)與條件、循環(huán)的結(jié)合使用，能通過函數(shù)封裝重復(fù)邏輯。（二）思政目標(biāo)通過規(guī)范函數(shù)命名、注釋及代碼結(jié)構(gòu)，培養(yǎng)嚴(yán)謹(jǐn)細(xì)致的編程習(xí)慣。在循環(huán)與條件的嵌套邏輯中，鍛煉邏輯思維的條理性，提升問題拆解能力。結(jié)合函數(shù)封裝案例，體會模塊化編程的優(yōu)勢，樹立代碼復(fù)用與可維護性意識。三、教學(xué)重難點（一）教學(xué)重點條件語句的嵌套使用（如if-elseif多場景判斷）及switch的break穿透問題。循環(huán)語句的執(zhí)行流程（初始化、條件判斷、迭代）及循環(huán)嵌套（如二維數(shù)組遍歷）。函數(shù)的參數(shù)傳遞機制（值傳遞）、返回值作用及不定參arguments的使用。變量作用域的邊界（函數(shù)內(nèi)外、代碼塊內(nèi)外）及var的變量提升現(xiàn)象。（二）教學(xué)難點switch語句中省略break導(dǎo)致的邏輯錯誤及規(guī)避方法。循環(huán)語句中的break（終止循環(huán)）與continue（跳過本次循環(huán)）的區(qū)別應(yīng)用。塊級作用域與函數(shù)作用域的差異（let與var的作用域邊界）。函數(shù)嵌套中變量的作用域鏈查找規(guī)則。四、教學(xué)方法講授法：系統(tǒng)講解條件語句、循環(huán)語句及函數(shù)的語法規(guī)則與核心概念。案例演示法：結(jié)合教材示例（例6-21至例6-36），實時運行代碼，對比不同寫法的執(zhí)行效果。對比分析法：對比if與switch的適用場景、for與while的使用時機，加深理解。任務(wù)驅(qū)動法：實踐課通過“星級評分系統(tǒng)”制作任務(wù)，綜合應(yīng)用函數(shù)、條件與循環(huán)。五、教學(xué)過程（一）第一學(xué)時：條件語句與循環(huán)語句（40分鐘）導(dǎo)入（5分鐘）展示場景：“根據(jù)學(xué)生成績（0-100分）判斷等級（A/B/C/D）”，提問：“如何用代碼實現(xiàn)多檔判斷？”引出主題：條件語句用于分支邏輯，循環(huán)語句用于重復(fù)操作，二者是編程的基礎(chǔ)控制結(jié)構(gòu)。條件語句講解（15分鐘）if語句：單分支：if(條件){語句}（適用于單一判斷）。雙分支：if(條件){語句1}else{語句2}（適用于二選一場景）。多分支：if(條件1){語句1}elseif(條件2){語句2}else{語句3}（如結(jié)合時間的問候語輸出，例6-23）。案例演示：根據(jù)當(dāng)前小時數(shù)顯示“早上/中午/下午/晚上好”（結(jié)合Date().getHours()）。switch語句：語法：switch(表達式){case值1:語句1;break;...default:語句n}。關(guān)鍵點：break的作用（防止穿透），default的默認(rèn)執(zhí)行邏輯。案例對比：用switch實現(xiàn)星期幾判斷（例6-24），對比if與switch的效率差異（固定值匹配用switch更優(yōu)）。循環(huán)語句講解（15分鐘）for循環(huán)：語法：for(初始化;條件;迭代){循環(huán)體}，適用于已知循環(huán)次數(shù)的場景。案例：生成1-6級標(biāo)題（例6-25），演示循環(huán)變量的遞增/遞減邏輯。while與do-while：區(qū)別：do-while先執(zhí)行后判斷（至少執(zhí)行1次），while先判斷后執(zhí)行。案例：計算1-100的累加和（分別用兩種循環(huán)實現(xiàn)，對比執(zhí)行流程）。break與continue：演示：循環(huán)輸出1-10，遇到3跳過（continue），遇到7終止（break），對比執(zhí)行結(jié)果。小結(jié)（5分鐘）回顧條件語句的嵌套規(guī)則與循環(huán)語句的核心要素。布置思考題：“如何用for循環(huán)遍歷數(shù)組，并通過if判斷篩選出偶數(shù)？”（二）第二學(xué)時：函數(shù)與作用域（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查練習(xí)：“用for循環(huán)和if語句，找出數(shù)組[2,5,9,12,15]中的奇數(shù)并求和”。引出主題：重復(fù)邏輯可通過函數(shù)封裝，提升代碼復(fù)用性——本節(jié)課聚焦函數(shù)與作用域。函數(shù)基礎(chǔ)講解（15分鐘）函數(shù)定義：聲明式：function函數(shù)名(參數(shù)){函數(shù)體}（如functionadd(x,y){returnx+y}）。表達式：let變量名=function(參數(shù)){函數(shù)體}（匿名函數(shù)賦值）。參數(shù)與返回值：形參：函數(shù)定義時的參數(shù)（如x,y）；實參：調(diào)用時傳遞的值（如add(3,5)中的3,5）。不定參：arguments對象（函數(shù)內(nèi)自動生成，存儲所有實參，例6-31）。return語句：終止函數(shù)并返回結(jié)果（無return時默認(rèn)返回undefined）。案例演示：封裝計算任意個數(shù)之和的函數(shù)（用arguments實現(xiàn)，例6-32）。變量作用域講解（15分鐘）作用域類型：全局作用域：函數(shù)外聲明的變量（如vara=10），全頁面可訪問。局部作用域：函數(shù)內(nèi)用var聲明的變量（僅函數(shù)內(nèi)可訪問）。塊級作用域：{}內(nèi)用let/const聲明的變量（僅塊內(nèi)可訪問，例6-36）。var/let/const對比：作用域：var（函數(shù)）、let/const（塊級）。變量提升：var存在（聲明提前），let/const不存在（暫時性死區(qū)）。重復(fù)聲明：var允許，let/const禁止。案例：演示不同聲明方式在循環(huán)、條件塊中的作用域邊界。小結(jié)（5分鐘）梳理函數(shù)封裝的優(yōu)勢與作用域的核心規(guī)則。預(yù)告實踐課任務(wù)：制作“星級評分系統(tǒng)”，綜合應(yīng)用函數(shù)、循環(huán)與條件判斷。（三）實踐學(xué)時：星級評分系統(tǒng)制作（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個5星評分組件，功能如下：鼠標(biāo)移入星星時，當(dāng)前及左側(cè)星星變亮（用循環(huán)遍歷星星數(shù)組，結(jié)合if判斷索引）。點擊星星時，記錄評分（用函數(shù)封裝評分邏輯，返回選中的星級）。鼠標(biāo)移出時，保持已選中的星級狀態(tài)（用條件語句判斷是否有選中記錄）。提示：用ul布局星星列表，通過className切換亮/暗樣式。學(xué)生實踐（30分鐘）教師巡回指導(dǎo)，重點解決：循環(huán)中綁定事件時的變量作用域問題（用let避免var的共享變量問題）。函數(shù)參數(shù)傳遞與返回值的正確使用（如獲取當(dāng)前星星的索引并返回）。條件語句與循環(huán)的嵌套邏輯（如遍歷星星時判斷是否小于當(dāng)前索引）。成果點評（5分鐘）選取2份作品，點評函數(shù)封裝的合理性、循環(huán)效率及代碼規(guī)范性。強調(diào)：合理劃分函數(shù)職責(zé)（如單獨封裝“高亮星星”“記錄評分”函數(shù)）可提升代碼可讀性。六、教學(xué)反思（空）《網(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)重點：動態(tài)節(jié)點的事件綁定（刪除按鈕點擊事件）。數(shù)組與DOM節(jié)點的同步更新。避免childNodes包含空白文本節(jié)點的坑（推薦用children）。成果點評（5分鐘）選取2份作品，點評節(jié)點操作的規(guī)范性、數(shù)組與DOM同步的邏輯性。強調(diào)：DOM操作需注意性能（批量操作時先脫離文檔流），培養(yǎng)優(yōu)化意識。六、教學(xué)反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第13周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第6章使用JavaScript腳本（6.10-6.12節(jié)）二、教學(xué)目標(biāo)（一）知識目標(biāo)掌握BOM（瀏覽器對象模型）的核心對象（window、location、history、navigator）的屬性與方法，能實現(xiàn)瀏覽器窗口控制、頁面跳轉(zhuǎn)、歷史記錄操作等功能。理解HTML5Web存儲的優(yōu)勢，掌握localStorage的基本用法（保存、獲取、刪除數(shù)據(jù)）及復(fù)雜數(shù)據(jù)（數(shù)組、對象）的存取方式。能綜合運用BOM、localStorage及DOM操作，完成“防范電信詐騙”“宋韻卿裳”等案例中的交互功能開發(fā)。（二）思政目標(biāo)通過localStorage本地存儲案例，培養(yǎng)數(shù)據(jù)安全意識，理解用戶隱私保護的重要性。在“防范電信詐騙”案例開發(fā)中，強化社會責(zé)任感，體會技術(shù)服務(wù)社會的價值。從“宋韻卿裳”案例的傳統(tǒng)文化傳承中，激發(fā)文化自信，培養(yǎng)“技術(shù)+文化”的融合創(chuàng)新思維。三、教學(xué)重難點（一）教學(xué)重點BOM核心對象的應(yīng)用：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操作。（二）教學(xué)難點window.open()的參數(shù)配置及瀏覽器彈窗限制的處理。localStorage與sessionStorage的區(qū)別及應(yīng)用場景選擇。案例中多技術(shù)點的整合（如BOM控制+DOM操作+本地存儲）。四、教學(xué)方法講授法：系統(tǒng)講解BOM對象、Web存儲的概念及語法。案例演示法：結(jié)合教材示例（例6-61至例6-67），實時演示窗口控制、本地存儲數(shù)據(jù)的效果。情境教學(xué)法：在“防范電信詐騙”案例中融入反詐知識，結(jié)合技術(shù)實現(xiàn)講解社會意義。項目驅(qū)動法：實踐課以“本地存儲式留言板”為任務(wù)，綜合應(yīng)用所學(xué)知識。五、教學(xué)過程（一）第一學(xué)時：BOM對象及操作（40分鐘）導(dǎo)入（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)（替換當(dāng)前頁面，不保留歷史）。案例：點擊按鈕跳轉(zhuǎn)到首頁（location.href="index.html"）。history對象：方法：back()（后退）、forward()（前進）、go(n)（跳轉(zhuǎn)n步，n為負(fù)數(shù)后退）。案例：模擬瀏覽器前進/后退按鈕功能（例6-65）。navigator對象：屬性：userAgent（瀏覽器信息）、platform（操作系統(tǒng)）。應(yīng)用：判斷瀏覽器類型（如是否為Chrome）。課堂練習(xí)（5分鐘）任務(wù)：編寫代碼實現(xiàn)“3秒后自動跳轉(zhuǎn)到百度首頁”，使用setTimeout()和location.href。（二）第二學(xué)時：localStorage及綜合案例（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）回顧：BOM對象的層級關(guān)系（window包含location、history等）。提問：“如何在關(guān)閉瀏覽器后仍保留用戶輸入的信息？”引出Web存儲。localStorage講解（15分鐘）基本用法：保存：localStorage.setItem("name","Tom")獲?。簂ocalStorage.getItem("name")刪除：localStorage.removeItem("name")清空：localStorage.clear()復(fù)雜數(shù)據(jù)存儲：數(shù)組/對象需先用JSON.stringify()轉(zhuǎn)換為字符串，讀取時用JSON.parse()還原。案例：存儲用戶信息對象{name:"Tom",age:20}并讀取。綜合案例解析（20分鐘）“防范電信詐騙”案例：輪播切換：用setInterval()實現(xiàn)自動輪播，結(jié)合location控制頁面跳轉(zhuǎn)。交互邏輯：導(dǎo)航欄懸停切換對應(yīng)內(nèi)容，停止自動輪播（6.12.1節(jié)）?！八雾嵡渖选卑咐罕镜卮鎯Γ罕４嬗脩暨x擇的發(fā)型，刷新后仍顯示選中狀態(tài)。動態(tài)DOM：可嘗試用createElement()創(chuàng)建發(fā)型選項，點擊后更新頭像。（三）實踐學(xué)時：本地存儲式留言板（40分鐘）任務(wù)布置（5分鐘）需求：頁面包含輸入框、“發(fā)表”按鈕、留言列表。輸入內(nèi)容后點擊發(fā)表，留言實時顯示在列表中，并通過localStorage保存。刷新頁面后，留言列表從localStorage中讀取并顯示。每條留言后有“刪除”按鈕，點擊可刪除對應(yīng)留言及本地存儲數(shù)據(jù)。開發(fā)指導(dǎo)（25分鐘）步驟1：搭建HTML結(jié)構(gòu)（輸入框、按鈕、ul列表）。步驟2：編寫發(fā)表功能：獲取輸入值→創(chuàng)建li節(jié)點→添加到ul→用localStorage.setItem()保存（數(shù)組形式）。步驟3：編寫刪除功能：點擊按鈕→獲取留言索引→從DOM和數(shù)組中刪除→更新localStorage。步驟4：頁面加載時，用localStorage.getItem()讀取數(shù)據(jù)并渲染列表。成果展示與點評（10分鐘）選取2份作品，點評數(shù)據(jù)同步邏輯及代碼規(guī)范性。強調(diào)：本地存儲數(shù)據(jù)需注意容量限制（通常5MB），敏感數(shù)據(jù)不應(yīng)存儲在客戶端。六、教學(xué)反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第14周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第7章jQuery基礎(chǔ)知識二、教學(xué)目標(biāo)（一）知識目標(biāo)了解jQuery的概念、優(yōu)勢及下載安裝方法，掌握jQuery的基本使用（引入方式、$(document).ready()的作用）。掌握jQuery選擇器：基本選擇器（標(biāo)簽、id、類）、高級選擇器（過濾器、屬性、偽類）的語法及應(yīng)用。掌握jQuery事件處理（綁定、解綁、觸發(fā)、事件委托）及內(nèi)容/樣式處理（屬性、類、文本、CSS樣式操作）。能運用jQuery實現(xiàn)表單驗證、動畫效果等進階應(yīng)用，理解jQuery與原生JavaScript的區(qū)別與聯(lián)系。（二）思政目標(biāo)通過jQuery簡化開發(fā)的案例，培養(yǎng)高效編程思維和靈活解決問題的能力。在選擇器與事件處理的實踐中，強化需求分析能力，學(xué)會根據(jù)場景選擇合適的技術(shù)方案。結(jié)合表單驗證等案例，培養(yǎng)嚴(yán)謹(jǐn)?shù)拈_發(fā)態(tài)度，理解軟件質(zhì)量（如易用性、安全性）的重要性。三、教學(xué)重難點（一）教學(xué)重點jQuery的基本使用：引入方式、$符號的含義、$(document).ready()的作用。選擇器：基本選擇器：$("#id")、$(".class")、$("tag")高級選擇器：:eq(index)、[attribute=value]、:checked事件處理：click()、on()、off()、trigger()的用法。內(nèi)容與樣式處理：attr()、addClass()、text()、html()、css()。（二）教學(xué)難點jQuery對象與DOM對象的區(qū)別及轉(zhuǎn)換（[0]或get(0)）。高級選擇器的組合使用（如$("div:eq(2).active")）。事件委托的原理及應(yīng)用場景（.delegate()或.on()委托事件）。鏈?zhǔn)秸{(diào)用的理解（如$("#box").css().text().click()）。四、教學(xué)方法講授法：系統(tǒng)講解jQuery的核心概念、選擇器、事件處理及樣式操作。案例演示法：結(jié)合教材示例（例7-1至例7-4），實時運行代碼，對比原生JavaScript與jQuery的實現(xiàn)差異。對比分析法：對比jQuery選擇器與CSS選擇器的異同、jQuery事件處理與原生事件綁定的優(yōu)劣。任務(wù)驅(qū)動法：實踐課通過“jQuery表單驗證與動態(tài)效果”任務(wù)，綜合應(yīng)用選擇器、事件及樣式處理。五、教學(xué)過程（一）第一學(xué)時：jQuery基礎(chǔ)與選擇器（40分鐘）導(dǎo)入（5分鐘）回顧：原生JavaScript操作DOM的繁瑣（如getElementById、addEventListener）。提問：“如何用更簡潔的代碼實現(xiàn)元素選擇和事件綁定？”引出jQuery的優(yōu)勢。jQuery簡介與基本使用（15分鐘）概念：jQuery是封裝了原生JavaScript的庫，簡化DOM操作、事件處理等。下載與引入：從官網(wǎng)下載或使用CDN，通過<scriptsrc="jquery.min.js"></script>引入。核心語法：$符號：jQuery的簡寫，$(selector)用于選擇元素。$(document).ready(function(){...})：DOM加載完成后執(zhí)行代碼，避免元素未加載導(dǎo)致的錯誤（例7-1）。案例：用jQuery修改元素文本（對比原生JavaScript，突出簡潔性）。選擇器（20分鐘）基本選擇器（表7-1）：id選擇器：$("#block")選擇id為block的元素。類選擇器：$(".block")選擇類為block的所有元素。標(biāo)簽選擇器：$("div")選擇所有div元素。組合選擇器：$("span,#block")選擇span標(biāo)簽和id為block的元素。高級選擇器：過濾器：$("li:first")（第一個li）、$("li:eq(2)")（索引為2的li）。屬性選擇器：$("input[type='text']")選擇文本輸入框。演示：用不同選擇器選中頁面元素并修改樣式（如$("p:even").css("color","red")）。（二）第二學(xué)時：事件處理與內(nèi)容/樣式操作（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）回顧：jQuery選擇器的用法，提問：“選中元素后如何響應(yīng)用戶操作？”引出事件處理。事件處理（15分鐘）綁定事件：click()、mouseenter()等（例7-2）。通用綁定與解綁：on("event",function())和off("event")。事件委托：$("#container").delegate("button","click",function(){...})，適用于動態(tài)生成的元素。事件對象：event.target獲取觸發(fā)事件的元素。內(nèi)容與樣式處理（15分鐘）屬性操作：attr("src","img.jpg")（設(shè)置屬性）、attr("title")（獲取屬性）。類操作：addClass("active")、removeClass("active")、toggleClass("active")。內(nèi)容操作：text("文本")（設(shè)置文本）、html("<b>HTML</b>")（設(shè)置HTML）、val()（表單值）。樣式操作：css("color","red")（設(shè)置樣式）、width(200)（設(shè)置寬度）。案例：點擊按鈕切換元素類名，實現(xiàn)樣式變化。進階應(yīng)用簡介（5分鐘）預(yù)覽：表單驗證（例7-3）、動畫效果（slideDown()、fadeIn()），為實踐課鋪墊。（三）實踐學(xué)時：jQuery表單驗證與動態(tài)效果（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：制作一個帶驗證的注冊表單，功能如下：輸入框為空時，添加紅色邊框提示（addClass("error")）。密碼與確認(rèn)密碼不一致時，提示錯誤。點擊“提交”按鈕，驗證通過后顯示成功動畫（fadeIn()）。提示：使用$("#form").submit()綁定提交事件，event.preventDefault()阻止默認(rèn)提交。學(xué)生實踐（30分鐘）教師指導(dǎo)重點：選擇器的精準(zhǔn)使用（如$("input[type='text']")選中所有文本框）。事件委托處理動態(tài)生成的錯誤提示信息。鏈?zhǔn)秸{(diào)用簡化代碼（如$(this).removeClass().addClass("error")）。成果點評（5分鐘）選取2份作品，點評選擇器的合理性、事件處理的完整性及代碼簡潔性。強調(diào)：jQuery雖簡化操作，但需理解其底層原理（原生JavaScript），避免過度依賴。六、教學(xué)反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第15周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第8章Vue框架（8.1、8.2節(jié)，8.5節(jié)的前半部分）二、教學(xué)目標(biāo)（一）知識目標(biāo)了解Vue框架的起源（EvanYou創(chuàng)建）、發(fā)展歷程（1.x→2.x→3.x）及核心功能（響應(yīng)式數(shù)據(jù)綁定、組件化開發(fā)等）。掌握Vue開發(fā)環(huán)境的兩種搭建方式（獨立腳本引入用于簡單場景、構(gòu)建工具用于復(fù)雜應(yīng)用）及適用場景。熟悉Vue3基礎(chǔ)語法：實例創(chuàng)建（createApp）、模板語法（{{}}插值、v-指令）、常用指令（v-bind、v-if、v-for等）。理解數(shù)據(jù)驅(qū)動視圖的核心思想，掌握響應(yīng)式數(shù)據(jù)與DOM的同步機制。能運用Vue對現(xiàn)有靜態(tài)頁面進行改造，實現(xiàn)動態(tài)渲染與交互。（二）思政目標(biāo)通過規(guī)范編寫Vue代碼（如指令語法、組件結(jié)構(gòu)），培養(yǎng)嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣和模塊化思維。結(jié)合Vue的“漸進式”特點，理解“按需集成”的工程思想，提升資源優(yōu)化意識。在項目改造實踐中，體會“數(shù)據(jù)驅(qū)動”與“DOM操作”的效率差異，樹立高性能開發(fā)理念。通過組件化開發(fā)案例，強化代碼復(fù)用與團隊協(xié)作意識，理解模塊化對大型項目的重要性。三、教學(xué)重難點（一）教學(xué)重點Vue的兩種環(huán)境搭建方式及適用場景（獨立腳本用于簡單功能/項目增強、構(gòu)建工具用于大型應(yīng)用）。Vue實例創(chuàng)建（createApp）與掛載（mount）的流程，及響應(yīng)式數(shù)據(jù)（data函數(shù)）的定義方式。模板語法：{{}}插值表達式的用法，v-bind（屬性綁定）、v-if（條件渲染）、v-for（列表渲染）的基本語法?，F(xiàn)有項目的Vue改造思路（數(shù)據(jù)提取→實例創(chuàng)建→模板綁定）。（二）教學(xué)難點響應(yīng)式數(shù)據(jù)綁定的原理（數(shù)據(jù)變化自動同步視圖的機制）。v-for與v-if在同一元素上的優(yōu)先級及使用注意事項（避免同時使用）。模板語法中JavaScript表達式的作用域限制（僅能使用當(dāng)前組件實例的數(shù)據(jù)）。項目改造中數(shù)據(jù)結(jié)構(gòu)設(shè)計與DOM結(jié)構(gòu)的匹配（如何將HTML元素屬性映射為JS對象屬性）。四、教學(xué)方法講授法：系統(tǒng)講解Vue的概念、語法規(guī)則及環(huán)境搭建步驟。案例演示法：結(jié)合教材示例（例8-1至例8-10），實時演示代碼效果，對比靜態(tài)HTML與Vue動態(tài)渲染的差異。對比分析法：對比獨立腳本與構(gòu)建工具的優(yōu)缺點、v-if與v-show的實現(xiàn)原理，加深理解。任務(wù)驅(qū)動法：實踐課通過“商品列表Vue改造”任務(wù)，綜合應(yīng)用列表渲染、屬性綁定和數(shù)據(jù)驅(qū)動思想。五、教學(xué)過程（一）第一學(xué)時：Vue框架概述與環(huán)境搭建（40分鐘）導(dǎo)入（5分鐘）展示靜態(tài)商品列表與Vue動態(tài)渲染列表的對比（如點擊按鈕切換商品顯示狀態(tài)），提問：“如何用更少的代碼實現(xiàn)動態(tài)交互？”引出Vue的優(yōu)勢。簡要介紹本節(jié)課內(nèi)容：Vue的特點、環(huán)境搭建及基礎(chǔ)實例創(chuàng)建。Vue框架基礎(chǔ)（15分鐘）核心概念：講解Vue的定義（漸進式JavaScript框架）、核心庫定位（專注視圖層），及與Angular、React的共性（組件化）與差異（輕量、易學(xué)）。發(fā)展歷程：簡述Vue1.x（初始版本）、2.x（主流里程碑）、3.x（當(dāng)前默認(rèn)版本，3.4.35為最新穩(wěn)定版）的演進，強調(diào)3.x的性能提升。核心特點：結(jié)合8.1.1節(jié)，提煉6大特點：輕量級（運行時核心庫僅10KB）；漸進式（可按需集成，不強制重構(gòu)項目）；響應(yīng)式數(shù)據(jù)綁定（數(shù)據(jù)與視圖自動同步）；高性能（虛擬DOM與差異化算法）；組件化開發(fā)（代碼復(fù)用與維護）；易于學(xué)習(xí)（基于HTML/JS基礎(chǔ)）。Vue環(huán)境搭建（15分鐘）獨立腳本方式（重點）：演示通過CDN引入Vue（如Unpkg鏈接：/vue@3/dist/vue.global.js），說明開發(fā)版（含調(diào)試信息）與生產(chǎn)版（壓縮優(yōu)化）的區(qū)別。示例代碼：用獨立腳本創(chuàng)建第一個Vue實例（例8-1），講解createApp、data、mount的作用。構(gòu)建工具方式（簡介）：提及Vite+Node.js的適用場景（大型應(yīng)用），展示命令行創(chuàng)建項目流程（圖8-1），不深入細(xì)節(jié)。小結(jié)（5分鐘）回顧Vue的核心特點及獨立腳本的引入步驟。布置思考題：“為什么生產(chǎn)環(huán)境需要替換為Vd.js？”（二）第二學(xué)時：Vue3基礎(chǔ)語法與指令（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對Vue實例的掌握：“如何將Vue實例綁定到id為app的div上？”引出本節(jié)課內(nèi)容：模板語法、常用指令及數(shù)據(jù)綁定邏輯。Vue模板語法與指令（30分鐘）模板語法基礎(chǔ)：文本插值：{{}}的用法及JavaScript表達式支持（如{{score*0.5}}，例8-5）。指令概念：以v-為前綴的特殊屬性，講解v-bind（屬性綁定，簡寫:）的用法（例8-5中v-bind:id）。常用指令：v-if/v-else：條件渲染（DOM元素的添加/刪除，例8-6），對比v-show（CSSdisplay控制）的異同。v-for：列表渲染，演示數(shù)組遍歷（例8-7）、對象遍歷（例8-8）及嵌套循環(huán)（例8-10），強調(diào)key的作用（提升渲染效率）。樣式綁定：class屬性的對象語法（{active:isActive}）與數(shù)組語法（[activeClass,errorClass]，例8-11、8-12）。小結(jié)（5分鐘）梳理模板語法與指令的核心邏輯：“數(shù)據(jù)驅(qū)動視圖，指令簡化DOM操作”。預(yù)告實踐課任務(wù)：將靜態(tài)商品列表改造為Vue動態(tài)渲染列表。（三）實踐學(xué)時：商品列表Vue改造（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：將教材8.5節(jié)的華為商城手機商品列表（靜態(tài)HTML）改造為Vue驅(qū)動的動態(tài)列表，功能包括：用v-for渲染商品列表（替換靜態(tài)li標(biāo)簽）。用v-bind綁定商品圖片src、鏈接href等屬性。用v-if控制特殊商品的標(biāo)簽顯示（如“新品”標(biāo)簽）。學(xué)生實踐（30分鐘）教師巡回指導(dǎo)，重點解決：數(shù)據(jù)結(jié)構(gòu)設(shè)計問題（如何將商品圖片、價格等屬性封裝為JS對象數(shù)組）。v-for遍歷中索引值的正確使用（如(item,index)ingoodsList）。樣式綁定中動態(tài)類名的邏輯（如根據(jù)商品類型添加不同class）。成果點評（5分鐘）選取2份作品，點評數(shù)據(jù)結(jié)構(gòu)的合理性、指令使用的規(guī)范性及代碼簡潔度。強調(diào)：Vue的核心是“數(shù)據(jù)驅(qū)動”，避免手動操作DOM，提升代碼可維護性。六、教學(xué)反思（空）《網(wǎng)頁設(shè)計與Web前端開發(fā)》電子教案（第16周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁設(shè)計與Web前端開發(fā)??教學(xué)課時??：理論2學(xué)時+實踐1學(xué)時??授課對象??：計算機相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第8章Vue框架（8.3、

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論