



下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
《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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025至2030中国工业设计行业市场发展现状及前景趋势与行业项目调研及市场前景预测评估报告
- 2025至2030中国婴儿卫浴产品行业市场现状分析及竞争格局与投资发展报告
- 护理实践中的风险评估和管理
- 小学四年级数学三位数乘两位数能力考核训练题大全附答案
- 四年级数学三位数除以两位数同步练习试题大全附答案
- 我学会了坚持初中成长故事(11篇)
- 农业种植项目土壤改良技术应用合同
- 草船借箭:高中语文三国题材文本解析教案
- 七年级诗词学习规划:古诗意象解析与实践运用
- 市场策划与营销合作协议细节
- 车辆抵押借款合同合同
- (完整)施工现场重大危险源的控制措施
- 东北历史与文化(吉林联盟)知到章节答案智慧树2023年吉林师范大学
- 国家开放大学电大《机电一体化系统》机考形考任务1及2题库答案
- 针灸 穴位 经络 介绍手太阳小肠经
- 内科学风湿及结缔组织病习题及答案
- 真空系统的设计计算课件
- 潘祖仁版高分子化学(第五版)课后习题答案.24401
- 茶馆剧本(三幕话剧)
- 搭桥手术配合改
- 《建筑施工操作工种实训(第二版)》单元6架子工实训
评论
0/150
提交评论