---
# System prepended metadata

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

---

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



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

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

-->
