web前端技术应用 教案 项目四 任务三 制作志愿者招募交互板块

《Web前端技术应用》教学设计项目四任务三制作志愿者招募交互板块课题制作志愿者招募交互板块课程名称Web前端技术应用授课班级学时安排2学时执教老师授课形式理实一体教学目标知识1．能说出on事件的语法；2．能区分search()和replace()方法；技能1．熟练使用on事件；2．能使用off()方法解除元素绑定；素养1．通过制作“志愿者招募”板块提升逻辑思维能力和自学能力；2．养成细致缜密的编程习惯；课程思政通过编写与调试程序，让学生切身体会到任何一个小疏忽都会导致程序运行错误。让学生明确在今后的工作岗位上养成认真、细心和严谨的作风。教学重点正则表达式的应用。教学难点正则表达式的应用。教学方法分析法、讨论法、演示法、引导式教学。教学环境软件环境：Win7及以上操作系统，HBuilder硬件环境：多媒体教室或软件实训室，计算机教学资源：PPT、微课视频教学过程教学环节教师活动学生活动设计意图新课导入(3分钟)提问：什么是on事件学生阅读教材找出on事件的概念。思考问题，阅读教材教学

过渡目标展示(2分钟)PPT展示本课题要完成的目标并适当解说观看了解活动1认识正则表达式的技术(15分钟)1.on事件在jQuery中，使用on()方法为元素绑定一个事件或者多个事件。on()方法在被选元素及子元素上添加一个或多个事件处理程序。语法如下：$(selector).on(event，childSelector，data，function)教师讲解：event规定要从被选元素添加的一个或多个事件或命名空间； childSelector规定只能添加到指定的子元素上的事件处理程序；data规定传递到函数的额外数据；function规定当事件发生时运行的函数。2.正则表达式教师：什么是正则表达式呢？正则表达式是由一个字符序列形成的搜索模式，可以是一个简单的字符或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。语法格式如下：/正则表达式主体/修饰符（1）修饰符 i执行对大小写不敏感的匹配 g执行全局匹配 m执行多行匹配（2）表达式[abc]查找方括号之间的任何字符[0-9]查找任何从0至9的数字（3）元字符. 匹配除“\n”之外的任何单个字符^ 匹配输入字符串的开始位置$ 匹配输入字符串的结束位置\s 查找空白字符。等价于[\f\n\r\t\v]\S 匹配任何非空白字符。\w 匹配包括下画线的任何单词字符。\W 匹配任何非单词字符。\d 匹配一个数字字符。等价于[0-9]\D 匹配一个非数字字符。等价于[^0-9] \b 匹配一个单词边界，也就是指单词和空格间的位置。 \B 匹配非单词边界。观看阅读程序理解on事件的语法结构和用法认真听老师讲解并记好笔记达成教学目标活动2网页实操（20分钟）制作志愿者交互板块创建3个变量，姓名、电话、日期，初始值为false，初始状态为假varname=false; varphone=false; vardate=false;为输入姓名的输入框绑定检测内容是否发生修改的事件 $(".input_w.name").on('inputpropertychange',function(){ varval=$(this).val(); if(val.length>0){ name=true; }else{ name=false; } });为输入电话的输入框绑定检测内容是否发生修改的事件 $(".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(); } });为输入电话的输入框绑定检测内容是否发生修改的事件 $(".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分钟）按生生互评、教师点评的方式评价学生