function 計算機案例-下

在這一篇，就會完成這個計算機了！

我的 codepen 範例

https://codepen.io/saffranwang/full/XWJdmWx

---

現在，我想先看看：變數hamNum和cokeNum兩個相加的值，也就是：「漢堡 + 可樂」的數量

JS:

document.getElementById('countId').onclick = function(){

    var hamNum = document.getElementById('hamNumId').value;
    var cokeNum = document.getElementById('cokeNumId').value;

    console.log(hamNum + cokeNum);

}

我在欄位中輸入

• 漢堡 10 個
• 可樂 5 杯

照理來說，Console 應該要出現 15 才對（10 + 5），為什麼是出現「105」呢？（無法做“加減乘除”）

原因為：

🎃 「變數hamNum和cokeNum」都是用「.value」帶出來的值

🎃 用「.value」帶出來的值，都會是「字串 string」，「字串」是「無法做“加減乘除”」的

判別「型別」的方式：使用typeof()

🎃 使用typeof()，來判別「型別」

「型別」有可能是：

• 數字
• 字串
• function
• 物件
• 陣列

例如：

「數字」的型別

在 Console 輸入typeof(3)，再按下 enter，就會顯示出「“number”」，代表是「數字」的型別

「字串」的型別

在 Console 輸入typeof('hello')，再按下 enter，就會顯示出「“string”」，代表是「字串」的型別

「function」的型別

在 Console 輸入typeof(function(){alert('hello')})，再按下 enter，就會顯示出「“function”」，代表是「function」的型別

「物件」的型別

在 Console 輸入typeof({tom:'john'})，再按下 enter，就會顯示出「“object”」，代表是「物件」的型別

---

再回到計算機的案例中，我想要查詢「變數hamNum」的值，到底是「字串 or 數字」

🎃 因此，就使用console.log(typeof(hamNum));來查詢

JS:

document.getElementById('countId').onclick = function(){

    var hamNum = document.getElementById('hamNumId').value;
    var cokeNum = document.getElementById('cokeNumId').value;

    console.log(typeof(hamNum));

}

我在欄位內輸入：

• 漢堡 10 個

點擊「計算中」，在 Console 顯示的是「string」代表：「變數hamNum」的值，是屬於「字串」的型別

🎃 「字串 + 字串」

而「字串 + 字串」，並不會去做「加減乘除」，而是直接「接續寫出值」像下面這樣：

唯一的一個例外：但是，在 JavaScript，用「字串 * 字串」就可以去做「加減乘除」，像是這樣

🎃 「數字 + 數字」

「數字 + 數字」，就可以去做「加減乘除」像下面這樣：

要做「加減乘除」，就要把「字串」轉型成「數字」

要如何把「字串」轉型成「數字」呢？

作法如下

parseInt() 把「字串」轉型成「數字」

例如，我現在有一個「字串」：

var num = '3';

🎃 使用parseInt() 把「字串」轉型成「數字」

[語法說明]

• parse：對（句子）作文法分析。 (verb)
• Int：integer 整數

[定義]

parseInt()是用來「對一個“string”做分析後，回傳相應的一個“integer”」

---

我在 JS 就這樣寫：

var num = '3';
num = parseInt(num);

意思就是：

• 我先宣告這個變數 var num = '3';
• 再賦予這個變數num一個「新的值」= parseInt(num) = 從「字串」轉型成「數字」

這時，我在 Console 用typeof()去查詢num的型別，就會顯示「“number”」了

---

再回到計算機的案例，我要將這兩個變數「hamNum和cokeNum」，從「字串」轉型成「數字」

作法如下：

🎃 將變數的外層都用parseInt()包起來

JS:

var hamNum = parseInt(document.getElementById('hamNumId').value);
var cokeNum = parseInt(document.getElementById('cokeNumId').value);

這樣一來，就可以直接使用這兩個變數「hamNum和cokeNum」去做「加減乘除」了

接下來，JS 就可以寫

• 設定變數「漢堡、可樂的價格」
• 把「數量」乘以「價格」
• hamNum + cokeNum 把「總額相加後」，用.textContent把值帶入id="totalId"裡面

document.getElementById('countId').onclick = function(){

    var hamPrice = 50;
    var cokePrice = 20;

    var hamNum = parseInt(document.getElementById('hamNumId').value) * hamPrice;
    var cokeNum = parseInt(document.getElementById('cokeNumId').value) * cokePrice;

    document.getElementById('totalId').textContent = hamNum + cokeNum;

}

這樣，計算機功能就完成了！