[JS 60 Days] Day 11 to Day 35 - JS函式陣列

Introduction

接續上篇，這邊開始第11天 JS函式陣列

• Day 11 - 函式參數再練習
• Day 12 - DOM 操作
• Day 13 - 函式+if 判斷
• Day 14 - 監聽與函式設計
• Day 15 - 物件運用 - 資料與渲染分離
• Day 16 - forEach 與 HTML 字串累加
• Day 17 - innerHTML+forEach
• Day 18 - 字串相加 innerHTML+ 樣式搭配
• Day 19 - 驗收前夕
• Day 20 - BMI 計算機團戰關卡
• Day 21 - BMI 追加功能
• Day 22 - BMI 陣列調整
• Day 23 - 資料格式處理，陣列 unshift
• Day 24 - 資料格式處理，forEach + 陣列處理(一)
• Day 25 - 資料格式處理，forEach + 陣列處理(二)
• Day 25-2 - OpenData資料處理
• Day 26 - AJAX、axios 題目
• Day 26-2 - AJAX、axios 全台展覽資訊站
• Day 27 - 陣列補充觀念
• Day 28 - 陣列排序進度
• Day 29 - 監聽切換排序功能
• Day 30 - C3.js 圖表整合
• Day 31 - 部落格文章閱讀
• Day 32 - 程式整合篇
• Day 33 - 圓餅圖分析
• Day 34 - 圓餅圖分析(中文字串判別)
• Day 35 - 圓餅圖與長條圖合併使用

---

Day11

函式參數再練習

題目一：老闆想要隨時扣你的薪水

老闆：「今天是發薪日，先發給你薪資 23500 元(遞給小杰」
老闆：「以下三步驟動作請寫成程式」
老闆：「步驟一：昨天你上廁所太久了，我要扣你 1000 元」
老闆：「步驟二：小黑說不喜歡你煮的狗食，我要再扣你 3500 元 (再次取走」
老闆：「步驟三：我今天心情不太好，扣個 500 元意思一下」
小杰：「屁啦！心情不太好關我啥事！」
老闆：「這不是重點，快點算！將之前的寫法換成函式，並增加一個參數，讓我方便何時扣你多少都沒問題」
老闆：「最後你寫的函式，要執行三次，每次都要回報你的總薪水剩下多少。」

var salary = 23500;

function deduct(num){
  salary = salary - num;
  console.log("小杰目前還剩下"+salary+"元");
};

deduct(1000);
deduct(3500);
deduct(500);

題目二： if + 指派運算子

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

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

下圖為第八關截圖，請依照以下邏輯進行改寫：

1. 現在來了三個客人，並依序有消費，A顧客消費 150、B 顧客消費 99、C 顧客消費 110。
2. 請設計一個函式，裡面代入一個參數為顧客消費金額，確認該客戶是否符合贈品條件，若符合就讓 giftNum 變數減少數量。
3. 並依序執行三次函式，每次函式皆會 return 目前贈品數量剩下多少。

// 贈品數量 var giftNum = 3;

var customerA = 150; // 顧客 A 消費金額
var customerB = 99;  // 顧客 B 消費金額
var customerC = 110; // 顧客 C 消費金額

function gift(num){
  if(num >= 100 && giftNum > 0){
    giftNum -= 1;
    console.log("目前贈品剩下"+giftNum+"個");
  } else if(num < 100){
    console.log("消費不夠沒有贈品");
  } else{
    console.log("沒有贈品了");
  };
};

gift(customerA);
gift(customerB);
gift(customerC);

題目三：if+指派運算子

老闆：「我現在補齊給你總計 200 個贈品！」
老闆：「然後我覺得現在贈品門檻太高了，我決定大放送，只要滿 50 元就送一個！以此類推，他買 500 元就送 10 個贈品！」
小杰：「老闆你竟然利用我的特休，我跟你沒完啦。」
老闆：「別廢話，客人來了快點！他買完後告訴我贈品還夠不夠！」

下圖為第八關截圖，giftNum 已改為 200 份，請依照以下邏輯進行改寫：

1. 請用函式改寫，同時來了三組客人，請用你寫的函式連續執行三次，來幫助顧客是否有符合贈品條件。
2. 另外每次執行函式時，都必須告訴老闆一次目前贈品數量。

第一組客人：Mary 買了 10 份薯條，10 份漢堡
第二組客人：Bob 買了 1 份薯條
第三組客人：Tim 買了 20 份薯條，15 份漢堡

var giftNum = 200;       // 贈品數量
var friesPrice = 30;     // 薯條單價
var hamburgerPrice = 50; // 漢堡單價
let total;

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

function gift(friesNum, hamburgerNum){
  total = friesNum * friesPrice + hamburgerNum * hamburgerPrice
  if(giftNum > 0){
    if(total >= 50){
      giftNum = giftNum - Math.floor( total / 50 );
      console.log("老閱!贈品還夠!剩下"+giftNum+"個~");
    } else{
      console.log("客人消費不夠沒有贈品");
    };
  } else{
    console.log("老闖贈品賣光啦~")
  };
};

gift(10, 10);
gift(1);
gift(20, 15);

Day12

DOM 操作

題目

1. 請觀看此 Codepen 的線索，試圖找到密碼，並回傳密碼
2. 以下 Codepen 的 HTML 與 CSS 面板都壞掉了，你只能編輯 JS 面板，來去尋找線索

<div class="key">
<!--  區塊一  -->
  <div class="keyItem keyItem1" >
    <img src="https://hexschool.github.io/JSTraining/stage12/4.png" alt="">
  </div>
<!--  區塊二  -->
  <div class="keyItem keyItem2">
    <img src="https://hexschool.github.io/JSTraining/stage12/2.png" alt="">
  </div>
<!-- 區塊三 -->
  <div class="keyItem keyItem3">
    
  </div>
<!-- 區塊四 -->
  <div class="keyItem keyItem4" style="">
    
  </div>
</div>

密碼為3345678

Day13

函式+if 判斷

以下為 BMI 計算方式：

1. BMI 計算為：體重(公斤) / 身高的平方(單位為公尺)
   • 例如 150 公分 50 kg = 50/(1.5*1.5) = 22.2 BMI 指數
2. BMI 數值狀態如下
   • 體重過輕：BMI ＜ 18.5
   • 正常：18.5≦BMI＜24
   • 過重：24≦BMI＜27
   • 輕度肥胖：27≦BMI＜30
   • 中度肥胖：30≦BMI＜35
   • 重度肥胖：BMI≧35　

目前現況

小杰打開 Code 才發現，裡面的 if 判斷根本都在亂寫，請依照上面的 BMI 狀態來改寫，並還小杰一個清白。

請修改此 Codepen

解題

function calculationBMI(height,kg){
  let bmi = kg/(height/100*height/100);
  if(bmi >= 35){
    return "重度肥胖";
  }else if(bmi >= 30){
    return "中度肥胖";
  }else if(bmi >= 27){
    return "輕度肥胖";
  }else if(bmi >= 24){
    return "過重";
  }else if(bmi >=18.5){
    return "正常";
  }else{
    return "體重過輕";
  };
};
console.log(calculationBMI(178,70));

Day14

監聽與函式設計

小杰打開網頁後，發現工讀生只把 HTML 標籤寫好，JS 完全沒寫，
因為 HTML 面板已經壞掉了，請直接修改 JS Code，
讓 .total 的顯示數值，可以正常運作。

BMI 2.0版 Codepen 網址

提示

• 利用 原生 的 function 觀念寫一個 BMI 計算機

Day15

物件運用 - 資料與渲染分離

以下是護理師改寫小杰的邏輯，程式碼連結

護理師拿了之前工讀生的 Code 改寫，根本沒用小杰的。但可以看得出來，這個 Code 有刻意遺留了些不完整的地方，像是 bmiData 的物件沒有將條件寫完整，頗有想要再次考驗小杰的味道。

請各位將你們的 Code 跟護理師的進行比較，看看差異在哪裡，並透過 Slack 分享自己吸收的結果，並試著依照自己的邏輯寫一遍。

這次 HTML 面板壞掉了，你唯一可以改的面板只有 CSS 與 JS 面板。

主要運用 關注點分離：資料與畫面

Day16

物件運用 - forEach 與 HTML 字串累加

問題

小杰一時間還不知道怎麼寫，所以先寫了陣列 + forEach 的方式來累加 HTML 字串，再來顯示介面出來。範例程式碼

請你依照這邏輯，試著改寫物件格式，呈現的格式如下程式碼。

設計好物件後，依序 push 五筆資料到陣列裡，最後整理完字串資料，再 innerHTML 到 ul 裡。

這次 HTML 與 CSS 面板都壞了，請改寫 JS 面板。

PS:請拿上面的 Codepen 改寫即可，不需拿前幾關的 code 來整合

<ul>
    <li>小杰的身高為 178 公分，體重是 70 公斤，BMI 數據為 20，狀態為正常</li>
    <li>小美的身高為 150 公分，體重是 200 公斤，BMI 數據為 38，狀態為超重</li>
</ul>

Day17

物件運用 - innerHTML+forEach

問題

明明陣列裡面有五筆資料，但寫出來的程式碼，列表永遠只顯示一筆資料，究竟小杰哪裡觀念有問題呢？一起來幫助小杰吧~

問題回覆

請思考並在 Slack 回覆：

1. str 放 forEach 外頭跟裡面的差異
   A: forEach會讓data裡的物件都跑一次，str=’’放在裡面會表示每跑一次item，str就又變成空字串。

2. innerHTML 放 forEach 外頭跟裡面的差異
   A: innerHTML放外頭，就只會跑一次，若在forEach後，直接呈現最後總合的str和放在裡面多次覆蓋後結果相同。

3. innerHTML 當要寫內容進去時，會不會將裡面內容給覆蓋掉？
   A: 會

Day18

物件運用 - 字串相加 innerHTML+ 樣式搭配

問題

挑戰者們不要忘了，JS 始終要搭配妳寫好的 CSS 來進行渲染，護理師好像已經看膩了小杰爛到不行的陽春版本，寫了一個 .list2 版本，請依照他的 CSS 樣式邏輯，將 data 陣列裡面的資料，依序渲染到 .list2 裡面的 li 來顯示。

護理師的 Codepen 網址

Day19

驗收前夕

問題

小杰打開師傅的程式碼，才發現這程式碼其實是來自於 Vic 這位工程師的範例程式碼。

雖然跟設計稿有非常大的差異，但從程式邏輯中，慢慢掌握到了一些概念。

請解讀 Vic 的(程式碼)，並在 Slack 上回報他以下邏輯是做了什麼事情：

1. arrayBMIrecord 的陣列用途是什麼？
   A: 儲存每次計算出bmi的資料記錄
2. 請描述 calculateBMI 函式做了什麼事情
   A: 取得身高體重的值轉成數字，用來計算bmi，判斷屬於過重或是正常等值，並記錄到userRecord變數上，最後把userRecord記錄到arrayBMIrecord 的陣列裡後，執行render，清空輸入值。
3. 請描述 render 函式做了什麼事情
   A: 處理畫面的渲染，把arrayBMIrecord陣列裡的每筆資料取出，並記錄到str上，並渲染到畫面上。

Day20

BMI 計算機團戰關卡

Day21

BMI 追加功能

Day22

BMI 陣列調整

這三天都是在做BMI計算機因此寫在一起。第20天是完成BMI計算機的切版畫面與JS的程式，第21天是追加幾筆紀錄與平均功能，第22天是做陣列反轉reverse和unshift。

畫面上我自行做了桌機上兩欄手機畫面一欄的設計，右側欄為紀錄區可以向下捲動，紀錄上同時有時間標記與不同BMI呈現不同顏色。

DEMO

Day23

資料格式處理，陣列 unshift

問題

小杰一看到題目整個傻眼，裡面用了他從來沒看過的圖表資料，好在老闆在程式碼裡面寫了些註解，讓小杰知道自己不需要懂圖表框架，好好的把資料處理好後，圖表自然就會顯示正常，一起來幫幫小杰吧！

以下是預期希望出現正常的圖表，請改寫
PS：HTML 與 CSS 面板壞掉了，只能變更 JS 面板

Day24

資料格式處理，forEach + 陣列處理(一)

問題

以下是預期希望出現正常的圖表，請改寫：
PS：HTML 與 CSS 面板壞掉了，只能變更 JS 面板

Day25

資料格式處理，forEach + 陣列處理(二)

問題

以下是預期希望出現正常的圖表，請改寫
PS：HTML 與 CSS 面板壞掉了，只能變更 JS 面板

Day25-2

OpenData資料處理

這是練習整理OpenData資料，並篩選要的資訊呈現於畫面上，這次選擇新北市政府資料開放平臺上的動物之家資料來做整理，篩選出新店區的地址。

Day26

AJAX、axios 題目

問題

試著撈他提供的這隻 API，撈出所有的姓名列表，至少先做個雛形讓客戶安心。範例如下圖。

Day26-2

AJAX、axios 全台展覽資訊站

同樣運用axios的方式撈資料，這次我選擇文化部的展覽資訊這個api，簡單設計和製作了卡片式畫面，並加上了過濾縣市的功能。

DEMO

Day27

陣列補充觀念

問題

請從以下連結，學習 2~3 種陣列的處理方式，聽說 sort 就蠻常見的，並回報自己的範例程式碼與學到的東西。

• Cheatsheet for Array Methods - Javascript 陣列方法大全
• JavaScript Array 陣列操作方法大全 ( 含 ES6 )
• JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]

這邊練習了
copyWithin() : 有點像是複製貼上取代的概念，貼上會取代掉原本位置的元素
參數1(必填)：從第幾個開始貼上取代
參數2(選填 預設0)：從第幾個開始複製
參數3(選填 預設陣列長度)：複製到第幾個前（不包含這一個）

let ary = [1, 2, 3, 4, 5];

ary.copyWithin(1);
console.log(ary); //[1, 1, 2, 3, 4] 5 超過陣列長度，所以不會出現

ary.copyWithin(2, 1, 3);
console.log(ary); //[1, 2, 2, 3, 5] 複製2,3 從索引2也就是3的位置開始取代

Day28

陣列排序進度

這次客戶希望他們的內容可以做完課率排名功能，試著撈客戶提供的這隻 API，撈出資料後，依照每個物件的 process 來進行進度排序，範例格式如下圖。

<ul>
 <li>第 1 名是廖洧杰，他的特訓班完成度是 33%</li>
 <li>第 2 名是王小明，他的特訓班完成度是 30%</li>
</ul>

Day29

監聽切換排序功能

問題

禿頭俠又提到，客戶希望能夠針對 select 切換排序方式，還請依照以下 範例來設計。

<select>
 <option value="id">依照 id 編號排序(由1開始從上往下)</option>
 <option value="process">依照完課率排序(由最高到最低)</option>
</select>

// 以下為編號排序範例
<ul class="list">
 <li>編號 ID 1 為廖洧杰，他的完成進度為 5 %</li>
 <li>編號 ID 2 為王小明，他的完成進度為 33 %</li>
</ul>

// 以下為完課率排序範例
<ul class="list">
 <li>編號 ID 2 為王小明，他的完成進度為 33 %</li>
 <li>編號 ID 1 為廖洧杰，他的完成進度為 5 %</li>
</ul>

文件資源

• [JS] 事件筆記（上）
• jQuery 筆記 - 讓網頁回到最頂點寫法
• js取float型小數點後兩位數的方法
• DOM Event 觸發事件
• change - 表單內容更動內容時觸發 | Saffran’s Blog

Day30

C3.js 圖表整合

這次的題目是希望用長條圖呈現完課率

長條圖
C3.js 圖表整合文件

問題

1. 這次的需求是「 用 c3.js 圖表顯示，看看誰的完課率最好，同時可以看出排名**
2. 圖表不局限於上面的長條圖，也可尋找合適的圖

這邊我以長條圖方式呈現，把api回傳的資料， 用forEach依選擇的排列方式，把名字和完課率依序傳入到各自的新陣列，再把完課率陣列綁定到c3js圖表的data.columns裡，而名字綁定到x軸的categories上，畫面便可呈現。

Day31

部落格文章閱讀

這裡我推薦近期很常看的blog
TimCodingBlog
馬格蕾特的樹洞

Day32

程式整合篇

把Day29和Day30的兩個呈現方式合併

Day33

圓餅圖分析

問題

客戶說，他在 C3.js 看到這個圓餅圖圖表，他想要我們透過 API 來觀察，尚未開賽跟已開賽的比例佔多少，一起來幫幫小杰吧！

Day34

圓餅圖分析(中文字串判別)

問題

客戶說，他想要觀察每個參賽者的「姓名長度的字元數」，規則如下：

如何判斷字元數量，請將你找到的部落格文章放到此處提供給其他勇者參考

• 判斷中英文字元長度
• 正規表示式除字串中所有標點符號 如果中文取代 **,注意正規表示 * 要刪掉避免錯誤
• 正則表達式的規則 - 這邊只要注意特殊字符有哪些即可
• 正則表達式介紹
• 使用 String.prototype.charCodeAt() 判斷字元是中文或英文 - 判斷字元是否超過 255 超過即代表為中文(缺點為需要把字元一個一個拆開)
• replace() 方法 - 講解 replace() 的用法
• 正則匹配範例

Day35

圓餅圖與長條圖合併使用

問題

客戶想優化完課率的圖表設計，他想要同時顯示長條圖與圓餅圖，並顯示各區間完課率人數，小杰花了很多時間將圖表整合起來了，範例連結，但他卻不知道怎麼把 API 資料放進去，一起幫幫小杰吧！