iT邦幫忙

2026 iThome 鐵人賽

DAY 14
0
自我挑戰組

找回消失的程式手感:從 Figma 到 VS Code 設計系的 30 天前端打怪日常系列 第 14 篇

Day 14:如果這樣,就那樣:用 if-else 讓網頁學會自己做決定

  • 分享至 

  • xImage
  •  

昨天我們讓 JS 裝好了變數這個小盒子,今天我們要教這個「木頭人」學會思考。

在現實生活中,我們隨時都在做條件判斷:「如果外面下雨,就帶雨傘;否則,就戴太陽眼鏡。」
而在前端網頁的世界裡也是如此:如果使用者輸入的密碼正確,就登入成功;否則,就跳出錯誤提示。

這就是 JavaScript 裡最經典的控制流程——if-else 條件判斷式!


if-else 的基本長相:像極了流程圖的菱形判斷框

let userScore = 85;

// 如果分數大於或等於 60 分
if (userScore >= 60) {
    console.log("恭喜你,及格過關!");
} 
// 否則(小於 60 分)
else {
    console.log("哎呀,需要再加加油喔!");
}

1. if (條件):小括號裡放要檢查的條件(例如:userScore >= 60),只要結果是 true(對),就會執行大括號裡的第一段程式碼。
2.else:如果上面的條件不成立(是 false),就會自動落入 else 的區塊,執行另一套邏輯。


多重條件判斷:else if 就像分流閘道

如果情況比較多種(例如評分有分優秀、及格、不及格),我們還可以串接好幾個 else if:

let grade = 'B';

if (grade === 'A') {
    console.log("太神啦!優秀!");
} else if (grade === 'B') {
    console.log("表現不錯,繼續保持!");
} else {
    console.log("革命尚未成功,同志仍須努力!");
}

今日小結

今天我們用流程圖的邏輯,輕鬆掌握了 JavaScript 的 if-else 條件判斷,讓網頁具備了根據不同狀況做出反應的能力。

學會了判斷與邏輯後,明天我們要來介紹如何把一堆資料「整齊收納」的好幫手——陣列(Array)與物件(Object)!


上一篇
Day 13:重返 JavaScript:用設計師聽得懂的比喻,搞懂變數與資料型態
下一篇
Day 15:第二週小結:用陣列與物件把複雜資料收納整齊(就像 Figma 的組件與屬性面板)
系列文
找回消失的程式手感:從 Figma 到 VS Code 設計系的 30 天前端打怪日常 共 18 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言