# 洧杰第二週作業
## 6/15(一) 第九關
###### tags: `JS學徒特訓班`
# Day9 **觀念總整理** - 幫小杰學會 Function 之呼吸

洧杰公告

之後的題目，當你上傳你的解法到 Slack 後，請用 thread 主動參與 2 個學員的討論，

1. 做得好的請在 thread 給對方讚美，看到有問題可以給予建議
2. 有參與學生討論，請在他的貼文下個 100 分或讚的 emoji 表情符號

## 劇情開始
下班後小杰走在路上，很生氣回想著剛剛老闆碎念他工作效率很慢，

不是啊，為什麼不是先買一台 POS 機才對吧？用 Chrome console 來結帳是不是誤會了什麼？

但小杰心裡還是在想，該不會美式餐廳的業界其實都是這樣，還是是他自己見識太少，我自己的效率其實真的很慢吧？

小杰不禁大喊：「**到底誰可以救救我~~~**」


## 就在小杰崩潰之際
此時坐在外頭咖啡廳，一名其貌不揚的老先生說話了：


小杰：「不，老先生是 JavaScri...」
老先生：「程式邏輯都一樣的，你沒學佛嗎？沒聽過一法通萬法通？」
小杰：「老先生我還有事先走了，謝謝..」
老先生：「**相見就是有緣**，我就傳授你幾招吧，但在傳授之前，我得先考考你慧根是否足夠，資質不到我沒法收你啊～」
小杰：「謝謝但是我 ---」

老先生：「來，接招吧！！！(拔刀深呼吸」

>> 雞同鴨講一番後，原來老先生想要傳授給小杰的招式，就是 function
>> 但要傳授之前，老先生必須觀察小杰觀念是否 ok，才願意傳授給他
>> 快來一起幫幫小杰吧！

# 題目
請回覆以下的 console.log 內容

## 第一式：變數型別之呼吸
請回覆以下 console.log 內容

var a = 1;
a+=1;
a+=5;
var b = 5;
console.log(a+b);


var c = 3;
var d = "hello";
console.log(c*d);


var e = 8 + 2 * "9";
console.log(e);


var f = 1;
var g = "2";
var h = 3;
console.log(typeof(f+g+h));

答:12,NaN,~~NaN~~,string
第三個答案為26

## 第二式運算子之呼吸
請回覆以下 console.log 內容

var total = 200;
var isVip = true;
console.log(total>=200 && isVip);

var a = true;
var b = false;
console.log( a && b);
console.log( a || b);

var c = 10;
var d = 20;
var e = 30;
console.log(c==10 && d>=5 && e !== 20);
console.log(c==10 || d>=5 || e !== 20);
console.log(c==5 || d>=40 || e !== 30);

答:
true
false,true
true,ture,false
## 第三式運算子之呼吸
請告知以下 console.log，哪些會印出？
如果你很閒，試試看最後一題改下布林值。

var maryIsVIP = true;
if(maryIsVIP){
 console.log("哇貴婦餒！");
}else{
 console.log("你一定搞錯了，叫你們店長出來！");
}

var momSwim = false;
var girlfriendSwim = true;

if(momSwim && girlfriendSwim){
 console.log("都不救，因為他們都會游泳");
}else{
    console.log("小杰大喊：「你們誰不會游泳啊？？」");
    if(girlfriendSwim){
        console.log("那你自己游上來！");
    }else{
        console.log("我先問我阿母會不會游泳！");
    }
    
    if(momSwim){
        console.log("媽妳先自己游上來！");
    }else{
        console.log("媽我去救你！");
    }
}

答:
哇貴婦餒！
小杰大喊：「你們誰不會游泳啊？？」, 那你自己游上來！,媽我去救你！

### `6/16(二) 第十關`

[CodePen](https://codepen.io/sihyu/pen/MWKjEzm?editors=1010)

# 第十關 函式參數設計

隔日早晨，小杰前往老先生家裡的路上，心裡越想越不對。

為什麼老闆會准特休，放他去一個素未謀面的老先生家裡去特訓。早知道就不要跟老先生打賭，說什麼只要老闆允許請假，就答應特訓的請求！浪費了僅有的特休，小杰感到懊惱又無奈，只能安慰自己走一步算一步。

過沒半晌，小杰來到了老先生家裡，外牆上的招牌上寫著「**Java Script 補習班**」，等等..「Java Script」？為什麼中間會有空白，難不成我一直搞錯「JavaScript」的真正拼法..？

進入大廳有個圓形長桌，同時擺放了許多 Windows 老舊筆電，桌面上相當雜亂，有著刻意排出金字塔的玻璃能量飲料，而且還有各種明顯過時的書籍，例如「**Java 實戰 - 王者歸來**」、「**Java 之你不可不學的一百零八式**」，裡面還夾了些讓人匪夷所思的照片，例如下張。


最後小杰目光看到了一幅相框，是 2 人在餐廳的合照，手上共同拿著「鴻圖大展」的匾額。左邊明顯是年輕時的老先生，右邊的男性越看越眼熟，但卻一直無法聯想起來。

老先生：「少年，你來了，那我們就開始吧！」

小杰嚇了一跳，老先生不知何時已經坐在旁邊，並已經開啟電腦準備待續。

老先生：「我看過你第五關寫的 code 了，雖然比不上我當年，但還算差強人意！」
小杰：「謝謝讚美...咦老先生為什麼你看過—」
老先生：「叫我師父！特訓已經開始了，來吧！」

## 第一題：客戶詢價函式，來更多個客人也不怕
請看完[函式教學影片](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/Sk-_oGL2U/%2F6zQ3SasRR2GR-F3FW8SYVw)後，觀看下面截圖，請改設計一個詢價用的函式，並新增三個參數，依序為客戶姓名、薯條數量，漢堡數量。

同時來了三個客戶，請執行三次函式回報結果。


答:

var burgerPrice =50; //漢堡價錢
var friesPrice =40; //薯條價錢
var total; //總價
// console.log("Bob 您好,你詢問這金額總計為"+bobTotal+"元");

function inquiryMoney (guestName,friesNum,burgerNum){
  total = (friesPrice*friesNum+burgerPrice*burgerNum);
  return guestName+"買的漢堡和薯條價錢為:"+total;
}

console.log(inquiryMoney('Alice',5,2));
console.log(inquiryMoney('Ashley',1,10));
console.log(inquiryMoney('Joanne',2,4));

## 第二題：好多客戶都在問小杰，他們錢包剩下多少錢，小杰表示無言

下面截圖，請改設計一個查詢客戶錢包餘額用的函式，並新增四個參數，依序為客戶姓名、客戶錢包總額、薯條數量，漢堡數量。

同時來了三個客戶，請執行三次函式回報結果。


答:

var burgerPrice = 50; //漢堡價錢
var friesPrice = 40; //薯條價錢
var guestWallet = 200;
var guestTotal; //總價
// console.log("Bob 您好,你詢問這金額總計為"+bobTotal+"元");

function inquiryMoney (guestName,guestWallet,friesNum,burgerNum){
  var remainingMoney = guestWallet -(friesPrice*friesNum+burgerPrice*burgerNum);
  return guestName+"錢包剩餘:"+remainingMoney;
}  

 console.log(inquiryMoney('Alice',2000,5,2));
 console.log(inquiryMoney('Ashley',5000,1,10));
 console.log(inquiryMoney('Joanne',1000,2,4));

## 第三題：好多人都擁有九折優惠券

這一題，換您來設計函式與參數看看。

突然間同時來了三個客戶，請執行三次函式回報結果。


答:

var hamburgerPrice = 50; /*不變*/
var friesPrice =40; /*不變*/
var sale =0.9; /*不變*/
var maryWallet =5000;
var maryTotal;

function finalMoney(guestName,guestWallet,hamburgerNum,friesNum){
  //總共要付多少錢
  var total = guestWallet-(sale*(hamburgerPrice*hamburgerNum+friesPrice*friesNum));
  //回傳客人買完既定數量後，打九折，錢包剩多少錢
  return guestName+"買完東西後，錢包剩下"+total+'元' ;
}

console.log(finalMoney('Alice',2000,5,3));

console.log(finalMoney('Joaane',3000,6,2));

console.log(finalMoney('Ashley',1000,3,1));

### 第十二關
# 第十二關 DOM 操作

小杰：「什麼！你拒收患者，為什麼啊？」
護理師：「沒辦法，這是院長的指示..」

好不容易來到醫院，想不到他們竟然拒收師傅看急診，原來是師傅和院長是老交情，三年前他們一起合作，打算搞一個「**大 AI 數據之 BMI 體重計**」，標榜著只要用儀器照張相，就能測量受測者的 BMI。

但不知道為什麼兩方突然鬧翻了，師傅一怒之下，在已經完工的儀器上，下了一道密碼，使得花了三億元的儀器無法正常開啟運作，這也讓院長氣得牙癢癢。

護理師：「院長說，除非他把儀器解鎖，他才願意幫他治療..」
小杰：「可是師傅現在已經進入昏迷了，你得先把他救活啊！」

護理師：「你師傅離開院長前，其實有給一個密碼提示，但我們醫護人員也看不懂 Code，不然你試試看？聽說這個解鎖知識，只要看這裡的[秘笈](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/Sk-_oGL2U/%2F6zQ3SasRR2GR-F3FW8SYVw)就能輕鬆解開~」

小杰：「我一定是上輩子欠師傅太多，才淪落到現在這樣的地步...嗚嗚嗚，好，我解，我來解！」

## 題目

1. 請觀看此 [Codepen](https://codepen.io/liao/pen/dyGpqGX?editors=1010) 的線索，試圖找到密碼，並在 Slack 上回傳密碼
2. 以下 Codepen 的 HTML 與 CSS 面板都壞掉了，你只能編輯 JS 面板，來去尋找線索


答：https://codepen.io/sihyu/pen/mdVOaqW?editors=1010