《JavaScript和jQuery實戰手冊（原書第2版）》——3.2節教程：使用條件語句

3.2 教程：使用條件語句

條件語句将會成為我們日常的javascript工具箱的一部分。在這個教程裡，我們将嘗試使用條件語句來控制腳本如何運作。

注意： 請參考1.3節中的“注意”部分了解如何下載下傳教程檔案。

在文本編輯器中打開chapter03目錄下的檔案conditional.html。

首先直接提示使用者輸入一個數值。這個檔案已經在頭部和正文區域都包含了< script>标簽。

在第一對< script>标簽之間，即頁面的< head>部分中，輸入粗體所示的代碼：

這行代碼打開了一個javascript提示框，詢問一個問題，并且把通路者輸入的内容存儲到luckynumber變量中。接下來将添加一個條件語句來檢視通路者在提示對話框中輸入了什麼。

在頁面正文的下方找到第二對< script>标簽，并且添加粗體所示的代碼：

這裡是條件語句的開始，它直接檢查通路者是否輸入了7。

按下Enter鍵兩次，并結束花括号，代碼如下所示：

結束的花括号完成了條件語句。在兩個花括号之間添加的任何javascript代碼都隻能夠在條件為true的時候運作。

提示： 正如3.2節所介紹的，在編寫作為條件語句的一部分運作的代碼之前先添加結束花括号，這是個好辦法。

單擊上面的結束花括号之上的空行。按下空格鍵兩次，并輸入：

代碼前的兩個空格縮進了這行，以友善看到這行代碼是條件語句的一部分。這裡實際的javascript代碼，我們現在應該很熟悉了，它隻是向頁面顯示一條消息。

儲存檔案并在web浏覽器中預覽。當提示對話框出現的時候，輸入7。

當頁面載入的時候，應該會在标題欄下看到“hey, that's my lucky number too!”這條消息。如果沒有看到，檢查一下代碼确認自己輸入正确（參見1.6關于處理無效腳本的技巧）。重新載入頁面，但是這次輸入不同的數值。這次可以看到标題欄下面什麼也沒有。我們将添加一個else子句來顯示其他資訊。

注意： 為什麼需要兩組script标簽呢？當使用document.write()方法把内容添加到頁面上的時候，我們必須把document.write()代碼放在頁面上想要讓消息出現的具體位置，在這個例子中，就是< h1>标簽之下的正文中。第一組script标簽出現在頭部，因為我們想要提示視窗早點出現。如果将prompt()向下移動到正文中（繼續并嘗試一下），你将會看到，當頁面載入，提示視窗出現的時候，頁面隻有一部分會顯示。因為在頁面的任何其他部分顯示之前，該處的javascript立刻執行，web浏覽器必須等到通路者在提示視窗中輸入數值，然後才能夠顯示頁面的其他部分。換句話說，頁面看上去很奇怪。然而，通過将提示視窗放在< head>部分，頁面一開始是空白的，然後提示視窗出現，這看上去要好一些。在第4章中，我們将學習如何不使用document.write()方法而把内容添加到頁面的任何位置。一旦了解了這一項技術，可以将自己的所有javascript代碼放在頁面的同一個位置。

傳回文本編輯器，并且向頁面添加如下粗體所示的内容：

這個else子句提供了一條備用消息，這樣，如果通路者沒有輸入7，他會看到一條包含自己的幸運數字的不同消息。為了讓這個練習更完美，可以添加另一個else if語句來測試更多的值并提供其他的消息。

在腳本中添加如下兩行粗體顯示的代碼：

此時，腳本首先檢查變量luckynumber中存儲的值是否是7。如果luckynumber存儲的值不是7，那麼，else if開始執行。這個條件語句由兩個條件組成，luckynumber == 13和lucky number == 24。||叫做邏輯or操作符，如果條件中的任何一個為true，這個條件語句結果就是true。是以，如果通路者輸入13或24，頁面上将會顯示一條“that's an unlucky number”消息。

提示： 可以通過兩次按下shift-得到||，進而添加邏輯or操作符。

在web浏覽器中預覽頁面，并且當提示對話框出現的時候輸入13。按下浏覽器的重新整理按鈕，并且再次嘗試不同的數值，包括字母和其他字元。你将會注意到，如果輸入一個單詞或者其他的非數值字元，最終的else子句将執行，顯示一條這樣的消息：“the number asdfg is lucky for you!”。既然這沒有太多的意義，當通路者第一次輸入一個非數值時，應該彈出另一個提示對話框。

傳回文本編輯器，并且找到頁面的部分的第一個組

這行代碼把luckynumber的值放入一個名為parseint()的函數。這條javascript指令接受一個值并且嘗試把它轉換為一個整數，即像1、5或100這樣的完整的數值。我們将在14.3.1節中學習這條指令，但是現在，隻需要知道如果通路者輸入“ha ha,”這樣的文本，parseint()指令不能将其轉換為數值；相反，該指令會提供一個特殊的javascript值，即nan，它表示“不是一個數字”。如果通路者第一次輸入的不是一個數值，我們可以使用這一資訊彈出另外的對話框。

把如下粗體所示的代碼添加到腳本中：

這次，條件語句再次發揮作用。條件isnan(luckynumber)使用另一條javascript語句來檢查内容是否是數值。它特别檢查luckynumber中的值是否是一個數值。如果這個值不是一個數值（例如，通路者輸入asklsdkl），又彈出一個提示框并再次詢問一個問題。如果通路者确實輸入了一個數值，第二個提示框略過。

儲存頁面并在web浏覽器中預覽。這次，在提示框出現的時候，輸入一個單詞并單擊ok按鈕。然後應該看到另一個提示框。然後輸入一個數值。當然，這段腳本假設通路者第一次輸入一個單詞時候不小心犯了一個錯誤，但是，不會第二次犯同樣的錯誤。遺憾的是，如果通路者在第二個提示框中輸入一個單詞，最終會遇到同樣的問題，我們将在3.3節學習如何修正這個問題。

提示： 在chapter03目錄中可以找到這個教程的完整版本：complete_conditional.html。