Javascript程序设计 教案- 单元设计 -张劲波 第6--14章 DOM模型----实训 .doc

PAGE

PAGE2

课程单元设计

课程名称：

JavaScript程序设计

适用专业：

所属院系：

信息工程学院

编制人：

制定时间：

年至年第一学期

《JavaScript程序设计》教案设计

一、教案头

本单元标题：第6章DOM模型

授课班级：20软件1,2，3

课时：4

上课地点：实训5

教学目标

能力目标

知识目标

1、正确理解DOM树概念及DOM树中各个节点关系

2、能动态查看和修改页面中节点元素

1、DOM及DOM技术简介

2、页面中的DOM模型框架

能力训练任务

及案例

一、能力训练任务

1、访问指定节点的方法

2、查看/修改属性节点

二、案例

案例1：DOM技术应用简单示例

案例2：DOM基本方法综合示例

案例2：DOM常用方法综合示例

案例2：网页中的DOM模型框架示例

参考资料

Javascript技术教程

二、（单元）教学设计

教学环节

教学内容

教学方法及手段

学生活动

教学资源及工具

时间

分配

导入

复习浮动定位及position定位知识

课件演示

听讲

教材

网络资源

多媒体

10分钟

讲授

通过动态修改图片元素的实例来加深DOM树的理解及掌握访问指定节点的方法和查看/修改属性节点的方法

课件演示

模拟演练

听讲

实际操作

教材

网络资源

多媒体

电脑

80分钟

操练

实现点击按钮修改图片节点对象及获取图片的安装路径等属性值

演示

讲解

实际操作

教材

网络资源

多媒体

电脑

65分钟

总结

DOM树中节点间关系及动态修改或获取节点属性值

讲解

集体参与

教材

15分钟

作业布置

编写一个Web页面：每0.2秒在浏览器窗口的状态栏中滚动显示一次当前浏览器的信息。在输出内容前加一个输出次数的计数。这样每次的显示效果有所不同。

提示：浏览器信息可由window对象的子对象navigator获得，用indow.status设置状态栏的内容。

讲解

集体参与

网络资源

多媒体

电脑

10分钟

学习成果

完成本讲所有示例操作

教学后记

《JavaScript程序设计》教案设计

一、教案头

本单元标题：第6章DOM模型

授课班级：20软件1,2，3

课时：4

上课地点：实训5

教学目标

能力目标

知识目标

1、正确理解DOM树不同节点及其属性

2、使用HTMLDOM设置页面风格样式

1、DOM模型中的节点

2、非标准的innerHTML属性

3、DOM与CSS

能力训练任务

及案例

一、能力训练任务

1、DOM模型中三种节点及其属性

2、HTMLDOM设置页面风格样式

二、案例

案例1：元素节点示例

案例2：本文节点示例

案例3：属性节点示例

案例4：DOM与CSS改变样式示例

参考资料

Javascript技术教程

二、（单元）教学设计

教学环节

教学内容

教学方法及手段

学生活动

教学资源及工具

时间

分配

导入

复习DOM树结构

课件演示

听讲

教材

网络资源

多媒体

10分钟

讲授

1.通过实例讲解元素节点、文本节点及属性节点的属性值

2.通过HTMLDOM动态修改HTML元素的CSS风格样式

课件演示

模拟演练

听讲

实际操作

教材

网络资源

多媒体

电脑

80分钟

操练

练习：使用HTMLDOM对象的属性访问

演示

讲解

实际操作

教材

网络资源

多媒体

电脑

65分钟

总结

三种节点不同属性值

HTMLDOM与CSS关系

讲解

集体参与

教材

15分钟

作业布置

使用HTMLDOM修改字体颜色，类型及字体大小

讲解

集体参与

网络资源

多媒体

电脑

10分钟

学习成果

完成本讲所有示例操作

教学后记

《JavaScript程序设计》教案设计

一、教案头

本单元标题：第7章事件机制

授课班级：20软件1,2，3

课时：2

上课地点：实训5

教学目标

能力目标

知识目标

1、理解事件的驱动和响应

2、能捕捉鼠标操作事件

1、事件机制简介

2、鼠标操作事件

能力训练任务

及案例

一、能力训练任务

JavaScript事件运用

二、案例

案例1：鼠标事件

案例2：键盘事件

参考资料

Javascript技术教程

二、（单元）教学设计

教学环节

教学内容

教学方法及手段

学生活动

教学资源及工具

时间

分配

导入

复习DOM节点的属性

课件演示

听讲

教材