---
# System prepended metadata

title: "\U0001F3C5 Day 10 - 型別轉換、Bootstrap JavaScript 運用"
tags: [React 直播班 - 2025 冬季班]

---

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


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

HTML
```htmlembedded=
<input type="text" id="target">
<button class="btn">按鈕</button>
```
JS
```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 的儲存規定要用字串）

```js=
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)

```js=
// 假設此為 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
```htmlembedded=
<input type="text" value="520" id="app">
```

JS
```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 

```htmlembedded=
<!-- 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)|