---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 10
###### tags: `Vue 直播班 - 2022 春季班`

教學 - 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/Bingbingboom/pen/ZEJdYVd?editors=1010)，修改 `...` 的部分，讓按鈕可以開啟相對應的視窗

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


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

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋|
|:--------:| -------- | -------- |
|1| Iris Huang | https://codepen.io/ythuang/pen/vYeayVY |
|2|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/dyVjOzr|
|3|Aaron Tu|https://codepen.io/aarontu/pen/XWeYQMj|
|4| Larry | https://codepen.io/larrylinr5/pen/ZEXjBqx |
|5|Evan Chiang |https://codepen.io/piskesocute/pen/rNGrWor|
|6| POPEYE |https://codepen.io/popeye_ux/pen/mdBjONV|
|7| Laura |https://codepen.io/minminn/pen/GRMBrgq|
|8| 肉鬆 | https://codepen.io/klrkicog/pen/VwMBPme?editors=1011 |
|9|kevinhes|https://codepen.io/kevinhes/pen/JjrBEJj?editors=1111|
|10|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/GRMBrdE?editors=1011|
|11| Yunei | https://codepen.io/Yunei/pen/BawPpYJ |
|12| hua | https://codepen.io/hahahazzz123/pen/dyVjNjp?editors=1111 |
|13| Jhen | https://codepen.io/cheng-jhen/pen/zYELNyY |
|14| Gill | https://codepen.io/Gill-Chin/pen/jOGpydX?editors=1001 |
|15|Howard|https://codepen.io/yawdnhbm/pen/zYELNPV|
|16| wenfish | https://codepen.io/wenfisht/pen/rNGrjwR |
|17| Yof | https://codepen.io/yangyof/pen/WNZzBKJ?editors=1011 |
|18|Elaine Liu|https://codepen.io/elaine7598/pen/xxXJgpx?editors=1010 |
|19|Terry 21|https://codepen.io/feng0409/pen/VwMBpKM?editors=1111 |
|20|Arista|https://codepen.io/arista-hsieh/pen/vYeaxVz |
|21|威爾|https://codepen.io/WILL_Wu/pen/qBPyrvx|
|22|許敏鑫|https://codepen.io/MIN-HSIN/pen/KKXBWbd|
|23| Bella Shya | https://codepen.io/BellaXie/pen/gOGjmEE?editors=1000 |
|24|kk|https://codepen.io/potatokaka/pen/KKXBWYV?editors=1011|
|25|Meng| https://codepen.io/MGHN/pen/WNZKjvQ?editors=1010 |
|26|Empty Wu| https://codepen.io/emptywu/pen/mdBjmJg |
|27|Charlotte Lee| https://codepen.io/charlotte-lee/pen/MWEBpeW?editors=1010 |
|28|Sheep| https://codepen.io/SheepNDW/pen/rNGrmyY |
|29|Himi|https://codepen.io/Himi/pen/PoJBWXE|
|30|Steve|https://codepen.io/ycsteve/pen/xxXJdKY?editors=1111|
|31| 黃士桓 | https://codepen.io/shr-huan-huang/pen/yLzqbWv?editors=1010 |
|32|Tim Lin|https://codepen.io/TimmyLin/pen/GRMBEpj|
|33|祥last|https://codepen.io/jack206418070/pen/GRMBEMW?editors=1011|
|34|Izumi 泉|https://codepen.io/izumi-dev/pen/XWeBarJ|
|35|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/OJxwjLZ?editors=1111|
|36|Mylène|https://codepen.io/hamajibashi/pen/zYELzmO|
|37|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/abLjydZ |
|38|有廖先生(rain)|https://codepen.io/billpop741/pen/gOGjxKQ |
|39| Liu | https://codepen.io/feng-chi-liu/pen/RwLBLZz?editors=1111 |
|40| AllenW | https://codepen.io/AllenW/pen/YzrjxvL |
|41|andersonshen| https://codepen.io/luxyenni-the-bold/pen/dyVjVdr |
|42|我是泇吟|https://codepen.io/kljuqbxs/pen/PoJBOYG|
|42|Fleur|https://codepen.io/swwlee/pen/NWaBwNa|
|43|peter.chen1024|https://codepen.io/JIAN-RONG/pen/XWeBzjO?editors=1011|
|44|咖咖|https://codepen.io/gon790219/pen/NWaBwQO |
|45|Rick Tzeng|https://codepen.io/rick917jp6/pen/abLjEod|
|46|Calon|https://codepen.io/Calon0118/pen/rNGrJWG|
|47|陳暐中|https://codepen.io/wei-z/pen/LYzBmxy?editors=1010|
|48|Yummyniya|https://codepen.io/yummyniya/pen/poWZKzy|
|49|JohnLu| https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011
|50|Gui|https://codepen.io/guitimliu/pen/GRMBGpL
|51|Benson|https://codepen.io/soul81624/pen/OJxwzdG |
|52|shio|https://codepen.io/shioyen/pen/abLjeZN?editors=1012|
|53|柴貓|https://codepen.io/shibacat/pen/poWOzJy|
|54|tingyu|https://codepen.io/dgltu/pen/QWqVbNj?editors=1000 |
|55|Judy☻|https://codepen.io/hsiaohan/pen/zYEJvrM |
|56|Bonnie|https://codepen.io/bonnieli1414/pen/OJxoVNe?editors=1111 |
|57|Vicky| https://codepen.io/hyxfish27/pen/yLzxMGy |
|58|PeiYing| https://codepen.io/Pei-Ying/pen/NWaLgQM?editors=1011|
|59|Otis| https://codepen.io/humming74/pen/RwLYjyR?editors=1010|
|60|Scottie|https://codepen.io/wow767t/pen/oNGPpQG?editors=1011|
|61|Wilson|https://codepen.io/ittaxcjv-the-reactor/pen/vYezjEx?editors=1011|
| 62 | Sihle Huang | https://codepen.io/bugbug777/pen/zYEJjyK |
|63|dOvOb| https://codepen.io/gezzgrwj-the-styleful/pen/PoJdawV
|64|Erin Huang| https://codepen.io/ErinHuang/pen/RwLYXdM
|65|Steven Chan|https://codepen.io/Steven1220/pen/RwLewMr?editors=1011 |
|67|Jasper|https://codepen.io/li-jasper/pen/mdBzwZr|
|68|Dobe|https://codepen.io/lisebee/pen/59f61c31c3ab5a52e521ba2545ffbe2d?editors=1011|
|69|AKI|https://codepen.io/akichen27/pen/vYeVRvN |
|70|Leo Song|https://codepen.io/sunnylaba/pen/PoJyyPd?editors=1111 |
|71|Jess_Wu |https://codepen.io/jess1104/pen/gOGBZBv |
|72|阿武 |https://codepen.io/samwnkyat/pen/YzrRyyB |
|73| YC | https://codepen.io/YCLu/pen/zYEMBdj |
|74|Henry| https://codepen.io/kaohenry9287/pen/KKXragN |
|75|DDDDK|https://codepen.io/dkklee/pen/RwLqpoG|
|76|Hedy|https://codepen.io/hhhsuan41/pen/XWeyGOY?editors=1111|
|77|Yuan|https://codepen.io/yuanluo13542/pen/MWEZYyG?editors=1000 |
|78|ShaoYu| https://codepen.io/shaoyukao/pen/PoJXqNR|
|79|Anna|https://codepen.io/kycrleao/pen/wvrRJao?editors=1011|
|80|William_O^2|https://codepen.io/CodingTrain_1/pen/BawvxZp|
|81|FuChang|https://codepen.io/fuchang830714/pen/JjraGyb|
|82|Jason Chen|https://codepen.io/jason60810/pen/LYzqbVp |
|83|mei|https://codepen.io/Shila-Chen/pen/gOGZVzw |
|84|Jordan Tseng|https://codepen.io/jordan-ttc-design/pen/MWELNeo?editors=1011|
|85|Abbie|https://codepen.io/Abbie0704/pen/mdBoGyv|
|86|安志|https://codepen.io/lwmtsgek/pen/RwLmrYd?editors=1011|
|87|Riley|https://codepen.io/jjpxbprd/pen/eYGarwE|
|88|肉桂卷|https://codepen.io/ginnlee/pen/WNZBYmL?editors=1011|
|89|Jerry Yen|https://codepen.io/JerryYen/pen/eYGqRBj|
|90|阿劍| https://codepen.io/seonkuraito/pen/BawMKEG |
|91|2/WA| https://codepen.io/ldddl/pen/ExbxKqb |
|92|andyii| https://codepen.io/gultrotpybyvue/pen/BamNYVV |
|93|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/zYPvNaZ |
|94|Carol Li|https://codepen.io/carolli834/pen/RwjQeoB?editors=1011 |
|95|Van |https://codepen.io/fbacojji-the-selector/pen/LYOrXrm?editors=1011 |