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內容數
我是佧佧,歡迎來到我的術式領域。 讓我們一起磨練技術、學習程式, 在前端的領域中不斷成長吧!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
佧佧的術式領域 的其他內容
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
  先前在開發的專案中,需要一個上傳圖片後可以看即時看到預覽的功能。再加上這個功能在許多地方都會用到,因此試著製作了一個可以獨立運行的組件。
Nuxt 是什麼? 總之先學再說! 初見Nuxt,需要的環境?怎麼安裝? 快來看看,從今天開始學 Nuxt !
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
了解網站的開發流程後再來看看網站開發有哪些角色參與其中吧!
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
  先前在開發的專案中,需要一個上傳圖片後可以看即時看到預覽的功能。再加上這個功能在許多地方都會用到,因此試著製作了一個可以獨立運行的組件。
Nuxt 是什麼? 總之先學再說! 初見Nuxt,需要的環境?怎麼安裝? 快來看看,從今天開始學 Nuxt !
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
了解網站的開發流程後再來看看網站開發有哪些角色參與其中吧!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
Thumbnail
在這一章中,我們介紹了PHP中的流程控制語句,包括if、else if、else、三元運算子、switch語句、for迴圈、foreach迴圈、while迴圈、do-while迴圈、循環嵌套以及控制迴圈的語句如break、continue、goto和return。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
本章節帶領讀者了解 Kotlin 的流程控制語法,包括條件判斷、當做三元運算子使用的 if 表達式、用來替代 switch 語句的 when 語句、用於迴圈運作的 for 和 while 語句,以及控制迴圈執行流程的語句和標籤概念。該章節目的在於讓讀者深入掌握流程控制功能,進一步提升編程技巧。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
Thumbnail
在這一章中,我們介紹了PHP中的流程控制語句,包括if、else if、else、三元運算子、switch語句、for迴圈、foreach迴圈、while迴圈、do-while迴圈、循環嵌套以及控制迴圈的語句如break、continue、goto和return。
Thumbnail
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析,以及狀態和數據的區分,詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
本章節帶領讀者了解 Kotlin 的流程控制語法,包括條件判斷、當做三元運算子使用的 if 表達式、用來替代 switch 語句的 when 語句、用於迴圈運作的 for 和 while 語句,以及控制迴圈執行流程的語句和標籤概念。該章節目的在於讓讀者深入掌握流程控制功能,進一步提升編程技巧。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。