web前端技術(shù)應用 教案 項目四 任務(wù)三 制作志愿者招募交互板塊

《Web前端技術(shù)應用》教學設(shè)計項目四任務(wù)三制作志愿者招募交互板塊課題制作志愿者招募交互板塊課程名稱Web前端技術(shù)應用授課班級學時安排2學時執(zhí)教老師授課形式理實一體教學目標知識1．能說出on事件的語法；2．能區(qū)分search()和replace()方法；技能1．熟練使用on事件；2．能使用off()方法解除元素綁定；素養(yǎng)1．通過制作“志愿者招募”板塊提升邏輯思維能力和自學能力；2．養(yǎng)成細致縝密的編程習慣；課程思政通過編寫與調(diào)試程序，讓學生切身體會到任何一個小疏忽都會導致程序運行錯誤。讓學生明確在今后的工作崗位上養(yǎng)成認真、細心和嚴謹?shù)淖黠L。教學重點正則表達式的應用。教學難點正則表達式的應用。教學方法分析法、討論法、演示法、引導式教學。教學環(huán)境軟件環(huán)境：Win7及以上操作系統(tǒng)，HBuilder硬件環(huán)境：多媒體教室或軟件實訓室，計算機教學資源：PPT、微課視頻教學過程教學環(huán)節(jié)教師活動學生活動設(shè)計意圖新課導入(3分鐘)提問：什么是on事件學生閱讀教材找出on事件的概念。思考問題，閱讀教材教學

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