---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案                             |
|:---------------:|:---------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOEpgKm) |
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/GReJyRv) |
| bf | [CodePen](https://codepen.io/BF-Tsai/pen/vYPOpEx?editors=1011) |
| py | [CodePen](https://codepen.io/Wpypy/pen/MWxwrWx?editors=1011) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/JjzdMjY) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/BabNJNr?editors=1011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/qBvdpRa?editors=1010) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/yLwNpbd) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/PoLqEOa) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/rNRVpWN) |
| celinelinnn | [CodePen](https://codepen.io/celinephoebe/pen/abMOEjB)|
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/MWxwrBY) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/zYbGpYO) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/xxBGpRV) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/yLwNpdY) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/qBvdxNx) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/KKEpQPw?editors=1111) | 
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/abMOqOy?editors=1012) | 
| Uli | [CodePen](https://codepen.io/uli1313/pen/MWxwQjj?editors=0011) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/MWxwQmb) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/NWJqyvq?editors=1111) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/RwdPQLd?editors=1101) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/xxBGYJz?editors=1011) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/xxBGYBa) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/MWxwVwr) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/zYbGpLB?editors=1000) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/zYbGWBm) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/XWGbEgy?editors=1011)  |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/eYXNMGP?editors=1111)  |
| Ataraxia  | [CodePen](https://codepen.io/ataraxia8888/pen/zYbGWQg)  |
| Winnie  | [CodePen](https://codepen.io/codepen-io-winnie/pen/JjzdLxj?editors=1011)  |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/NWJqYrj?editors=1111) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/XWGbVwN?editors=1011)|
|貢波波夫|[Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/poYJVjG)|
| SHUO  | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/bGZdMwj?editors=1012)  |
|  KUN.  | [CodePen](https://codepen.io/barry91205/pen/KKEpoYx?editors=1111)  |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/WNmvJzm?editors=1011)|
| Emily |[CodePen](https://codepen.io/Emily2089/pen/mdoJKWv)|
 | Yang  | [CodePen](https://codepen.io/Yang-J/pen/MWxwGMK?editors=1000)  |
 | Neil  | [CodePen](https://codepen.io/Neil1024/pen/QWobxqy?editors=1001)  |
 | ann6212  | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/RwdPJMO?editors=1011)  |
 | Eazy | [CodePen](https://codepen.io/Wpypy/pen/MWxwrWx?editors=1011)  |
 |Eden|[Codepen](https://codepen.io/iseden/pen/RwdPJQd)|
 | dora  | [CodePen](https://codepen.io/dorayu/pen/xxBGzyz?editors=1011)  |
 | MikeLin  | [CodePen](https://codepen.io/MikeLin0701/pen/VwRLBBv)  |
 | yu.t_liu  | [CodePen](https://codepen.io/YuT200053/pen/mdoJGdm)  |
 | MY  | [CodePen](https://codepen.io/ahmomoz/pen/gOEpdzK?editors=1010)  |
  | Yuetin  | [CodePen](https://codepen.io/Yue9527/pen/WNmvPqo?editors=1111)  |
| jeremyChan  | [CodePen](https://codepen.io/nudieisgood/pen/BabNbKz?editors=1010)  |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/XWGbGNP?editors=1011)  |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/OJqVqjb?editors=0011)  |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/jOJPRBX)  |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/NWJqmxz) |
| Fabio20  | [CodePen](https://codepen.io/fabio7621/pen/BabNevN?editors=1111)  |
| ChihYang  | [CodePen](https://codepen.io/hike1707/pen/dyroBPL)  |
 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/qBvdGZV?editors=1010)  |
 | stone4584  | [CodePen](https://codepen.io/Royen0506/pen/GReJVPG?editors=1111)   |
| _amaaaa  | [CodePen](https://codepen.io/Alicia-Chu/pen/oNVjgYz) |
  | nini1202desu  | [CodePen](https://codepen.io/tvxq5206/pen/XWGmbVg?editors=1011)  | 
  | PoWei#8484  | [CodePen](https://codepen.io/harrison-wei-lai/pen/mdoePRQ?editors=1111) |
  | 黃士桓 | [CodePen](https://codepen.io/shr-huan-huang/pen/oNVjLRX) |
  | 風羽  | [CodePen](https://codepen.io/Joy-Huang/pen/KKEpZpb?editors=1011)  |
  | Nelly  | [CodePen](https://codepen.io/Nelly-Guo/pen/MWxapLg?editors=1000)  |
  | Iris | [CodePen](https://codepen.io/iris831206/pen/XWGmRvV)  |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/poYjwbr)  |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/jOJbaBw?editors=1111) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/KKEdZbL?editors=1010) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/wvOKyWO?editors=1000) |
| RayRay  | [CodePen](https://codepen.io/CityRay/pen/BaboYqB)  |
| .zack_p  | [CodePen](https://codepen.io/Designer-PH/pen/WNmQJxJ?editors=1111)  |
 | elena  | [CodePen](https://codepen.io/elena0127abc/pen/qBvOMWW)  |
  | Chris  | [CodePen]( https://codepen.io/cjtseng07/pen/GRepXxO)  |
 | peggy  | [CodePen](https://codepen.io/peggylai/pen/xxBwewv?editors=1011)  |
 | sponge  | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/wvOKZqy)  |
  | 保羅  | [CodePen](https://codepen.io/paul-1997/pen/eYXpobO)  |
  |　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/RwdWmWM)|
  | PayRoom |[CodePen](https://codepen.io/water38198/pen/WNmQBYv)
 | hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/zYbrYyM)  |
| haru  | [CodePen](https://codepen.io/haru_portfoilo/pen/WNmrbrM?editors=1111)  |
| Jason  | [CodePen](https://codepen.io/bfnrjakt/pen/abMdQMQ)  |
| jia yu  | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/zYbrXoe?editors=1011)  |
| WEI  | [CodePen](https://codepen.io/wei-z/pen/wvOGzee?editors=1111)  |
| skypassion5000  | [CodePen](https://codepen.io/skypassion5000/pen/NWJNarL?editors=1000)  |
 | 狸貓  | [CodePen](https://codepen.io/tanuki320/pen/mdoPzgj)  |
 | runweiting  | [CodePen](https://codepen.io/weiting14/pen/poYEJmm)  |
  | Vivian2857  | [CodePen](https://codepen.io/vivian_lin/pen/LYaRNYP?editors=1100)  |
  | hua  | [CodePen](https://codepen.io/LHua/pen/qBvaGgb?editors=1111)  |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/JjzEaap) ||
 | Owen Dong | [Codepen](https://codepen.io/owen-dong/pen/mdomVaG) | 
 | aaron | [Codepen](https://codepen.io/nzygxhnl-the-scripter/pen/mdomxWV?editors=1111) | 
 | 關關 | [Codepen](https://codepen.io/ashkuan/pen/GRevLOW) | 
 | Ting | [CodePen](https://codepen.io/liara/pen/VwRyyxJ) |
 | yuan!  | [CodePen](https://codepen.io/townyuan/pen/xxewOVG)  |
 
 
<!-- 快速複製

 | user  | [CodePen]()  |

-->
