



下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
《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分钟)按生生互评、教师点评的方式评价学生
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 英语词汇拓展:名词复数变化的技巧
- 高中语文古诗文阅读教学重点内容详解
- 计算机网络安全管理知识考点
- 一件有意义的事记叙事文(6篇)
- 《能源种类与利用方式:高中地理环境科学教案》
- 八年级语文社团活动方案
- 公主舞蹈活动方案
- 公交公司送清凉活动方案
- 公交职工文化节活动方案
- 公众考古活动方案
- 零星工程维修投标方案技术标
- 三超一疲劳安全教育
- 《自动控制原理》说课
- 医疗器械(耗材)项目投标服务投标方案(技术方案)
- 乡村医生从业管理条例全面解读
- 2024年中国石油集团招聘笔试参考题库含答案解析
- 神经科患者的心理支持与护理
- 智慧楼宇智能化管理系统需求规格说明书
- 幼儿园中班数学《小鱼有多长》
- 过程控制系统及仪表智慧树知到课后章节答案2023年下青岛大学
- 中国共产主义青年团团员发展过程纪实簿
评论
0/150
提交评论