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;
 }