---
tags: Vue 直播班 - 2022 春季班
---
# 🏅 Day 4
###### tags: `Vue 直播班 - 2022 春季班`
教學
---
這題需要額外理解的知識點為「[callback 函式](https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function)」，可以簡單的理解為:「把函式作為參數調用」。
舉例:
```js=
function greeting(arr) {
alert('Hello ' + arr.name);
}
// callback 函式
function processUserInput(callback, arr) {
callback(arr);
}
let arr = {name: "Jordan"};
// 在 callback 函式中調用 greeting 函式，並把 arr 也一併代入
processUserInput(greeting, arr);
```
題目 (使用 CodePen 作答)
---
以下 crowdAge 為部分民眾的年紀資料，請修改程式碼、篩選出屬性 age > 18 的陣列元素，並將它們一一加入 filterResult 這個陣列中。**(可以使用 [push()](https://wcc723.github.io/development/2020/10/04/js-array-methods/#Array-prototype-push) 或是 [filter() 函式](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/))**
```js=
let crowdAge = [
{
name: 'Rick',
age: 17
},
{
name: 'Jane',
age: 25
},
{
name: 'Jordan',
age: 19
},
{
name: 'Jack',
age: 7
},
{
name: 'Reol',
age: 27
}
]
// callback 函式
function ageFilterCB(cb, arr) {
return cb(arr);
}
function ageFilter(arr) {
/* 只能在此插入程式碼 */
}
let filterResult = [];
filterResult = ageFilterCB(ageFilter, crowdAge);
console.log(filterResult); /* 為陣列，內容包含屬性 age > 18 的 crowdAge 元素 */
```
Bootstrap font-size
---
在 Bootstap 中可以使用 `.h1` ~ `.h6` 或是 `.fs-*` class 來直接調整字體大小設定，
兩者的差異主要在 `.h1` ~ `.h6` 標題類別使用了 `font-size`、`font-weight`、`line-height`，而 `.fs-*` 只有 `font-size` 的設定
> 注意：
> 1. 兩者都會有預設響應式設定（會隨著視窗寬度改變文字大小）
> 2. Bootstrap h1 ~ h6 標籤也會有預設字體設定，設定標題樣式時不要直接使用標籤來設定字體大小，請使用 .h1 ~ .h6 來設定哦
> 舉例來說：
> 想要在次重要的標題使用 h4 的字體大小設定，
> 正確寫法 -> `<h2 class="h4"> Title </h4>`
> （h1 ~ h6 標籤請以重要程度依序使用）
> 3. 實際運用時可以到 Bootstrap 變數中改變字體大小的預設設定（`$h1-font-size`、`$font-sizes`）
可以運用此 [Codepen](https://codepen.io/Bingbingboom/pen/oNerVWP) 觀察他們之間的差異，並嘗試自行運用看看
可以參考：[.h1 ~ .h6](https://bootstrap5.hexschool.com/docs/5.1/content/typography/#headings) 、 [.fs-*](https://bootstrap5.hexschool.com/docs/5.1/utilities/text/#font-size)
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)
<!-- 解法一
function ageFilter(arr) {
let target = arr.filter(item => item.age > 18);
return target;
}
-->
<!-- 解法二
function ageFilter(arr) {
let target = [];
arr.forEach(item => {
if(item.age > 18) {
target.push(item);
}
})
return target;
}
- Bootstrap -
https://codepen.io/Bingbingboom/pen/QWMPBRr
-->
回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1| Karen Huang | https://codepen.io/Coding_Snorlax/pen/poWdrJL |
|2| Larry | https://codepen.io/larrylinr5/pen/QWqQOxb |
|3|POPEYE | https://codepen.io/popeye_ux/pen/YzreEvJ |
|4|Jason Chen | https://codepen.io/jason60810/pen/xxXYPoj |
|5| Laura |https://codepen.io/minminn/pen/oNGEoMy|
|6| Iris Huang | https://codepen.io/ythuang/pen/oNGEpjJ |
|7| tingyu | https://codepen.io/dgltu/pen/zYERPVp |
|8|Howard|https://codepen.io/yawdnhbm/pen/oNGEpNQ|
|9|Sheep| https://codepen.io/SheepNDW/pen/yLzvpVo |
|10|Wenfish|https://codepen.io/wenfisht/pen/rNGJpVp|
|11|Yunei|https://codepen.io/Yunei/pen/JjrpMJw|
|12| Clara Cai | https://codepen.io/Clara-Snowy/pen/LYzQedo |
|13|Jhen| https://codepen.io/cheng-jhen/pen/zYERpMy |
|14|Himi|https://codepen.io/Himi/pen/NWayXma|
|15|AllenW|https://codepen.io/AllenW/pen/GRMQypK?editors=1010|
|16|kk| https://codepen.io/potatokaka/pen/qBPxpyG?editors=1011|
|17|CloThEs |https://codepen.io/bogwdnxx-the-sans/pen/ZEXrrEm|
|18|Terry21 |https://codepen.io/feng0409/pen/RwLQQNG|
|19|威爾|https://codepen.io/WILL_Wu/pen/wvryyWp|
|20|Empty Wu|https://codepen.io/emptywu/pen/LYzQQLN |
|21|Izumi 泉|https://codepen.io/izumi-dev/pen/abLqqpb
|22|Henry|https://codepen.io/kaohenry9287/pen/OJxQQbx|
|23|Calon|https://codepen.io/Calon0118/pen/yLzvKLB|
|24|andersonshen|https://codepen.io/luxyenni-the-bold/pen/dyVdJwy |
|25|hua|https://codepen.io/hahahazzz123/pen/PoJQQBR?editors=1111 |
|26|Liu|https://codepen.io/feng-chi-liu/pen/OJxQvXr?editors=1111 |
|27|Charlotte Lee|https://codepen.io/charlotte-lee/pen/JjrppgE |
|28|Will|https://codepen.io/ncrdpepc-the-lessful/pen/LYzQdWO?editors=1012|
|29|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/oNGEqGE?editors=1011|
|30|Meng| https://codepen.io/MGHN/pen/vYedRMb?editors=0010 |
|31|kevinhes|https://codepen.io/kevinhes/pen/QWqQmRN?editors=0012|
|32| 黃士桓 | https://codepen.io/shr-huan-huang/pen/vYedjBP?editors=1011 |
|33| Beanhuang | https://codepen.io/Beanhuang/pen/OJxQZVP?editors=1011 |
|34| Pei Ying | https://codepen.io/Pei-Ying/pen/oNGEqEq?editors=1111 |
|35| 肉鬆 | https://codepen.io/klrkicog/pen/XWeZqRq?editors=1011 |
|36| Henry Wu |https://codepen.io/dkcmlaww-the-flexboxer/pen/rNGJvwv|
|37| Fleur | https://codepen.io/swwlee/pen/OJxQZGp |
|38|Benson|https://codepen.io/soul81624/pen/WNZMKQW|
|39|Tim Lin|https://codepen.io/TimmyLin/pen/WNZMgew|
|40|阿牛|https://codepen.io/a-hsien-wu/pen/oNGEdLm|
|41|shio|https://codepen.io/shioyen/pen/jOGZvYw
|42|Rick Tzeng|https://codepen.io/rick917jp6/pen/XWeZByg
|43|yu|https://codepen.io/yuu9916/pen/KKXQGXr?editors=0011
|44|咖咖|https://codepen.io/gon790219/pen/abLqQNp|
|45|Mylène|https://codepen.io/hamajibashi/pen/eYGVjZJ|
|46|Evan Chiang|https://codepen.io/piskesocute/pen/KKXQbvq|
|46|Wilson|https://codepen.io/ittaxcjv-the-reactor/pen/XWeZOgL?editors=1111
|48|柴貓|https://codepen.io/shibacat/pen/RwLQvLp
|49|有廖先生(Rain)|https://codepen.io/billpop741/pen/poWaXJM
|50|JohnLu|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011
|51| Yof | https://codepen.io/yangyof/pen/GRMyNWQ?editors=1010 |
|52|Vicky|https://codepen.io/hyxfish27/pen/LYzdPZE |
|53|Yummyniya|https://codepen.io/yummyniya/pen/eYGMOvX |
|54|Jess_Wu|https://codepen.io/jess1104/pen/rNGdOPy?editors=0011 |
|55|ShaoYu|https://codepen.io/shaoyukao/pen/qBPoRZr|
|56|陳暐中|https://codepen.io/wei-z/pen/vYeRxaB?editors=1111|
|57|Abbie|https://codepen.io/Abbie0704/pen/zYEWaOM|
|58|聿凌|https://codepen.io/igzdflpu/pen/JjrLZPV?editors=1011|
|59|Ron|https://codepen.io/long-sian-liang/pen/VwMXEPL|
|60|Bonnie|https://codepen.io/bonnieli1414/pen/QWqmzqK?editors=0011 |
|61|Steve|https://codepen.io/ycsteve/pen/mdBxgba?editors=1111 |
|62|AKI|https://codepen.io/akichen27/pen/JjrLqJg |
|63|我是泇吟|https://codepen.io/kljuqbxs/pen/LYzdoXG|
|64|許敏鑫|https://codepen.io/MIN-HSIN/pen/zYEWgZP
|65|Gui|https://codepen.io/guitimliu/pen/qBPoeLL|
|66|Gill|https://codepen.io/Gill-Chin/pen/PoJRMxq?editors=1011|
|67|Judy|https://codepen.io/judy86101166/pen/zYERWjz |
|68|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/vYejBQy?editors=1111
|69|大衛|https://codepen.io/exnsrpjc/pen/MWEQxoa?editors=1011
|70|Otis|https://codepen.io/humming74/pen/dyVeojG?editors=1010
|71|Alicia Lo|https://codepen.io/dkcyhyre/pen/oNGdjbY
|72|FuChang|https://codepen.io/fuchang830714/pen/xxXjEma|
|73|浩|https://codepen.io/Ahoyyyy/pen/RwLyLrN?editors=1010|
|74|Aaron Tu|https://codepen.io/aarontu/pen/VwMxMeo|
|75|Elaine Liu|https://codepen.io/elaine7598/pen/jOGxGrG?editors=1010|
|76|peter.chen1024 |https://codepen.io/JIAN-RONG/pen/JjrvvRM?editors=1111 |
|77|Leo Song |https://codepen.io/sunnylaba/pen/oNGdaEv?editors=1111 |
|78|Alvin|https://codepen.io/Alvin20201116/pen/rNGKVvq?editors=1011|
|79|Steven Chan|https://codepen.io/Steven1220/pen/ExwRjbG?editors=1011 |
|80|Judy ☻|https://codepen.io/hsiaohan/pen/VwMdaZR |
|81|DDDDK|https://codepen.io/dkklee/pen/yLzEOgP |
|82|Erin Huang|https://codepen.io/ErinHuang/pen/wvrXJRB |
|83|Yuan|https://codepen.io/yuanluo13542/pen/dyVKrPo?editors=1010 |
|84|5/周周|https://codepen.io/jhoujhou-the-decoder/pen/JjrBPBx?editors=0011
|85|Scottie|https://codepen.io/wow767t/pen/eYGjgQw?editors=1101|
|86|Hedy|https://codepen.io/hhhsuan41/pen/NWaBppJ?editors=1111|
|87|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/poWOJBr |
|88|Jasper|https://codepen.io/li-jasper/pen/mdBGorJ|
|89|Sihle Huang | https://codepen.io/bugbug777/pen/GRMXmWL |
|90|Riley|https://codepen.io/jjpxbprd/pen/OJxBLPr?editors=1111|
|91|Dobe|https://codepen.io/lisebee/pen/01e58ea400a616261fc4be4f398ad48a?editors=1011|
|92|王老明|https://codepen.io/adonismis/pen/PoJxZEJ?editors=1011 |
|93|YC|https://codepen.io/YCLu/pen/LYzXpzq|
|94|William_O^2|https://codepen.io/CodingTrain_1/pen/QWqJPRZ|
|95|Anna|https://codepen.io/kycrleao/pen/rNGoBMa?editors=1011|
|96|danny123|https://codepen.io/binlandz123/pen/poWqNyY?editors=1001 |
|97|mei|https://codepen.io/Shila-Chen/pen/Bawvgvy |
|98|安志|https://codepen.io/lwmtsgek/pen/dyVaOQR?editors=1011|
|99|PeiChi|https://codepen.io/pei-chi-tsai/pen/dyVadOX|
|100|Jerry Yen|https://codepen.io/JerryYen/pen/yLzwBmm |
|101|Sean Chang|https://codepen.io/seanchang7/pen/QWqoQBB?editors=1011 |
|102|肉桂卷|https://codepen.io/ginnlee/pen/VwMNyQq?editors=1111 |
|103|Zhang|https://codepen.io/Zhangbun/pen/QWqPPdw|
|104|Carol Li|https://codepen.io/carolli834/pen/abLgvMd?editors=1111|
|105|andyii|https://codepen.io/gultrotpybyvue/pen/VwMJgYG?editors=1111|
|106|Yashien Lin|https://codepen.io/YashienLin/pen/ZEXdNVr?editors=1010|
|107|阿劍| https://codepen.io/seonkuraito/pen/ExwrKJg |
|108|2/WA| https://codepen.io/ldddl/pen/ZEazXyp |
|109|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/ZEaYxeL?editors=0011
|110|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/BamLXdV?editors=1111
|111|Van|https://codepen.io/fbacojji-the-selector/pen/podKpVa?editors=1111 |
Sign in with Wallet
Connect another wallet