task_13
前言#
这是js阶段的第一题，感觉不是很难，自己写了一个简单的，但是之后又看了一下得分最高的一个团队的代码，有值得学习的地方，自己写的过于简单，很多东西都没有考虑到。即使一个简单的题目，也有不同的解答方法。对我而言，并不在于是否求解，最重要的是思考和实践的过程，以及各种不同的解决方案，**在实践中遇到问题 进而引发思考 **从而学到更多。下面引入代码，进行分析
代码#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
<link href="http://csdnimg.cn/www/images/favicon.ico" rel="SHORTCUT ICON">
</head>
<body>
<label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
<script type="text/javascript">
(function() {
/*自己封装函数*/
var $ = function (id) {
return document.getElementById(id);
}
var handler = function (){
var num = parseInt($("aqi-input").value);
if((!isNaN(num)) && (num>=0) && (num<=1000)){
$("aqi-display").innerHTML = num;
} else {
alert($("aqi-input").value + " 不是有效的AQI数值，请重新输入0-1000的有效整数！")
}
}
$("button").onclick = function(){
handler();
}
$("aqi-input").onkeyup = function (event) {
if(event.keyCode === 13){
handler();
}
}
})();
</script>
</body>
</html>
知识点：
parseInt()#
parseInt()将字符串(String)类型转为整数类型。
方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回NaN。
parseInt(null) 和 parseFload(undefined) 返回都是 NaN
parseInt(string, [radix])
string:必选参数，要被转换的字符串
radix:可选，数字的基数。取值范围在2~36。
返回值为Number类型
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
var str = "12.354";
var num = parseInt( str );
document.writeln( num ); // 12
str = "12";
num = parseInt( str );
document.writeln( num ); // 12
str = "23.52abc";
num = parseInt( str );
document.writeln( num ); // 23
str = "ab12张三";
num = parseInt( str );
document.writeln( num ); // NaN
// 十六进制
str = "0xff";
num = parseInt( str );
document.writeln( num ); // 255
// 八进制
str = "017";
num = parseInt( str );
document.writeln( num ); // 17
// 虽然是以0开头，但是八进制没有数字8，则采用十进制
str = "078";
num = parseInt( str );
document.writeln( num ); // 78
str = "111";
// 将该字符串视作二进制
num = parseInt( str, 2 );
document.writeln( num ); // 7
Number()#
Number() 函数把对象(Object)的值转换为数字。
Number(object)
Number返回的是数字，其参数是对象
如果对象的值无法转换为数字，那么 Number() 函数会返回 NaN。
var testStr1 = new String("5,000"); //字符串对象
alert("Number(testStr1) " + Number(testStr1)); //返回NaN
在var testStr1 = new String("5,000"); 中，字符串中含有千位符，因此造成无法转换。
含有千位符的字符串，不能直接转换，要先去掉千位符，再进行转换。
通常使用此函数检测来自parseInt()和parseFloat()函数的返回值。
isNaN()函数#
isNaN( number )
注意：如果参数number不是Number类型，则isNaN()函数会将其强制转换为Number类型再进行判断。大多数其他类型的值无法强制转换为Number类型，则其转换结果为NaN，即isNaN()函数返回true。
当变量是空串时，isNaN()的返回值是false，但空串却不是数据。
这是因为isNaN()把空串或空格作0处理的。
isNaN(NaN); // true
isNaN(undefined); // true
isNaN({}); // true
isNaN('') /isNaN(null) //convert to 0 false
isNaN(true) //convert to 1 false
isNaN(null); // false
isNaN(1); // false
isNaN("1"); // fales "1" 被转化为数字 1，因此返回false
isNaN("SegmentFault"); // true "SegmentFault" 被转化成 NaN
JavaScript语言居然有两个表示"无"的值：undefined和null。
相似性：
undefined和null在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等。
if (!undefined)
console.log('undefined is false');
// undefined is false
if (!null)
console.log('null is false');
// null is false
undefined == null
// true
null 表示一个值被定义了，定义为“空值”；
undefined 表示根本被定义了但是没有被赋值
var x;
console(x);//undefined,未赋值
console(y);//报错 y is not defined，未定义
根据C语言的传统，null被设计成可以自动转为0。
Number(null)
// 0
5 + null
// 5
最初设计：
Number(undefined)
// NaN
5 + undefined
// NaN
null是一个表示"无"的对象，转为数值时为0；
典型用法
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)
// null
undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined == null
// true
典型用法，
(1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
原文：http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
trim() 函数#
定义：
The trim() method removes whitespace from both sides of a string.
string.trim();
http://images2015.cnblogs.com/blog/874882/201611/874882-20161115085050701-83027958.png
IE9以上才支持！！！
当浏览器不支持该函数时，构造如下表达式
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}
function myFunction() {
var str = myTrim(" Hello World! ");
alert(str);
}
