iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
2
Modern Web

JavaScript 初心者筆記系列 第 6

JavaScript 初心者筆記: 函式實際操作 - 參數與數學運算

上一次學到一些關於函式的基本觀念,這一次則是要來了解如何用函式進行較複雜的運算。首先要從參數開始說起。


函式代入參數

有時候函式需要一些特定資訊才能完成它的工作,因此宣告函式時需要再給予它參數。在這樣的函式中,參數的功能就有如變數。參數放置的位置,在函式名稱後面的小括號裡。
以下是代入一個參數的函式:

function count(oneNum){
var total = oneNum * 10;
console.log( '總價格:' + total + '元');
}
count(8);
//oneNum:參數的名稱,可以自己取,就像變數一樣
//count(8):呼叫函式時,一併輸入參數值

這樣函式就會顯示「總價格:80元」的結果。

參數不一定只能代入一個,可以代入很多個,例如要做加總的時候,可以參考下面的例子。

function count(oneNum,twoNum){
var total = oneNum + twoNum;
console.log( '總價格:' + total + '元');
}
count(8,2);

這樣函式就會顯示「總價格:10元」的結果。

學會將參數代入函式之後,即可進入下一個 level:用函式進行運算。

如何觸發一個計算函式

假設我們今天去麥X勞買漢堡跟飲料,需要計算消費的金額,要怎麼做出一個簡單的計算函式呢?
https://ithelp.ithome.com.tw/upload/images/20190907/20120114Nkzl6EuiTn.png

  1. 在 HTML 撰寫輸入漢堡及可樂數量的欄位,及一個按鈕(點擊後開始計算金額)。
<p>店員:今天想點什麼?</p>
<p>客人:我要<input type="text" id='hamNumId'>個漢堡,還有<input type="text" id='cokeNumId'>杯可樂!</p>
<p>店員:<button id='countId'>計算中</button>,一共是<em id='totalId'></em>元。</p>
  1. 回到 JS,如果按鈕發生了一個 onclick 事件,就會觸發一個函式。
document.getElementById('countId').onclick = function(){
  //用變數設定漢堡跟可樂的售價
  var hamPrice = 80;
  var cokePrice = 20;
  //選取輸入欄位的 DOM 並宣告變數名,用 value 帶出輸入欄的值。
  var hamNum = parseInt(document.getElementById('hamNumId').value);
  var cokeNum = parseInt(document.getElementById('cokeNumId').value);
  //再用一個變數儲存金額加總
  var total = hamNum * hamPrice + cokeNum * cokePrice;
  //把總金額渲染至網頁上
  document.getElementById('totalId').textContent = total;
}

https://ithelp.ithome.com.tw/upload/images/20190907/20120114ZGurTFDDbz.png
小補充:

  • value 屬性可以撈出文字欄位的值,value 甚至可以當作一個 HTML 屬性,作為設定文字欄位預設值之用。
  • 回顧一下,如何讓 JS 與 HTML 交互作用?就是用一個 id 選取 HTML 元素去綁一個事件。
  • 那 parseInt() 是什麼意思?為何要包住選取 DOM 的語法?請接著往下看。

字串與數字,傻傻分不清

JavaScript 有個特別的地方,就是在表單欄位輸入的數字會被認定為是字串,直接讓兩個表單欄位的數字相加的話,會變成兩個數字的結合。

var num1= '10';
var num2= '20';
var total = num1+num2;
console.log(total);
//答案是 '1020'

但是,如果字串型態的數字使用乘法跟除法的話,卻能正常進行運算!
(所以就算沒把字串變數轉換成數字變數,使用乘法跟加法還是能夠得到正確的答案,但是最好還是不要這樣。)

那麼要如何將字串變數轉為數字變數?

使用 parseInt 語法

  1. 宣告一個變數 = 字串型態的數字
    var num = '3';
  2. 該變數 = parseInt(該變數)
    num = parseInt(num);

補充:查詢型別的語法 typeof()

使用 typeof 語法能夠幫助我們查詢某個東西是什麼類型的語法,在此處可以輔助我們查詢變數類型。
typeof(num);


這篇爆字數了……我本來預期每篇文大概寫到 1000 字左右閱讀體驗會最好,結果這篇寫超過 2000 字,不過這個主題怎麼切都不對,只好這樣了 orz


上一篇
JavaScript 初心者筆記: 函式基本觀念
下一篇
JavaScript 初心者筆記: 函式實際運作 - 回傳值與函式間互相傳遞
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言