iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
1
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 5

05 if 判斷式

判斷式基本介紹:肥胖提示冰箱

歡迎回到 JS 沙漠,今天我們要講的是 if 判斷式。 if 判斷式構架很簡單:如果符合某判斷(true),就執行某些行為。

if(判斷){
    執行;
};

例如冰箱打開之前,如果體重大於八十公斤,會跳出不要再吃了!我們可以這樣寫:

let weight = prompt("體重幾公斤?",""); 
if (weight>80){
    alert("不要再吃了!");
};

在這邊使用了 prompt 和 alert ,這兩支程式功能類似,都會談出一個視窗給使用者,只是 prompt 多了額外的地方讓使用者輸入。

上面的程式看在電腦眼中是這樣的:先跳出體重幾公斤?的訊息,預留一個空白的 "" 位置讓人輸入。如果輸入的體重大於八十,跳出警示。不妨跟著我一起將這樣的程式打打看,看是否真的出現效果了呢?

你也許會接著發現,如果我輸八十跟八十以下的公斤數,就什麼都不會出現了欸!別擔心,我們可以使用 else 來繼續給電腦指令。使用方式很簡單,接著 if 判斷式後面的{}繼續寫就可以了。

let weight = prompt("體重幾公斤?",""); 
if (weight>80){
    alert("不要再吃了!");
}else{
    alert("冰箱將在三秒後開啟");
};

如果輸的是大於八十,跳不要再吃了,不然就跳冰箱將在三秒後開啟。

但這樣寫完,又有一個新的 bug 了!如果他什麼都沒填,就按下一步怎麼辦?或者是如果我想讓不同公斤,跳出不同的訊息,該怎麼做呢?

很簡單,這時就派出 else if 吧!使用方式完全一樣,是接在 if 判斷式的 {} 屁股後面。

let weight = prompt("體重幾公斤?",""); 
if (weight>80){
  alert("不要再吃了!");
}else if (weight>60 && weight<=80){
  alert("吃完記得跑三圈啊!");
}else if (weight<=60 && weight>0){
  alert("冰箱將在三秒後開啟");
}else{
  alert("冰箱上鎖半小時!誰叫你要亂輸!");
};

以上這種判斷好幾次的寫法,叫做多重判斷。碰到要說介於某個數字間的判斷,例如體重必須小於等於八十,但又大於六十,你可以用 && 來串接。不認識 && 記得回去看前幾天的文章喔!

判斷式與指派運算子:剩下幾個贈品

還記得指派運算子嗎?其實 if 可以跟指派運算子搭在一起玩喔!那麼廢話不多說,讓我們直接進入例題!

老闆手上有 3 個贈品,消費滿 100 元就送對方贈品,現在來了兩個客人,一個買了 150 ,一個買了 98 元,老闆還剩幾個贈品?這個式子要怎樣請電腦幫我們計算,並秀出贈品還剩XX個呢?

完成了嗎?下好離手我要公布囉!

let gift = 3; //贈品一開始有三個
const customerA = 150; //A客人買150元
const customerB = 98; //B客人買98元

if (customerA >= 100){ //如果A客人買的金額超過100
  gift -= 1; //贈品數量減一
};

if (customerB >= 100){ //同上
  gift -= 1;
};

console.log("贈品還剩"+gift+"個");

上面的例子中是遞減一的狀況,可能對指派運算子的感受還不夠深。讓我們來寫一道進階題!一個漢堡 10 元,一包薯條 20 元,消費滿 100 元就送一個贈品, 200 送兩個,依此類推。如果老闆現在有 5 個贈品,客人團購買了 15 個漢堡 20 包薯條,客人離開後老闆剩幾個贈品呢?請讓電腦秀出剩下幾個贈品,如果贈品不夠,請秀出贈品數量不夠的字樣。

很直觀的,我們可以得到下面的答案:

let gift = 5;
const hamburgerPrice = 10; 
const friesPrice = 20; 
let hamburgerNum = 15; 
let friesNum = 20; 

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum); //總共付150+400=550

if (totalPrice >= 100){
  gift -= totalPrice/100; //等於 gift = gift - totalPrice/100
}else{
  console.log("未達成送贈品條件");
};

if (gift>0){ //如果剩的禮物大於0
  console.log("贈品還剩"+gift+"個"); //贈品還剩X個
}else{
  console.log("贈品不夠"); //不然顯示贈品不夠
};

但是注意了,如果我們把購買的數量減少,就會發現上面的程式有個 bug :直接把共花多少錢除以 100 可能會有餘數的問題,但贈品數量是不可能剩小數點的。因此這邊可以使用 Math.floor() 來取出小於等於所給的數字的最大整數。太像繞口令?白話點舉例,如果我給他 5.5 這數字,透過 Math.floor() 他會變成 5 。寫法如下:

console.log(Math.floor(5.5)); //印出5

讓我們來改良上面的程式吧!假設顧客只買了 15 個漢堡, 10 包薯條,會剩幾個贈品?

let gift = 5;
const hamburgerPrice = 10; 
const friesPrice = 20; 
let hamburgerNum = 15; 
let friesNum = 10; 

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum); //總共付150+200=350

if (totalPrice >= 100){
  gift -= Math.floor(totalPrice/100); //總共會拿3個贈品,但這裡會算出3.5,所以利用 Math.floor 取出小於該數字的最大整數:3
}else{
  console.log("未達成送贈品條件");
};

if (gift>0){ //如果剩的禮物大於0
  console.log("贈品還剩"+gift+"個"); //贈品還剩X個
}else{
  console.log("贈品不夠"); //不然顯示贈品不夠
};

那麼我們今天就講到這邊,希望對你有幫助!

學習與參考資料

JS 學徒特訓班教學影片及練習題 7-8 關
Math.floor():https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/floor


上一篇
04 運算子練習
下一篇
06 迴圈
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言