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

## 回報流程

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


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

- Bootstrap -
https://codepen.io/hexschool/pen/eYKjrQG
-->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:---------------------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/vYaOZZw) |
| aki | [codepen](https://codepen.io/aki168/pen/mdjyOYZ) |
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/XWBbgRZ) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/vYaOZmw) |
| Sean#3825 | [Codepen](https://codepen.io/sean_1215/pen/NWBqggr?editors=1011) |
| PeihanWang#2530 | [Codepen](https://codepen.io/PeihanWang/pen/rNrVwwp?editors=1011) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/BaPNZdo?editors=1000) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/PoBqjOq?editors=1111) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/ExpjXop?editors=1012) |
| Amberhh#2465 | [codepen](https://codepen.io/Amberhh/pen/xxJGrYy?editors=1000) |
| yuyu#6310 | [codepen](https://codepen.io/yuyu0905/pen/VwBLWyO?editors=1011) |
| 大衛#4869 | [codepen](https://codepen.io/exnsrpjc/pen/vYaOZRo?editors=1011) |
| popeye#5081 | [codepen](https://codepen.io/popeye_ux/pen/zYLGzjL) |
| WeiJ#7376 | [codepen](https://codepen.io/weijlin/pen/KKBpqGX) |
| 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/bGjdRvw) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/abjOwGR) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/KKBwLed) |
| RyanC#6960 | [Codepen](https://codepen.io/RyanYD/pen/oNMXwOK?editors=1011) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/RwBPgOP) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/oNMNPPe) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/RwBPZwr) |
| Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/ZEjGJzj) |
| MotoRin#2616 | [Codepen](https://codepen.io/sakimoto/pen/abjOweM?editors=1011) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/XWBbaJo) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/YzjXxWw) |
| 阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/OJwVjRm) |
| 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/MWBwvpP) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/GRBJvQE) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/gOjpxXR) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/gOjpxoR) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/VwBLzXK) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/OJwVjdv?editors=1011) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/eYjNGYY?editors=1011) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/YzjXrzx?editors=1012) |
| 艸良#2846 | [Codepen](https://codepen.io/momoninainai/pen/OJwVxVw?editors=1010) |
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/gOjpGrK?editors=1011)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/vYaOexd)|
|JY#5712|[CodePen](https://codepen.io/judy_123/pen/KKBpvxr)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/yLqNzpN?editors=1111)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/GRBJMBw?editors=1011)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/JjBdryN)|
|RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/QWBbMya?editors=1111)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/jOpPGpE)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/qBydPQp?editors=0011)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/PoBojPN)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/yLqNPbb)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/mdjJqoe)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/mdjJqLd?editors=1010)|
|小夜#3809|[Codepen](https://codepen.io/Naito_K/pen/KKBpvQG?editors=1010)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/ExpjbJO)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/rNrVpOQ?editors=1011)|
|How#5806|[Codepen](https://codepen.io/howtobefine/pen/mdjJpqW)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/VwBLyMa?editors=1010)|
|jimmyFang#9575|[Codepen](https://codepen.io/pohxiqqo/pen/eYjNyeX?editors=1011)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/poWZKzy) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/zYLGYKW)|
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/KKBpQPE?editors=1011)|
| Eileen#6454 |[Codepen](https://codepen.io/Eileen-io/pen/vYaOdYe)|
|Asher Xu#6454|[Codepen](https://codepen.io/kirakira72/pen/XWBbzvx)|
|ㄚ翔#8126|[Codepen](https://codepen.io/engineerjohnson/pen/zYLGRPo)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)|
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/NWBqyOQ)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/QWBwdBO?editors=1111)|
|楊苡安#2752|[CodePen](https://codepen.io/yi-an-yang/pen/abjOzKO?editors=1111)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/YzjXaeb)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/mdjJxxb)|
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/mdjJxGy?editors=1011)|
|老皮博士#8050|[CodePen](https://codepen.io/li0406/pen/yLqNjVq?editors=1111)|
|Ruby Chen#7452|[CodePen](https://codepen.io/ruby92429/pen/rNrVZpb?editors=1011)|
|Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/YzjXReb?editors=1011)|
|Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/WNKvWgy?editors=1111)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/jOpPjOb?editors=1011)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/bGjgegR)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/QWBdxXp?editors=1011) |
| JimmyChang#5558 | [CodePen](https://codepen.io/JimmyChangWenChi/pen/poZRBEG?editors=1010) |
|Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/gOjgaZx?editors=1010)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/YzjZVYJ)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/MWBmYLM?editors=1011)|
| YU#0618 | [Codepen](https://codepen.io/yoken_/pen/dyjRpgM) |
| Cookie SSS#6991 | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/abjyQXq?editors=1111) |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/WNKMZzR)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/yLqEGjG?editors=1011)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/OJwaJjB?editors=1001)|
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/JjaJOGV?editors=1010)|
| Eason#7884 |[Codepen](https://codepen.io/ASLEO/pen/eYLqgaX)|