---
# System prepended metadata

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

---

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



## 回報流程

將答案寫在 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/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)|