---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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)，修改 `...` 的部分，讓按鈕可以開啟相對應的視窗

## 回報流程

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


<!-- 解答：
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
-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/pvzwKeM?editors=1011) |
| Noy(Toad) |[Codepen](https://codepen.io/MochiCodingPen/pen/XJrarZd) |
| Toung | [CodePen](https://codepen.io/Toung/pen/wBwqzMo) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/QwLMKpq) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/JoPyRWq) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/NPKvRwa?editors=1011) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/OPLjROp?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/EaYvgvM?editors=1011)|
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/ByBdLxZ?editors=1011) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/xbKLEWo?editors=1011)|
| Amanda | [CodePen](https://codepen.io/cym199922/pen/vEBJyEx) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/gbYxLro?editors=1011) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/jENLVBd) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/vEBJyyJ) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/emOEdoo) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/YPKxpBa?editors=1001) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/GgKvWMq) |
| Kaya | [CodePen]( https://codepen.io/kayaribi/pen/vEBJmYx) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/JoPyNpb) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/xbKLPWW) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/emOEVXJ) |
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/NPKvYaP?editors=1010)|
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/gbYxezN) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/mybMLrJ) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/KwPverO?editors=1111) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/WbeEgwp?editors=1010)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/WbeEPwK?editors=1011) |
| andy | [CodePen](https://codepen.io/andygggg/pen/XJraGZa) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/raBzgbx) |
| 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/bNbrXKR) |
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/VYZMLjK?editors=1111)|
|Rogan|[CodePen](https://codepen.io/RoganHsu/pen/azoLZrY?editors=1111)|
|ollie|[CodePen](https://codepen.io/daiyy97/pen/ByBJrBJ?editors=1111)|
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/raBGzyd) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/fqtqps) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/JoPrwjZ?editors=1111) |
|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/KwPyKdj?editors=1111)|
|Jun|[Codepen](https://codepen.io/jun12079/pen/NPKwNpX)|
|Mike|[Codepen](https://codepen.io/mike2049/pen/WbezKQE?editors=1011)|
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/raBZrGw?editors=1111) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/raBQVJE) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/PwYgPbb?editors=1011) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/PwoNjVW?editors=1111) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/ZYEWRbb?editors=1011) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/JojNVmp?editors=1011) |
| 姜承 | [CodePen](https://codepen.io/Komatsu2021/pen/JojNVmp?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/ByavNME?editors=1011) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/jEOjVNr?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/zxxWabd?editors=1000) |

<!-- 快速複製

| user | [CodePen]() |

-->