web前端技術(shù)應(yīng)用 教案 項(xiàng)目四 任務(wù)一 制作輪播圖交互板塊

《Web前端技術(shù)應(yīng)用》教學(xué)設(shè)計(jì)項(xiàng)目四任務(wù)一制作輪播圖交互板塊課題制作輪播圖交互板塊課程名稱Web前端技術(shù)應(yīng)用授課班級(jí)學(xué)時(shí)安排2學(xué)時(shí)執(zhí)教老師授課形式理實(shí)一體教學(xué)目標(biāo)知識(shí)1．能說(shuō)出jQuery過(guò)濾的常用方法；2．能說(shuō)出jQuery動(dòng)畫的常用方法；技能1．能熟練應(yīng)用JavaScript控制語(yǔ)句及函數(shù)；2．能熟練應(yīng)用DOM節(jié)點(diǎn)操作；素養(yǎng)1．通過(guò)制作動(dòng)態(tài)效果提升合作學(xué)習(xí)能力和自學(xué)能力；2．養(yǎng)成細(xì)致縝密的編程習(xí)慣；課程思政通過(guò)編寫與調(diào)試程序，讓學(xué)生切身體會(huì)到任何一個(gè)小疏忽都會(huì)導(dǎo)致程序運(yùn)行錯(cuò)誤。讓學(xué)生明確在今后的工作崗位上養(yǎng)成認(rèn)真、細(xì)心和嚴(yán)謹(jǐn)?shù)淖黠L(fēng)。教學(xué)重點(diǎn)jQuery的認(rèn)識(shí)和選擇器的應(yīng)用。教學(xué)難點(diǎn)jQuery的認(rèn)識(shí)和選擇器的應(yīng)用。教學(xué)方法分析法、討論法、演示法、引導(dǎo)式教學(xué)。教學(xué)環(huán)境軟件環(huán)境：Win7及以上操作系統(tǒng)，HBuilder硬件環(huán)境：多媒體教室或軟件實(shí)訓(xùn)室，計(jì)算機(jī)教學(xué)資源：PPT、微課視頻教學(xué)過(guò)程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖新課導(dǎo)入(3分鐘)提問(wèn)：什么是JavaScript？什么是jQuery？學(xué)生閱讀教材找出JavaScript的概念和用法。思考問(wèn)題，閱讀教材教學(xué)

過(guò)渡目標(biāo)展示(2分鐘)PPT展示本課題要完成的目標(biāo)并適當(dāng)解說(shuō)觀看了解活動(dòng)1認(rèn)識(shí)JavaScript和jQuery基礎(chǔ)語(yǔ)法(15分鐘)1.初識(shí)JavaScript并引入文件提問(wèn)引導(dǎo)學(xué)生思考如何引入JavaScript文件。代碼如下：2.數(shù)據(jù)類型頭腦風(fēng)暴：請(qǐng)同學(xué)們結(jié)合已學(xué)知識(shí)，搶答數(shù)據(jù)類型，分類如下：3.變量與注釋教師：變量是指在程序運(yùn)行時(shí)其值可以改變的量，變量的功能是存儲(chǔ)數(shù)據(jù)。變量的三要素是：變量名、變量的數(shù)據(jù)類型、變量的值。注釋有兩種方式，單行注釋和多行注釋4.setInterval()函數(shù)教師：setInterval()方法以指定的時(shí)間間隔調(diào)用函數(shù)，這里的時(shí)間以毫秒為單位，周期性調(diào)用函數(shù)，直到調(diào)用clearInterval()或關(guān)閉窗口。setInterval(()=>{}，3000)表示利用setInterval()函數(shù)制作每隔3s完成一次循環(huán)的計(jì)時(shí)器函數(shù)，這里的3000表示三秒。5.DOM刪除節(jié)點(diǎn)如果需要?jiǎng)h除元素和內(nèi)容，一般可使用remove()和empty()這兩個(gè)jQuery方法。remove()，表示刪除被選元素（及其子元素）；empty()，表示從被選元素中刪除子元素。6.初識(shí)jQuery及下載安裝教師：請(qǐng)同學(xué)們閱讀教材，并學(xué)會(huì)安裝jQuery。邀請(qǐng)同學(xué)展示安裝過(guò)程。7.jQuery基礎(chǔ)選擇器及層次選擇器基礎(chǔ)選擇器：①ID選擇器，為給定的ID匹配一個(gè)元素，格式為：$(“#id名”)；②元素選擇器，為給定的元素名匹配所有元素，格式為：$(“元素名”)；③類選擇器，為給定的類匹配元素，格式為：$(“.類名”)；④通配符“*”選擇器，可匹配所有元素，格式為：$(“*”)；⑤并集選擇器。格式為：$(“選擇器1，選擇器2，……”)。層次選擇器有后代選擇器、子代選擇器、兄弟選擇器、相鄰選擇器等幾種類型。觀看閱讀程序?qū)W會(huì)引入JavaScript文件的兩種方式學(xué)生搶答數(shù)據(jù)類型掌握數(shù)據(jù)類型及其對(duì)應(yīng)的值總結(jié)提煉出setInterval()函數(shù)的基本語(yǔ)法結(jié)構(gòu)學(xué)生：學(xué)會(huì)jQuery的安裝過(guò)程，并練習(xí)達(dá)成教學(xué)目標(biāo)活動(dòng)2網(wǎng)頁(yè)實(shí)操（20分鐘）1.學(xué)生上機(jī)實(shí)操制作輪播圖交互效果。要求用戶沒(méi)有點(diǎn)擊時(shí)能進(jìn)行自動(dòng)輪播，單擊圖片兩側(cè)的按鈕或下方的數(shù)字按鈕時(shí)，也可以進(jìn)行輪播。代碼如下：$(function(){ $(".silie-btn").click(function(){ varindex=+$(".silie").attr("index"); if($(this).hasClass("btn2")){ if(index>2)index=-1; index++; }else{ if(index<1)index=4; index--; }$(".silie").attr("index",index);$(".silieimg").css("left",-100*index+"%");$(".silie-yuan.yuan").removeClass("ac");$(".silie-yuan.yuan").eq(index).addClass("ac"); }) $(".silie-yuan.yuan").click(function(){ varindex=$(this).index(); $(".silie").attr("index",index); $(".silieimg").css("left",-100*index+"%"); $(".silie-yuan.yuan").removeClass("ac"); $(this).addClass("ac"); }) setInterval(()=>{ varindex=+$(".silie").attr("index"); if(index>2)index=-1; index++; $(".silie").attr("index",index); $(".silieimg").css("left",-100*index+"%"); $(".silie-yuan.yuan").removeClass("ac"); $(".silie-yuan.yuan").eq(index).addClass("ac"); },3000)})學(xué)生上機(jī)實(shí)操展示評(píng)價(jià)（3分鐘）按生生互評(píng)、教師點(diǎn)評(píng)