JS 語法 - if statement (依設定條件進行判斷)

更新 發佈閱讀 3 分鐘

  在寫程式的時候,我們常會需要針對不同情況來執行不同的工作。

  以帳號登入舉例來說:「假設用戶輸入帳號密碼正確,便可成功登入」,這就是一個基本的判斷式。如果寫成 code 的話,就會長這樣:

if(帳號密碼正確) {
成功登入;
}


  那如果要設定帳號密碼輸入錯誤的後續處理工作呢,我們可以在原本的程式碼後再加上 else:

if(帳號密碼正確) {
成功登入;
} else {
阻止登入並跳出錯誤提醒;
}


  但除了這兩種狀況以外,為了資訊安全,我們可能不希望讓用戶一直嘗試,如果輸入密碼錯誤三次,就要把帳號進行鎖定,這個時候就是使用 else if :

if(帳號密碼正確) {
成功登入;
} else if (帳號密碼錯誤三次) {
鎖定帳戶;
} else {
阻止登入並跳出錯誤提醒;
}


  咦?為什麼錯誤三次會寫在第二個呢?

  這是因為 if statement 的執行方式是這樣的:

  • if(條件1) { 指令1; } else if(條件2) { 指令2; }… else { 指令n }
    • 假設所述條件一為真,執行指令1,若否,查看條件2是否為真,若否則繼續查看,直到條件符合,若所有條件皆不符合,執行else的指令。


  最後來個小練習:試著製作一個票價檢索系統,輸入年齡後自動提示票價

  • 一般成年票為250元。
  • 年齡低於12歲為兒童票,票價100元。
  • 年齡高於64歲為敬老票,票價150元。





解答如下:

let age = window.prompt("你的年齡是?");
age = Number(age);
console.log(typeof age);

let price;
let name;

if (age > 0 && age <= 12) {
name = "兒童票";
price = 100;
} else if (age > 12 && age <= 65) {
name = "成人票";
price = 250;
} else if (age > 64 && age <= 125) {
name = "敬老票";
price = 150;
}

if (price != undefined) {
alert("您是" + name + ",您的票價是" + price + "元");
}
留言
avatar-img
佧佧的術式領域
4會員
15內容數
我是佧佧,歡迎來到我的術式領域。 讓我們一起磨練技術、學習程式, 在前端的領域中不斷成長吧!
佧佧的術式領域的其他內容
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
2024/10/24
  先前在開發的專案中,需要一個上傳圖片後可以看即時看到預覽的功能。再加上這個功能在許多地方都會用到,因此試著製作了一個可以獨立運行的組件。
2024/10/24
  先前在開發的專案中,需要一個上傳圖片後可以看即時看到預覽的功能。再加上這個功能在許多地方都會用到,因此試著製作了一個可以獨立運行的組件。
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
Thumbnail
在這一章中,我們介紹了PHP中的流程控制語句,包括if、else if、else、三元運算子、switch語句、for迴圈、foreach迴圈、while迴圈、do-while迴圈、循環嵌套以及控制迴圈的語句如break、continue、goto和return。
Thumbnail
在這一章中,我們介紹了PHP中的流程控制語句,包括if、else if、else、三元運算子、switch語句、for迴圈、foreach迴圈、while迴圈、do-while迴圈、循環嵌套以及控制迴圈的語句如break、continue、goto和return。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
本章節帶領讀者了解 Kotlin 的流程控制語法,包括條件判斷、當做三元運算子使用的 if 表達式、用來替代 switch 語句的 when 語句、用於迴圈運作的 for 和 while 語句,以及控制迴圈執行流程的語句和標籤概念。該章節目的在於讓讀者深入掌握流程控制功能,進一步提升編程技巧。
Thumbnail
本章節帶領讀者了解 Kotlin 的流程控制語法,包括條件判斷、當做三元運算子使用的 if 表達式、用來替代 switch 語句的 when 語句、用於迴圈運作的 for 和 while 語句,以及控制迴圈執行流程的語句和標籤概念。該章節目的在於讓讀者深入掌握流程控制功能,進一步提升編程技巧。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
if 條件式
Thumbnail
if 條件式
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News