Posted Javascript26 minutes read (About 3947 words)

[JS 60 Days] Day 1 to Day 10 - JS變數

Introduction

這個挑戰練習是由hexschool建立的，這邊會紀錄Day1-20的練習

Day1

JS 環境與變數環境

第 1 題

1
2
3
4
5
6
// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
var a ;
a = 1;
a = "hello";
console.log(a)
  1. hello
  2. 1 2 3

第 2 題

1
2
3
4
5
6
7
// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
var b = 3 ;
var c = 4;
console.log(d)
var d = b+c;
console.log(d)
  1. undefined 7
  2. 3 1 6

第 3 題

1
2
3
4
5
6
7
8
// 1.產生 console.log 從上到下的值為？
// 2.出現幾個變數、型別、記憶體物件?
console.log(e)
var e;
e = 5;
e = "hello"
e = true;
console.log(e)
  1. undefined true
  2. 1 3 4

Day2

變數命名

請依照以下房型資訊，去定義各個變數名稱，變數務必要命名比較語意化且好懂。

carbon

Day3

變數型別判斷與弱型別轉型

請依序告知以下 console.log 會顯示什麼值。

第一題

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 1;
console.log(typeof(a)); //Number

var b = "hello";
console.log(typeof(b)); //String

var c = 1+"hello";
console.log(typeof(c)); //String

var d = 1+"11";
console.log(d) //111
console.log(typeof(d)) //String

第二題

1
2
3
4
5
6
7
var a;
a = a+"hello"
console.log(a); //undefinedhello
console.log(typeof(a)) //String

var b = 3;
console.log(b*"hello"); //NaN

第三題

1
2
3
4
5
6
7
var a = 9;
console.log(a+9);  //18
console.log(a+'9');  //99

var b = "9";
console.log(b*b)  //81
console.log(typeof(b*b)) //Number

Day4

比較運算子

請依序告知以下 console.log 會顯示什麼值。

第一題

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = 2;
var b = 1;
console.log(a>0); //true
console.log((a+b)>1); //true

var c = 4;
var d = 3;
console.log(c == d); //false

var e = 8;
var f = 5;
console.log(f >= e) //false
console.log(f != e); //true 
console.log(f == e); //false

第二題 搭配型別自動轉型

1
2
3
4
5
6
7
8
9
var a=3; 
var b="3";
console.log(a==1); //false
console.log(a==b); //true

var c = 2;
var d = "5";
// 請解釋為什麼
console.log((c*d)>=5) //true 字串5轉型別為數字 2*5=10 大於等於5

第三題 嚴謹模式

1
2
3
4
5
6
var a = 1;
var b = "1";
console.log(a==1); //true
console.log(a==b); //true
console.log(a===b); //false
console.log(a!==b); //true

Day5

變數實作情境題

你現在是美式餐廳的櫃檯收銀員，但老闆因為預算有限，所以沒有買收銀機，所以你只能透過 JavaScript 來幫顧客結帳。

以下變數都不可變更：

第一題：顧客 Bob 向店員詢價

顧客 Bob：「請問我要買 4 個漢堡，30 份薯條，總共多少？」

1
2
3
4
5
6
7
8
9
10
11
12
// 定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var bobTotal;

// 請將 Code 寫在這,運算內容賦予到 bobTotal,
// 並要利用到 hamburgerPrice、friesPrice
// 算出 Bob 的提問。

bobTotal = hamburgerPrice * 4 + friesPrice * 30;

console.log( "Bob 您好,您詢問的金額總計為"+bobTotal+"元");

第二題：錢包剩下多少錢

mark 錢包裡有 200 元，買了一個漢堡，三個薯條，他還剩下多少錢？

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var markWallet = 200;
var markTotal;

// 請將 Code 寫在這，運算内容賦予到 markTotal,
// 並要利用到 markWallet、hamburgerPrice、friesPrice
// 算出 mark 購買後剩餘的金額。

markTotal = markWallet - ( hamburgerPrice * 1 + friesPrice * 3 );

console.log('馬克買完東西後,錢包剩下'+markTotal +'元')

第三題：顧客 Mary 提供折扣券

顧客 Mary 身上有 5000 元，想要買 10 份漢堡、10 份薯條，因為他有會員卡，所以可以打九折優惠，請問他還剩下多少錢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var sale = 0.9;
var maryWallet = 5000
var maryTotal;

// 請將 Code寫在這，運算內容賦予到 maryTotal ,
// 並要利用到hamburgerPrice、friesPrice、sale、maryWallet
// 算出 maryTotal 剩下的錢。

maryTotal = maryWallet - sale * ( hamburgerPrice * 10 + friesPrice * 10 );

console.log( 'Mary 買完東西後,錢包剩下'+ maryTotal +'元')

Day6

邏輯運算子情境題

題目一：布林與比較運算子練習

成為 VIP 會員的條件，只要購買滿 200 元，就可無條件成為會員，Bob 買了 2 個漢堡，2 個 薯條，是否有滿足條件？

1
2
3
4
5
6
7
8
9
10
11
12
var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;
var isVIP;

// 請透過比較運算子，將比較結果寫在isVip 上
// 請利用 VIPTotal、hamburgerPrice、friesPrice 的變數進行比較
// isVIP 的型別必須為布林值(true or false)

isVIP = (( 2 * hamburgerPrice ) + ( 2 * friesPrice )) >= VIPTotal ? true : false;

console.log("Bob的 VIP 條件為"+isVIP)

題目二：三心二意的老闆希望用邏輯運算子 &&

老闆發現大家都只買薯條衝 VIP 資格，導致大家都不買漢堡，老闆好生氣，他認為他的美味蟹堡是全美最好吃的，小杰也不知道他的自信從哪裡來的。

所以他跟小杰說，從今天起，VIP 條件必須同時符合以下兩點，才能成為 VIP 資格。

  1. 一次消費滿 200 元
  2. 一定要買 1 個漢堡

這時又來了兩位顧客，Mary 與 Mark，來看看他們有沒有符合條件吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 此變數不可更改
var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

var markHamburgerNum = 2;
var markFriesNum = 4;
var markIsVIP;

// 如上面新增的變數，馬克買了 2 個漢堡，與 4 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// markIsVIP 的型別必須為布林值 (true or false)

markIsVIP = (( markHamburgerNum * hamburgerPrice ) + ( markFriesNum * friesPrice )) >= VIPTotal && markHamburgerNum >= 1 ? true : false;

console.log("mark 的 VIP 條件為"+ markIsVIP)

var maryHamburgerNum = 0;
var maryFriesNum = 10;
var maryIsVIP;

// 如上面新增的變數，Mary 買了 0 個漢堡，與 10 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// maryIsVIP 的型別必須為布林值 (true or false)

maryIsVIP = (( maryHamburgerNum * hamburgerPrice ) + ( maryFriesNum * friesPrice )) >= VIPTotal && maryHamburgerNum >= 1 ? true : false;


console.log("mary 的 VIP 條件為"+ maryIsVIP)

題目三：Mary 很生氣，他覺得現在的 VIP 資格吃人夠夠，希望用 || 邏輯運算子

Mary 說：「老闆我好歹是忠實老客戶欸，我買了你八年的薯條，而且遠遠超過 200 元，竟然還不算我是 VIP，你有沒有搞錯！」
老闆怕了，他很擔心會上台灣的老天鵝娛樂被當作笑柄，所以他立馬將 VIP 條件改成，只要符合以下任一點消費條件，就能成為 VIP 資格。

  1. 一次消費滿 200 元
  2. 一定要買 1 個漢堡

我們再看看 Mary 有沒有符合條件吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

var maryHamburgerNum = 0;
var maryFriesNum = 10;
var maryIsVIP;

// 如上面新增的變數，Mary 買了 0 個漢堡，與 10 個薯條
// 請同時運用比較運算子與邏輯運算子，將比較結果寫在 markIsVIP 上
// maryIsVIP 的型別必須為布林值 (true or false)

maryIsVIP = (( maryHamburgerNum * hamburgerPrice ) + ( maryFriesNum * friesPrice )) >= VIPTotal || maryHamburgerNum >= 1 ? true : false;

console.log("mary 的 VIP 條件為"+ maryIsVIP)

Day7

if - 認真的小杰竟被客訴

題目一：if 的練習

老闆說現在要來驗收 if 成果，
成為 VIP 會員的條件，只要購買滿 200 元，
現在 會員 A 購買了 350 元，請用 if 判斷是否要給他 VIP 卡。

1
2
3
4
5
6
7
8
9
var VIPTotal = 200;
var memberPrice = 350;

// 請透過 if 來設計回覆，如果對方滿足門檻
// 就回覆 console.log("您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上")

if( memberPrice >= VIPTotal){
  console.log("您好，您有達到 VIP 門檻。這裡給您 VIP 會員卡(遞上)")
};

題目二：if else 的練習

又有人來申請 VIP 活動了！
成為 VIP 會員的條件，只要購買滿 200 元，就可無條件成為會員，Mark 買了 2 個漢堡，2 個 薯條，是否有滿足條件？
這次要記得用 if，以及注意你的語氣啊~ (小杰覺得人生好難

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var VIPTotal = 200;
var hamburgerPrice = 50;
var friesPrice = 30;

// 請透過 if else 來去設計對方是否有達到條件，有或沒有都需要回覆對方
// 如果有，請顯示 console.log("尊敬的客戶您好，您有達到 VIP 條件")
// 如果沒有達到條件，便用 else 顯示 console.log("尊敬的客戶您好，您還差 xx 元，才有符合 VIP 條件哦~")

let markTotal = hamburgerPrice * 2 + friesPrice * 2;
let shortage

if ( markTotal >= VIPTotal){
  console.log("尊敬的客戶您好，您有達到 VIP 條件");
} else{
  shortage = VIPTotal - markTotal
  console.log(`尊敬的客戶您好，您還差 ${shortage} 元，才有符合 VIP 條件哦~`);
};

題目三： if、else if、else 練習

工作一整天，小杰累到懷疑人生，累歸累，但還是得吃東西，小杰吃東西有自己的 SOP，來幫幫小杰看看他該吃什麼食物。

  • 小杰都用飢餓度 1~100 來計算，100 就是代表最飢餓，數值皆為整數，不會有小數點
  • 小杰飢餓度 0~20 時，都吃飯糰
  • 小杰飢餓度在 21~40 時，都吃肉燥飯+貢丸湯
  • 小杰飢餓度在 41~60 時，都吃麥當勞
  • 小杰飢餓度在 61~100 時，都吃 99 元火鍋吃到飽

今天小杰的飢餓度是 53，請引導小杰去指定地點用餐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 請用 if、else if 去判斷主人公該吃什麼
// 各區塊回覆內容請顯示 console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃麥當勞")

var hungryNum = 53;

if(hungryNum >= 20){
  console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃飯糰");
}else if(hungryNum > 20 && hungryNum <= 40){
  console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃肉燥飯+貢丸湯");
}else if(hungryNum > 40 && hungryNum <= 60){
  console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃麥當勞");
}else{
  console.log("主人公因為飢餓度在"+hungryNum+"，所以他決定去吃99 元火鍋吃到飽");
}

Day8

if 與指派運算子 - 幫幫小杰的金魚腦

題目一：老闆考考你指派運算子

老闆：「我其實很懷疑你是不是真的會了，我考考你！」
老闆：「剛好今天是發薪日，先發給你薪資 23500 元(遞給小杰」
小杰：「謝謝腦闆，但你怎麼把我的薪資告訴大家了..」
老闆：「這不是重點，以下兩步驟動作請寫成程式」
老闆：「步驟一：因為你遲到一次，我要扣你 1000 元(取走小杰手上的 1000 元」
老闆：「步驟二：然後你又偷吃 Pizza，我要再扣你 2500 元 (再次取走」
小杰：「不是啊！那明明是小黑吃..」
老闆：「這不是重點，快點算！算出你還剩下多少錢！」

1
2
3
4
5
6
7
var salary = 23500;

// 請依照上面的武功秘笈Codepen，依序實現兩步驟,算出小杰被扣了多少錢

salary = salary - 1000 - 2500;

console.log("小杰目前還剩下"+salary+"元");

題目二： if + 指派運算子

老闆：「好了，現在我要告訴你贈品條件！」

  • 目前小杰手上有 3 個贈品
  • 消費滿 100 元就送對方贈品

而現在來了兩個客人，並依序有消費，請問現在他還剩下多少個贈品？

1
2
3
4
5
6
7
8
9
10
11
12
13
var giftNum = 3; // 贈品數量
var customerA = 150;// 顧客 A 消費金額
var customerB = 99; // 顧客 B 消費金額

if(customerA >= 100){
  giftNum -= 1;
};

if(customerB >= 100){
  giftNum -= 1;
};

console.log("目前贈品剩下"+giftNum+"個"); //2

題目三：if+指派運算子

老闆：「我現在補齊給你總計 50 個贈品！」
老闆：「然後我覺得現在贈品門檻太高了，我決定大放送，只要滿 50 元就送一個！以此類推，他買 500 元就送 10 個贈品！」
小杰：「老闆你今天這麼慷慨，那我的薪..」
老闆：「別廢話，客人來了快點！他買完後告訴我贈品還夠不夠！」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var giftNum = 50; // 贈品數量
var friesPrice = 30; // 薯條單價
var hamburgerPrice = 50; // 漢堡單價

// 以下是題目
// mary 買了 10 份薯條，10 份漢堡
// 請計算完贈品規則後,善用指派運算子去計算目前剩下的贈品有幾個
// 並用下面的 if 回報給老聞

maryTotal = friesPrice * 10 + hamburgerPrice * 10;

if(giftNum >= 0){
  if(maryTotal >= 50)
  giftNum = giftNum - Math.floor(maryTotal / 50);
  console.log("老聞!贈品還夠!剩下"+giftNum+"個~" ); //34
} else {
  console.log("老聞贈品賣光啦~");
}

Day9

觀念總整理 - 幫小杰學會 Function 之呼吸

第一式：變數型別之呼吸

請回覆以下 console.log 內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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


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


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


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

第二式運算子之呼吸

請回覆以下 console.log 內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var total = 200;
var isVip = true;
console.log(total>=200 && isVip); // true

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

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

第三式運算子之呼吸

請告知以下 console.log，哪些會印出？
如果你很閒，試試看最後一題改下布林值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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("媽我去救你！"); // 會印出
    }
}

Day10

函式參數設計

第一題：客戶詢價函式，來更多個客人也不怕

請改設計一個詢價用的函式，並新增三個參數，依序為客戶姓名、薯條數量，漢堡數量。
同時來了三個客戶，請執行三次函式回報結果。

1
2
3
4
5
6
7
8
9
10
11
12
13
//定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var bobTotal;

// 請將Code寫在這,運算內容賦予到 bobTotal,
// 並要利用到 hamburgerPrice、friesPrice
// 算出 Bob 的提問。

function total(guestName, hamburgerNum, friesNum) {
  return `${guestName} 您好,您詢問的金額總計為 ${hamburgerPrice * hamburgerNum + friesPrice * friesNum} 元`;
}
console.log(total('Bob', 1, 2));

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var markWallet = 200;
var markTotal;

// 請將Code寫在這,運算內容賦予到markTotal,
// 並要利用到 markWallet hamburgerPrice friesPrice
// 算出 mark購買後剩餘的金額。

console.log('馬克買完東西後,錢包剩下'+markTotal +'元')


function total(guestName, walletTotal ,friesNum, hamburgerNum) {
  return `${guestName} 買完東西後,錢包剩下 ${ walletTotal - (hamburgerPrice * hamburgerNum + friesPrice * friesNum) } 元`;
}

console.log(total('Mark', markWallet, 10, 5))

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 定義薯條跟漢堡的金額(金額不可更改)
var hamburgerPrice = 50;
var friesPrice = 40;
var sale = 0.9;
var maryWallet = 5000
var maryTotal;

// 請將Code寫在這,運算內容賦予到 maryTotal,
// 並要利用到hamburgerPrice friesPrice sale maryWallet
// 算出 maryTotal 剩下的錢。

function total(guestName, walletTotal ,friesNum, hamburgerNum) {
  return `${guestName} 買完東西後,錢包剩下 ${ walletTotal - (hamburgerPrice * hamburgerNum + friesPrice * friesNum) * sale } 元`;
}

console.log(total('Mary', maryWallet, 10, 5));

[JS 60 Days] Day 1 to Day 10 - JS變數

https://kaiyuncheng.github.io/2020/10/28/js60Day1toDay10/

Author

KaiYun Cheng

Posted on

2020-10-28

Updated on

2024-04-13

Licensed under

#

Comments

Catalogue

follow.it

Recents

Categories

Archives

Tags

Ajax2
Algorithm15
Array2
Arrow Functions1
Async1
Asynchronous2
Await1
Big O1
Binary Search1
Class1
Closure1
Cookie1
Data Structures13
Destructuring Assignment1
Dynamic programming1
ES63
Fetch2
Fibonacci numbers1
Functional Programming1
Graph1
HashTable2
Higher-order functions1
Inheritance1
Javascript40
Leetcode15
Lifecycle1
Linked-list1
Local Storage1
Map1
OOP1
Object1
Partial application1
Promise1
Prototype1
Prototype Chain1
Queue1
Recursion1
RegEx1
Regular Expression1
Searching1
Sequential Search1
Session Storage1
Set1
Sorting1
Stack1
Synchronous2
Time Complexity1
Traversal1
Tree1
Typescript2
XMLHttpRequest1
ajax1
api1
array1
c3.js1
catalogue1
coding girl1
const1
constructor1
currying1
date1
es62
event queue2
frontend22
git1
gulp1
hooks1
jsdoc1
let1
object1
operators1
react1
socket.IO1
subclass1
this1
time1
tool1
typescript1
unicode1
url1
var1
vue1
vue21
vue31
webpack1
websocket1
window.location2
Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×