天天看點

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

3.1 使程式智能地響應

我們的生活充滿了選擇:“我今天穿什麼”、“午餐吃什麼”、“星期五晚上該幹什麼”等。我們所做的很多選擇取決于某個條件。例如,假設确定想要在星期五晚上看電影,我們可能會問自己一堆問題,例如,“有什麼好的電影上映嗎” 、“電影能夠準時開演嗎” 、“我帶了足夠的錢去電影院嗎”(買一袋爆米花要17塊錢)。

假設有一場電影剛好在我們去的時候上映。我們就會問自己一個簡單的問題“我身上的錢夠嗎”。如果回答是夠,我們就向電影院出發。如果回答是不夠,我們就不去。但是在另一個星期五,我們可能有足夠的錢,那就去電影院。對于條件是如何影響我們做出決定,電影院隻是一個簡單的例子。

javascript具有同樣的判斷功能,叫做條件語句。基本上,條件語句就是一個簡單的是或非的問題。如果回答是,程式就會做一件事情;如果回答否,它就做其他的事情。條件語句是最重要的程式設計概念之一:它允許程式對不同的情況做出反應并智能地操作。我們将會在程式設計中無數次地用到它們,而這裡隻是給出如何使用它們的幾個例子,以使你對其用法有一個清晰了解。

表單驗證。當想要确定某個人填寫了一個表單中所有必需的字段(“name,”、“address,”、“e-mail,”等)的時候,我們将使用條件語句。例如,如果name字段為空,就不送出該表單。

拖拽。如果添加了在web頁面中拖動元素的功能,可能要檢查通路者把元素放在頁面的什麼位置。例如,如果拖動一幅圖檔到一個垃圾箱圖像上,我們就要讓照片在頁面上消失。

評估輸入。如果彈出一個視窗來詢問通路者類似這樣的問題:“您願意回答幾個針對這個web站點的評價的問題嗎?”我們可能希望腳本能夠根據通路者如何回答這個問題而做出不同的反應。

圖3-1給出了使用條件語句的應用程式的一個例子。

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

3.1.1 條件語句基礎

條件語句也叫做“if/then”語句,因為隻有在問題的答案為真的時候,它們才執行一項任務:“如果我有足夠的錢,就去看電影。”條件語句的基本結構如下所示:

這條語句有三個部分:if表示接下來的程式是一個條件語句;圓括号包括了答案為是或否的問題,叫做條件(稍後會更詳細地介紹它);花括号({ })表示如果條件為真所應該執行的javascript代碼的開始和結束。

注意: 在上面列出的代碼中,“// some action happens here”是一條javascript注釋。它不是實際運作的代碼,隻是在程式中保留的一個提示;并且,在這個例子中它指出,你作為代碼的閱讀者應該期待代碼的這部分是什麼内容。參見2.11節對于注釋的更多介紹。

在很多情況下,條件是兩個值之間的比較。例如,假設建立了一個遊戲,當分數超過100的時候,玩家勝出。在這個程式中,我們需要通過一個變量來記錄玩家的分數,并且,在某個時刻,我們需要檢查這個分數是否超過100分。javascript檢查玩家是否勝出的代碼如下所示:

重要的部分是score > 100。這條語句是一個條件,并且,它直接測試存儲在score變量中的值是否大于100。如果是,那麼就會顯示一個“you won!”的對話框;如果玩家的分數小于或等于100,那麼javascript解釋器就跳過警告框并直接到程式的下一部分。圖3-2給出了這一過程的一個圖示。

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

除了>(大于),還有其他幾種操作符用來比較數值(參見表3-1)。

提示: 在包含在一對花括号中的javascript代碼的每一行前面輸入兩個空格。空格(或制表符)縮進了這些行,使得人們更容易看到開始和結束的花括号,并且很容易看清楚哪些代碼屬于條件語句。常用兩個空格,但是,如果4個空格使得你的代碼更容易閱讀,那就用4個空格。本書中的例子總是縮進花括号中的代碼。

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

更為常見的是,我們将測試兩個值是否相等。例如,假設我們建立了一個基于javascript的測驗,并且其中的一個問題是“土星有多少顆衛星?”人們的答案将存儲在一個名為answer的變量中。可以編寫如下所示的一條條件語句:

注意: 正如本書2.5.5節所介紹的,上面的代碼行(numcorrect += 1)直接給變量numcorrect中目前的值加上1。

并且也可以在花括号之間添加額外的javascript代碼行,可以添加條件為真時運作的任何代碼。

進階使用者提示

boolean傳回值

在本書2.3.3節,我們認識了布爾值:true和false。布爾乍一看好像不是非常有用,但是,當我們開始使用條件語句的時候,會發現它們是必需的。實際上,既然條件确實是一個非真即假的問題,那麼這個問題的答案就是一個布爾值。例如,檢視如下代碼:

代碼的第一行把數值4存儲到變量x中。下一行中的條件是一個簡單的問題:存儲在x中的值是4嗎?在這個例子中,它是,是以,花括号之間的javascript代碼運作。但是,圓括号之間真正發生的事情是:javascript解釋器把條件轉換為一個布爾值,用程式設計的術語來說,解釋器計算了條件。如果條件計算為真(意味着問題的答案是yes),那麼,花括号之間的代碼運作。然而,如果條件計算為false,那麼,花括号之間的代碼将會略過。

布爾的一種常見用法是建立一個所謂的标志,這是表示某件事是否為真的一個變量。例如,當驗證填滿了通路者送出的資訊的一個頁面的時候,我們可能首先建立一個帶有布爾值為true的valid變量,這意味着,首先,假設通路者正确地填寫了表單。然後,依次檢視每個表單字段,如果任何字段遺漏了資訊或者資訊的類型不對,可以把valid的值改為false。在檢查了所有的表單字段字後,測試valid中存儲的内容,如果仍然是true,就送出表單。如果不是true(以為這一個或多個表單字段為空),則顯示某些錯誤消息并防止表單送出:

3.1.2 添加備用計劃

但是,如果條件為false呢?3.1.1節中的基本條件語句并沒有準備一個備用計劃,以便在條件為false的時候運作。在現實情況中,當我們要确定星期五晚上幹什麼并且沒有足夠的錢看電影的時候,我們還想要幹些其他的事情。if語句有它自己的備用計劃,叫做else子句。例如,以javascript測驗腳本為例,我們想要通知測驗參加者的回答是正确的或者是錯誤的。在這裡,可以這麼做:

這段代碼建立了一種要麼/要麼的情景,兩條消息中隻有一條會顯示(參見圖3-3)。如果數值31存儲在變量answer中,那麼,“correct”警告視窗顯示;否則,“wrong”警告視窗顯示。

要建立一條else子句,隻要在條件語句的結束花括号之後添加一個“else”,再跟上另外一對花括号即可。在花括号之間,添加如果條件結果為false應該執行的代碼。同樣,隻要你願意,可以有多行代碼作為else子句的部分。

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

3.1.3 測試多個條件

有時候,我們想要測試多個條件并且擁有幾種可能的輸出。考慮這樣一個遊戲,主持人對你說:“你想要1号門、2号門還是3号門背後的獎金?”你隻能選擇其中之一。在日常活動中,我們也經常面對像這樣的多個條件選擇。

例如,回到“我星期五晚上幹什麼”的問題。你可能根據自己有多少錢以及願意花多少錢來增加娛樂項目。例如,你可以這樣開始,“如果我有超過50塊錢,我就到外面好好吃一頓并看場電影(并且買點爆米花)”。如果沒有50塊錢,你可能會嘗試另一個測試“如果我有35塊錢或更多,我就好好地吃一頓”。如果沒有35塊錢,你可能會說:“如果我有12塊錢或者更多,我就去看場電影。”最後,如果沒有12塊錢,你可能會說:“那我就待在家裡看電視。”多麼美妙的一個星期五晚上啊。

javascript允許我們使用else if語句執行同樣的層疊邏輯。它像這樣工作:從一條if語句開始,其選項為1号;然後,添加1個或多個else if語句,來提供可以觸發其他選項的其他問題;最後,使用else子句作為退路。下面是其在javascript中的基本結構:

這個結構是我們建立一個javascript“星期五之夜計劃”程式所需要的所有内容。它詢問通路者有多少錢,然後确定他們應該在星期五做什麼(聽起來有些熟悉吧)。我們可以使用在本書2.7節的教程中所學習的prompt()指令來收集通路者的回報,并且使用一系列的if/else if語句來确定他應該做什麼:

下面是對這個程式分步驟的分析:第一行代碼打開一個提示對話框,詢問通路者可以花費多少錢。通路者輸入的内容将存儲在名為fridaycash的變量中。下一行代碼是一個測試:通路者輸入的值是否大于或等于50?如果答案是肯定的,那麼出現一個警告框,告訴他去吃頓飯并看場電影。此時,整個條件語句就完成了。javascript解釋器略過下一條else if語句,接下來的else if語句,以及最後的else子句。使用條件語句,隻會發生一種結果,是以,一旦javascript解釋器遇到計算為true的一個條件,那麼它為該條件運作花括号之間的javascript代碼,并且略過條件語句中的其他所有内容(參見圖3-4)。

假設通路者輸入的是25。在這個例子中,第一個條件将不為true,因為25是一個小于50的數值。是以,javascript解釋器跳過了針對第一個條件的花括号中的代碼,并且繼續 “25是否大于等于35”的else if 語句。既然答案為false,它跳過和這個條件相關的代碼,并且遇到下一個else if語句。此時,條件詢問“25是否大于等于12”,答案是true,是以,出現一個帶有“you should go see a movie”消息的警告框并且程式結束,略過最終的else子句。

提示:還有另一種方式可以建立都測試同一個變量的一系列的條件語句,就像是在fridaycash示例中那樣。switch語句可以做同樣的事情,将在14.6.3節學習它。

《JavaScript和jQuery實戰手冊(原書第2版)》——3.1節使程式智能地響應

3.1.4 更複雜的條件

當處理多個不同的變量時,經常需要更加複雜的條件語句。例如,當驗證表單中一個必需的e-mail位址字段的時候,我們想要確定字段不為空并且字段包含一個e-mail位址(而不隻是随機輸入的字母)。幸運的是,javascript允許做這類檢查。

多個條件為真時

我們通常需要根據多個因素的組合來做出決定。例如,如果有足夠的錢,可能想去看電影,并且也有想看的電影正在放映。在這種情況下,隻有兩個條件都為true時,才會去看電影。在javascript中,可以使用邏輯and操作符來組合條件,可以用兩個&符号(&&)表示。通過and操作符可以把兩個條件組合為一個條件語句。例如,如果想要檢視一個數值是否在1~10之間,可以這麼做:

這個例子中有兩個條件:第一個條件a < 10詢問存儲在變量a中的值是否小于10;第二個條件a > 1等同于“這個值是否大于1”。隻有在兩個條件都為true的時候,包含在花括号之間的javascript代碼才會運作。是以,如果變量a中存儲了數值0,第一個條件(a < 10)為true(0小于10),但是,第二個條件為false(0不大于1)。

不僅限于使用兩個條件。隻要需要,可以使用&&操作符連接配接盡可能多的條件:

這段代碼檢查3個變量以確定這3個變量的值都大于0。如果有一個變量擁有值0或者更小的值,那麼将不會執行花括号中的代碼。

至少一個條件為true時

還有些時候,我們也要檢查一系列的條件,但是隻需要一個為true。例如,假設添加了一個鍵盤控制,以便通路者可以在一個照片庫中從一幅圖檔跳轉到另一幅圖檔。當通路者按下n鍵的時候,顯示下一張照片。在這種情況下,當他按下n(小寫)的時候,或者已經按下caps lock鍵的時候,即n(大寫),都希望跳轉到下一幅照片。我們需要一種或者/或者的邏輯:或者這個鍵按下,或者那個鍵按下。邏輯or操作符有了用武之地,它用兩個管道符号(||)表示:

提示: 按下shift-可以輸入一個管道符号。斜杠和管道符号共用的輸入鍵通常在Enter鍵的上方。

使用or操作符,隻要一個條件為真,就會運作花括号之間的javascript代碼。

和and操作符一樣,我們可以比較兩個以上的條件。例如,假設我們要建立一個javascript賽車遊戲。玩家有時間的限定、有限的汽油量和有限的車輛數目(每次他撞毀或失去一輛車)。為了讓遊戲更有挑戰性,當這三項都用完的時候,我們讓遊戲結束:

要閱讀這段代碼,隻需要把每個組當成一個單獨的測試。圓括号之間的操作的結果要麼總是true,要麼總是false。

對條件取反

如果你是超人迷,可能會知道bizarro,這是超人的對頭,居住在一個名叫htrae(earth的逆向拼寫)的立方體衛星,其制服有一個反寫的s,并且其通常的行為方式都是和超人相反的。當bizarro說“是”的時候,他實際的意思是“不是”;而當他說“不是”的時候,他實際的意思是“是”。

javascript程式設計有一個類似的字元,叫做not操作符,它由一個驚歎号(!)表示。我們已經看到了not操作符和等号符号一起使用,表示“不等于”(!=)。但是,not操作符可以單獨使用來表示把一個條件語句的結果取反;換句話說,它可以使得false意味着true,而使得true成為false。

當我們想要根據一個否定條件來運作某些代碼的時候,就使用not操作符。例如,假設我們已經建立了一個名為valid的變量,其中包含了一個boolean值,它要麼為true要麼為false(參見3.1節中的“進階使用者提示:boolean傳回值”部分)。我們使用這個變量來記錄通路者是否正确地填寫了表單。當通路者試圖送出表單的時候,javascript檢查每個表單字段,確定它們滿足了設定的要求(例如,字段不為空,并且其中必須有一個e-mail位址)。如果有問題,例如字段為空,可以把valid設定為false(valid = false)。

現在,如果想要做些事情,例如顯示一個錯誤以阻止表單送出,可以編寫如下所示的一個條件語句:

條件!valid可以翻譯為“如果不是valid”,這意味着,如果valid為false,那麼這個條件為true。若要搞清楚使用not操作符的一個條件的結果,隻要計算沒有not操作符的條件,然後對其取反即可。換句話說,如果條件結果為true,!操作符将其改為false,是以,條件語句不會運作。可以看到,not操作符很容易了解(用bizarro的話來說:它很容易令人混淆,但是,如果你使用它的時間足夠長,就會習慣)。

3.1.5 嵌套條件語句

大多數時候,計算機程式必須根據通路者提供的資訊或者根據程式中的目前條件來做出判斷。程式所做的判斷越多,可能的結果也就越多,程式似乎也更“智能”。實際上,我們可能會發現在執行了一個條件語句之後,需要進一步做判斷。

假設,在“星期五晚上幹什麼”的示例中,我們想要把程式擴充到包含一周的每個晚上。在這種情況下,我們需要首先确定是星期幾,然後确定在這一天幹什麼。是以,可能有一個條件語句詢問今天是否是星期五,如果是,有另外一系列的條件語句來确定這一天做什麼:

在這個例子中,第一個條件詢問存儲在變量dayofweek中的值是否是字元串“friday”。如果回答是yes,那麼,顯示提示對話框,從通路者那裡擷取某些資訊,并且另一個條件語句開始運作。換句話說,第一個條件(dayofweek == 'friday')是通向一組條件語句的條件。然而,如果dayofweek不是“friday”,那麼,條件為false并且嵌套的條件語句也會略過。

3.1.6 編寫條件語句的技巧

3.1.5節中的嵌套條件語句的例子看上去可能有些令人驚訝。有這麼多的()、{}、else和if。并且,如果你碰巧錯誤地輸入了條件語句的一個關鍵部分,腳本就不會工作。在輸入javascript的時候,還有幾種方法便于更容易地使用條件語句。

提前輸入兩個花括号,然後再在其中輸入代碼。程式員常犯的一個錯誤就是忘了給條件語句添加一個表示結束的花括号。為了避免這個錯誤,先輸入條件和花括号,然後再輸入條件為true時執行的javascript代碼。例如,像下面這樣開始一個條件:

單個等号會把值存儲到變量中,是以,在這個例子中,字元串“bob”将會存儲到name變量中。javascript解釋器會把這個步驟當做true,是以,條件後面的代碼将總是會執行。

繼續閱讀