---
tags: React 直播班 - 2024 冬季班
---
# 🏅 Day 2 - 物件取值、Bootstrap 表單 1

物件取值
---
> 1. 物件中分為「屬性」及「值」。
> 2. 屬性為物件中的欄位名稱，而值是該屬性所代表的值。
> 3. 「屬性名稱」在運作上都是以「字串」的形式儲存，所以命名上可以使用特殊符號

在物件內新增、修改、取得屬性時最常使用的方式是「點記法」:

### 點記法（Dot notation）

let obj = {
    a: 'value A'
};
obj.$b = 'value B';  // 在物件 obj 新增一個帶有特殊符號的屬性 $b，值為 'value B'。
obj.a = 'value edit'; // 將物件 obj 屬性 a 的值修改為 'value edit'。
console.log(obj.a); // 取得物件 obj 屬性 a 的值
console.log(obj.$b); // 取得物件 obj 屬性 $b 的值

不過點記號在存取時會有一些限制。舉例來說，**當屬性名稱帶有數值、小數點、空格時，就無法正確運作**。這時就會改用「括弧記法」:

### 括弧記法（Bracket notation）

let obj = {
    a: 'value A'
};
obj['-- data'] = '雨量資料'; 
obj['PM2.5'] = 25;
obj['1b'] = '1b';
console.log(obj['-- data']) // 結果為 '雨量資料'
console.log(obj['PM2.5']) // 結果為 25
console.log(obj['1b']) // 結果為 '1b'
// 也可以代入變數
let a = 'a';
console.log(obj[a]); // 結果為 'value A'

### 題目
完成程式碼內註解要求

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

console.log();  // 請取得結果為 'b' 的值
console.log();  // 請取得結果為 'c' 的值，必須使用變數
console.log();  // 請取得結果為 'd' 的值，必須使用點記號
console.log();  // 請取得結果為 'e' 的值

Bootstrap 表單元素
---
- label、input
運用 .form-label、.form-control 呈現 Bootstrap 基本樣式

  <label for="mail" class="form-label">Email address</label>
  <input type="email" class="form-control" id="mail" placeholder="[e-mail]">

> 注意：
> 1. label for 與 input id 需一致
> 2. input 需運用正確的 [type 屬性](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input#form_%3Cinput%3E_types)

- select
運用 .form-select 呈現 Bootstrap 基本下拉選單樣式

  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

- checkbox & radio
運用 .form-check、.form-check-label、.form-check-input 呈現

checkbox（通常為多選）
input type 屬性需為 checkbox，可以加上 checked 屬性讓選項預設選取

  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      Checked checkbox
    </label>
  </div>

radio（為單選）
input type 屬性需為 radio，可以加上 checked 屬性讓選項預設選取
> name 屬性的值需相同，表示為同一群組

  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>

詳細可以再參考：Bootstrap [表單控制](https://getbootstrap.com/docs/5.3/forms/form-control/)、[select](https://getbootstrap.com/docs/5.3/forms/select/)、[checks&radios](https://getbootstrap.com/docs/5.3/forms/checks-radios/)

### 題目
請嘗試修改此 [CodePen](https://codepen.io/yen-kg/pen/wvVyjZx) `...` 的部分，還原成下方圖片樣式


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

// 1 方法一
console.log(arr['1']); // 請取得結果為 'b' 的值
// 1 方法二
console.log(arr[1]); // 請取得結果為 'b' 的值

// 2
console.log(arr[c]); // 請取得結果為 'c' 的值，必須使用變數
// 4
console.log(arr.b); // 請取得結果為 'd' 的值，必須使用點記號
// 5
console.log(arr['--some data']); // 請取得結果為 'e' 的值

- Bootstrap 表單 -
https://codepen.io/hexschool/pen/jOKpYXy
-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/ByBpaEV)|
| Sonia| [Codepen](https://codepen.io/YUJOU/pen/QwLdpjY?editors=1111)|
| Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/QwLdaZL)|
| 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/QwLdazW?editors=1011)|
| 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/YPKNYdv)|
| Toung | [CodePen](https://codepen.io/Toung/pen/ogvBpmE)
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/XJrpZWg) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/PwYWQPr) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/KwPaQMM?editors=1010) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/LEPxQNr?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/VYZPQbq?editors=1011)|
|ollie|[CodePen](https://codepen.io/daiyy97/pen/RNbKQQz?editors=1001)|
| Dolce_墨 | [CodePen](https://codesandbox.io/p/sandbox/day-2-wu-jian-qu-zhi-bootstrap-biao-dan-1-sw5t3k) |
| Rochel | [CodePen](https://codepen.io/rochelwang1205/pen/raBjdxq) |
| Milvii | [CodePen](https://codepen.io/Monstertroll/pen/xbKgWON) |
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/azopGJm?editors=1111)|
|JIA| [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/jENyxpN?editors=1010) |
|voke|[CodePen](https://codepen.io/FiSi-the-lessful/pen/YPKNOwQ)|
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/mybRGwx?editors=1011) |
|Tammy|[CodePen](https://codepen.io/Tammy_Tsai/pen/emOgLwB)|
| Cami | [CodePen](https://codepen.io/irisLife/pen/GgKrYdK) |
| jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/gbYgBXY?editors=1111) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/JoPEmqx) |
| Kaya | [Codepen](https://codepen.io/kayaribi/pen/RNbKEgQ) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/bNbgzbX) |
| andy | [CodePen](https://codepen.io/andygggg/pen/OPLWdoy?editors=1111) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/LEPxqQg) |
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/ogvBPxZ) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ZYzLZWg?editors=1011)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/NPKpWNj) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/emOvmpq?editors=1011) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/YPKZwyZ) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/qEWrONG) |
| ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/OPLpWmb) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/yyBMgPE?editors=1011) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/EaYWRzL) |
| .michelle0417 | [CodePen](https://codepen.io/michelle0417/pen/LEPyNgr) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/VYZbzrP) |
| abab016001 | [CodePen](https://codepen.io/abab016001Jin/pen/EaYmday?editors=1000) |
| CrystalLala | [CodePen](https://codepen.io/crystallala/pen/mybmzja) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/NPKjmby) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/PwYjYOX) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/JoPJdWN) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/ByBZNdM) |
| 1457 | [CodePen](https://codepen.io/1457dys/pen/emORBag) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/MYgooVE?editors=1111) |
| 郭芙蘭 | [CodePen](https://codepen.io/flora_Kuo/pen/qEWjgYj?editors=1011) |
| kaka_945 | [CodePen](https://codepen.io/kay945/pen/PwYjMgJ) |
| ㄚ華 | [CodePen](https://codepen.io/rzzuehiv-the-vuer/pen/ogvevBZ) |
|a1phaki(小k)|[Codepen](https://codepen.io/a1phaki/pen/yyBoKRM?editors=1010)|
|嚼勁先生|[Codepen](https://codepen.io/James520284/pen/GgKvzVB)|
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/raBzXxd?editors=1111) |
|Glen_69515| [CodePen](https://codepen.io/glenyaochih/pen/qEWPyMx) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/gbYGwer?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/QwLOrOK) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/RNbxjxx?editors=0011) |
| 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/JoPpBRj) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/WbeJQpZ?editors=1011) |
| Chieh | [CodePen](https://codepen.io/Chieh_/pen/KwPRvLK?editors=1000) |
| 雪粒 | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/ogvyrKv) |
| Edie | [CodePen](https://codepen.io/eku10rei/pen/wBwxEPr?editors=1010) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/RNbYNdp?editors=1010) |
| Chun | [CodePen](https://codepen.io/Chun_debbie/pen/YPKovqr?editors=1011) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/ZYEEWWm?editors=1011) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/RNbeKJE) |
| 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/ByazoKN) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/VYwxPXr?editors=0011) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/ogNPOae?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/XJJZMKr?editors=1000) |
<!-- 快速複製
| | [CodePen]() |

-->