# 🏅 Day 10 - 型別轉換、Bootstrap JavaScript 運用

教學 - JS 的型別轉換
---
#### (1) 型別轉換成數字
舉例：表單 input 取回的值型別為字串，如果要做加總則需要先用 `parseInt()` 轉換成數字型別。

HTML

<input type="text" id="target">
<button class="btn">按鈕</button>

JS

let btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
    let value = document.querySelector('#target').value;
    console.log(value + value); // 字串
    value = parseInt(value);
    console.log(value + value); // 數字
})

#### (2) 型別轉換成字串
常見將「物件」轉換成字串型別（像是 localStorage 的儲存規定要用字串）

let obj = {name: "Hex"};

JSON.stringify(42); // "42"
JSON.stringify(true); // "true"
JSON.stringify(obj); // "{"name":"Hex"}"

#### 實際應用 型別轉換成物件、陣列（此為額外補充！）

取得 localStorage 儲存的物件、陣列「字串」時，需要將它們轉換回物件、陣列格式才能正常使用。同學可以觀察以下 console.log() 前後的差異。

[localStorage 介紹](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/localStorage)

// 假設此為 localStorage 取回的字串
let obj = '{"name":"Hex"}';
let arr = '[20, 30]';

console.log(obj.name);
console.log(arr[0]);

obj = JSON.parse(obj); // 轉回物件格式
arr = JSON.parse(arr); // 轉回陣列格式

console.log(obj.name);
console.log(arr[0]);

題目
---
* 取得範例中的 input DOM 元素，並且取得其中的值 （DOM 結構上取得的都是字串）
* 將值定義成變數命名為 value
* 使以下判斷式驗證執行 if 的結果 (答錯魯一輩子喔 :D) <!-- 太殘酷 -->

HTML

<input type="text" value="520" id="app">

JS

if (value === 520) {
  console.log('暗戀對象喜歡我')
} else {
  console.log('暗戀對象只想和我當普通朋友')
}

Bootstrap JavaScript 運用
---
使用 `data-bs-*` 屬性啟用（需載入 [ Bootstrap JS CDN](https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js))

有兩種常見用法（以 modal 為例）：

* `data-bs-toggle="modal"` -> 要啟用的控制元件
* `data-bs-target="#exampleModal"` -> 指向特定的互動視窗 modal

> #exampleModal 為想要開啟的 modal 視窗 id

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

請觀看此 [CodePen](https://codepen.io/yen-kg/pen/WNVMYxw)，修改 `...` 的部分，讓按鈕可以開啟相對應的視窗

<!-- 解答：
let value = document.querySelector('#app').value;
value = parseInt(value);
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

- Bootstrap -
https://codepen.io/yen-kg/pen/GRVQwqV
-->

---
| 名字 | 連結 |
| ------------ | -------------------------------------------------------------------------------- |
| Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/pvyXbxO) |
| Zem | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/GgqgoZg) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/MYeYKJQ) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/WbxbrXO) |
| 小懿 | [CodePen](https://codepen.io/YT-the-vuer/pen/OPXPMxR?editors=1011) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/MYeYKEV) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/vEKELjN) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/YPWPwdw) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/zxBxrJe) |
| jchunnn | [Codepen](https://codepen.io/jchunnn/pen/ZYOYQdV) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/zxBxrVQ?editors=1010) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/jErEWvZ) |
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/XJKJdrQ?editors=1001) |
| Naojun | [Codepen](https://codepen.io/NAOJUN/pen/ByzyjGR) |
| Owen He | [Codepen](https://codepen.io/owen1120/pen/pvbvyWY?editors=0010) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/emzmZOx?editors=1001) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/dPXPMdv) |
| cks40660 | [Codepen](https://codepen.io/CKS40660/pen/gbMbrze) |
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/RNRNaBj?editors=1111) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/qENENXx) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/GgqgqOz) |
| Vergil | [CodePen](https://codepen.io/aglgvsie/pen/Eayaybv) |
| Sherry | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/VYjYjXG?editors=1010) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/azZzNoe?editors=1111) |
| RyanC | [Codepen](https://codepen.io/RyanYD/pen/KwMwgGo) |
| Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/dPXPOdv) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ogLgbzO) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/VYjYmJr) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/gbMbgbd?editors=1000) |
| cindy | [Codepen](https://codepen.io/a50134/pen/QwEwdYN?editors=1111) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/ZYOYexR) |
| wind | [Codepen](https://codepen.io/wind7y/pen/azZzJEP) |
| FangFang | [Codepen](https://codepen.io/Fang-the-selector/pen/Ggqgmrv?editors=1011) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/bNeNMqw?editors=1010) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/VYjYxro?editors=1011) |
| An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/EayaRaz?editors=1011) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=zxBxXQe) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ogLgVYo?editors=1011) |
| Jin | [Codepen](https://codepen.io/Jin-L/pen/NPrqWRm) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/ByzNNOr) |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/RNRPPXj) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/LEZVNyV) |
| Tippy | [Codepen](https://codepen.io/Ektodor-Wang/pen/VYjLjJE) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/JoKdKxM?editors=1011) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/GgqJKKj) |
| Tanuki | [Codepen](https://codepen.io/byehywmx-the-animator/pen/GgqJKKj) |
| Miikaa | [Codepen](https://codepen.io/Miikaa/pen/bNedXOw) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/qENOmrz) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/zxBvJxZ) |
| 蛋白 | [Codepen](https://codepen.io/sjlu-0/pen/WbxraxG) |
| 冠翔 | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/EayPpyq) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/GgqjLZW) |
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/yyJbJvY?editors=1010)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/dPXzJjq?editors=1011)|