JavaScript程序设计基础教程电子教案 单元8 表单 教案.docx
PAGE1
PAGE
单元8表单
课程名称
JavaScript程序设计
项目名称
表单
任务名称
表单
课时
2
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标:
具备进行表单验证的能力
知识目标:
掌握处理提交表单、重置表单的方法
掌握共有表单字段的属性和方法
素质目标:
1.培养学生信息搜集能力
2.培养学生团结合作、互帮互助的能力
教学内容
1.创建一个表单,处理提交表单、重置表单和验证表单
2.学生动手操作
3.教师讲解本任务涉及的知识点
教学重点
进行表单验证
教学难点
提交表单和验证表单
教学准备
1.装有Chrome浏览器或者Firefox浏览器,并且安装有WAMP的电脑
2.教学课件PPT
3.教材:《JavaScript程序设计基础教程(微课版)》刘刚人民邮电出版社
作业设计
使用form表单的elements属性来遍历表单中的所有元素
教学过程
教学
环节
教学内容与过程
(教学内容、教学方法、组织形式、教学手段)
课前组织
做好课前“5分钟”教学管理(多媒体、实训室),做好上课前的各项准备工作(打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等),吸引学生注意力。
课程
说明
【课前说明】
分别从提交表单、重置表单和表单字段等入手,掌握表单基础知识,进而介绍进行表单验证的方法,具备使用表单解决问题的能力。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。掌握表单的基本概念,掌握进行表单验证的方法。
课程
内容
描述
一、表单基础
1.提交表单
2.重置表单
3.表单字段
二、通过案例理解如何来验证表单所提交数据是否合法
案例:
1.表单提交
formid=test-form
inputtype=textname=test
buttontype=buttononclick=doSubmitForm()Submit/button
/form
script
functiondoSubmitForm(){
//可以在此进行表单验证
varform=document.getElementById(test-form);
//验证完毕提交form:
form.submit();
}
/script
2.重置表单
inputtype=resetvalue=ResetForm //通用重置按钮
buttontype=resetResetForm/button //自定义重置按钮
课堂
实训
同步训练:
用JavaScript实现简单的注册模块表单验证。
总结
评价
通过学习,学生能够掌握提交表单和验证表单的方法。
本节课主要运用案例教学法,介绍了JavaScript表单基础知识、表单提交重置以及表单的验证等相关操作。通过实例的方法加强对表单事件的理解,达到能够独立熟练运用表单事件解决实际问题的能力。教学评价方式以小组为单位,以完成案例的质量为评价标准,形成任务驱动,小组协作,质量与速度并存的课堂评价方式,促进学生的自主、创新学习的方式。