📑

2024 JavaScript 工程師養成直播班 - 每日任務

2024/06/27に公開

JavaScript

はじめに

Atomic Habits: Author James Clear mentioned that by improving just 1% every day, you can grow 37 times over the course of a year. This concept emphasizes the power of small, consistent changes—much like how atoms accumulate to create significant impact. 🚀💡

目前參加了 六角學院 - 2024 JavaScript 工程師養成直播班 ，學院每個平日會有 JS 每日任務。
其他還有 ↓

每日任務列表

since 2024-09-30

Day 01 ~ Day 10

Day 01: 變數自我介紹
Day 02: 型別與宣告
Day 03: 小駝峰式命名
Day 04: 型別陷阱題
Day 05: 賦值運算子與傳參考概念
Day 06: 比較運算子
Day 07: 邏輯運算子
Day 08: 運算子大雜燴
Day 09: if、else if、else 練習一
Day 10: if、else if、else 練習二

===

Day 11 ~ Day 20

Day 11: 陣列操作
Day 12: 陣列操作應用
Day 13: 物件操作
Day 14: 物件取值
Day 15: 陣列物件整合操作應用
Day 16: 函式觀念一 console.log 與呼叫
Day 17: 函式觀念二呼叫與優化
Day 18: 函式觀念三 & 費波那契數列
Day 19: 函式觀念四這裡重點是 return 會中斷函式執行的觀念
Day 20: 函式與陣列物件整合運用

===

Day 21 ~ Day 30

Day 21: DOM 選擇器練習使用 document.querySelector
Day 22: textContent 練習使用 textContent 及 變數 來修改 html 的內容
Day 23: innerHTML 練習使用 innerHTML 修改 HTML，自己加碼練習了 .map() 跟 .join()
Day 24: 取得、設定元素屬性學習 getAttribute 及 setAttribute
Day 25: forEach 練習使用 forEach 搭配 if 以及 .push()
Day 26: addEventListener 事件監聽 DOM 選擇器 搭配事件監聽做一個小小的點擊 +1 的小功能。
Day 27: 表單取值觀念練習了表單取值的方法，input 和 select 還有按鈕的監聽。以及 .value 與 .getAttribute 的區別
Day 28: axios 串接練習練習使用 axios 套件取得外部 JSON 資料，並且取值渲染到畫面上
Day 29: API 資料渲染延續昨天的練習，將資料渲染到畫面上，除了複習 axios.get 加練習了 arrow function 和 解構賦值
Day 30: HTTP 狀態碼學習解讀 HTTP 狀態碼代表的意思

===

Day 31 ~ Day 40

Day 31: AJAX 非同步觀念理解 AJAX 的非同步觀念
Day 32: 函式設計處理非同步延續昨天的非同步觀念，才能正確的取得資料並渲染到畫面上。
Day 33: 常見的 POST 請求複習 Content-type 的區別
Day 34: C3.js 使用練習學習使用 c3.js 製作圖表，今天也改使用 codesandbox 來寫作業，研究了一下基本的功能，搭配 GPT的教學。但安裝套件的時候不能使用 Terminal 有點尷尬呀…有點不是很喜歡用 UI 介面。
Day 35: 多筆物件取值練習使用 Object.keys() 與 Object.values() 取值，並且加練習將結果渲染在畫面上
Day 36: 箭頭函式練習寫 arrow function
Day 37: 申請 API 練習串接 API，並且將資料渲染到畫面上，一個組合技。
另外也請 gpt 提供了幾支公開的 API 來練習串接。

例如：OpenWeatherMap API、Cat Facts API、Pokemon API 以及 Spotify Web API 等

Day 38: data-* 屬性應用學習了 data-* 的屬性取得
Day 39: 購物車 API 難度忽然一個拔高www 這個作業我邊寫邊理解用時了兩天…總計可能有 6 hr
Day 40: 訂單 API

主線任務的回顧

第一週主線任務

開始 JS 課程啦~雖然趕在開學前把影音課程都二刷了遍，
可是只有輸入腦子說我懂了，但手說沒學會。
果然在寫作業的時候才會發現自己基礎的缺乏，
邊把筆記更新起來邊重新複習一次。

第二週主線任務

第二週開始了一些基礎觀念的釐清及陷阱題，以及一些 if 的應用與邏輯判斷式的練習，
題目有：

BMI 的體重判斷
消費金額與 VIP 會員的滿額贈
貪心國的所得稅稅收計算器
剪刀石頭布
最好玩的就是最後一題的剪刀石頭布了，每日刷題 - Day 14 有更詳細的筆記

第三週主線任務

第三週主要是環繞在陣列與物件的熟悉以及取值的練習
其中的第七題練習了一下.map() 跟 .forEach() 兩個方法(還有arrow function)：
有一位客戶於平日將所有房型都訂了一間房，請計算他共花了多少錢？

JSON 資料

let roomDetail = {
  "success": true,
  "items": [
    {
      "id": "3Elqe8kfMxdZv5xFLV4OUeN6jhmxIvQSTyj4eTgIowfIRvF4rerA2Nuegzc2Rgwu",
      "imageUrl": "https:\/\/images.unsplash.com\/photo-1551776235-dde6d482980b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80",
      "normalDayPrice": 1380,
      "holidayPrice": 1500,
      "name": "Single Room"
    },...
}

這裡用到 .map() 來抓取指定陣列中的所有值，組成一個新陣列

let totalNormalDayPrices = 0;

//先抓出陣列中平日房型的金額
let normalPriceAry = roomDetail.items.map(
  normalPrice => normalPrice.normalDayPrice);
//console.log(normalPriceAry); 先檢查陣列有沒有正確抓取

最後使用 .forEach 來加總陣列裡面全部的數值

//加總陣列裡面的全部金額
normalPriceAry.forEach(
  totalPrice => totalNormalDayPrices += totalPrice);

console.log(`這位客戶共花了 ${totalNormalDayPrices} 元`);

第四週主線任務

第四週任務是三階段 BMI 健康指標計算器 Kata 練習，並且要取得 20 min 以下的時間。

『Kata』是取自日文『形 (かた)』
意指表演藝術、武術等標準動作或方法
(芸能や武道などで、規範となる動作・方式)。

code kata 則用來表示刻意練習某一段 code ，以此習得技能。
整個任務主要學習的重點是 小步驗證 , 將程式拆解成小單位，並且每步都確實驗證可行性

第一階段是練習使用 if 方法

if (bmi < 18.5){
    console.log('您的體重過輕');
}else if(bmi >= 18.5 && bmi < 24) {
    console.log('您的體重正常');
},...

第二階段是練習 object, 並且取值的觀念

建立物件，將資料放在裡面

const bmiData = {
'overThin': {
    state: '過輕',
    color: '藍色'
},
'normal': {
    state: '正常',
    color: '紅色'
},...
}

輸出有共同的文字我們只需要套用物件的值，所以這裡使用樣版字面值搭配取值

function bmiStates(fettle){
    console.log(`您的體重${bmiData[fettle].state}，
    健康指數為${bmiData[fettle].color}`);
};

由於 fettle 有不同的邏輯條件，把原本console改為 bmiData 的不同屬性

if (bmi < 18.5){
    bmiStates('overThin');
}else if(bmi >= 18.5 && bmi < 24) {
    bmiStates('normal');
},...

第三階段是綜合的練習：需要建立一個陣列來儲存計算的資料，並會使用到抓取陣列最後一筆資料

建立一個空陣列要用來放儲存資料的

let bmiHistoryData = [];

宣告一個空物件，賦予計算出來的資料，並且將資料增加儲存到 bmiHistoryData

function addData(bmi, state){
    let obj = {};
        obj.bmi = bmi;
        obj.state = state;
        bmiHistoryData.push(obj);
// console.log(bmiHistoryData);
}

這段我第一次看老師做一遍我腦子就亂了，後面小步拆解來看每一段的目的並且理順流程，
最終是要輸出
『您總共計算 3 次 BMI 紀錄，最後一次 BMI 指數為 26.83 ，體重過重！健康指數為澄色!』這一段文字，
所以再反推需要取得哪一些值，用這樣的思考方式比較不會被繞亂

function showHistoryData(){
const totalNum = bmiHistoryData.length; 
//計算陣列長度，可以得到總共計算的次數

const lastNum = totalNum -1; 
//我們要取得最後一筆陣列的資料，如果宣告的次數為 1 ，這裡 1 - 1 = 0 ，就會抓取第 0 筆的資料

const lastState = bmiHistoryData[lastNum].state;
//取值

console.log(`
    您總共計算 ${totalNum} 次 BMI 紀錄，
    最後一次 BMI 指數為 ${bmiHistoryData[lastNum].bmi}，
    體重 ${bmiData[lastState].state}！
    健康指數為${bmiData[lastState].color}!`);
}

第五週主線任務 - 小魔王

要將前面學到的知識正式的使用在網站上啦啦啦啦啦啦!!
這週任務直接是另一個世界!!看到畫面的當下腦子是直接當機的，我是誰我在哪我要幹嘛這是我會的嗎我有辦法當前端嗎？最後完全不知道要從哪邊開始，就先去看助教的直播回放了。
把任務拆解後其實都是前面學過的知識，再一步一步的小步驗證跟執行，不外乎就是

取得 DOM
監聽監一監
取得 data 的資料再渲染回畫面

對我比較有難度的是搜尋並顯示畫面那一個階段，以及不熟悉要用 function 將程式包起來的。(因為作業都是直接寫上去)

平時作業

//平常小作業的練習 code 都不長，而且也沒有另外呼叫的需求
regionSearch.addEventListener("change", function () {
 let filterResult = [];
  data.forEach(function (item) {
      if (!regionSearch.value) {
          filterResult.push(item);
    } else if (item.area === regionSearch.value) {
        filterResult.push(item);
    }  
    renderData(filterResult);
  });
  console.log(filterResult);
});

實務上

regionSearch.addEventListener("change", function () {
  filterData(); //會再回來呼叫
});

function filterData() {
  let filterResult = [];
  data.forEach(function (item) {
    if (!regionSearch.value) {
      filterResult.push(item);
    } else if (item.area === regionSearch.value) {
      filterResult.push(item);
    }
    renderData(filterResult);
  });
  console.log(filterResult);
};

沒有什麼太難的邏輯題，完全是有沒有熟悉使用 Mathod 們以及腦子有沒有轉過來而已。慢慢養成工程師腦~加油呀自己!!

第六週主線任務

第六週相對上週簡單很多，主要是 axios 的學習與使用，上週是直接把 data 寫在 JavaScript 裡面，這週就學習如何串接 API 後取得資料並渲染在畫面上。
因為取得及渲染在上週做了，所以只要拿上週的來修改就可以了。
作業有分為 lv1 和 lv2 難度，資料是完全一樣的，唯一不同的是 lv2 有再用 object 包了一層，所以取值的方式就要再調整，基本上觀念正確的話兩個等級是一樣的。

這裡也是平常習慣直接把 url 寫在裡面，助教說可以把 url 另外宣告方便管理。

let actualData = [];
const url =
  "https://raw.githubusercontent.com/hexschool/js-training/main/travelApi.json";

axios
  .get(url)
  .then(({ data }) => {
    actualData = data.data;
    renderData(actualData);
  })
  .catch(function (error) {
    console.log(error.message);
  });

另外也學到了 解構賦值 及練習 arrow function 的使用，後面 React 框架會大量使用，用力習慣起來。

AJAX POST 小節任務

第六週主線是練習 axios 的 get 請求取得資料，而小節任務是練習 post 請求發送資料給伺服器做驗證。
這算是一個額外的任務沒有算在主線作業裡面，但這個蠻重要的所以加做了這個小節任務。
除了跟老師做了一次註冊的練習，這個小節任務再做一次註冊跟登入帳號，就算如此感覺還是不夠熟悉的感覺ww
一樣重要的是任務拆解，拆解完其實就會變簡單許多：
這裡先做註冊、再做登入，步驟都一樣

取得表單的 DOM

const accountLogin = document.querySelector('.account-login');
const passwordLogin = document.querySelector('.password-login');
const logInBtn = document.querySelector('.send-login');

監聽按鍵的 click 動作

logInBtn.addEventListener('click', () =>{
callLogIn();
})

建立一個新物件，將取得輸入的值依 API 的資料格式存入

let logInObj = {};
logInObj.email = accountLogin.value;
logInObj.password = passwordLogin.value;
console.log(logInObj);

寫一個 function 串接 API，並且發送 post 請求

Method: post
URL: https://..../signin
data: {email: 'abc@gmail.com', password: '123'}

 axios
  .post(logUrl, logInObj)
  .then(({ data }) => {
    console.log(data)
  })
  .catch(({ error }) => {
    console.log(error);
  });

渲染驗證資訊回畫面：『填寫正確資訊』、『登入成功』、『登入失敗』

if(accountLogin.value === '' || passwordLogin.value === ''){
   logInMessage.textContent = '請輸入正確資訊'
}
axios
  .post(logUrl, logInObj)
  .then(({ data }) => {
  if(data.message === '登入成功'){
    logInMessage.textContent = '登入成功';
  }
  })
  .catch(({ error }) => {
  logInMessage.textContent = '登入失敗，請檢查帳號或密碼';
    console.log(error);
  });

在輸入後清空輸入值

accountLogin.value = '';
passwordLogin.value = '';

還不太熟練 .catch 的部份，以及錯誤驗證的資訊，後面有機會再來研究，
這裡學完並且接著寫作業並且還刷了兩題 codewars 已經把腦汁榨乾了。

第七週主線任務

接續第六週任務，使用 c3.js 套件加上一個甜甜圈圖表，並且增加及篩選的時候圖表會連動。
這個任務學習了資料整理之術，因為 c3.js 的資料格是是陣列包陣列的型式，

先把資料加總成 [[高雄, 1],[台北, 1],[台中, 1]] 的格式

function formatData() {
const obj = {};
actualData.forEach((item) => {
  if (!obj[item.area]) {
    obj[item.area] = 1;
  } else {
    obj[item.area]++;
  }
});
renderChart(Object.entries(obj));
}

將資料渲染回畫面的甜甜圈圖，這裡使用參數 chartData 代入上面整理好的資料 Object.entries(obj)
一開始參數寫 data 然後就被繞亂了想說為什麼這裡要帶原始資料，應該要帶整理後的資料呀；
並且詠唱GPT也沒有找到問題點，後來忽然一個問說這裡參數是不是跟上面原始資料 data 沒有關係，這裡是指 Object.entries(obj) 的資料，才打開這個結並且將參數改掉。但是到這時腦子已經燒掉7成了…🤯

function renderChart(chartData) {
const chart = c3.generate({
  data: {
    columns: chartData,
    type: "donut"
  },
  size: {
    width: 200
  },
  color: {
    pattern: ["#E68618", "#26C0C7", "#5151D3", "#aec7e8"]
  },
  donut: {
    title: "套票地區比重",
    width: 20,
    label: {
      show: false
    }
  }
});
}

而課程居然要結束了…我覺得我什麼都還沒學到呀…😖

第八週主線任務 - 大魔王

呀…

最後に

在迷迷糊糊中結束了 JS 的直播班課程，才學了一個皮毛的感覺…居然就要準備上 React 框架了…怕爆qq

而後來才知道其他組員更兇猛他們當初是連 JS 都不太會就直接上 Vue 直播班了，也是蠻勇敢www 難怪一直說自己其實不太會，來補基礎的。

不過我後來慢慢發現就是多摸、多練習、多寫，自然而然的那個腦子跟手感就會變成 JS 的形狀，也許還有很多東西並不是太懂，但這個就是需要時間慢慢的積累；

其實到後期(約第八週任務 ~ React 開學前) 這段期間非常的恐慌，對於基礎不穩、看不懂別人在寫什麼、聽不懂別人在說什麼的那種未知感，害怕到逃避去上了資料庫體驗營，

也還好同時去參加了線下同學會跟前(後)端的學長姐們聊了聊自己的不安感，趕在 React 開學前二週才平穩了內心。