4 个 JavaScript 挑战，13 名高中生，2 小时

本周，我工作的高中举办了文化周活动，我在那里教授 Web 应用程序开发。

一位为学前班学生教授编程（计算机科学的简要介绍）的同事告诉我，有一组 13 名学生想在第二年攻读计算机科学学位，所以我想出了一个主意，和他们一起为我的学生开设一个编程研讨会。

我首先提出的要求是，研讨会只邀请有编程学习意愿的学生参加。此外，我在研讨会开始前与他们进行了初步交流，探讨了他们之前的学习经验以及他们对研讨会的个人兴趣。学生们掌握了以下 C 语言概念：

• 变量和常量。

• 控制结构：if、else-if、while、for、do-while。

• 功能。

他们不了解如何使用数组等数据结构。

此外，我与学生们商量，准备了一个与传统工作坊略有不同的工作坊，传统的工作坊通常只有一位主讲人，并配备多位助手。因此，我们的方法如下：

• 我们将一名高中生与一名职业培训学生进行匹配。

• 我们展示了挑战的最终结果，并指出了如何解决问题的小线索。

• 高中生们会开始和他们的同伴一起练习，同伴既不提供答案，也不敲键盘。同伴的目标是解释概念，最重要的是帮助他们解决语法问题。

• 每对情侣按照自己的节奏进行。每对情侣完成一项练习后，都要通知我，这样我就可以记录整个团队的节奏。

• 在第一个小时结束时，高中生会在白板上展示他们的解决方案，以便同学们可以看到最终结果。

接下来，我们开始规划挑战，考虑到高中只有2个小时的时间来解答这些挑战。为此，每位职业培训生都准备了一个小挑战，并附上了解决方案。

当所有学生都准备好挑战后，我们必须决定使用哪些挑战。为了做出这个决定，我们花了一个小时研究可能的挑战，并按难度进行分类。我们删除了部分代码，这些代码将由高中生在研讨会当天完成。

完成这部分后，我们准备了一个 Git 存储库，以便所有职业培训学生都能获得相同的信息（挑战和解决方案）。

打破僵局

工作坊当天，26名年龄在17岁至23岁之间的年轻人被分成两组。因此，我们需要做的就是把他们分成两人一组，并打破他们之间的僵局。

因此，尽管在西班牙高中这个年龄段这并不正常，但我们还是玩了一个小游戏：

• 他们排成两排，每组面对面站立。

• 我告诉他们，一定要了解对方的姓名、年龄、爱好，还要留意对方的衣着细节。

• 每隔15秒，其中一排的学生就会向左移动，所以他们前面的人会发生变化。然后，他们重复提问。

就这样几分钟的时间，大家都自我介绍完毕，并且把全部注意力都集中在了解眼前这个人的姓名、年龄、爱好等方面。

练习结束时，我把桌子摆成游戏前那样，然后逐一询问他们是否能记住站在他们前面的人左边的人的名字（不是他们前面的人，那样太容易了）。结果只有极少数人能记住这个名字。

我们从这次练习中学到了什么？

• 人类无法记住很多变量（一些研究表明 7 是平均数）。

• 我们刚刚做了一个算法，其实它是一个控制结构：循环。

• 每个人都放松下来，僵局确实被打破了，我们不再是两组陌生人，他们已经一起玩游戏并进行了介绍。

现在我们将描述我们为研讨会提出的挑战。

问题 1 — 计算器

第一个挑战非常简单，因为它是为了让学生学习基本的 JavaScript 变量定义语法。

这个挑战包括一个带有两个输入值（数字 1 和数字 2）的表格和一个按钮，按下该按钮时会显示以下所有运算的结果：加法、减法、乘法、除法、余数、第一个数字的双倍值以及最后第二个数字的双倍值。

本题中的HTML文档如下所示：

提供给学生的 JavaScript 文件如下，其中有带有文本 TODO 的注释，学生应该在其中进行修改。

问题 2 — 猜一个数字

第二个问题稍微复杂一些。目标是创建一个算法，随机生成一个介于 1 到 7 之间的数字。玩家可以输入数字来尝试猜测。玩家有三次机会猜出数字，如果猜错，游戏就输了。无论哪种情况，都必须向玩家显示一条消息。

本题中的HTML文档如下所示：

向学生提供的 JavaScript 文件如下：

问题 3 — 绳索游戏

第三个问题融入了视觉元素，以吸引高中生的注意力。在本例中，我们将实现“绳子游戏”的逻辑。该游戏包含两次按键操作，每次按键都会将绳子向一个方向或另一个方向移动。将绳子移动到指定方向的玩家将获胜。

在这个问题中，高中生必须实现绳子移动条件的逻辑，以及确定玩家何时赢得比赛的逻辑。

此外，代码的编写方式使得他们可以完美地理解如何控制在 Web 浏览器中按下的键。

向学生提供的 JavaScript 文件如下：

问题 4 — 足球比赛

最后一个问题比前面几个更复杂，也更有趣。在这个例子中，我们将有一个足球场和一个球，我们可以使用四个光标键中的任意一个来移动它。

高中生必须实现投篮功能（动作已编程，与上一次挑战中创建的代码非常相似）。此外，他们还必须确定场地边界，以便将球返回到场地中心。

向学生提供的 JavaScript 文件如下：

在研讨会结束时，我们抽取了一些学生对研讨会的体验，总结如下：

我更高了，我有一个伟大的想法，可以在信息世界和田野上享受生活。 ¡Las personas que Lo han preparado son geniales y las actividades muy divertidas！互动能力更强。 （*研讨会似乎是一个好主意，能够进入计算世界并结识来自该领域的人们。准备研讨会的人很棒，活动非常有趣！我期待更多的互动研讨会。）*
Este galler ha estado muy interesante。 Además es util para ver other lenguajes deprogramación y conocer gente y sus distintos puntos de vista y forma de solucionar Problemas。 ( * 这次研讨会非常有趣。了解其他编程语言、结识新朋友以及他们不同的观点和解决问题的方法也很有帮助。）*
我参加了一个非常有趣的研讨会。我们知道我们以前没有见过的事情，并且非常耐心地指导我们解决难题。总之，非常愉快。（* 我发现研讨会非常有趣。他们教了我们以前从未见过的东西，并且非常耐心地指导我们解决疑问。简而言之，很棒。）*
这位同事非常友好，他学得很好，Juan 给我留下了非常好的印象。（* 研讨会很棒，我学到了很多东西，我真的很喜欢 Juan。）*

我个人在职业培训和大学担任教师的经历非常愉快。学生们通常对所学内容充满动力，并对计算机科学（CS）充满热情。事实上，这些学生在两个小时的研讨会中就表现出了他们解决问题的极大动力。

破冰活动非常成功。在两个小时里，我的学生们一直在向高中生们讲解JavaScript的基础知识和逻辑思维，中间甚至没有休息。

因此，同伴学习比传统的由一个主讲人和几个助手组成的学习方式更为积极。

这些问题已被职业培训学生解决，并可以在公共存储库中找到。

总之，本研讨会适用于具有编程基本概念并希望使用 JavaScript 等编程语言创建代码的学生。

• 这篇文章的GitHub分支是https://github.com/Caballerog/blog/tree/master/workshop-javascript

最初于 2019 年 4 月 26 日发布于https://carloscaballero.io 。