您的位置：首页 > Web前端 > JavaScript

Head First javaScript_#2数据存储

2017-07-20 16:40 239 查看



素材下载链接在这里。

素材解释：

       测试数据：

                        Alan

                         15

                          4 dozen

                          10

                           $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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航