JavaScript程序设计基础与实战- 教案 模块6 JavaScript对象模型及应用.docx

教学流程设计（理实一体化）

教师姓名

系部专业

授课对象

课程名称

JavaScript对象模型及应用

授课时间

使用教材

JavaScript程序设计基础与实战

计划学时

10学时

教学形式

及地点

教学目标

知识目标

能力（技能）目标

素质目标

掌握JavaScript中document、window、style等对象的基本操作及应用。

能够灵活运用JavaScript对网页元素的尺寸和位置进行动态操作。

培养学生的网页动态效果设计能力，提高逻辑思维能力和代码实践能力。

教学内容

6.1JavaScript的document对象及

操作

6.2JavaScript的浏览器对象及

操作........................................128

6.3JavaScript的尺寸与位置及其设置

方法........................................131

6.3.1网页元素的宽度和高度.........131

6.3.2网页元素的位置

6.3.3通过网页元素的样式属性style

获取或设置元素的尺寸和

位置

重点难点及解决方法

教学重点：

熟练掌握document对象的方法与属性。

理解并操作网页元素的尺寸、位置与样式属性。

解决方案：通过案例导入与分阶段任务实施，逐步讲解document对象操作和CSS样式动态修改。

教学难点：

网页元素样式的动态控制和定位操作。

解决方案：通过真实场景案例模拟，例如“制作邮件自动导航”，让学生边学边练；设置逐步指导，分解任务难点。

教学方法

案例法、任务驱动法、鼓励创新法

教学资源

演示案例、案例素材、机房资源

教

学

过

程

设

计

主要流程

时间

安排

1．知识点引入

通过提问“如何通过代码动态修改网页内容”引入课程主题。

简单演示document.getElementById的使用，让学生感知DOM操作的直观效果。

10

2．案例导入

通过提问“如何通过代码动态修改网页内容”引入课程主题。

简单演示document.getElementById的使用，让学生感知DOM操作的直观效果。

10

3．案例分析

分析案例中的关键代码：

1. 如何选取网页中的元素。

2. 如何动态修改网页内容及样式。

3. 如何计算并设置网页元素的位置与尺寸。

10

4．专题辅导

深入讲解document和window对象的常用方法，如getElementById、querySelector、innerWidth等。

15

教师活动

学生活动

分析讲解案例，应用知识点,培养学生的自我学习能力和创新革新能力；

选择要点，作好笔记；

听、思考，适时发问；

归纳、总结；

5．任务实施

教师活动

学生活动

时间

指导学生构建基础导航功能，演示如何通过JavaScript动态生成导航按钮，并实现自动跳转功能。

编写代码，生成导航按钮并绑定点击事件，完成跳转功能。

20

展示如何通过JavaScript控制网页内容的隐藏与显示，解释style.display的使用方法。

完成折叠与展开功能的代码实现，并调整页面布局。

15

结合案例，讲解如何动态修改表单的输入框样式，以及实时显示输入字符数。

完成代码编写，实现输入框聚焦效果及字数限制提示功能。

15

6．总结点评

回顾本节课所学的核心内容：document、window和style对象的操作。

总结学生在任务中的表现，表扬优秀代码设计，指出需改进的问题。

5

7．课后任务安排

修改课堂案例代码，优化功能设计，如增加动画效果或自定义样式。

阅读教材，完成模块中涉及的知识点练习题，巩固所学内容。

5

教学后记（对课程设置、教学计划、教学大纲、教案、教材、教学方法的建议）

本节课的教学重点在于学生对网页动态效果的操作与实现。从课堂反馈来看，大部分学生能够掌握基本的DOM操作及网页样式修改，但对于复杂功能的逻辑设计仍需提高。在后续教学中，将安排更多复杂场景的案例练习，进一步提升学生的逻辑思维能力与代码综合应用水平。