竹白的 JS 學徒特訓班筆記 - 目錄
記錄六角學院所開的 JS 學徒特訓班，為期 60天的特訓。
第二十四關：資料格式處理，forEach + 陣列處理(一)
題目連結
劇情略。
24. 題目
以下是預期希望出現正常的圖表，請改寫此 Codepen，並在 Slack 回傳你的解法：
PS：HTML 與 CSS 面板壞掉了，只能變更 JS 面板
24. 參考解答
1
2
3
|
newMonthMoney.forEach((item)=> {
monthMoney.push(item);
});
|
第二十五關：資料格式處理，forEach + 陣列處理(二)
題目連結
劇情略。
25. 題目
以下是預期希望出現正常的圖表，請改寫此 Codepen，並在 Slack 回傳你的解法：
PS：HTML 與 CSS 面板壞掉了，只能變更 JS 面板
25. 參考解答
1
2
3
4
|
serverData.forEach((item)=> {
let temp = [item.name, ...item.seasonOneData, ...item.seasonTwoData];
data.push(temp);
});
|
教學、延伸知識連結
第二十六關：AJAX、axios 題目
題目連結
26. 問題
觀看 JS 新手教學 - AJAX 與資料處理，試著撈出 API 所有的姓名列表。
https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json
26. 參考解答
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const urlAPI = 'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json';
let data = [];
axios.get(urlAPI).then((res) => {
data = res.data; // 取得資料
rander(data); // 渲染
});
function rander(arr) {
let html = '';
arr.forEach((item)=> {
html += `<li>${item.name}</li>`
});
document.querySelector('.list').innerHTML = html;
}
|
教學、延伸知識連結
第二十七關：陣列補充觀念
題目連結
27. 問題
請從以下連結，學習 2~3 種陣列的處理方式，聽說 sort 就蠻常見的，並在 slack 回報自己的範例程式碼與學到的東西。
27. 參考解答
我以前的筆記：
第二十八關：陣列排序進度
題目連結
28. 問題
API：
https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json
撈出資料後，依照每個物件的 process 來進行進度排序，範例格式如下圖。
<ul>
<li>第 1 名是廖洧杰，他的特訓班完成度是 33%</li>
<li>第 2 名是王小明，他的特訓班完成度是 30%</li>
</ul>
28. 參考解答
process 資料格式為字串、數字部分為浮點數、單位為 %，因此若直接使用 parseInt() 取得數字，只能取得整數部分，小數部分就會有誤差，因此可以使用 parseFloat()。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const urlAPI = 'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json';
let data = [];
axios.get(urlAPI).then((res) => {
data = res.data; // 取得資料
let sortedData = sortData(data); // 排序
rander(sortedData); // 渲染
});
function rander(arr) {
let html = '';
arr.forEach((item, index)=> {
html += `<li>第 ${index + 1} 名是${item.name}，他的特訓班完成度是 ${item.process}</li>`
});
document.querySelector('.list').innerHTML = html;
}
function sortData(arr) {
let temp = [...arr]; // 複製一份避免動到原始資料
temp.sort((a, b)=> parseFloat(b.process) - parseFloat(a.process));
return temp;
}
|
教學、延伸知識連結
第二十九關：監聽切換排序功能
題目連結
29. 問題
承接上題，新增切換排序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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>
|
29. 參考解答
監聽 <select> 取得 <option> 的值，用來判斷排序方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
let selectDom = document.getElementById('select');
selectDom.addEventListener('change', function() {
let sortedData = sortData(data, this.value);
rander(sortedData);
});
function sortData(arr, mode = 'id') {
let temp = [...arr]; // 複製一份避免動到原始資料
if (mode === 'id') {
temp.sort((a, b)=> a - b);
} else {
temp.sort((a, b)=> parseFloat(b.process) - parseFloat(a.process));
}
return temp;
}
|
教學、延伸知識連結
第三十關：C3.js 圖表整合
題目連結
30. 問題
- 請嘗試用 codepen 附上你的解答，這次的需求是「用 c3.js 圖表顯示，看看誰的完課率最好，同時可以看出排名」
- 圖表不局限於上面的長條圖，也可尋找合適的圖
- 週六日請嘗試寫一篇 blog，分享解題流程，讓其他人也可以受益
30. 參考解答
第三十一關：部落格文章閱讀
題目連結
略。
第三十二關：程式整合篇
題目連結
32. 問題
結合 29、30 關，左邊排序功能，右邊圖表顯示。
32. 參考解答
第三十三關：圓餅圖分析
題目連結
33. 問題
圓餅圖圖表
繪製尚未開賽跟已開賽的比例圓餅圖。
33. 參考解答
1
2
3
4
5
6
7
8
9
10
11
12
|
let processCount = {
non: 0,
start: 0,
};
data.forEach((item)=> {
if (parseFloat(item.process) > 0) {
processCount.start += 1;
} else {
processCount.non += 1;
}
});
|
第三十四關：圓餅圖分析（中文字串判別）
題目連結
34. 問題
觀察每個參賽者的「姓名長度的字元數」
34. 參考解答
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function strLen(str) {
if (str == null) return 0;
if (typeof str != 'string') {
str += '';
}
return str.replace(/[^\x00-\xff]/g, '01').length;
}
let nameLengthCount = {
lessSix: 0,
moreSeven: 0,
};
data.forEach((item)=> {
if (strLen(item.name) > 6) {
nameLengthCount.moreSeven += 1;
} else {
nameLengthCount.lessSix += 1;
}
});
|
教學、延伸知識連結
第三十五關：圓餅圖與長條圖合併使用
35. 問題
範例連結
結合 API，同時顯示長條圖與圓餅圖，並顯示各區間完課率人數。
35. 參考解答
注意，process 是浮點數，因此判斷區間時，<= 20 與 < 21 結果可能會有些微差異。
