if - 程式碼教學

這篇要介紹 JavaScript if 條件判斷

🎃 「判斷式」：要判斷「小括號裡面的條件」是 “true” 還是 “false”

🍋 「條件」寫在「小括號()」裡面

🍋 條件： hungry == '飢餓'

• 如果是「true」（條件成立），就會執行「大括號{}」裡面的程式碼
• 如果是「false」（條件不成立），就“不會”執行「大括號{}」裡面的程式碼

🎃 「陳述式」：在「大括號{}」裡面寫出「在條件成立時，要執行的程式碼」

if 範例程式碼

當條件成立時…

JS:

注意！

if(hungry == '飢餓')

✅ 小括號內要寫「==」，才會是「做比較」的意思

❌ 不能只有寫「=」，「=」是「賦予值」的意思

var hungry = '飢餓';

if(hungry == '飢餓'){
    console.log('我現在好餓');
}

🎃 因為條件(hungry == '飢餓')是「true」

所以，在 Console 就會執行console.log('我現在好餓');

當條件不成立時…

JS:

var hungry = '飽足';

if(hungry == '飢餓'){
    console.log('我現在好餓');
}

🎃 因為條件(hungry == '飢餓')是「false」

所以，在 Console 就“不會”執行console.log('我現在好餓');

用console.log()來除錯

當我發現，為什麼「大括號內的程式碼」都沒有被執行呢？

這時，就可以先用console.log()來檢查，「小括號內的條件」是“true”還是“false”

以上面的程式碼為例，

JS:

var hungry = '飽足';

// 檢查「條件是否成立」
console.log(hungry == '飢餓');

if(hungry == '飢餓'){
    console.log('我現在好餓');
}

在 Console 就可以看到，console.log(hungry == '飢餓');是回傳「false」–> 代表「條件不成立」–> 因此，不會執行「大括號內的程式碼」

else 範例程式碼

🎃 else代表：當「if的條件不成立」時，就會執行「else的程式碼」

JS:

var hungry = '飽足';

if(hungry == '飢餓'){
    console.log('我現在好餓');
}else{
    console.log('我現在不想吃東西');
    console.log('我們走吧！');
}