Javascript初學者課程(8)-條件判斷式應用

Javascript初學者課程(8)-條件判斷式應用
Javascript初學者課程(8)-條件判斷式應用

本日的JavaScript教學就是要教你正確應用條件判斷式哦!

switch 條件式

前端工程師建議,只要是在 JavaScript 中,如果你有多個條件需要測試的話,為每個條件編寫 if…else 語句可能不是那麼有效率。此時,前端工程師們可以使用 switch 敘述式,就可以依據不同的條件而執行所指定的程式。 switch 用法如下面代碼所示:

See the Pen JavaScript8-switch-1 by Tedutw (@Tedutw) on CodePen.

switch 敘述式代表只會運算一次,看看敘述是否符合各個情況(case)所指定的條件。當有條件成立時,則會執行該情況(case)所對應的程式。如以下例子:變數「day」若為 1 時則輸出「Mon」、為 2 時,則輸出「Tue」、為 3 則輸出「Wed」、為 4 則輸出「Thu」、為 5 則輸出「TGIF」,都不符合就輸出「Weekend day」。

See the Pen JavaScript8-switch-2 by Tedutw (@Tedutw) on CodePen.

註1:以上例子也可以使用 if…else 條件式 來寫,但還不如 switch 來的精簡。

註2:每一個 case 中的「break」語句,作用是為了讓 JavaScript 跳出該 switch 程式區塊,以阻止更多的程式碼執行、或是繼續在該區塊內繼續測試的動作。通常一種情況(case)的條件陳述中,會放一個「break」。

switch 條件式中的「default」

當所有條件都不成立時,「default」關鍵字指定 JavaScript 要執行的動作。如下例,如果變數「member」的值都不符合所有情況(case)的條件陳述時,JavaScript 就會跑到「default」,顯示「不是Stratovarius的現任團員」。以下的變數(var)「member」的值為 「Tokki」,看看是否符合每個情況(case)的條件陳述。

See the Pen JavaScript8-switch-3 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(9)-for迴圈應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


網路行銷的7大心法3-社群行銷與CRO是不可或缺的!


電影迷工程師分得出片中的Python,Java嗎?(上)


前端工程師不可不會的CSS盒子模型!! (邊框留白篇)


你能分辨人工智慧製造的假新聞嗎?


2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


從無到有 挑戰14小時取得Google證照

Javascript初學者課程(7)-條件式應用

Javascript初學者課程(7)-條件式應用
Javascript初學者課程(7)-條件式應用

本日的JavaScript教學就是要教你正確應用條件式哦!

if 條件式

一般來說,在使用 JavaScript 編寫程式碼時, 前端工程師建議,如果希望程式能依據不同的狀態,而執行不同的操作時,就需要使用條件陳述式(conditional statements)

我們可以使用if 條件式來敘述:當一個指定的條件成立(為真)時會執行的程式碼,用白話來說就是「當…條件成立時,則會執行…程式」。

if 條件式的 JavaScript 語法如下:

See the Pen JavaScript7-if-1 by Tedutw (@Tedutw) on CodePen.

只有當指定的條件成立時,程式碼才會執行。

下面為 if 條件式 的範例,聲明當「變數 Num1 小於 變數 Num2」的條件成立時,才會顯示「JavaScript其實不難啊!」。

See the Pen JavaScript7-if-3 by Tedutw (@Tedutw) on CodePen.

承上面的例子,當「變數 Num1 小於 變數 Num2」的條件不成立時,則程式會自動跳過要執行的代碼,不會顯示「JavaScript其實不難啊!」。如下所示:

See the Pen JavaScript7-if-4 by Tedutw (@Tedutw) on CodePen.

else 敘述

當條件不成立時,除了不讓程式執行之外,我們還可以有其他選擇,可以使用「else」語句來指定當不符合指定條件時,所要執行的動作。承上方例子,當不符合「變數 Num1 小於變數 Num2」 的狀況時,就顯示「前端工程師都必須學JavaScript」。

See the Pen JavaScript7-if-5 by Tedutw (@Tedutw) on CodePen.

else if 敘述

if 條件式 中,我們還可以加入「else if」敘述另一個條件。當所指定的條件不成立時,是否還符合另一個條件。如以下例子所示,當變數「age」大於 17 的條件成立時,則顯示「成人」;若不成立,則看看是否符合另一個條件(變數是否大於 11)。當另一個條件成立時,則顯示「青少年」;若兩個條件都不成立,就顯示「兒童」。

See the Pen JavaScript7-if-6 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(8)-條件判斷式應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


還在困擾不知垃圾如何分類嗎?人工智慧資源回收機器人終於出現啦!


不能不會的Python基礎概念1-加減乘除四則運算練習


達內教育學員見證


身為前端工程師的你還分不清Div及Span標籤應用嗎? (上)


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


從無到有 挑戰14小時取得Google證照


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


2天考取Google Ads證照!新手廣告投放攻略


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略