[day-4]流程判斷 - if、else if、else/whimsical 流程圖 介紹


Posted by Xiang on 2021-10-24

If條件判斷

if旁的括號裡是寫條件式
而大括號是符合條件後執行的內容

(由於若直接寫邏輯運算式可能日後會無法清楚得知條件內容
因此可以設一個布林值變數來放條件)
如下

//假設氣溫15度以下要穿外套 今天氣溫14度

let toDayDegress = 14; //今天氣溫14度 
let isWearJacket = toDayDegrees <= 15; //符合條件(若溫度低於15則穿外套)

    //條件式 true
if(isWearJacket){
    console.log("穿上外套 ");
    console.log("準備出門 ");
}

else

//小明想吃牛肉麵,價格為110
//但小明不知道自己錢包剩多少錢
//打開錢包前決定如果錢包錢不夠則回家吃飯

let wallet = 150; //錢包的錢
let beefNoodles = 110; //牛肉麵的錢

if(wallet>=beefNoodles){
 console.log("小明跑去吃牛肉麵")
 console.log("小明錢不夠,回家吃飯")

else if (可以多組)

if內的條件沒有符合但符合另一個條件時使用
可以寫在else的前面

if(a<b){ //主要條件
//執行內容
}else if(b>c){ //若未達成主要條件 則判斷另一個條件
//執行內容
}else{ //以上條件都沒有達成則執行這段
//執行內容
};

看完以上三種的介紹後 可以來實際試一下題目試做
先列出一些條件後 再想要怎麼用程式來實現流程判斷


完整範例題目

小明的習慣是
1.如果沒下雨,就不會帶雨具
2.但如果下毛毛雨,他會帶輕便雨衣
3.假使下普通的雨,他會帶折傘
4.如果颱風天豪雨,他會帶長傘

今天的天氣是毛毛雨,那小華會帶什麼雨具呢?

let todayWeater = "毛毛雨"; //今天天氣為毛毛雨

if (todayWeater=="沒有下雨"{
    console.log("小華不帶雨具")'
} else if (todatWeater=="毛毛雨"){
    console.log("帶了輕便雨衣")
} else if (todayWeater=="普通的雨"){
    console.log("帶了折傘")
} else if (todayWeater=="豪雨"){
    console.log("帶了長傘")
} else {
    console.log("遇到異常狀態")
}

whimsical介紹

新手常常遇上的問題是 學了很多語法
但是遇上較大的作業或作品 腦袋一片空白、不知從何下手
當遇到情境、解決的事情

應該做的事情:
步驟一、任務拆解
步驟二、流程設計

因此這邊推薦whimsical這個線上繪製流程圖的網站給大家
繪製流程圖官網:http://whimsical.com/

而這邊簡單介紹流程圖最重要的四個符號

1.流程符號


用來表達過程的次序,用一條線由一個符號連接去到另一個符號。

2.起止符號


用來表示程式或子程式的開始與完結。

3.程式


代表一系列程式去改變數值、形式、數據的位置。

4.決策判斷


用來按情況去決定下一步走向。通常以「是/否」或「真/假」值去決定。

基本上剛開始只要學會這四個符號就能應付大部分前期的流程圖了。

那以下也提供兩份流程圖的範例
1.

2.這份是有用到if else決策判斷的

3.if內還可以包if


#javascript #js #Front End #web front end







Related Posts

每日心得筆記 2020-07-09(四)

每日心得筆記 2020-07-09(四)

串接 API -- try catch 練習

串接 API -- try catch 練習

Context API 效能問題 - use-context-selector 解析

Context API 效能問題 - use-context-selector 解析


Comments