JavaScript语言教学中DOM综合性应用案例的教学设计

詹彬，王敏，黄小童

（湖北文理学院计算机工程学院，襄阳441053）

0 引言

JavaScript程序设计是湖北文理学院计算机科学与技术专业的一门必修课程。文档对象模型DOM（Docu⁃ment Object Model）是JavaScript教学中一个重要内容。

在教学过程中发现，如果只是简单地介绍DOM结点操作的基本语法和某个知识点的简单案例，学生的工程实践能力不能得到提高。社会需要新工科人才，教学内容应该以解决实际问题为导向，增强学生综合利用所学知识解决实际问题的能力[1]。因此，在教学计划中用4个学时讲解DOM综合应用案例。综合应用案例的设计对教学效果的提高至关重要。本文以简易打字游戏为例进行讲解，以提高学生分析和解决实际问题的能力。

1 教学目的

在综合应用案例教学之前，学生已经学习了DOM编程的基本语法以及各个知识点的简单应用案例。通过综合性应用案例，使学生能够学以致用。

模拟金山打字通里面的打字游戏，设计一个简易打字游戏。简易打字游戏案例涉及的DOM知识点包括DOM结点的获取、DOM结点的动态增加和删除、DOM结点样式的修改及内容的设置，涵盖了DOM的大部分操作。

2 教学方法

该打字游戏每隔一秒从游戏窗口最下方随机产生一个英文字母节点，如果用户键入字母与游戏界面中的字母相同，则删除该字母节点；否则字母节点上升，当超出游戏界面，则字母节点消失[2-3]。通过演示简易打字游戏的运行过程，让学生形象地理解案例的功能。

把案例分为六个单元。第一个单元设置字母节点的样式及内容。第二个单元实现字母节点的移动及添加。第三个单元能够根据用户输入的字母，删除字母显示区域中相应的字母节点。第四个单元完成“开始”按钮代码的设计。第五个单元完成“暂停”按钮代码的设计。第六个单元完成“停止”按钮代码的设计。以上六个单元只是完成了简易打字游戏的基本功能。最后让学生对功能进行补充完善。

采用阶梯式教学法，为每个单元设计从易到难的问题，帮助学生完成任务[4]。为了降低设计的难度，为每个单元提供关键问题解决方法及解题思路，一步一步地引导学生完成设计任务，增强学生的学习信心。

采用讲练结合的方式进行教学[5]，讲解一个单元后，要求学生完成相应的代码设计。

3 教学过程

首先演示简易打字游戏的运行效果，在演示的过程中进行功能介绍。游戏界面分为上下两部分。上半部分是字母显示区域。下半部分有三个命令按钮，分别控制游戏的开始、暂停和结束。由于学时有限，在案例讲解前，准备好基本的界面。

单元一：设置字母节点样式和内容。

提出问题：如何让字母节点产生圆形背景效果？

解决方法：当div对象的边界半径属性值是宽度及高度的一半时，就产生了一个圆形效果。

然后展示字母结点的样式代码：

利用createElement方法产生字母节点，并存储到对象中，利用setAttribute方法设置样式属性为round，产生圆形背景效果。

提出问题：如何给节点添加字母？

解决方法：可以使用Math.random()方法产生随机数，String.fromCharCode()方法可以根据字符的Unicode编码转换成字母。

然后让学生补充下面的代码：

当学生完成代码设计后，让学生分析下面的3个问题：

（1）字母节点的初始高度为什么设置为500px？

（2）字母显示区域的overflow属性为什么设置为hidden？

（3）能否用字母图像代替字母符号？

通过这样的提问，增加了教师与学生之间的互动，同时让学生明白为什么这样编写代码。

单元二：定义移动和添加字母方法。

实现字母移动，首先需要获取显示区域的字母节点。即可以使用getElementsByClassName("round")获取所有字母节点，也可以使用getElementsByTagName("div")获取所有字母节点。这两种方法获取的都是字母节点数组，需要用循环语句依次访问字母节点。

提出两个问题：

（1）如何获得字母节点的位置？

（2）如何改变字母节点的位置？

解决方法：通过top属性能够获取字母节点的位置[6]，减少top的值就实现了节点位置的上升。

上升字母结点的解题思路：依次访问字母显示区域的每一个字母节点，如果某个字母节点的高度属性小于0（小于0表示该结点已经不能在显示区域显示），则删除字母节点；否则修改字母元素的高度，让字母元素的位置上升。

添加新字母对象的解题思路：利用单元一中的代码创建一个新的字母节点，利用appendChild方法把新的字母节点添加到字母显示区域。

要求学生分别用for语句与for-in语句完成详细设计。通过这种阶梯式教学方法，最终让大部分学生完成了任务，提高了学习信心。

最后增加功能，提高学生自主解决问题的能力。思考如何统计错误字母个数。在该单元中被删除的字母节点个数就是错误字母个数。

单元三：用户通过键盘按下某个字母后，删除字母显示区域相同的字母节点的方法keyPress。

提出问题：如何获取用户按下的字母？

解决方法：键盘按下事件中e.key能够获取用户按下的字母。

依次访问字母显示区域的每一个字母节点，如果字母节点的innerText属性值等于按键字母，则用rem⁃oveChild方法删除字母节点。

完成设计任务后，给出思考题：如何统计正确字母的个数？

在单元三中被删除的字母节点个数就是正确字母个数。

单元四：“开始”按钮代码的设计。

由于每隔一秒产生一个字母，需要定义一个定时器timer1，该定时器每隔1秒执行一次移动和添加字母方法。

单元五：“暂停”按钮代码的设计。

利用clearInterval方法停止定时器。

单元六：“结束”按钮代码的设计。

停止定时器timer1，同时清空字母显示区中的所有内容。

提出问题：如何清除显示区中的字母节点？

解决方法：把显示区结点的innerHTML属性设置为空字符串。

完成六个单元的任务后，要求学生进行功能完善。在单元一中设置字母节点背景颜色为随机颜色，把统计的正确字母个数和错误字母个数实时地显示在界面中，修改字母上升的速度[2-3]。由于已经完成了基本功能，大部分学生能够根据要求，对游戏界面及功能进行改进。

4 教学特点总结

采用提问的方式与学生进行交流，增加了教师与学生之间的互动，提高了学生分析和解决问题的能力。为了降低设计的难度，每个单元提供了关键问题的解决方法及解题思路，增强学生学习的信心。为了提高学生的设计能力，给出了思考题，要求学生补充完善综合应用案例的功能。

5 结语

实践证明，这种教学设计提高了学生利用DOM分析和解决实际问题的能力，增强了学生的学习信心，为综合性应用案例的教学设计提供了借鉴。