1.8.2　Carla's Classroom：创建About You页面

Carla是一位小学老师，她委托你为她的班级编制练习网站。此时，即使你的JavaScript程序设计技能还很有限，你仍然能够为小孩子们开发一些非常好的练习。如果打开Student Data Files中的文件index.html，将看到Carla's Classroom的首页。它看起来像这样：

现在，你可以编辑这个页面以便添加一条到新建页面的链接。因为这个新页面允许孩子录入个人信息，所以将它命名为aboutme.html。在页面的顶部添加新的导航链接，其链接文本是“About Me!”。你可以使用Student Data Files中的一个图像或者自己找到的图像。把新页面存储在与index.html相同的文件夹中，并把图像放入images文件夹中。这个链接的代码如下：

这个页面现在看起来像这样：

现在，我们将创建“About Me!”页面。

1.8.2.1　开发About Me!页面

在这个页面上，学生将录入4种信息，你也可能会添加更多的信息。我们将要求学生录入他的名字、年龄、喜欢的科目和喜爱的老师。为了让页面更有趣一点儿，我们将添加代码使得不管学生录入什么，喜爱的老师总是Carla。

我们要确保这个站点的每个页面使用相同的样式。index.html页面使用外部样式表carla.css，这个文件可以在Student Data Files中找到。一定要把这个站点的所有文件保存在你的计算机或闪存上的一个文件夹中，创建这个文件夹并命名为carla。将任何网页使用的所有图像保存在文件夹images中也是一个好习惯，因此在carla文件夹中创建这个文件夹。你也应该将index.html页面使用的所有图像复制到你的image文件夹中。

可以将index.html页面用做一模板，并将这个新页面命名为aboutme.html。新页面的内容将放入其id="content"的<div>容器中，因此可以删除在<div></div>标签对之间的所有内容，并且添加页标题“Carla's Classroom|About Me!”。你可以添加来自Student Data Files中的图像girl.jpg和boy.jpg，或者让内容区域保持空白。现在，这个新页面看起来像这样：

1.8.2.2　编写代码

这个页面提示孩子输入名字、年龄、喜爱的科目和喜爱的老师。前3项使用的编码技术与Greg's Gambits网站相同。当完成这3件事情之后，主要工作是提示输入喜爱的老师并且添加一点儿额外的代码。

（1）提示输入孩子的名字、年龄和喜欢的科目

要从孩子获得这些信息，可以将3个按钮加入页面的内容区域。单击每个按钮时将分别调用一个JavaScript函数，该函数声明一个变量并且赋值为提示对话框的结果，而每个提示对话框将请求不同的信息。然后，函数在页面上显示这个值。以下显示有关代码并给出详细解释。

这个页面的代码类似于Greg's Gambits站点的aboutyou.html页。第27、29和31行添加3个按钮，分别是“Enter your name”、“Enter your age”和“Enter your favorite subject”。它们使用onclick事件调用3个函数：getName()、getAge()和getSubject()，这些函数代码放在<head>区域。第28、30和32行也添加了一些HTML代码。<span></span>区域的元素指定了id属性。其中，"myname"标识放置函数getName()结果的区域，"myage"标识放置函数getAge()结果的区域，"mysubject"标识放置函数getSubject()结果的区域。

函数getName()起始于第6行。在第7行的左花括号之后，第8行使用prompt()要求孩子输入名字。同一行还声明一个变量name，并且赋值为prompt()的结果。此时，name包含孩子的名字。然后，第9行将名字显示在网页上，做法是使用innerHTML属性。第9行如下：

这行指令指示取出name的值，并且替换myname容器中的任何内容。其中，getElementById()方法用于获取其id="myname"的元素，而innerHTML属性用于将name的值替换这个元素内的任何代码。

第11~15行的函数getAge()和第16~19行的函数getSubject()的代码几乎与这个函数相同，只是将对孩子名字的所有引用分别用孩子的年龄和喜爱的科目替换。

如果将这些代码加入到你正在创建的页面，这个页面最初看起来像这样：

如果为名字录入Lulu，为年龄录入7并为科目录入music，该页将看起来像这样：

（2）提示输入孩子喜爱的老师

为了让孩子录入他喜爱的老师，我们使用与前面3个按钮和函数相同的代码。然而作为一个小笑话，这次将添加一行代码强迫输出Carla是喜爱的老师，而不管孩子录入的是什么。

为创建孩子将单击的按钮和存放结果的<span>容器，编写如下代码：

函数getTeacher()应该放在<head>区域的函数getSubject()之后，并且包括一个额外的行。

这段代码让孩子在提示时可以录入任何东西，并且存储到变量teacher中。然而，下一行声明了一个新变量favorite，并且赋值为"CARLA"。由于传递给myteacher容器的内容是favorite的值而不是teacher的值，所以不管孩子喜爱的老师是谁将总是显示CARLA，而这正好是Carla想要的结果！完成的aboutme.html页面在任何孩子使用它之前看起来像这样：

（3）完成代码

现在，我们可以将以上设计结果放在一起。下面给出这个页面的最终代码，并且带有行号以便于阅读。当然，在编制自己的页面时，不必包括行号。

这里是一个在给定输入情况下的输出样例：

输入：

输出：

上一章目录下一章