2.6.2 Carla's Classroom：拼写课
Carla是一位小学老师，她委托你为她的班级编制练习网站。此时，即使你的程序设计技能还很有限，你仍然能够为小孩子们开发一些非常好的练习。在本章中，你将用一个指定的单词列表创建一个拼写测试。在本书后面，你将改进这个测试，让Carla使用她想要的任何拼写单词。我们将这个练习称为An Appetite for Spelling。
2.6.2.1 开发程序
我们要创建一个网页，为学生提供简单的拼写测试。在开始编写JavaScript代码之前，应该先设计页面。也就是说，为页面给出一个标题和简短的说明，要求学生拼写一些单词。但是，由于要求学生拼写单词时不能直接显示这个单词，所以需要为每个单词显示一个图像。为此，我们使用5个食物照片表示5个单词（以后，你可以添加更多的单词，或者使用循环程序提供Carla想要数目的单词）。可能的食物单词是avocado（梨）、bananas（香蕉）、celery（芹菜）、lemonade（柠檬水）和onions（洋葱）。这些食物图像已存在于Student Data Files中，当然你也可以使用自己的图像。
为了编写这个程序，我们应当决定如何在网页上显示这些图像、问题和结果，使用什么变量，以及采取什么步骤来实现我们的最终目标。这个程序的一般伪代码如下：
1）说明程序的目的。
2）声明变量。
3）展示一个食物照片。
4）要求输入这个食物的拼写字母。
5）检查拼写的单词是否正确。
6）输出结果（正确或不正确）。
7）为所有单词重复步骤3~6。
随着进一步的处理，我们将细化这些步骤。首先，决定需要什么变量和如何向玩家描述这些变量。
我们需要显示一个食物图像，要求学生录入这个食物的名字，然后显示信息指出学生录入的名字是否拼写正确。要完成这件事，可以使用一个按钮，当学生单击它时将录入答案；再使用另一个按钮，当单击它时将显示录入的答案是否正确。
我们从网页开始。下列HTML代码只是简单显示含有第一种食物和第一个问题的网页。你可以在Student Data Files中找到这个页面，并且随着后续讲解添加相关代码，从而可以看到这个页面的实际显示效果。
这个页面的输出看起来像这样：
我们需要添加一个按钮让学生录入答案，再添加另外一个按钮让学生检查这个答案是否正确。为这两个按钮可以编写以下简单的代码：
value属性给出在按钮上显示的文本。然而，这些按钮实际上不做任何事情。我们想要单击第一个按钮时显示一个提示对话框让学生录入答案，而单击第二个按钮时显示答案是否正确的信息。为了实现这些事情，我们将使用一个函数。
2.6.2.2 函数
函数在任何程序设计语言中都扮演着重要的角色。在不同于JavaScript的语言中，不使用自己创建的函数也有可能编写一些非常复杂的程序。然而基于JavaScript的性质，你现在就需要使用函数。对于函数的全面理解及其复杂使用方法，以后再学习（即第7章专门讨论函数）。
大体上，之所以要使用函数是因为网页要调用JavaScript代码，而JavaScript代码要将信息传回网页。JavaScript代码通常放在<script></script>标签对之间的函数内，而网页使用函数名指定要执行哪个部分的JavaScript代码。Greg's Tales页使用了这个概念，它调用函数startGame()。
在这种情况下，当学生单击按钮回答问题时将调用JavaScript代码提示学生录入答案。在录入一个答案之后，学生可能单击第二个按钮检查答案是否正确。当学生单击任一按钮时，对应的onclick事件将调用我们编写的JavaScript函数。对于第一个按钮，对应的函数将提示学生录入单词并且检查学生录入的单词是否拼写正确。对于第二个按钮，其onclick事件将调用一个函数显示学生的回答是否正确。
2.6.2.3 showPrompt1()和showResult1()函数
第一个函数命名为showPrompt1()，当调用这个函数时将发生两件事情：一是提示学生录入一个答案，二是检查答案的正确性。为这些事件编写代码是不难的：
这行简单的代码提示学生录入一个单词，然后存储到变量word1中。
为了检查答案的正确性，可以使用如下的条件操作符：
这个代码需要放在一个函数内。在JavaScript中创建一个函数的格式如下所示：
单词function是一个关键字（类似var），指出这是一个函数。有些函数需要参数（值放在圆括号内），而有些不需要。目前，正在创建的两个函数的圆括号内不需要放任何东西。当函数调用时要执行的所有语句放在花括号之内。这样，以下就是我们正在创建函数的完整代码，能够获取答案并且检查它：
一旦创建了一个函数，就可以使用它的名字调用这个函数。我们把这个函数调用添加到前面创建的按钮的onclick事件中：
网页上的第二个按钮告诉学生单击它可查看答案是否正确，因此一旦单击这个按钮就调用一个函数显示拼写结果。这个结果由前面调用的函数showPrompt1()决定，并且已经存储在变量Resultl中。可以创建一个函数showResult1()，使用警示对话框显示这个结果，该函数代码如下：
通过为相应按钮的onclick事件插入它的名字，可以调用这个函数：
2.6.2.4 将所有代码放在一起
如下所示，这些JavaScript代码放在<head>区域之内。下面也显示了按钮代码，它放在页面的<body>之内，正好在Question的下面。
现在，这个页面看起来像这样：
2.6.2.5 完成
到现在为止，网站只测试一个单词拼写。然而，添加另外4个单词或者甚至40多个单词是非常简单的事情。以后通过使用重复结构，我们可以更有效地编写这段代码，但是现在我们只是简单地复制和粘贴用于拼写单词的代码，其次数取决于我们想要检测的拼写单词个数。要记住的是，已命名的变量和函数的名字末端带有数字1。通过将1改为2、3、4或5，我们就可以重新使用复制的代码。下面给出测试所有5个拼写单词的完整网页代码：
这里是一些在给定输入情况下的输出样例：
输入：
单击answer Q.1按钮，录入avacada，单击OK按钮，然后单击check answer按钮。
输出：
输入：
单击answer Q.3按钮，录入celery，单击OK按钮，然后单击check answer按钮。
输出：
