邮箱验证教学设计.doc

《制作JavaScript脚本特效》——11.2验证电子邮箱地址
教学设计
课题11.2验证电子邮箱地址授课时间2013年4月日授课类型新授课学时1教
学
目
标知识与技能能够使用String对象常用属性和方法实现客户端电子邮箱地址验证。过程与方法任务下达→相关知识→任务完成→任务拓展→任务总结情感、态度与价值观通过学习本节内容，提高学生开发网页的能力及培训学生的团队意识。教学重点String对象常用属性及方法教学难点string对象的灵活应用，使用string对象完成电子邮箱地址验证教学方法任务驱动教学法，启发法，讨论法教具准备课件教学过程教学内容教师活动学生活动设计意图【任务下达】（2分钟）
观看网页：

需求描述
使用JavaScript制作网页，对用户输入的电子邮箱地址进行验证。
案例分析（10分钟）
完成网页：实现合法邮箱验证的功能。
合法邮箱需具备的条件：
邮箱不能为空；
邮箱中必须有“@”和“.”；
只能有一个“@”；
邮箱的第一位和最后一位不能是“@”和“.”；
“.”不能紧挨在“@”后面。

【相关知识】
String对象的常用方法
length:返回指定字符的长度
charAt(index)：返回指定位置的字符
indexOf(字符串，index)：查找某个指定的字符串值在字符串中首次出现的位置
示例1：
varstr=”thisisJavaScript”;
varr=str.length;
document.write(r);
示例2：
varstr=”thisisJavaScript”;
varr=str.charAt(8);
document.write(r);
示例3：
varstr=”thisisJavaScript”
varr=str.indexOf(“F”);
document.write(r);
示例4：
varstr=”thisisJavaScript”
varr=str.indexOf(“i”);
document.write(r);

示例5：
varstr=”thisisJavaScript”;
varr=str.indexOf(“i”,3);
document.write(r);

【实现完成】：
邮箱地址不能为空：用length判断邮箱地址的长度，如果为-1则为空；
邮箱地址必须有“@”：用indexOf判断邮箱中是否“@”，如果返回值不为0则说明包括“@”；
只有一个“@”：用indexOf方法中的index参数查找第二个“@”的位置，判断是否只有一个“@”；
邮箱的第一位和最后一位不能是“@”或“.”：用charAt方法判断第一位和最后一位是不是“@”或“.”；
“.”不能紧挨在“@”后面。

【任务拓展】（5分钟）
完成网页，并实现前三项功能：
【任务总结】（2分钟）
String对象的常用方法
演示本节课所要完成的任务

描述网页实现的效果

引导学生分析：在设置邮箱地址时，什么样的邮箱地址是合法的邮箱地址

简单介绍各种方法的使用

分析出合法邮箱地址具备的条件后，让学生找到解决办法

指导学生完成合法邮箱功能的实现，针对学生出现的问题进行解答

布置拓展任务，布置需求

巡视，指导

总结
观看网页，并思考

分析，思考

分析，讨论，学生根据自己在填写邮箱地址时，遇到的问题，总结合法邮箱需要具备的条件
听讲

听讲

通过机器验证结果，并回答出得出相应的结果的依据

学生分组讨论，并将讨论的结果进行汇报

学生根据前面学习的String对象的使用方法找到可以实现合法邮箱地址的方法
学生分组讨论

编写代码

在完成表单验证过程中，输入正确的邮箱地址是非常重要的步骤，本节内容通过完成正确邮箱地址的判断，引导学生完成String对象的学习。

通过学生的讨论，让学生积极思考，分析出合法邮箱地址需要具备的条件，培养学生团队合作意识，及分析问题的能力
通过示例，让学生总结各种方法的使用，调动学生的参与性及积极思考的能力

通过任务拓展，加强本节内容的理解与掌握

消化巩固本节知识与技能。教学反思本节课以任务驱动为主线，以学生的自主探究学习为中心，以小组合作的形式，充分调动了学生学习的积极性，学生积极思考，讨论热烈，课堂气氛活跃，从学生的完成任务情况来看，知识目标达到，能力、发展和情感目标基本实现。
学生通过讨论，增强了学生的合作意识，通过汇报，锻炼了学生的表达能力。在学生讨论过程中，能够举一反三，解决了知识点本身的问题，也将该知识点在实际生活中可能应用到的