从零开始的毕设--JavaScript-存储数据

在javascript的世界里，每项事务都有自己的位置，确认众多事物有所依归，则是你的责任。我们讲的事物就是数据——包括如何呈现数据、存储数据、以及找出数据。

数据类型

javascript也会把数据按照数据类型分类。它使用三种数据类型：text/number/boolean
数据分为常量和变量
分别以const 和var表示
NaN
NaN是个非数字的值，即使我们以为原本的数据可能是个数字，但是实际上不是。
现在我们有这样一个网页：
在这里插入图片描述
我们需要输入前4项内容，并且后面3项会实时给出计算结果：

如何实时改变呢？
使用onchange属性。

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

由于在<input>里输入的是text数据，所以当在<script>处理时，需要先把text数据变为number。下面看下是否处理的对比：

 const DONUTPRICE = 0.50;
 var numCakeDonuts = document.getElementById("cakedonuts").value;
 var numGlazedDonuts = document.getElementById("glazeddonuts").value;
 var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;

 	   const DONUTPRICE = 0.50;
        var numCakeDonuts = parseInt(document.getElementById("cakedonuts").value);
        var numGlazedDonuts = parseInt(document.getElementById("glazeddonuts").value);
        if (isNaN(numCakeDonuts))
          numCakeDonuts = 0;
        if (isNaN(numGlazedDonuts))
          numGlazedDonuts = 0;
        var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;

前面一种，会导致这样的情况：在运行到var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;时，括号内的加号是这样运算的：
”1“+“2”=”12“
后面一种情况才是真正的相加：
parseInt(“1”)+parseInt(“2”)=3
** parseInt()和parseFloat()**函数不保证转换一定成功，比如转换：
parseFloat("$1.32")=NaN
所以，javascript由于只采用了var const，所以一定要注意是字符串还是数字的问题。

用getElementById()捕捉表单数据

为了检查表单数据是否合法，以javascript取得网页元素的关键，就是HTML标签里的id属性。
我们通过id获取到某个元素后，然后透过域的value属性访问数据。
判断是否为空：

    function placeOrder(form) {
       if (document.getElementById("name").value == "")
         alert("I'm sorry but you must provide your name before submitting an order.");
       else
         // Submit the order to the server
         form.submit();
     }

接着说甜甜圈订单，如果用户输入是12 dozen(打)甜甜圈，如何处理呢？当然你可以不理会非法输入，但是如何处理了dozen这个单位，你的甜甜圈系统会更受欢迎。
我们使用这个函数处理：

  function parseDonuts(donutString) {
        numDonuts = parseInt(donutString);//获取3 dozen里的数值3，parseInt会丢弃"dozen"
        if (donutString.indexOf("dozen") != -1)//如果含有dozen则乘以12
          numDonuts *= 12;
        return numDonuts;
      }