# 🏅 5/7 (五) 每日任務 Day 10
###### tags: `Vue 直播班 - 2021 夏季班`

教學 - 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('暗戀對象只想和我當普通朋友')
}

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


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


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

回報區
---

<!-- 報數:01 Jasmin
let appValue = document.querySelector('#app').value;
value = parseInt(appValue);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

<!-- 3: Vic
const appInput = document.getElementById('app') ;
let value = parseInt(appInput.value) ;

if (value === 520) {
console.log('暗戀對象喜歡我') ;
} else {
console.log('暗戀對象只想和我當普通朋友') ;
}
-->

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

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

<!-- 6:allen chou

let app = document.querySelector('#app');
app.addEventListener('focus',(e)=>{
let key = e.target.value;
key = parseInt(key);
if (key === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

})

-->

<!--報數 7: Josh Fang
答案
let app = document.getElementById('app');
let value = parseInt(app.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數 8: Alysa Chan
const inputValue = document.getElementById('app').value;
const value = parseInt(inputValue);
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
結果：'暗戀對象喜歡我'
-->

<!--報數 9: 小魚
答案
let value = document.querySelector('#app').value;
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

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

<!--12:SeanLiu
CodePen: https://codepen.io/LuckyTiger/pen/qBrEdxp?editors=1111
-->

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

<!-- 14: Tori
let value = document.querySelector('#app').value;
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 15: youting
const el = document.getElementById('app')
let value = parseInt(el.value)

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->
<!--16:Olga
const value = parseInt(document.getElementById("app").value);
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

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

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

<!--20: Chiang
const app = document.querySelector('#app');
let value = parseInt(app.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

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

-->

<!-- 23: Echo Hui
let value = document.querySelector('#app').value;
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 24: Sec
const value = Number(document.getElementById("app").value);
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->
<!-- 25: Poseidon
let q = document.getElementById('app');
let value = +q.value

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 26: peter.chen1024
const value = parseInt(document.querySelector("#app").value);
if (value === 520) {
console.log("暗戀對象喜歡我");
} else {
console.log("暗戀對象只想和我當普通朋友");
}
-->

<!-- 27: Alvin Chu
let value = document.querySelector('#app').value;
value = perseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 28: Larry
const app = document.querySelector('#app');

let value = parseInt(app.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 29: Joe Kuo
let appValue = document.querySelector('#app').value;
let value = parseInt(appValue);

if(value === 520){
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 30 : SONYKO
const value = parseInt(document.querySelector('#app').value);

if (value === 520) {
console.log('暗戀對象喜歡我☆(ゝω・)v')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數31: Wei

let value = document.querySelector('#app').value;

value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

-->

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

<!-- 報數33: Ted Kuo
let value = parseInt(document.querySelector("#app").value)
-->

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

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

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

<!-- 報數36: Jack
console.clear()
const Input = document.getElementById('app');
let value = parseInt(Input.value);
console.log(value)
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

-->

<!-- 報數37: Alicia Lo
let value = parseInt(document.querySelector("#app").value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數37: jimmyFang
let value = document.querySelector('#app').value;
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數38: Wendy Li
let value = parseInt(document.getElementById('app').value)
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數39： RitaHuang
Codepen：
https://codepen.io/Rita-Rossweisse/pen/XWMJzzq?editors=1111
console.clear();
const text = document.querySelector('#app');
console.log(text);

const value = parseInt(text.value);
console.log(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數40: Ed Huang
let value = document.querySelector('#app').value;

value = parseInt(value);

if(value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數 41: Stacey Huang
const el = document.querySelector('#app').value;
const value = parseInt(el);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

-->

<!-- 報數42: leolee
const love = document.querySelector('#app');

let value = parseInt(love.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
CodePen: https://codepen.io/nekorice/pen/MWpYzdG
-->

<!-- 報數 43: 李重炫
const value=document.querySelector('#app').value;
value=parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

-->

<!-- 報數 44: 涂阿銘
const text = document.querySelector('#app');
let value = parseInt(text.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}

-->

<!--報數 45:shoppingq
CodePen: https://codepen.io/shoppingq/pen/zYZxXyY
-->

<!-- 報數 46: Tofu Tseng
let value = document.getElementById("app").value;

value = parseInt(value); // 轉型別
if (value === 520) {
console.log("暗戀對象喜歡我");
} else {
console.log("暗戀對象只想和我當普通朋友");
}
Codepen：https://codepen.io/Tofutseng/pen/WNpbqQQ?editors=1011
-->

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

<!-- 報數 48: Jay
let value = parseInt(document.getElementById('app').value);
-->

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

<!-- 報數 50: Amanda Chiang
let value = document.querySelector('#app').value;
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->
<!-- 報數 51: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/KKWpeJK?editors=1111
-->

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

<!--報數52: YOYO
let luway = document.querySelector('#app');
let value = parseInt(luway.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!--報數53: moitw
const app = document.querySelector('#app').value;
let value = parseInt(app)

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!--報數54: Tori
const app = document.querySelector('#app');
let value = app.value;

if (parseInt(value) === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

<!--報數56: jason06286
const app = document.querySelector('#app');
let value = app.value;

if (+value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!--報數57: Jessie Cheng
const value = parseInt(document.querySelector('#app').value);
-->

<!-- 報數 58: twoz
https://codepen.io/twoz/pen/vYxNvqK?editors=1012
-->

<!--報數 59： RitaHuang
CodePen：
https://codepen.io/Rita-Rossweisse/pen/XWMJzzq
-->

<!--報數 60: Eric-小偉哥
CodePen:
https://codepen.io/ericLoveDesign/pen/jOBWNwe?editors=1111
-->

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

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

<!-- 報數 63: Andrew Chi
const text = document.querySelector('#app');
const value = parseInt(text.value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數 64: Emily Hsi
let value = document.querySelector('#app').value
value = parseInt(value);

if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

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

<!-- 報數 66: Butters
let value = document.querySelector('input').value;
value = parseInt(value);
if (value === 520) {
console.log('暗戀對象喜歡我')
} else {
console.log('暗戀對象只想和我當普通朋友')
}
-->

<!-- 報數 67: WA
CodePen：
https://codepen.io/ldddl/pen/gOWYNLe?editors=1010
-->