前言#
这是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);
}