《網(wǎng)頁設計與 Web 前端開發(fā)》教案 莫小梅 第10-13周 ? 使用JavaScript腳本_第1頁
《網(wǎng)頁設計與 Web 前端開發(fā)》教案 莫小梅 第10-13周 ? 使用JavaScript腳本_第2頁
《網(wǎng)頁設計與 Web 前端開發(fā)》教案 莫小梅 第10-13周 ? 使用JavaScript腳本_第3頁
《網(wǎng)頁設計與 Web 前端開發(fā)》教案 莫小梅 第10-13周 ? 使用JavaScript腳本_第4頁
《網(wǎng)頁設計與 Web 前端開發(fā)》教案 莫小梅 第10-13周 ? 使用JavaScript腳本_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第10周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第6章使用JavaScript腳本（6.1-6.3節(jié)）二、教學目標（一）知識目標了解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)樣式、類名操作）的常用方法。（二）思政目標通過規(guī)范編寫JavaScript代碼（如變量命名、注釋規(guī)范），培養(yǎng)嚴謹、細致的編碼習慣。結(jié)合事件交互案例，理解“用戶為中心”的開發(fā)理念，培養(yǎng)關(guān)注細節(jié)的工匠精神。在屬性與樣式操作實踐中，體會“結(jié)構(gòu)-樣式-行為”分離的模塊化思維，提升代碼可維護性意識。三、教學重難點（一）教學重點JavaScript的三種引入方式及適用場景（內(nèi)嵌腳本用于局部功能、外部腳本用于多頁面復用）。變量和常量聲明（var/let/const的區(qū)別）及數(shù)據(jù)類型的判斷與轉(zhuǎn)換。DOM0級事件的綁定（如element.onclick=function()）及事件觸發(fā)邏輯。元素屬性操作（getAttribute/setAttribute）與CSS樣式控制（style屬性、className）。（二）教學難點var/let/const的作用域差異（函數(shù)作用域與塊級作用域）。事件冒泡現(xiàn)象（如子元素事件觸發(fā)父元素事件）及處理思路。內(nèi)聯(lián)樣式操作中CSS屬性的駝峰命名法（如backgroundColor對應background-color）。自定義屬性與JS對象屬性的區(qū)別（是否顯式存在于HTML標簽中）。四、教學方法講授法：系統(tǒng)講解JavaScript基礎概念、語法規(guī)則及操作方法。案例演示法：結(jié)合教材示例（如例6-1至例6-20），實時演示代碼效果，對比不同寫法的差異。對比分析法：對比var/let/const的作用域、不同事件綁定方式的優(yōu)劣，加深理解。任務驅(qū)動法：實踐課通過“互動按鈕面板”制作任務，綜合應用屬性操作、事件綁定和樣式控制。五、教學過程（一）第一學時：JavaScript基礎與事件（40分鐘）導入（5分鐘）展示靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的對比（如按鈕點擊無反應vs彈出提示），提問：“如何讓網(wǎng)頁‘動起來’？”引出JavaScript的作用。簡要介紹本節(jié)課內(nèi)容：JavaScript的引入方式、代碼規(guī)范及事件處理。初識JavaScript（15分鐘）核心概念：解釋JavaScript的跨平臺特性、與Java的區(qū)別，及ECMAScript、DOM、BOM的組成關(guān)系。引入方式：內(nèi)嵌腳本：在<script>標簽中直接編寫代碼（例6-1），說明可放置在<head>或<body>的注意事項。外部腳本：創(chuàng)建.js文件，通過<scriptsrc="路徑">引入（例6-2），強調(diào)src屬性與標簽內(nèi)代碼不可共存。事件屬性/href值：如<buttononclick="alert('hi')">或<ahref="javascript:alert('hi')">（例6-3）。代碼規(guī)范：強調(diào)大小寫敏感、分號使用、注釋（//單行、/**/多行）的重要性。彈窗調(diào)試與DOM0級事件（15分鐘）彈窗工具：演示alert()（警告框）、confirm()（確認框，返回布爾值）、prompt()（提示框，接收輸入）的用法，及console.log()在開發(fā)者工具中的調(diào)試應用（例6-5）。DOM0級事件：事件綁定：通過element.事件名=函數(shù)綁定（如btn.onclick=function(){}），演示單擊、鼠標移入/移出事件（例6-10）。事件解綁：賦值null（如btn.onclick=null）。小結(jié)（5分鐘）回顧引入方式的適用場景及事件綁定的基本語法。布置思考題：“外部腳本文件與內(nèi)嵌腳本相比，優(yōu)勢是什么？”（二）第二學時：基本元素與樣式操作（40分鐘）復習導入（5分鐘）抽查學生對事件綁定的掌握：“如何實現(xiàn)按鈕點擊后隱藏自身？”引出本節(jié)課內(nèi)容：變量、數(shù)據(jù)類型及元素屬性與樣式操作。JavaScript基本元素（15分鐘）變量與常量：var（函數(shù)作用域、變量提升）、let（塊級作用域、不可重復聲明）、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="類名"（添加預定義樣式，如6.3.4節(jié)的案例實踐）。案例：實現(xiàn)鼠標移入元素時改變背景色，移出時恢復（結(jié)合onmouseenter/onmouseleave事件）。小結(jié)（5分鐘）梳理變量聲明、類型轉(zhuǎn)換、屬性與樣式操作的核心要點。預告實踐課任務：制作包含動態(tài)樣式和事件響應的交互面板。（三）實踐學時：互動按鈕面板制作（40分鐘）任務布置（5分鐘）目標：制作一個包含3個按鈕的互動面板，功能如下：按鈕1：點擊后彈出輸入框，將輸入內(nèi)容顯示在面板的文本區(qū)域（用prompt()和innerHTML）。按鈕2：鼠標移入時背景色變?yōu)樗{色，移出時恢復（用onmouseenter/onmouseleave和style屬性）。按鈕3：點擊后切換面板的自定義屬性data-status值（用setAttribute），并根據(jù)值切換面板邊框樣式（用className）。學生實踐（30分鐘）教師巡回指導，重點解決：let聲明變量時的塊級作用域問題（如循環(huán)中綁定事件的變量引用）。樣式屬性的駝峰命名錯誤（如background-color寫成backgroundColor）。事件冒泡導致的意外觸發(fā)（如面板點擊事件影響按鈕）。成果點評（5分鐘）選取2份作品，點評事件綁定的合理性、樣式控制的規(guī)范性及代碼可讀性。強調(diào)：合理使用變量作用域和事件綁定方式，可減少代碼沖突與冗余。六、教學反思（空）《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第11周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第6章使用JavaScript腳本（6.4-6.6節(jié)）二、教學目標（一）知識目標掌握JavaScript條件語句（if單/雙/多分支、switch）的語法及應用場景。掌握循環(huán)語句（for、while、do-while）的使用，理解break與continue的區(qū)別。掌握函數(shù)的定義（聲明式、表達式）、調(diào)用方式、參數(shù)傳遞（形參、實參、不定參arguments）及返回值用法。理解變量作用域（全局作用域、局部作用域、塊級作用域）及var/let/const的差異。掌握函數(shù)與條件、循環(huán)的結(jié)合使用，能通過函數(shù)封裝重復邏輯。（二）思政目標通過規(guī)范函數(shù)命名、注釋及代碼結(jié)構(gòu)，培養(yǎng)嚴謹細致的編程習慣。在循環(huán)與條件的嵌套邏輯中，鍛煉邏輯思維的條理性，提升問題拆解能力。結(jié)合函數(shù)封裝案例，體會模塊化編程的優(yōu)勢，樹立代碼復用與可維護性意識。三、教學重難點（一）教學重點條件語句的嵌套使用（如if-elseif多場景判斷）及switch的break穿透問題。循環(huán)語句的執(zhí)行流程（初始化、條件判斷、迭代）及循環(huán)嵌套（如二維數(shù)組遍歷）。函數(shù)的參數(shù)傳遞機制（值傳遞）、返回值作用及不定參arguments的使用。變量作用域的邊界（函數(shù)內(nèi)外、代碼塊內(nèi)外）及var的變量提升現(xiàn)象。（二）教學難點switch語句中省略break導致的邏輯錯誤及規(guī)避方法。循環(huán)語句中的break（終止循環(huán)）與continue（跳過本次循環(huán)）的區(qū)別應用。塊級作用域與函數(shù)作用域的差異（let與var的作用域邊界）。函數(shù)嵌套中變量的作用域鏈查找規(guī)則。四、教學方法講授法：系統(tǒng)講解條件語句、循環(huán)語句及函數(shù)的語法規(guī)則與核心概念。案例演示法：結(jié)合教材示例（例6-21至例6-36），實時運行代碼，對比不同寫法的執(zhí)行效果。對比分析法：對比if與switch的適用場景、for與while的使用時機，加深理解。任務驅(qū)動法：實踐課通過“星級評分系統(tǒng)”制作任務，綜合應用函數(shù)、條件與循環(huán)。五、教學過程（一）第一學時：條件語句與循環(huán)語句（40分鐘）導入（5分鐘）展示場景：“根據(jù)學生成績（0-100分）判斷等級（A/B/C/D）”，提問：“如何用代碼實現(xiàn)多檔判斷？”引出主題：條件語句用于分支邏輯，循環(huán)語句用于重復操作，二者是編程的基礎控制結(jié)構(gòu)。條件語句講解（15分鐘）if語句：單分支：if(條件){語句}（適用于單一判斷）。雙分支：if(條件){語句1}else{語句2}（適用于二選一場景）。多分支：if(條件1){語句1}elseif(條件2){語句2}else{語句3}（如結(jié)合時間的問候語輸出，例6-23）。案例演示：根據(jù)當前小時數(shù)顯示“早上/中午/下午/晚上好”（結(jié)合Date().getHours()）。switch語句：語法：switch(表達式){case值1:語句1;break;...default:語句n}。關(guān)鍵點：break的作用（防止穿透），default的默認執(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級標題（例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ù)？”（二）第二學時：函數(shù)與作用域（40分鐘）復習導入（5分鐘）抽查練習：“用for循環(huán)和if語句，找出數(shù)組[2,5,9,12,15]中的奇數(shù)并求和”。引出主題：重復邏輯可通過函數(shù)封裝，提升代碼復用性——本節(jié)課聚焦函數(shù)與作用域。函數(shù)基礎講解（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時默認返回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ū)）。重復聲明：var允許，let/const禁止。案例：演示不同聲明方式在循環(huán)、條件塊中的作用域邊界。小結(jié)（5分鐘）梳理函數(shù)封裝的優(yōu)勢與作用域的核心規(guī)則。預告實踐課任務：制作“星級評分系統(tǒng)”，綜合應用函數(shù)、循環(huán)與條件判斷。（三）實踐學時：星級評分系統(tǒng)制作（40分鐘）任務布置（5分鐘）目標：制作一個5星評分組件，功能如下：鼠標移入星星時，當前及左側(cè)星星變亮（用循環(huán)遍歷星星數(shù)組，結(jié)合if判斷索引）。點擊星星時，記錄評分（用函數(shù)封裝評分邏輯，返回選中的星級）。鼠標移出時，保持已選中的星級狀態(tài)（用條件語句判斷是否有選中記錄）。提示：用ul布局星星列表，通過className切換亮/暗樣式。學生實踐（30分鐘）教師巡回指導，重點解決：循環(huán)中綁定事件時的變量作用域問題（用let避免var的共享變量問題）。函數(shù)參數(shù)傳遞與返回值的正確使用（如獲取當前星星的索引并返回）。條件語句與循環(huán)的嵌套邏輯（如遍歷星星時判斷是否小于當前索引）。成果點評（5分鐘）選取2份作品，點評函數(shù)封裝的合理性、循環(huán)效率及代碼規(guī)范性。強調(diào)：合理劃分函數(shù)職責（如單獨封裝“高亮星星”“記錄評分”函數(shù)）可提升代碼可讀性。六、教學反思（空）《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第12周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關(guān)專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第6章使用JavaScript腳本（6.7-6.9節(jié)）二、教學目標（一）知識目標掌握JavaScript對象操作語句（with、for...in）的用法，理解this、new、in、delete等關(guān)鍵字及操作符的作用。掌握常用內(nèi)置對象（數(shù)組、字符串、數(shù)學、日期）的核心屬性與方法，能靈活運用其解決實際問題。理解DOM（文檔對象模型）的概念及樹狀結(jié)構(gòu)，掌握DOM節(jié)點的類型、訪問方式及增刪改查操作。能綜合運用對象操作、內(nèi)置對象及DOM操作實現(xiàn)簡單的網(wǎng)頁交互功能。（二）思政目標通過for...in遍歷對象屬性等案例，培養(yǎng)邏輯清晰的編程思維和嚴謹?shù)拇a調(diào)試習慣。在DOM節(jié)點操作實踐中，體會“結(jié)構(gòu)-行為”分離的模塊化思想，提升代碼可維護性意識。結(jié)合案例開發(fā)，培養(yǎng)發(fā)現(xiàn)問題、分析問題并利用內(nèi)置API解決問題的能力，激發(fā)創(chuàng)新思維。三、教學重難點（一）教學重點for...in語句遍歷對象屬性的用法及this關(guān)鍵字在不同場景下的指向。內(nèi)置對象的核心方法：數(shù)組：push()、pop()、splice()、join()字符串：indexOf()、slice()、split()日期：getFullYear()、getHours()等獲取時間的方法數(shù)學：Math.random()、Math.floor()DOM節(jié)點的訪問（父子節(jié)點、兄弟節(jié)點）與操作（創(chuàng)建、插入、刪除、替換）。（二）教學難點this關(guān)鍵字在全局、對象方法、事件處理中的指向差異。DOM節(jié)點操作中childNodes與children的區(qū)別（包含文本節(jié)點vs僅元素節(jié)點）。動態(tài)創(chuàng)建DOM節(jié)點并添加到文檔流的完整流程（創(chuàng)建元素→設置屬性→添加到父節(jié)點）。內(nèi)置對象方法的參數(shù)細節(jié)（如splice()的刪除與插入功能）。四、教學方法講授法：系統(tǒng)講解對象操作語句、內(nèi)置對象及DOM的核心概念與語法。案例演示法：結(jié)合教材示例（例6-37至例6-60），實時運行代碼，直觀展示內(nèi)置對象方法及DOM操作效果。對比分析法：對比for...in與普通for循環(huán)的適用場景、this在不同場景下的指向差異。任務驅(qū)動法：實踐課通過“動態(tài)待辦事項列表”制作任務，綜合應用對象遍歷、數(shù)組操作及DOM節(jié)點增刪。五、教學過程（一）第一學時：對象操作語句與內(nèi)置對象（40分鐘）導入（5分鐘）提問：“如何遍歷一個用戶對象的所有屬性（如姓名、年齡）？如何快速獲取當前日期并格式化？”引出主題：對象操作語句用于便捷處理對象屬性，內(nèi)置對象封裝了常用功能，是高效開發(fā)的基礎。JavaScript對象的操作語句（15分鐘）with語句：語法：with(對象){直接訪問屬性/方法}，簡化對象屬性的連續(xù)訪問（例：with(Math){x=cos(PI)}）。說明：不推薦過度使用，可能降低代碼可讀性。for...in語句：語法：for(變量in對象){遍歷對象屬性}，用于枚舉對象的可枚舉屬性（例6-37）。案例：遍歷student對象的name、age屬性并輸出。對象關(guān)鍵字與操作符：this：指向當前對象（全局環(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ù)學對象（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()（時）。案例：獲取當前日期并格式化為“2024年9月3日”（例6-45）。（二）第二學時：DOM對象及操作（40分鐘）復習導入（5分鐘）回顧：數(shù)組slice()與字符串slice()的異同，for...in遍歷數(shù)組下標。提問：“如何用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)系的應用。（三）實踐學時：動態(tài)待辦事項列表（40分鐘）任務布置（5分鐘）目標：制作一個待辦事項列表，功能如下：輸入框中輸入內(nèi)容，點擊“添加”按鈕，動態(tài)創(chuàng)建一個待辦項（li），包含內(nèi)容和“刪除”按鈕。點擊“刪除”按鈕，移除對應的待辦項。用數(shù)組存儲所有待辦事項，添加/刪除時同步更新數(shù)組。提示：使用createElement創(chuàng)建節(jié)點，appendChild添加節(jié)點，removeChild刪除節(jié)點，addEventListener綁定事件。學生實踐（30分鐘）教師指導重點：動態(tài)節(jié)點的事件綁定（刪除按鈕點擊事件）。數(shù)組與DOM節(jié)點的同步更新。避免childNodes包含空白文本節(jié)點的坑（推薦用children）。成果點評（5分鐘）選取2份作品，點評節(jié)點操作的規(guī)范性、數(shù)組與DOM同步的邏輯性。強調(diào)：DOM操作需注意性能（批量操作時先脫離文檔流），培養(yǎng)優(yōu)化意識。六、教學反思（空）《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第13周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與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()（后退）、forwa

溫馨提示

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

評論

0/150

提交評論