1.8.1　Greg's Gambits：创建About You页面

打开Student Data Files中的文件index.html，将看到Greg's Gambits网站的首页。它看起来像这样：

现在，你可以编辑这个页面，例如用你自己的电子邮件地址或一个假的电子邮件地址替换在底部的默认电子邮件地址。做法是：在index.html页面的底部找到电子邮件地址，然后改变这个地址。你也应该在页面左边的导航栏中添加一个链接，指向将要创建的页面。该页面将提示用户录入一些个人信息，因此使用“Tell Greg About You”作为链接的文本。这个新页面将命名为aboutyou.html，并且存储在与index.html相同的文件夹中，因此这个链接应该是一个相对链接。这个链接的代码如下：

你的页面如下所示，其中在页面底部你的电子邮件地址代替了Greg的地址：

现在，我们创建“Tell Greg About You”页面。

1.8.1.1　开发About You页面

我们要求用户录入3项信息，不过你也可以使用已经学会的技能添加更多的信息。现在，我们将使用函数、方法和事件从在Greg's Gambits网站玩游戏的每个人获得下列信息：玩家的名字、玩家选择的用户名和头像。

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

可以将index.html页面用做一个模板。新页面的内容将放入id="content"的<div>容器中，因此可以删除在<div></div>标签对之间的所有内容。也应该将页面的副标题由“GAMES FOR EVERYONE!”改为“TELL GREG ABOUT YOU”，添加页标题“Greg's Gambits|About You”。现在，这个新页面看起来像这样：

1.8.1.2　编写代码

这个页面将提示用户输入一个真实的名字和一个用户名，并且为玩家提供5个头像选择。已为你提供了5个头像图像，不过也可以使用其他图像。我们将使用open()方法打开一个新窗口，显示5个头像让玩家选择。

（1）提示输入玩家的名字

为获得玩家的名字，我们把一个按钮加入页面的内容区域。当单击这个按钮时将调用一个JavaScript函数，该函数声明一个变量name并赋值为提示玩家输入名字的提示对话框的结果值，然后在页面上显示这个值。以下展示有关代码并给出详细解释。

注意第9行，它使用getElementById()方法的innerHTML属性获取网页信息。这行说明用变量name的值为其id="myname"的元素的内部HTML代码赋值。

第17行添加一个按钮“Enter your name”，并使用onclick事件调用起始于第6行的函数getName()。第18行也添加了一些HTML代码，其中<span></span>元素的id=“myname”，从而可以在函数getName()中确定在哪里显示玩家的名字。

函数getName()做3件事情。首先，第8行使用prompt()请求用户输入他的名字；其次，第8行也声明一个变量name，并且赋值为prompt()方法的结果，此时name包含玩家的名字；最后，第9行将玩家的名字显示在网页上，做法是使用innerHTML属性。第9行编码如下：

这意味着将name的值替换其id="myname"的容器元素内的任何代码。其中，getElementById()方法用于获取其id="myname"的元素，而innerHTML属性用于将name的值替换这个元素内的任何代码。

如果把这些代码加入你正在制作的页面，这个页面最初看起来像这样：

在单击这个按钮并且在提示时录入名字Montrose之后，页面看起来像这样：

（2）提示输入玩家的用户名

为了获得玩家的用户名，几乎可以再次使用相同的代码，也就是简单地添加第二个按钮和第二个函数。表示第二个按钮的代码可以直接放在第一个按钮行的后面，而第二个函数的代码放在函数getName()后面。可以将这个新函数命名为getUsername()。

表示第二个按钮的代码是

注意以下几点变化：将onclick事件改变为调用新函数getUsername()；改变了显示的文本，并且将<span>的id改变为"myusername"。

新函数几乎与第一个函数相同，其代码是

在添加这些代码之后，如果用户为名字录入Montrose，并且为用户名录入Troll King，该页看起来像这样：

（3）选择一个头像

这个页面的第三部分更复杂。与前面一样也创建一个按钮，通过单击它，玩家可以选择一个头像。现在我们还没有太多的JavaScript工具做这件事，因此只使用相当简单的方法选择头像。当玩家单击按钮选择一个头像时，该按钮将调用一个函数getAvatar()做这件事。首先，它打开一个含有新网页的新窗口，这个页面包含头像选项。将来你可以与图像艺术家合作设计页面，从而为玩家提供更多的头像选项，并让玩家自己创建新图像。但是现在，我们从小做起。在查看提供的选项之后，玩家可以通过单击按钮录入选择的头像并且显示这个选择。

在将代码加入主页之前，我们先创建为玩家显示头像选项的新页面。在Student Data Files中有很多小图像文件，可以从中选择5个，如bunny.jpg、elf.jpg、ghost.jpg、princess.jpg和wizard.jpg。这个页面文件命名为avatars.html，页标题为Greg's Gambits|Avatars。该页将只包含主要的指令和图像，该页代码如下所示：

如果使用Student Data Files中的图像，则制作的页面看起来像这样：

类似前面两个按钮，现在我们创建一个按钮，玩家单击它时可以选择头像。将以下代码放在用户名按钮代码的后面：

当单击这个按钮时，调用函数getAvatar()，该函数将在一个新窗口中打开avatars.html文件。这个函数的代码应该放在函数get_username()之下，看起来像这样：

最后一个按钮允许用户选择头像，其代码类似于获取用户名和名字的函数代码，看起来像这样：

最后，我们定义函数pickAvatar()。当单击这个按钮时将调用这个函数，它将以玩家的选择替换myavatar元素的默认内容。把下列函数代码放在函数getAvatar()之后：

这个函数提示玩家选择头像，并且在页面上显示。如果将这个页面发布在真实的网站上，应当包括有关如何选择头像的说明，或者也许要提供一个弹出菜单以方便选择。但是，作为初学者，我们假定玩家将正确地录入被选头像的名字。在默认选项下，完成的aboutyou.html页面看起来像这样：

（4）完成代码

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

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

输入：

输出：