秒玩

書名： JavaScript程序設(shè)計(jì)：基礎(chǔ)·PHP·XML
作者名： (美)Elizabeth Drake
本章字?jǐn)?shù)： 2144字
更新時(shí)間： 2020-10-30 18:12:34

2.6.2　Carla's Classroom：拼寫課

Carla是一位小學(xué)老師，她委托你為她的班級(jí)編制練習(xí)網(wǎng)站。此時(shí)，即使你的程序設(shè)計(jì)技能還很有限，你仍然能夠?yàn)樾『⒆觽冮_發(fā)一些非常好的練習(xí)。在本章中，你將用一個(gè)指定的單詞列表創(chuàng)建一個(gè)拼寫測(cè)試。在本書后面，你將改進(jìn)這個(gè)測(cè)試，讓Carla使用她想要的任何拼寫單詞。我們將這個(gè)練習(xí)稱為An Appetite for Spelling。

2.6.2.1　開發(fā)程序

我們要?jiǎng)?chuàng)建一個(gè)網(wǎng)頁，為學(xué)生提供簡(jiǎn)單的拼寫測(cè)試。在開始編寫JavaScript代碼之前，應(yīng)該先設(shè)計(jì)頁面。也就是說，為頁面給出一個(gè)標(biāo)題和簡(jiǎn)短的說明，要求學(xué)生拼寫一些單詞。但是，由于要求學(xué)生拼寫單詞時(shí)不能直接顯示這個(gè)單詞，所以需要為每個(gè)單詞顯示一個(gè)圖像。為此，我們使用5個(gè)食物照片表示5個(gè)單詞（以后，你可以添加更多的單詞，或者使用循環(huán)程序提供Carla想要數(shù)目的單詞）。可能的食物單詞是avocado（梨）、bananas（香蕉）、celery（芹菜）、lemonade（檸檬水）和onions（洋蔥）。這些食物圖像已存在于Student Data Files中，當(dāng)然你也可以使用自己的圖像。

為了編寫這個(gè)程序，我們應(yīng)當(dāng)決定如何在網(wǎng)頁上顯示這些圖像、問題和結(jié)果，使用什么變量，以及采取什么步驟來實(shí)現(xiàn)我們的最終目標(biāo)。這個(gè)程序的一般偽代碼如下：

1）說明程序的目的。

2）聲明變量。

3）展示一個(gè)食物照片。

4）要求輸入這個(gè)食物的拼寫字母。

5）檢查拼寫的單詞是否正確。

6）輸出結(jié)果（正確或不正確）。

7）為所有單詞重復(fù)步驟3~6。

隨著進(jìn)一步的處理，我們將細(xì)化這些步驟。首先，決定需要什么變量和如何向玩家描述這些變量。

我們需要顯示一個(gè)食物圖像，要求學(xué)生錄入這個(gè)食物的名字，然后顯示信息指出學(xué)生錄入的名字是否拼寫正確。要完成這件事，可以使用一個(gè)按鈕，當(dāng)學(xué)生單擊它時(shí)將錄入答案；再使用另一個(gè)按鈕，當(dāng)單擊它時(shí)將顯示錄入的答案是否正確。

我們從網(wǎng)頁開始。下列HTML代碼只是簡(jiǎn)單顯示含有第一種食物和第一個(gè)問題的網(wǎng)頁。你可以在Student Data Files中找到這個(gè)頁面，并且隨著后續(xù)講解添加相關(guān)代碼，從而可以看到這個(gè)頁面的實(shí)際顯示效果。

這個(gè)頁面的輸出看起來像這樣：

我們需要添加一個(gè)按鈕讓學(xué)生錄入答案，再添加另外一個(gè)按鈕讓學(xué)生檢查這個(gè)答案是否正確。為這兩個(gè)按鈕可以編寫以下簡(jiǎn)單的代碼：

value屬性給出在按鈕上顯示的文本。然而，這些按鈕實(shí)際上不做任何事情。我們想要單擊第一個(gè)按鈕時(shí)顯示一個(gè)提示對(duì)話框讓學(xué)生錄入答案，而單擊第二個(gè)按鈕時(shí)顯示答案是否正確的信息。為了實(shí)現(xiàn)這些事情，我們將使用一個(gè)函數(shù)。

2.6.2.2　函數(shù)

函數(shù)在任何程序設(shè)計(jì)語言中都扮演著重要的角色。在不同于JavaScript的語言中，不使用自己創(chuàng)建的函數(shù)也有可能編寫一些非常復(fù)雜的程序。然而基于JavaScript的性質(zhì)，你現(xiàn)在就需要使用函數(shù)。對(duì)于函數(shù)的全面理解及其復(fù)雜使用方法，以后再學(xué)習(xí)（即第7章專門討論函數(shù)）。

大體上，之所以要使用函數(shù)是因?yàn)榫W(wǎng)頁要調(diào)用JavaScript代碼，而JavaScript代碼要將信息傳回網(wǎng)頁。JavaScript代碼通常放在<script></script>標(biāo)簽對(duì)之間的函數(shù)內(nèi)，而網(wǎng)頁使用函數(shù)名指定要執(zhí)行哪個(gè)部分的JavaScript代碼。Greg's Tales頁使用了這個(gè)概念，它調(diào)用函數(shù)startGame()。

在這種情況下，當(dāng)學(xué)生單擊按鈕回答問題時(shí)將調(diào)用JavaScript代碼提示學(xué)生錄入答案。在錄入一個(gè)答案之后，學(xué)生可能單擊第二個(gè)按鈕檢查答案是否正確。當(dāng)學(xué)生單擊任一按鈕時(shí)，對(duì)應(yīng)的onclick事件將調(diào)用我們編寫的JavaScript函數(shù)。對(duì)于第一個(gè)按鈕，對(duì)應(yīng)的函數(shù)將提示學(xué)生錄入單詞并且檢查學(xué)生錄入的單詞是否拼寫正確。對(duì)于第二個(gè)按鈕，其onclick事件將調(diào)用一個(gè)函數(shù)顯示學(xué)生的回答是否正確。

2.6.2.3　showPrompt1()和showResult1()函數(shù)

第一個(gè)函數(shù)命名為showPrompt1()，當(dāng)調(diào)用這個(gè)函數(shù)時(shí)將發(fā)生兩件事情：一是提示學(xué)生錄入一個(gè)答案，二是檢查答案的正確性。為這些事件編寫代碼是不難的：

這行簡(jiǎn)單的代碼提示學(xué)生錄入一個(gè)單詞，然后存儲(chǔ)到變量word1中。

為了檢查答案的正確性，可以使用如下的條件操作符：

這個(gè)代碼需要放在一個(gè)函數(shù)內(nèi)。在JavaScript中創(chuàng)建一個(gè)函數(shù)的格式如下所示：

單詞function是一個(gè)關(guān)鍵字（類似var），指出這是一個(gè)函數(shù)。有些函數(shù)需要參數(shù)（值放在圓括號(hào)內(nèi)），而有些不需要。目前，正在創(chuàng)建的兩個(gè)函數(shù)的圓括號(hào)內(nèi)不需要放任何東西。當(dāng)函數(shù)調(diào)用時(shí)要執(zhí)行的所有語句放在花括號(hào)之內(nèi)。這樣，以下就是我們正在創(chuàng)建函數(shù)的完整代碼，能夠獲取答案并且檢查它：

一旦創(chuàng)建了一個(gè)函數(shù)，就可以使用它的名字調(diào)用這個(gè)函數(shù)。我們把這個(gè)函數(shù)調(diào)用添加到前面創(chuàng)建的按鈕的onclick事件中：

網(wǎng)頁上的第二個(gè)按鈕告訴學(xué)生單擊它可查看答案是否正確，因此一旦單擊這個(gè)按鈕就調(diào)用一個(gè)函數(shù)顯示拼寫結(jié)果。這個(gè)結(jié)果由前面調(diào)用的函數(shù)showPrompt1()決定，并且已經(jīng)存儲(chǔ)在變量Resultl中。可以創(chuàng)建一個(gè)函數(shù)showResult1()，使用警示對(duì)話框顯示這個(gè)結(jié)果，該函數(shù)代碼如下：

通過為相應(yīng)按鈕的onclick事件插入它的名字，可以調(diào)用這個(gè)函數(shù)：

2.6.2.4　將所有代碼放在一起

如下所示，這些JavaScript代碼放在<head>區(qū)域之內(nèi)。下面也顯示了按鈕代碼，它放在頁面的<body>之內(nèi)，正好在Question的下面。

現(xiàn)在，這個(gè)頁面看起來像這樣：

2.6.2.5　完成

到現(xiàn)在為止，網(wǎng)站只測(cè)試一個(gè)單詞拼寫。然而，添加另外4個(gè)單詞或者甚至40多個(gè)單詞是非常簡(jiǎn)單的事情。以后通過使用重復(fù)結(jié)構(gòu)，我們可以更有效地編寫這段代碼，但是現(xiàn)在我們只是簡(jiǎn)單地復(fù)制和粘貼用于拼寫單詞的代碼，其次數(shù)取決于我們想要檢測(cè)的拼寫單詞個(gè)數(shù)。要記住的是，已命名的變量和函數(shù)的名字末端帶有數(shù)字1。通過將1改為2、3、4或5，我們就可以重新使用復(fù)制的代碼。下面給出測(cè)試所有5個(gè)拼寫單詞的完整網(wǎng)頁代碼：