Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元8 制作非遺首頁-Javascript基礎(chǔ)_第1頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元8 制作非遺首頁-Javascript基礎(chǔ)_第2頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元8 制作非遺首頁-Javascript基礎(chǔ)_第3頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元8 制作非遺首頁-Javascript基礎(chǔ)_第4頁
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案 單元8 制作非遺首頁-Javascript基礎(chǔ)_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

PAGE1《Web前端開發(fā)技術(shù)》課程教案適用專業(yè)：授課班級：授課教師：編制日期：

教案名稱單元8制作非遺首頁—Javascript基礎(chǔ)計(jì)劃學(xué)時4學(xué)時本次授課類型□理論□實(shí)驗(yàn)?理實(shí)一體□實(shí)訓(xùn)□實(shí)習(xí)教學(xué)目標(biāo)知識目標(biāo)1.掌握J(rèn)avaScript基本語法（變量、數(shù)據(jù)類型、運(yùn)算符、選擇控制結(jié)構(gòu)、函數(shù)等）。2.熟悉DOMAPI，能夠操作網(wǎng)頁元素和屬性。3.掌握事件監(jiān)聽和定時器（setInterval和setTimeout）。能力目標(biāo)1.能夠通過JavaScript實(shí)現(xiàn)網(wǎng)頁交互（如表單驗(yàn)證、輪播圖等）。2.能夠編寫清晰的項(xiàng)目文件和用戶手冊。素質(zhì)目標(biāo)1.培養(yǎng)編程興趣和邏輯思維能力。2.提升團(tuán)隊(duì)協(xié)作和問題解決能力。思政目標(biāo)1.激發(fā)學(xué)生對傳統(tǒng)文化的興趣，增強(qiáng)文化自信。2.培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣和創(chuàng)新意識。教學(xué)重點(diǎn)1.JavaScript基本語法和DOM操作。2.事件監(jiān)聽和定時器的使用。3.輪播圖等動態(tài)效果的實(shí)現(xiàn)。教學(xué)難點(diǎn)1.JavaScript異步編程的理解（如定時器）。2.跨瀏覽器兼容性問題處理。3.復(fù)雜交互邏輯的實(shí)現(xiàn)與調(diào)試。教學(xué)設(shè)計(jì)思路教學(xué)效果及改進(jìn)思路絕大部分學(xué)生能夠掌握本項(xiàng)目中的知識點(diǎn)和技能，針對個別接受程度較慢的學(xué)生，可結(jié)成班上的學(xué)習(xí)小組，一對一的幫扶，努力做到每名學(xué)生不掉隊(duì)。學(xué)生在線上預(yù)習(xí)環(huán)節(jié)的完成度不是100%，為了讓他們更積極主動的做好課前準(zhǔn)備，可以適當(dāng)提高這部分的考評比率，在課上有更多的獎勵手段。教學(xué)實(shí)施過程要有詳細(xì)教學(xué)環(huán)節(jié)，從主要教學(xué)內(nèi)容、師生活動、信息化資源、教學(xué)方法等方面進(jìn)行撰寫備注一、課前自主學(xué)習(xí)（一）教師發(fā)布預(yù)習(xí)任務(wù)：觀看智慧職教《前端技術(shù)開發(fā)》MOOC課程里的單元8的相關(guān)微課視頻，完成在線測試。（二）學(xué)生按教學(xué)要求完成預(yù)習(xí)材料學(xué)習(xí)，記錄學(xué)習(xí)過程中的疑問點(diǎn)

（三）教師通過教學(xué)平臺數(shù)據(jù)分析學(xué)習(xí)進(jìn)度，對需要加強(qiáng)指導(dǎo)的學(xué)生提供個性化上輔導(dǎo)，確保全體學(xué)員達(dá)到預(yù)習(xí)目標(biāo)二、課上探究學(xué)習(xí)（一）情境引入，任務(wù)導(dǎo)入小新最近在瀏覽各大網(wǎng)站時，發(fā)現(xiàn)那些吸引人的網(wǎng)頁都有一個共同特點(diǎn)——都運(yùn)用了JavaScript來實(shí)現(xiàn)動態(tài)效果。特別是當(dāng)他看到一些文化類網(wǎng)站的輪播圖時，眼前一亮：精美的非遺圖片像幻燈片一樣自動切換，還能手動控制播放節(jié)奏。這讓他萌生了一個想法——為自己的非遺網(wǎng)站首頁也添加這樣一個"會動"的輪播圖。雖然知道JavaScript比之前學(xué)的HTML和CSS要復(fù)雜，但小新覺得這是個很好的挑戰(zhàn)機(jī)會。他相信通過編寫JavaScript代碼，不僅能實(shí)現(xiàn)酷炫的效果，更能鍛煉自己分析問題、解決問題的能力。為此，他認(rèn)真制定了分步計(jì)劃：先設(shè)計(jì)好網(wǎng)站首頁的整體框架、學(xué)習(xí)JavaScript基礎(chǔ)知識、研究輪播圖的實(shí)現(xiàn)原理、逐步添加自動播放和手動控制功能、最終完成一個完整的動態(tài)輪播圖。任務(wù)1Javascript基礎(chǔ)語法任務(wù)實(shí)施1.JavaScript核心特性解釋性語言：代碼運(yùn)行時逐行解釋執(zhí)行，無需預(yù)編譯弱類型特性：變量類型靈活可變，賦值時自動轉(zhuǎn)換數(shù)據(jù)類型事件驅(qū)動機(jī)制：通過響應(yīng)點(diǎn)擊/鍵盤等用戶操作觸發(fā)代碼執(zhí)行跨平臺能力：只需瀏覽器支持即可運(yùn)行，不依賴操作系統(tǒng)基于對象：支持創(chuàng)建和使用對象進(jìn)行編程2.代碼引入方式內(nèi)嵌式：在HTML文件中使用<script>標(biāo)簽直接編寫代碼外部引入：通過<scriptsrc="文件.js">引入獨(dú)立JS文件執(zhí)行位置：可放置在<head>或<body>中的任意位置3.變量與常量變量聲明：let聲明塊級作用域變量var聲明函數(shù)作用域變量（存在變量提升問題）常量聲明：const聲明不可重新賦值的常量必須在聲明時初始化標(biāo)識符規(guī)則：由字母/數(shù)字/下劃線/$組成首字符不能是數(shù)字區(qū)分大小寫不使用關(guān)鍵字保留字四、數(shù)據(jù)類型體系基本類型：Number（含NaN/Infinity特殊值）、String（單/雙引號表示）、Boolean（true/false）、Null（空對象指針）、Undefined（未初始化）、Symbol（唯一值標(biāo)識）對象類型：Object（屬性集合）、Array（有序數(shù)據(jù)集）、Function（可執(zhí)行代碼塊）五、運(yùn)算符系統(tǒng)算術(shù)運(yùn)算符：+-*/%++--賦值運(yùn)算符：=+=-=*=/=%=關(guān)系運(yùn)算符：=====!=><>=<=邏輯運(yùn)算符：&&||!特殊行為：+可作加法或字符串連接不同類型運(yùn)算時自動類型轉(zhuǎn)換6.流程控制結(jié)構(gòu)選擇結(jié)構(gòu)：if分支：單條件判斷if...else：雙分支選擇if...elseif：多條件分支switch：多值匹配選擇循環(huán)結(jié)構(gòu)：for：已知循環(huán)次數(shù)while：條件滿足時循環(huán)do...while：至少執(zhí)行一次跳轉(zhuǎn)語句：break：終止循環(huán)/switchcontinue：跳過當(dāng)前循環(huán)7.DOM操作基礎(chǔ)文檔對象模型：樹形結(jié)構(gòu)表示HTML文檔節(jié)點(diǎn)類型：文檔節(jié)點(diǎn)（Document）、元素節(jié)點(diǎn)（Element）、文本節(jié)點(diǎn)（Text）、屬性節(jié)點(diǎn)（Attribute）核心功能：訪問元素：getElementById等、修改內(nèi)容：innerHTML/textContent、改變樣式：style屬性操作、事件響應(yīng)：添加事件監(jiān)聽器。2.師生活動：教師提供項(xiàng)目模板，指導(dǎo)文檔規(guī)范要求。學(xué)生完善項(xiàng)目文檔，進(jìn)行版本管理。。3.教學(xué)方法：采用標(biāo)準(zhǔn)化教學(xué)法，培養(yǎng)職業(yè)規(guī)范意識。任務(wù)2制作首頁輪播圖1.任務(wù)描述為非遺網(wǎng)站的首頁添加一個輪播圖，網(wǎng)頁效果如圖所示。2.任務(wù)準(zhǔn)備了解JavaScript語言3.任務(wù)實(shí)施1.主要內(nèi)容：(1）創(chuàng)建網(wǎng)頁文件。打開HBuilderX，創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)站點(diǎn)目錄下(2)準(zhǔn)備好3到5張圖片，圖片的尺寸盡量保持一致。在頁面上放置一個固定尺寸的層元素作為窗口，窗口的尺寸和圖片的尺寸保持一致。{<}divclass=“carousel”{>}{<}/div{>}定義輪播圖窗口的尺寸。(3)定義一個數(shù)組，存放所有輪播圖中需要展示的圖片。將圖片存在數(shù)組中是為了后期維護(hù)更靈活。2.師生活動：教師提供評估量表，指導(dǎo)作品自評。學(xué)生對照標(biāo)準(zhǔn)，完善作品質(zhì)量。3.教學(xué)方法：采用標(biāo)準(zhǔn)參照教學(xué)法，培養(yǎng)質(zhì)量意識。任務(wù)3Javascript常用函數(shù)任務(wù)實(shí)施1.主要內(nèi)容：(1)函數(shù)基礎(chǔ)定義：使用function關(guān)鍵字聲明函數(shù)，可接收參數(shù)并封裝功能代碼。特性：參數(shù)支持默認(rèn)值。通過return返回值，未顯式返回時默認(rèn)為undefined。2.定時器函數(shù)setTimeout()：延遲執(zhí)行函數(shù)（單次）。setInterval()：周期性重復(fù)執(zhí)行函數(shù)。區(qū)別：setTimeout僅執(zhí)行一次，setInterval持續(xù)執(zhí)行直到手動清除。2.師生活動：教師進(jìn)行現(xiàn)場操作示范，分解技術(shù)難點(diǎn)。學(xué)生模仿練習(xí)，錄制操作視頻。3.教學(xué)方法：采用示范模仿法，強(qiáng)化技能掌握。任務(wù)4實(shí)現(xiàn)輪播圖定時切換圖片1.任務(wù)描述進(jìn)行技術(shù)上的調(diào)整和優(yōu)化，使圖片的容器能夠支持自動切換功能，每隔一段時間會自動觸發(fā)圖片的切換事件。2.任務(wù)準(zhǔn)備了解定時器函數(shù)3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在HBuilderX中打開任務(wù)制作的網(wǎng)頁，修改代碼。(2）使用setlnterval()函數(shù)定時更新類名為carousel-container的元素的位置使它不斷向左移動。最后一張圖片播放完畢之后，把類名為carousel-container的元素復(fù)原，繼續(xù)播放第一張圖片。2.師生活動：教師創(chuàng)設(shè)真實(shí)工作情境，發(fā)放項(xiàng)目任務(wù)書，明確工作要求和評價標(biāo)準(zhǔn)。通過現(xiàn)場操作演示關(guān)鍵技能點(diǎn)，并在演示過程中穿插提問，檢驗(yàn)學(xué)生理解程度。學(xué)生分組領(lǐng)取實(shí)訓(xùn)材料和工具，按照工作流程完成項(xiàng)目任務(wù)，期間需要填寫工藝卡片和質(zhì)量檢查表。教師全程觀察記錄，對典型問題進(jìn)行集中講解3.教學(xué)方法：實(shí)施工學(xué)結(jié)合的一體化教學(xué)，采用"任務(wù)引領(lǐng)、做學(xué)合一"的方式。通過真實(shí)項(xiàng)目導(dǎo)入、教師示范引領(lǐng)、學(xué)生實(shí)踐操作、成果展示評價四個環(huán)節(jié)，將理論知識與實(shí)踐技能有機(jī)融合。運(yùn)用信息化教學(xué)平臺實(shí)現(xiàn)過程性評價。任務(wù)5Javascript事件1.任務(wù)描述將為輪播圖添加左右切換按鈕，實(shí)現(xiàn)手動控制功能。在圖片兩側(cè)設(shè)計(jì)箭頭按鈕，用戶點(diǎn)擊后可自由切換圖片，同時暫停自動輪播3秒。2.任務(wù)準(zhǔn)備1.了解事件基本概念事件是指可以被JavaScript偵測到的用戶操作或程序動作，包括鼠標(biāo)點(diǎn)擊、鍵盤輸入、頁面加載等交互行為。2.了解事件處理流程處理事件需要三個標(biāo)準(zhǔn)步驟：首先通過選擇器獲取目標(biāo)元素，然后為元素綁定事件監(jiān)聽器，最后定義事件觸發(fā)時執(zhí)行的處理函數(shù)。3.了解HTML內(nèi)聯(lián)事件綁定4.了解DOM屬性事件綁定通過JavaScript為DOM元素的onclick等屬性賦值函數(shù)，實(shí)現(xiàn)了HTML與JavaScript的邏輯分離。5.了解addEventListener方法允許為同一事件添加多個監(jiān)聽函數(shù)，支持事件冒泡和捕獲機(jī)制，還能處理自定義事件。3.任務(wù)實(shí)施1.主要內(nèi)容：(1)在HBuilderX中打開任務(wù)8.3中制作的網(wǎng)頁，修改代碼。(2)在carousel容器的內(nèi)部添加兩個按鈕，位置一左一右，代碼如下。(3)使用CSS定義這兩個按鈕的樣式。設(shè)置絕對定位，水平方向上一左一右。(4)設(shè)置按鈕的其他樣式，如寬度、背景顏色、文字顏色、字體大小、鼠標(biāo)指針樣式。(5)設(shè)置按鈕元素的顯示方式為flex方式，該顯示方式將在任務(wù)86中詳細(xì)介紹(6)為兩個按鈕添加事件監(jiān)聽。2.師生活動：教師設(shè)計(jì)階梯式任務(wù)，從簡單到復(fù)雜逐步推進(jìn)。先進(jìn)行基礎(chǔ)技能演示，然后設(shè)置故障排除環(huán)節(jié)。學(xué)生先獨(dú)立完成基礎(chǔ)操作，再以小組形式解決復(fù)雜問題。教師建立"問題墻"，鼓勵學(xué)生將遇到的困難寫在便簽上，集中討論解決。3.教學(xué)方法：采用分層遞進(jìn)式教學(xué)法，根據(jù)學(xué)生個體差異設(shè)計(jì)不同難度的任務(wù)。通過"基礎(chǔ)訓(xùn)練-綜合應(yīng)用-故障排除"三階段培養(yǎng)，結(jié)合小組合作學(xué)習(xí)和探究式學(xué)習(xí)，提升學(xué)生分析問題和解決問題的能力。任務(wù)6制作非遺網(wǎng)站首頁1.任務(wù)描述為非遺網(wǎng)站設(shè)計(jì)和制作首頁。首頁內(nèi)容包括頁眉區(qū)域、導(dǎo)航欄、輪播圖、頁腳區(qū)域及主體區(qū)域。頁眉區(qū)域包括網(wǎng)站1og0、網(wǎng)站名稱和搜索框。主體區(qū)域包含“圖片新聞”“熱點(diǎn)關(guān)注”“公示公告”“非遺知識”“政策法規(guī)”“非遺項(xiàng)目”內(nèi)容區(qū)塊。使用flex布局方式，將CSS代碼保存為一個獨(dú)立的文件index.css，將JavaScript代碼保存為index,js并引人首頁中。非遺網(wǎng)站首頁整體效果如圖所示。2.任務(wù)準(zhǔn)備(1)了解Flex布局概念(2)了解容器設(shè)置：主軸與交叉軸、容器屬性（flex-direction、flex-wrap、ustify-content、align-items、align-content、gap）項(xiàng)目屬性（order、flex-grow、lex-shrink、flex-basis、align-self、align-items）簡寫屬性（flex-flow、flex）等(3)了解常用場景：實(shí)現(xiàn)等高布局、元素水平/垂直居中、創(chuàng)建自適應(yīng)導(dǎo)航欄等3.任務(wù)實(shí)施1.主要內(nèi)容：(1)創(chuàng)建網(wǎng)頁文件。打開HBuilderX,創(chuàng)建一個新的網(wǎng)頁文件，并保存在對應(yīng)站點(diǎn)目錄下。(2)制作頁眉區(qū)域。頁眉區(qū)域分為3部分:網(wǎng)站1og0、網(wǎng)站名稱和搜索框。為使該區(qū)域的內(nèi)容在垂直方向上居中對齊，使用flex布局。頁眉區(qū)域的HTML代碼如下CSS代碼如下頁面區(qū)域效果圖如下(3)制作導(dǎo)航欄。使用列表制作導(dǎo)航欄。導(dǎo)航欄效果圖如下(4)輪播首圖輪播圖效果如下(4)制作主體區(qū)域。首頁主體區(qū)域分為6個欄目，每行3個欄目，使用flex布局。2.師生活動：教師組織案例研討會議，引導(dǎo)學(xué)生分析典型操作案例，總結(jié)成功經(jīng)驗(yàn)和失敗教訓(xùn)。使用智能評分系統(tǒng)對各組操作表現(xiàn)進(jìn)行實(shí)時評價。學(xué)生分組討論案例啟示，制定改進(jìn)方案，撰寫案例分析報(bào)告并進(jìn)行小組匯報(bào)。3.教學(xué)方法：采用案例研討式教學(xué)，配合案例視頻資料庫和互動討論平臺，通過頭腦風(fēng)暴和小組辯論激發(fā)創(chuàng)新思維，建立持續(xù)改進(jìn)機(jī)制。三、課后拓展練習(xí)1.JavaScript的異常捕獲機(jī)制JavaScript通過try...catch語句實(shí)現(xiàn)異常處理：try塊：包含可能拋出異常的代碼（如未定義變量或除零操作）。catch

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論