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