JavaScript: 變數

這支JavaScript用於輸入甜點圈（兩種：cake和glaze）的數量，價格都是DOUNUTPRICE，指令碼根據使用者輸入自動計算訂單價格，最後點擊提交。在http://www.headfirstlabs.com/books/hfjs/下載指令碼源碼，Chapter 2.

【指令碼中的JS部分】

<script type="text/javascript">
      function updateOrder() {
        var TAXRATE = 0.0925;
        var DONUTPRICE = 0.50;
        var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
        var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value);
        if (isNaN(numCakeDonuts))
          numCakeDonuts = 0;
        if (isNaN(numGlazedDonuts))
          numGlazedDonuts = 0;
        var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
        var tax = subTotal * TAXRATE;
        var total = subTotal + tax;
        document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
        document.getElementById("tax").value = "$" + tax.toFixed(2);
        document.getElementById("total").value = "$" + total.toFixed(2);
      }

      function parseDonuts(donutString) {
        var numDonuts = parseInt(donutString);
        if (donutString.indexOf("dozen") != -1)
          numDonuts *= 12;
        return numDonuts;
      }

      function placeOrder(form) {
        if (document.getElementById("name").value == "")
          alert("I'm sorry but you must provide your name before submitting an order.");
        else if (document.getElementById("pickupminutes").value == "" ||
          isNaN(document.getElementById("pickupminutes").value))
          alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
        else
          // Submit the order to the server
          form.submit();
      }
    </script>

 

學習到的知識點：

1. JS中定義變數採用var，並且不能顯示指定變數類型，換言之，JS根據賦予變數的值自行決定它的類型（boolean,text, number），帶有一些智能，但是在某些情況可能會帶來一些問題。如輸入兩種甜點圈數量分別為1和2:

var numCakeDonuts = document.getElementById("cakedonuts").value;
var numGlazedDonuts = document.getElementById("glazeddonuts").value;

var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;

經測試，subTotal的值為12*0.5=6。這是因為系統指定numCakeDonuts為text類型，而兩個text類型相加為“12”，計算*的時候又自動轉變回number類型。基於此，代碼中使用了parseInt或parseFloat函數。parseInt會截取從頭開始的數字部分進行轉換，並忽略後面不為數位部分。如果傳入的不是數字（或數字開頭），則返回NAN

2. 常量名稱習慣用大寫，書中定義常量用const，但測試會報錯，應該const並不是滿足標準的定義方式。建議就直接大寫代表常量吧。

3. 幾個函數需要記住：

parseInt(text), parseFloat(text), indexOf(text), isNaN(var)：判斷是否為Number, toFixed(number): 四捨五入

4. onchange事件，代碼中為列出。應用中經常會用到，文字框輸入後並切換焦點，自動計算或驗證輸入合法性

<div class="field">
        # of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
          onchange="updateOrder();" />
</div>

5. 函數定義中，參數列表只有參數名稱，沒有var，如果寫成var donutString會報錯。另外也沒有指定傳回值的地方，這與C, Java不同，在方法體中return值即可。

 function parseDonuts(donutString) {
        var numDonuts = parseInt(donutString);
        if (donutString.indexOf("dozen") != -1)
          numDonuts *= 12;
        return numDonuts;
 }