• 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);
    }
    

    参考: http://www.w3schools.com/jsref/jsref_trim_string.asp

  • 相关阅读:
    批量修改Linux文件夹下所有文件大小写
    如何使用malloc申请一个二位数组
    CenOS 配置C/C++语言
    C++类定义,.h文件与.cpp文件之间的关系以及条件编译
    Error while building/deploying project...When executing step "qmake"——Qt Creator快速排错
    Hello World!
    HDU1262:寻找素数对
    NOIP1998复赛:2的幂次方表示
    HDU1002 : A + B Problem II
    Open Judge2748:全排列
  • 原文地址:https://www.cnblogs.com/godot-blog/p/6544792.html
Copyright © 2020-2023  润新知