# 🏅 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-CN/docs/Web/HTML/Reference/Elements/input#input_%E7%B1%BB%E5%9E%8B)

- 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) `...` 的部分，還原成下方圖片樣式


<!-- 解答：

// 1
方法一
console.log(arr['1']); // 請取得結果為 'b' 的值
方法二
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/fhljksmg-the-styleful/pen/vEGvQbv?editors=1000
-->

---

| 名字 | 連結 |
| ----------- | -------------------------------------------------------------------------------- |
| Saika | [codePen](https://codepen.io/saika4501/pen/qEZzWGg?editors=1111) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/VYaJYvp?editors=1111) |
| suemma | [CodePen](https://codepen.io/suemma/pen/raeEaja) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/VYaJYMM?editors=1000) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/yyOdNEX) |
| andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/bNpPdPB) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/bNpPVoo?editors=1010) |
| esther | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/jEqjbRv) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/qEZzOwO) |
| Naojun | [Codepen](https://codepen.io/NAOJUN/pen/myPZJya) |
| 洋蔥 | [Codepen](https://codepen.io/mikeyam/pen/OPNeMrr?editors=1011) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/EaKBPBm?editors=0011) |
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/jEqjraz?editors=1011) |
| Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/VYaJjGa?editors=1111) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYWdWgr?editors=1010) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=emZwdmw) |
| Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/raeEBMw) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/vEGqXGZ?editors=1000) |
| Zem | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/JoXQReJ) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/OPNeRYd) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/yyOdVaa) |
| YUCCC | [Codepen](https://codepen.io/taroooo/pen/gbrNgQW?editors=1111) |
| Michelle | [Codepen](https://codepen.io/bastar_dize/pen/raeEjZR?editors=1011) |
| Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/GgZbWjy?editors=1011) |
| 布萊斯 | [Codepen](https://codepen.io/oddmtaag-the-scripter/pen/GgZbWWQ) |
| An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/vEGqxZe?editors=1010) |
| Vergil | [Codepen](https://codepen.io/aglgvsie/pen/MYyMpRK) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/bNpPqxZ?editors=1111) |
| Debby Yang | [Codepen](https://codepen.io/Debby-Yang/pen/bNpPqKz) |
| wind | [Codepen](https://codepen.io/wind7y/pen/PwNrjmb) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/KwzjZKr?editors=1011) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/dPMByqM) |
| Mini | [Codepen](https://codepen.io/miiinii32-Cheng/pen/ogxrqgO?editors=1011) |
| Sherry | [Codepen](https://codepen.io/twvyqojd-the-typescripter/pen/LENKmYG?editors=1010) |
| bon33 | [Codepen](https://codepen.io/pengpon/pen/azNgKGY) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/NPNZWGj) |
| cindy | [Codepen](https://codepen.io/a50134/pen/YPqoJJg) |
| Cami | [Codepen](https://codepen.io/irisLife/pen/ogxrQPg) |
| UNO | [Codepen](https://codepen.io/uno1985/pen/WbwqPWG) |
| Tippy | [Codepen](https://codepen.io/Ektodor-Wang/pen/xbVvxJN) |
| tanuki | [Codepen](https://codepen.io/tanuki320/pen/NPNQdRb?editors=1010) |
| cks40660 | [Codepen](https://codepen.io/CKS40660/pen/qEZeyXg) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/emZqwPK) |
| Atian | [Codepen](https://codepen.io/A-Tian-Chen/pen/raeXqKy?editors=1010) |
| ying | [Codepen](https://codepen.io/Lara-Lin/pen/pvbzZPR?editors=1111) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JoKPBGL?editors=1000) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/LEZPrej?editors=1011) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/RNRwwPq?editors=1010) |
| Owen He | [Codepen](https://codepen.io/owen1120/pen/azZbyLx?editors=1000) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/ZYOEYRV) |
| 蜜桃果茶 | [Codepen](https://codepen.io/jia-yiii/pen/wBWvrQN) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/gbMOeEO) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/XJKWBPV) |
| CharisLai | [Codepen](https://codepen.io/charislai/pen/KwMKYNX) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/bNeGJqq) |
| Eric | [codepen](https://codepen.io/wc-su/pen/azZzdxg) |
| RyanC | [codepen](https://codepen.io/RyanYD/pen/OPXPRbN) |
| kashiwatei | [codepen](https://codepen.io/kashiwatei/pen/wBWBpLq?editors=1011) |
| ZoeKang |[codepen](https://codepen.io/byehywmx-the-animator/pen/jErEdXd)|
| Jin |[codepen](https://codepen.io/Jin-L/pen/JoKdPNo)|
| 主委加碼啦幹 |[codepen](https://codepen.io/popbob-the-bashful/pen/JoKdooZ)|
| 冠翔 |[codepen](https://codepen.io/hsrfcdrx-the-bold/pen/XJKbdpQ?editors=1111)|
| bill0530 |[codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/raLVGyP)|
| Miikaa |[codepen](https://codepen.io/Miikaa/pen/MYewZOo)|
| 小趴|[Codepen](https://codepen.io/papa2415/pen/bNeVYqx)|
| 蛋白|[Codepen](https://codepen.io/sjlu-0/pen/MYeaNbe)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/OPXpEqw)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/WbxjdYj?editors=1010)|
|Doreen翠翠翠|[Codepen](https://codepen.io/cuei-sian-Wang/pen/QwEgBzX?editors=1010)|