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．能說出on事件的語法；2．能區(qū)分search()和replace()方法；技能1．熟練使用on事件；2．能使用off()方法解除元素綁定；素養(yǎng)1．通過制作“志愿者招募”板塊提升邏輯思維能力和自學(xué)能力；2．養(yǎng)成細(xì)致縝密的編程習(xí)慣；課程思政通過編寫與調(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)正則表達(dá)式的應(yīng)用。教學(xué)難點(diǎn)正則表達(dá)式的應(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é)過程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖新課導(dǎo)入(3分鐘)提問：什么是on事件學(xué)生閱讀教材找出on事件的概念。思考問題，閱讀教材教學(xué)

過渡目標(biāo)展示(2分鐘)PPT展示本課題要完成的目標(biāo)并適當(dāng)解說觀看了解活動(dòng)1認(rèn)識(shí)正則表達(dá)式的技術(shù)(15分鐘)1.on事件在jQuery中，使用on()方法為元素綁定一個(gè)事件或者多個(gè)事件。on()方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。語法如下：$(selector).on(event，childSelector，data，function)教師講解：event規(guī)定要從被選元素添加的一個(gè)或多個(gè)事件或命名空間；?childSelector規(guī)定只能添加到指定的子元素上的事件處理程序；data規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)；function規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。2.正則表達(dá)式教師：什么是正則表達(dá)式呢？正則表達(dá)式是由一個(gè)字符序列形成的搜索模式，可以是一個(gè)簡單的字符或一個(gè)更復(fù)雜的模式。正則表達(dá)式可用于所有文本搜索和文本替換的操作。語法格式如下：/正則表達(dá)式主體/修飾符（1）修飾符?i執(zhí)行對(duì)大小寫不敏感的匹配?g執(zhí)行全局匹配?m執(zhí)行多行匹配（2）表達(dá)式[abc]查找方括號(hào)之間的任何字符[0-9]查找任何從0至9的數(shù)字（3）元字符. 匹配除“\n”之外的任何單個(gè)字符^ 匹配輸入字符串的開始位置$ 匹配輸入字符串的結(jié)束位置\s 查找空白字符。等價(jià)于[\f\n\r\t\v]\S 匹配任何非空白字符。\w 匹配包括下畫線的任何單詞字符。\W 匹配任何非單詞字符。\d 匹配一個(gè)數(shù)字字符。等價(jià)于[0-9]\D 匹配一個(gè)非數(shù)字字符。等價(jià)于[^0-9]?\b 匹配一個(gè)單詞邊界，也就是指單詞和空格間的位置。?\B 匹配非單詞邊界。觀看閱讀程序理解on事件的語法結(jié)構(gòu)和用法認(rèn)真聽老師講解并記好筆記達(dá)成教學(xué)目標(biāo)活動(dòng)2網(wǎng)頁實(shí)操（20分鐘）制作志愿者交互板塊創(chuàng)建3個(gè)變量，姓名、電話、日期，初始值為false，初始狀態(tài)為假varname=false; varphone=false; vardate=false;為輸入姓名的輸入框綁定檢測內(nèi)容是否發(fā)生修改的事件 $(".input_w.name").on('inputpropertychange',function(){ varval=$(this).val(); if(val.length>0){ name=true; }else{ name=false; } });為輸入電話的輸入框綁定檢測內(nèi)容是否發(fā)生修改的事件 $(".input_w.phone").on('inputpropertychange',function(){ varval=$(this).val(); varzhengze=/^1[34578]\d{9}$/; if(zhengze.test(val)){ phone=true; }else{ phone=false; } if(phone&&name){ $("#submit").css(); } });為輸入電話的輸入框綁定檢測內(nèi)容是否發(fā)生修改的事件 $(".input_w.date").on('inputpropertychange',function(){ date=true; }); $("#submit").click(function(){ if(!name){ $(".name_after").text("請(qǐng)輸入姓名"); }else{ $(".name_after").text(""); } if(!phone){ $(".phone_after").text("請(qǐng)輸入正確號(hào)碼"); }else{ $(".phone_after").text(""); } if(!date){ $(".date_after").text("請(qǐng)輸入日期"); }else{ $(".date_after").text(""); } if(name&&phone&&date){ alert("提交成功"); } })學(xué)生上機(jī)實(shí)操展示評(píng)價(jià)（3分鐘）按生生互評(píng)、教師點(diǎn)評(píng)的方式評(píng)價(jià)學(xué)生