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）完成代碼

現在，我們可以將以上設計結果放在一起。下面給出這個頁面的最終代碼，并且帶有行號以便于閱讀。當然，當編制自己的頁面時，不必包括行號。

這里是一個在給定輸入情況下的輸出樣例：

輸入：

輸出：