文档详情

JavaScript程序设计基础教程电子教案 单元8 表单 教案.docx

发布:2025-04-22约1.47千字共3页下载文档
文本预览下载声明

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表单基础知识、表单提交重置以及表单的验证等相关操作。通过实例的方法加强对表单事件的理解,达到能够独立熟练运用表单事件解决实际问题的能力。教学评价方式以小组为单位,以完成案例的质量为评价标准,形成任务驱动,小组协作,质量与速度并存的课堂评价方式,促进学生的自主、创新学习的方式。

显示全部
相似文档