---
# System prepended metadata

title: "\U0001F3C5 Day 3"
tags: [Vue 直播班 - 2022 春季班]

---

---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 3
###### tags: `Vue 直播班 - 2022 春季班`

小教學
---
#### Object.keys(), Object.values() 介紹
* Object.keys() 可以取得指定物件的所有 key 值，並回傳一個陣列。
* Object.values() 可以取得指定物件的所有 value 值，並回傳一個陣列。

```js=
const object1 = {
  a: "字串",
  b: 42,
  c: false
};

console.log(Object.keys(object1)); // 結果: ["a", "b", "c"]
console.log(Object.values(object1)); // 結果: ["字串", 42, false]
```

題目 (使用 CodePen 作答)
---
接續 Day2 的每日任務，請同學透過以下物件執行題目要求:
1. 建立一個陣列，其中包含所有的屬性名稱 (需使用 Object.keys)。
2. 建立一個陣列，其中包含所有的屬性值 (需使用 Object.values)。
3. 承接第 1 題，透過 forEach、使用 console.log 輸出陣列的所有屬性名稱。
4. 承接第 2 題，透過 for 迴圈、使用 console.log 輸出陣列的所有屬性值。

迴圈參考: https://wcc723.github.io/javascript/2017/06/29/es6-native-array/

```js=
let obj = {
  a: 'a',
  1: 'b',
  '這是中文字': 'c',
  'b': 'd',
  '--some data': 'e'
}
```

Bootstrap 表單
---
接續[前一天](https://hackmd.io/ut1-4TCCRsOnalZ1bsr2Rg)，將表單元素整合，試著還原下方圖片（使用 Codepen 作答）
![](https://i.imgur.com/nm4XLOH.png)
```html=
<!-- 這裡的說明壞掉了，不知道誰弄的 ＱＱ -->
<br>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="sex" id="boy">
    <label class="form-check-label" for="boy">
      男孩
    </label>
  </div>
 ```
可以參考：[Bootstrap 水平表單](https://bootstrap5.hexschool.com/docs/5.1/forms/layout/#horizontal-form)



回報流程
---
請同學依照下圖教學觀看解答、回報答案:

![](https://i.imgur.com/QtL8zEW.png)

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

![](https://i.imgur.com/L7kyew8.png)

<!-- 解答
// 1
let objKeys = Object.keys(obj);

// 2
// 補充: 可以用 sort() 針對陣列內容進行排序
let objValues = Object.values(obj).sort();

// 3
objKeys.forEach((item) => {
	console.log(item);
})

// 4
for (let i = 0; i < objValues.length; i++) {
	console.log(objValues[i]);
}

- Bootstrap - 
https://codepen.io/Bingbingboom/pen/NWvmMbB
-->

回報區
---

| 報數 |組別/名字  | codepen / 其他回饋    | 
| -------- | -------- | -------- | 
|1| Karen Huang | https://codepen.io/Coding_Snorlax/pen/bGooKYP |
|2| 肉鬆 | https://codepen.io/klrkicog/pen/WNZMejg?editors=1011 |
|3| Larry | https://codepen.io/larrylinr5/pen/KKXQPNr |
|4|Iris Huang|https://codepen.io/ythuang/pen/gOGvYee|
|5| POPEYE | https://codepen.io/popeye_ux/pen/dyVdbeW |
|6|浩|https://codepen.io/Ahoyyyy/pen/OJxQLpQ?editors=1010 |
|7|Jason Chen|https://codepen.io/jason60810/pen/MWEQgPg |
|8|Jhen|https://codepen.io/cheng-jhen/pen/mdBXdbK |
|9|Laura|https://codepen.io/minminn/pen/xxXYKrZ
|10|Pei Ying|https://codepen.io/Pei-Ying/pen/bGoLGbZ?editors=1010|
|11|kk|https://codepen.io/potatokaka/pen/mdBXbNK?editors=1111|
|12|Arista|https://codepen.io/arista-hsieh/pen/yLzvBmy|
|13|Himi|https://codepen.io/Himi/pen/ZEXrEpO|
|14|Clara Cai|https://codepen.io/Clara-Snowy/pen/oNGEvqZ|
|15|kevinhes|https://codepen.io/kevinhes/pen/rNGJNpm?editors=1000|
|16|Terry21|https://codepen.io/feng0409/pen/VwMyVzG |
|17|Izumi 泉|https://codepen.io/izumi-dev/pen/Jjrpodm |
|18| 黃士桓 | https://codepen.io/shr-huan-huang/pen/qBPxBzJ?editors=1010 |
|19| Gill | https://codepen.io/Gill-Chin/pen/wvryvbK?editors=1011 |
|20|CloThEs |https://codepen.io/bogwdnxx-the-sans/pen/RwLQwzz|
|21|Wenfish|https://codepen.io/wenfisht/pen/XWeZWKp|
|22|Henry|https://codepen.io/kaohenry9287/pen/vYedYvP
|23|Empty Wu|https://codepen.io/emptywu/pen/WNZMbGp |
|24|威爾|https://codepen.io/WILL_Wu/pen/RwLQwOm|
|25|Howard|https://codepen.io/yawdnhbm/pen/RwLQwZq|
|26|Yunei|https://codepen.io/Yunei/pen/bGoLGmd|
|27|andersonshen|https://codepen.io/luxyenni-the-bold/pen/abLqbxG |
|28|hua|https://codepen.io/hahahazzz123/pen/YzreKeQ |
|29|黑川|https://codepen.io/kurokawa/pen/bGoLdev |
|30|Benson|https://codepen.io/soul81624/pen/XWeZJEy |
|31|BeanHuang|https://codepen.io/Beanhuang/pen/NWayqjB?editors=1011 |
|32|Yof|https://codepen.io/yangyof/pen/GRMyNWQ?editors=1011 |
|33|Tim Lin|https://codepen.io/TimmyLin/pen/ExwQjma|
|34|Liu|https://codepen.io/feng-chi-liu/pen/GRMQJmM?editors=1111 |
|35|Mylène|https://codepen.io/hamajibashi/pen/qBPxdNO|
|36|Charlotte Lee|https://codepen.io/charlotte-lee/pen/oNGEgrX?editors=1010|
|37|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/mdBXeej |
|38| 許敏鑫 |https://codepen.io/uilaadhw/pen/gOGvpBz?editors=1112 |
|39|Sheep|https://codepen.io/SheepNDW/pen/poWavbr |
|40|AllenW|https://codepen.io/AllenW/pen/XWeZWdN |
|41|Judy|https://codepen.io/judy86101166/pen/NWayGRQ |
|42|yu|https://codepen.io/yuu9916/pen/yLzvOyR?editors=1000 |
|43|davidlai|https://codepen.io/supergoldmanster/pen/ExwQydo?editors=1111|
|44|Rick Tzeng|https://codepen.io/rick917jp6/pen/poWabOE
|45|tingyu|https://codepen.io/dgltu/pen/ZEXrOje?editors=1011
|46|咖咖|https://codepen.io/gon790219/pen/KKXQMJg
|47|Erin Huang|https://codepen.io/ErinHuang/pen/bGoLwGp
|48| John Lu | https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011 |
|49|AKI|https://codepen.io/akichen27/pen/YzreGOX |
|50|Fleur|https://codepen.io/swwlee/pen/jOGZMjx |
|51|Alicia Lo|https://codepen.io/dkcyhyre/pen/NWaybdz|
|52|Yummyniya|https://codepen.io/yummyniya/pen/MWEQJya|
|53|Jess_Wu|https://codepen.io/jess1104/pen/eYGVvNe?editors=1011
|54|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/xxXYOgL?editors=1111|
|55|Evan Chiang|https://codepen.io/piskesocute/pen/OJxQpqp|
|56|Steve|https://codepen.io/ycsteve/pen/JjrpJyO?editors=1011|
|57|Leo Song|https://codepen.io/sunnylaba/pen/BawYJLj|
|58|Calon|https://codepen.io/Calon0118/pen/wvryyOY|
|59|Will|https://codepen.io/ncrdpepc-the-lessful/pen/ZEXrEMK?editors=1012|
|60|Meng| https://codepen.io/MGHN/pen/qBPxoVp?editors=0012 |
|61|Kei| https://codepen.io/Keeeei/pen/RwLQyOa |
|62|shio| https://codepen.io/shioyen/pen/dyVdjwq |
|63|有廖先生(rain)| https://codepen.io/billpop741/pen/xxXYQEq |
|64|柴貓| https://codepen.io/shibacat/pen/oNGEmjX |
|65|Vicky|https://codepen.io/hyxfish27/pen/PoJQrLv |
|66|Ron|https://codepen.io/long-sian-liang/pen/JjrLGdv|
|67|Abbie|https://codepen.io/Abbie0704/pen/PoJRZZY|
|68|ShaoYu|https://codepen.io/shaoyukao/pen/bGovgbm|
|69|FuChang|https://codepen.io/fuchang830714/pen/qBPoRrm|
|70|陳暐中|https://codepen.io/wei-z/pen/WNZzpxw?editors=1011|
|71|聿凌|https://codepen.io/igzdflpu/pen/xxXWLPa?editors=1011|
|72|Bonnie|https://codepen.io/bonnieli1414/pen/qBPoQzp?editors=1011|
|73|我是泇吟|https://codepen.io/kljuqbxs/pen/JjrLqqY|
|74|Gui|https://codepen.io/guitimliu/pen/yLzKmoM
|75|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/PoJeYbb?editors=1111
|76|Zhang|https://codepen.io/Zhangbun/pen/QWqmXwJ|
|77|Otis|https://codepen.io/humming74/pen/WNZJNdW?editors=1010|
|78|Jordan|https://codepen.io/jordan-ttc-design/pen/yLzjOgj|
|79|Elaine Liu|https://codepen.io/elaine7598/pen/dyVeprL?editors=1010|
|80|Aaron Tu|https://codepen.io/aarontu/pen/yLzjzBz|
|81|peter.chen1024|https://codepen.io/JIAN-RONG/pen/VwMxXwK?editors=1011|
|82|Alvin|https://codepen.io/Alvin20201116/pen/JjrvmXx?editors=1001|
|83|Steven Chan|https://codepen.io/Steven1220/pen/YzrLBEP?editors=1011|
|84|DDDDK|https://codepen.io/dkklee/pen/ExwRPPW|
|85|Judy ☻|https://codepen.io/hsiaohan/pen/eYGKJmZ |
|86|Hedy|https://codepen.io/hhhsuan41/pen/VwMdVQP |
|87|Yuan|https://codepen.io/yuanluo13542/pen/rNGKPJK?editors=1010 |
|88|5/周周|https://codepen.io/jhoujhou-the-decoder/pen/LYzrwyz
|89|Yashien Lin|https://codepen.io/YashienLin/pen/JjrBypJ?editors=1000
|90|Jasper|https://codepen.io/li-jasper/pen/LYzBbNJ
|91|Kelvin Hsu|https://codepen.io/kelvin001/pen/NWaBJQB |
|92|阿武|https://codepen.io/samwnkyat/pen/abLjXrQ
|93|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/wvrEwGw|
|94|Sihle Huang|https://codepen.io/bugbug777/pen/xxXagvG|
|95|Scottie|https://codepen.io/wow767t/pen/qBPyWVL|
|96|Anna|https://codepen.io/kycrleao/pen/xxXadey?editors=1010|
|97|Riley|https://codepen.io/jjpxbprd/pen/bGoxQeg|
|98|Dobe|https://codepen.io/lisebee/pen/31b32530e61e97dbcf15df523fbd864e?editors=1010|
|99|王老明|https://codepen.io/adonismis/pen/oNGawxm?editors=1011|
|100|YC|https://codepen.io/YCLu/pen/LYzXpzq |
|102|Jie|https://codepen.io/qgqonost-the-flexboxer/pen/wvrQJEm?editors=1011|
|103|mei|https://codepen.io/Shila-Chen/pen/xxXQWzy|
|104|mei|https://codepen.io/CodingTrain_1/pen/zYEMZyY|
|105|danny123|https://codepen.io/binlandz123/pen/rNGoxXX?editors=1000| 
|106|PeiChi|https://codepen.io/pei-chi-tsai/pen/jOGXBPL?editors=0011|
|107|安志|https://codepen.io/lwmtsgek/pen/yLzZVBR?editors=0011|
|108|Jerry Yen|https://codepen.io/JerryYen/pen/bGozPpz |
|109|Sean Chang|https://codepen.io/seanchang7/pen/abLMVQy?editors=1011|
|110|Carol Li|https://codepen.io/carolli834/pen/vYePrvx?editors=1010|
|110|肉桂卷|https://codepen.io/ginnlee/pen/LYzaBby?editors=1011|
|110|andyii|https://codepen.io/gultrotpybyvue/pen/NWaZPPo|
|111|阿劍| https://codepen.io/seonkuraito/pen/ZEXwWZG |
|112|manson許|https://codepen.io/oupbzfxq-the-scripter/pen/gOGVNNW?editors=1011|
|113|2/WA|https://codepen.io/ldddl/pen/xxPKOrM|
|114|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/xxPxNPg?editors=1001|
|115|Van|https://codepen.io/fbacojji-the-selector/pen/NWaEwep|
|116|Bruno Yu|https://codepen.io/bruno-yu/pen/mdpNxoy?editors=1011|