iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
0
自我挑戰組

溫故知新 JavaScript系列 第 10

Day10- 來做一個簡易計算機吧 -上集

https://ithelp.ithome.com.tw/upload/images/20200923/20129439ZY0t0jDkDH.jpg
Hello,我們前面知道了怎麼透過 JS 去更換網頁的內容,也知道變數與函式的用途,學了這麼多零碎的知識是不是還感覺不到這些概念的使用時機,以及如何透過這些方法去完成一些應用工具呢,學習上如果沒有成就感其實就很難繼續下去~

所以今天我們就把前面林林總總的知識整合起來,來動手做一個簡單版的計算機吧!原本是打算一篇就完成這個計算機,但是想到既然這個系列是面向超新手,如果急於一篇完成很多地方可能反而匆匆帶過沒解釋清楚,因此就分上下集來拆分這個計算機的實作過程吧!

直接先看我們要做出來的成品 簡易計算機
也直接附上完整程式碼,後續再慢慢解說:

HTML

<div class="wrap">
   <div class="computer">點餐機</div>
   <p>我要<input id="ham" type="text">個漢堡</p>
   <p>還有<input  id="coke" type="text">杯可樂</p>
   <p>這樣總共<input id="count" value="計算中" type="button"></input>
總計是 <em id="total"></em>元。
</p>
</div>

JavaScript


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
}

首先我們先把 HTML的結構寫好,並命名好 class 名稱還有 ID 名稱,class 是我們在改變這個計算機外觀時會透過 CSS 用到的,ID 則是在寫 JS 時需要去抓元素時用到的!

開始用白話文翻譯每段程式碼

// 第一行 
document.getElementById('count').onclick = function(){}

這行是說我們要去抓整份文件中有一個叫做 count 的元素,後面的 .onclick 代表一個點擊事件。
點擊後會執行後面的 function 函式。

測試一下這行程式碼,就會發現按了按鈕就會跳出成功點擊到了的訊息!

document.getElementById('countId').onclick = function(){
  alert('你成功點擊到我了!');
}

接下來我們就可以在這函式內寫我們要執行的程式碼囉,首先我們可以試試這樣寫!

document.getElementById('count').onclick = function(){
    var hamNum = document.getElementById('ham').value;
    var cokeNum = document.getElementById('coke').value;
    document.getElementById('total').textContent = hamNum + cokeNum
}

這時候可以發現,在計算後的結果如果你在漢堡與可樂欄位各輸入 2 ,答案竟然不是 4 而是 22,不是已經把兩個數字加總,怎麼會這樣呢?

那是因為目前對 JS 來說後面的 hamNum + cokeNum 並不是屬於兩個數字的相加,而是兩個字串的相加,在第五天的認識變數的章節有提到資料有很多型別,數字、字串、布林等等的....這邊我們可以透過一個語法去做檢查!

typeof()
typeof()是可以檢查目前的資料型別,所以我們可以增加第五行的typeof()去檢查目前裡面的資料型態,結果是字串。

document.getElementById('count').onclick = function(){
    var hamNum = document.getElementById('ham').value;
    var cokeNum = document.getElementById('coke').value;
    document.getElementById('total').textContent = hamNum + cokeNum;
    console.log(typeof(hamNum + cokeNum));
};

所以為了讓裡面的數值取出來後可以正常的相加,我們就要在學一個把字串轉為數值的方法就是 parseInt(),這個函式就可以把我們取出來的值轉化成數字,因此我們把要取出值得那行程式碼用 parseInt() 包起來變成這樣!

document.getElementById('count').onclick = function(){
    var hamNum = parseInt(document.getElementById('ham').value);
    var cokeNum = parseInt(document.getElementById('coke').value);
    document.getElementById('total').textContent = hamNum + cokeNum;
    console.log(typeof(hamNum + cokeNum));
};

有木有~
終於可以成功的把輸入的兩個數字相加了,透過 typeof(hamNum + cokeNum) 檢查,console.log 也是顯示是數字的資料型態,是否有點成就感了呢,明天我們就更加完善這個計算機吧!


上一篇
Day9- 淺談 var 與 hoising 觀念
下一篇
Day11- 來做一個簡易計算機吧 -下集
系列文
溫故知新 JavaScript30

尚未有邦友留言

立即登入留言