Head First javaScript_#2数据存储

来源：互联网发布：2017年php好找工作吗编辑：程序博客网时间：2024/06/05 16:42

素材下载链接在这里。

素材解释：

测试数据：

Alan

4 dozen

$31.50

$2.91

$34.41

这是一个网上甜甜圈订单，# of cake donuts;和# of glazed donuts:是你要购买的两种蛋糕数量

内部定价一个蛋糕是$0.5 还有对应的税收0.092好像是。测试者需要自行阅读代码了。

下面三个变量输出的是总费用。Minutes ‘til pickup 类似配送时间。

程序有改善：在当用户名为空或者配送时间非数字时会给出提示。

脚本语言分析的数据类型：

                                    Boolean，text，number
定义常量，变量
变量 var
常量 const

toFix()函数把数值四舍五入到小数点后两位.
parseInt()与parseFloat()；文本转换成文字

JavaScript不是那种能够明确指定（变量或者常量）类型的程序语言。设置js数据的值时，就已经自动暗示类型。
虽然js会自动处理数据类型，因为如果有个数字存储为文本（text）类型，但你想把这个数字用于数字运算，这时就需要把文本转换成数字类型。如果是相反方向的转换，例如在alert框里列出数字，数据类型也同样要先转换为文本。js将自动执行数值->文字的转换，但转换结果可能跟你的预期有点差异。

常量变量名称为标识符：
标识符至少需要一个字符长
标识符的第一个字符需要为字母（letter），下划线（_）或美元符号（$）.
第一个字符后可接字母，下划线，美元符号或者数字
空格与特殊字符（下划线和美元符号除外）不可出现在标识符里。

常量需要初始化，如果运算了为进行初始化的常量时，会出现NAN(not a number)

运算时候直接用+符号也可能出现问题，js有可能把其看成是字符串相连
我们需要用到parseInt()与parseFloat()；文本转换成文字。

要点：
*不成文规定常量名称采用全部大写，变量名称采用小写驼峰型始终良好的编程习惯
*创建变量是必定予以初始化，只要可能，最好也做变量初始化
*变量未初始化时，它将维持在未定义的状态，直到我们指派任何值过去。
*NAN代表非数字，也用于指出某段数据不是数字（当它期待中应该是数字时）
*字符串相连与算术的加法非常不同，虽然都使用了加号（+）.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#frame{
   margin:0 auto;
   width:700px;
   height:400px;
   background-color:#F69;
   text-align:right;
}
#frame img{
   float:left;
}
.field {
   margin-top:12px;
   margin-right:45px;
}
</style>
<script type="text/jscript">
function updateOrder(){
   const TAXRATE = 0.0925;
   const DONUTYPICE = 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) * DONUTYPICE;
       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 placeOrder(){
   if(document.getElementById("name").value == "")
      alert("请输入name");
   else if(document.getElementById("pickup").value =="" ||isNaN(document.getElementById("pickup").value))
   alert("请输入接收时间");
   else
      form.submint();

}
function parseDonuts(donutString){
      numDonuts = parseInt(donutString);
      if(donutString.indexOf("dozen") != -1)
          numDonuts *= 12;
       return numDonuts;
}
</script>
</head>

<body>
<div id="frame">
<h1 style="text-align:center">温馨小铺</h1>
     <img src="images/bg.png" height="300px" width="300px" />
     <form name="orderform" action="donuts.php" method="post">

      <div class="field">
       name:<input type="text" id="name" name="name" value="" onChange="updateOrder();" />
     </div>
     <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>
       <div class="field">
      Minutes 'til pickup:<input type="text" id="pickup" name="pickup" value="" onChange="updateOrder();"/>
     </div>
       <div class="field">
       Subtotal:<input type="text" id="subtotal" name="subtotal" value="" onChange="updateOrder();"/>
     </div>
       <div class="field">
       Tax:<input type="text" id="tax" name="tax" value="" onChange="updateOrder();"/>
     </div>
      <div class="field">
       Total:<input type="text" id="total" name="total" value="" onChange="updateOrder();"/>
     </div>
     <div class="field">
     <input type="button" value="Place Order" onClick="placeOrder(this.form);" />
     </div>
     </form>
</div>
</body>
</html>

阅读全文

0 0