Day05 JavaScript 條件判斷

閱讀時間約 7 分鐘


做選擇的時刻

程式語言中,做選擇是非常常見的一件事。例如:判斷登入者身份是否為管理員、當前設定是否為深色模式等。想像我們有一個交易系統,我們需要判斷使用者帳戶餘額是否足夠購買Apple Vison Pro。首先,我們必須認識ifelse

if 和 else

ifelse是常見的條件判斷詞。

接下來,跟前面用console.log()印出來不一樣,這裡我們用document內建的method:write(),直接把內容印在畫面上。

raw-image
可以看見Codepen預覽區出現了文字。

可以看見Codepen預覽區出現了文字。


加上ifelse

raw-image

解讀上面的指令,只有money > 10時,才會印出”你有超過十塊錢”。其他情況,也就是money <= 10時,會印出”你有少於十塊錢”


ifelse基本上就是二選一,如果if條件成立,else就完全不會執行。


可以看見if else的結構如下:

if (條件) {
條件成立做的事
} else {
條件不成立時做的事
}

分別用{}把指令包著,條件則用()括著。

if不一定要搭配elseelse只是一種外加的保險。如果前面都符合了,就不會輪到else執行。

else if

如果要連續判斷好幾個條件,可以在if後接著用else if

raw-image

else ifelse有類似的特性,只要前面的條件符合了,就不會被執行。跟連續寫好多個if不同,那種情況每個if都會獨立判斷一次。

這邊的程式先判斷錢包裡是不是多於100元,不是的話接著判斷是不是大於10元。條件符合時,財產介於10-100之間。

條件

接下來我們來仔細談談if的條件,money > 10,這裡到底發生了什麼。

條件基本上就是true或是false兩種情況,也就是常聽見的boolean。如果條件是true,則if內的動作會執行。而在這邊,money > 10的回傳值就是true,所以會印出”你有超過十塊錢”


知道這件事後,我們可以嘗試不同的條件,像是:

raw-image

注意:=是用來把後方的值指定給前方的變數,==則用來判斷前後兩者是否相等,會回傳truefalse兩者是截然不同的


為了更好理解if的條件,我們可以寫下這行毫無意義的程式。

raw-image

可以看見()內的值,其實就是truefalse

但這行因為條件永遠都是true,所以下面這行一定會被執行,那直接寫document.write("這行一定會被執行")就好了,根本不需要if

特殊條件

我們不一定要用上面的比較符號(>, ==等),有些特別的值寫在條件裡,也會被當成truefalse處理。

undefined

如果有一個變數沒有被指定值,那麼電腦跟我們一樣,不會知道這個變數到底代表什麼。舉例來說,下方的number被宣告出來,但沒有用=指定數值。在JavaScript的世界裡,number現在的狀態就是undefined(未定義)。而undefined寫在條件裡會被判斷為false

raw-image


空的String

空的字串在條件裡也會被當成false

raw-image


0

數字0在條件裡也會被當成false,不是0的數字是true

raw-image


條件的其他應用

這些條件本質上就是truefalse,也就是boolean(布林值)。

程式語言有許多需要條件判斷的時刻,除了剛才提到的ifelse之外,常見的還有需要程式重複做一件事時。

試想,當我們要程式重複做一件事時,電腦最需要知道的就是什麼時候該停下來吧!這個時候就必須用上boolean作為條件判斷。


舉例來說,當我想在畫面上印上1-100。

我可以這樣寫:

raw-image

確實可行,但真的有點太累了。

這時候我們就可以用上loop(迴圈)。

raw-image

先定義了count = 1,然後在while的條件內寫下「只要count <= 100就一直執行」。

這邊的count++就是count = count + 1的簡寫。count就會從1倍更新成2,再變成3…

印出了一串數字。

印出了一串數字。

你會看見一串可怕的數字出現在畫面中,他的確是1-100,只是有點醜。我們幫數字加個HTML換行標籤<br>

raw-image
raw-image

稍微好看多了!


總而言之,while迴圈內也用到了跟if一樣的條件判斷,諸如此類的應用還有很多,我們暫時不必一一了解,只需要先知道這些JavaScript基本架構的意涵,未來再看見任何相似的使用情境,很快就能理解、上手。

小結

從課程開始看到這,你可能會覺得枯燥乏味、不明所以。不確定這些太簡單的介紹能怎麼樣地實作出一個現實生活中的應用程式,也可能只覺得這些陌生的語法艱澀難懂。這些都沒關係,和一開始一樣,我想要強調的是(){}===等,這些具有特殊意義的符號,他們在JavaScript裡扮演骨幹的角色。嚴格來說,到現在所有的whileif你都還沒弄明白,沒關係。只要看見每個符號在JS裡被使用的情況。接下來在學習更複雜語法或是實作時,這些內容會發揮他們關鍵的作用,讓你更容易看懂一段未知的JS程式。


明天我們回頭談談function,這次要談的是Higher-Order Function(高階方程式)。


Resource

今日Codepen

連結

Credits

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

0會員
11內容數
留言0
查看全部
發表第一個留言支持創作者!
HCY 71的沙龍 的其他內容
什麼是Array(陣列) array跟object一樣是一種資料的容器,不同的是array通常用來裝同類別的資料,就像是書架用來收納書。要在書架裡放書跟其他東西也是可以的,但就是有點奇怪,不是大家習慣的做法。 array透過[]宣告。 假設我們要儲存使用者喜歡的顏色這筆資料,每筆資料的類型
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//,可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/* 及 */前後包夾要註解的內容。 轉換環境 從上個單元的經驗,有些人可能會發現
歡迎來到「10日 JavaScript」,有鑑於自己先前學習JavaScript的流程過於破碎且凌亂,特別整理了這份文章,包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人,讓大家不必再走太崎嶇的路。內容會分成10篇,一步步
什麼是Array(陣列) array跟object一樣是一種資料的容器,不同的是array通常用來裝同類別的資料,就像是書架用來收納書。要在書架裡放書跟其他東西也是可以的,但就是有點奇怪,不是大家習慣的做法。 array透過[]宣告。 假設我們要儲存使用者喜歡的顏色這筆資料,每筆資料的類型
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//,可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/* 及 */前後包夾要註解的內容。 轉換環境 從上個單元的經驗,有些人可能會發現
歡迎來到「10日 JavaScript」,有鑑於自己先前學習JavaScript的流程過於破碎且凌亂,特別整理了這份文章,包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人,讓大家不必再走太崎嶇的路。內容會分成10篇,一步步
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
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
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
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
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。