zoukankan      html  css  js  c++  java
  • javascript基础知识

    一、基本的数据类型

      基本的数据类型有五类:1、string类型  2、boolean类型  3、number类型  4、undefined类型  5、null类型

    二、复杂的数据类型  ——对象(三个子类)

        1、function  函数    2、Array  数组    3、object  对象

    三、typeof与数据类型

      1、typeof是一元运算符

      2、两种写法:typeof 数据,typeof(数据)

      3、返回的是全小写的字符串。可以用来检验没有申明的变量,返回undefined且不报错

      对应关系:

        string:"string"

        boolean:"boolean"

        number:"number"

        undefined:"undefined"

         函数:"function"

        其余都为"object"(null、Array、狭义的object)

    四、显式数据类型转换

      1、Boolean(XX)

          5个会转为false的值:0,null,undefined,NAN,空字符串

      2、数值

            number(XX): true ->1;空字符串、false、null ->0;undefined ->NAN;对象先toString

            parseInt(XX):第二个参数可选(进制)

            parseFloat(XX):只解析十进制

       3、字符串

           XX.toString():第一个参数可选,表示进制。undefined、null无法用此方法

           string():在toString的基础上加上null->"null",undefined->"undefined"

    五、隐式数据类型转换

            一元运算符、逻辑运算符、数学运算符、比较运算符

    六、变量

        1、命名规则:由数字、字母、下划线、$符号组成;不允许数字开头、关键字、保留字;大小写敏感、驼峰命名法更清楚表达语义

    七、基本语句

        1、if(){}

        2、switch(){case "banana":...break;}

        3、return只能在函数内

        4、循环语句: 

             for、for-in、while、do-while、label(用于跳转程序的任意位置)、break跳出代码块或者循环、continue终止本轮循环并进入下一轮

    八、练习题

    1、

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>0529</title>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
        <style>
            *{
                padding:0;margin:0;
            }
            .container{
                //max-width: 800px;
                margin:20px auto;
                padding:0 20px;
                //background:red;
            }
            .data-container{
                //margin:0 100px;
                text-align: center;
            }
            textarea{
                width:100%;
            }
            input{
                width:100%;
            }
            .btn{
                display:block;
                text-align:center;
                background:#e5e5e5;
                color:#000;
                cursor: pointer;
            }
    
        </style>
    </head>
    <body>
        <div class="container" >
            <div class="data-container">
                <p>请输入数组或者默认数组</p>
                <div><textarea placeholder="['100px','abc'-6,[],-98765,34,-2,0,'300', ,function(){alert(1);},null,document,[],true,'200px'-30,'23.45元',5,Number('abc'),function(){alert(3);},'xyz'-90]"  class="curArray" rows="5" type="text"></textarea></div>
                <div><a class="btn" onclick="searchResult()">查看结果</a></div>
                <div><label>数组中包含的数字</label></div>
                <div><input class="numbers" name="numbers"/></div>
                <div><label>可以转换成数字的值</label></div>
                <div><input type="text" name="hasNumber" class="hasNumber"/></div>
                <div><label>转换后的最大值</label></div>
                <div><input class="max" name="max"/></div>
                <div><label>数组中NAN的位置</label></div>
                <div><input type="text" class="nanPosition" name="nanPosition"/></div>
            </div>
        </div>
    
    </body>
    </html>
    
    <script type="text/javascript">
        function searchResult(){
            console.log(typeof(123));
            console.log($(".curArray").val());
            var curArray=$(".curArray").val()?$(".curArray").val():['100px','abc'-6,[],-98765,34,-2,0,'300', ,function(){alert(1);},null,document,[],true,'200px'-30,'23.45元',5,Number('abc'),function(){alert(3);},'xyz'-90];
            var arr=new Array;
            var arr1=new Array;
            var arr2=new Array;
    
            arr=curArray;
            for(var i=0;i<arr.length;i++){
                if(typeof(arr[i])==="number"&&(!isNaN(arr[i]))){
                    arr1.push(arr[i]);
                }    
            }
            console.log(arr1);
            $(".numbers").val(arr1.join(","));
    
            //可以转化为数字的值
            console.log(arr);
            for(var j=0;j<arr.length;j++){
                if(parseFloat(arr[j]) || (parseFloat(arr[j])===0) ){
                    arr2.push(arr[j]);
                }    
            }
            console.log(arr2);
            $(".hasNumber").val(arr2.join(","));
    
            //转化后的最大值
            var max;
            for(var i=0;i<arr2.length;i++){
                if(max>arr2[i]){
                    max=max;
                }else{
                    max=arr2[i];
                }
            }
            $(".max").val(max);
    
            //数组中NaN的位置
            var NaNPos=new Array;
            for(var i=0;i<arr.length;i++){
                if(typeof(arr[i])==="number" && (isNaN(arr[i])) ){
                    NaNPos.push(i);
                }
            }
            $(".nanPosition").val(NaNPos.join(","));
        }
    
    </script>

     

    <!DOCTYPE html>
    <html>
    <head>
        <title>学生分档</title>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <p>计算的结果为:<span class="result"></span></p>
        </div>
        <script type="text/javascript">
            function getGrade(x){
                var grade;
               if((x>=0)&&(x<=10)){
                   grade="10等生";
               }else if((x>=11)&&(x<=20)){
                       grade="9等生";
               }else if((x>=21)&&(x<=30)){
                       grade="8等生";
               }else if((x>=31)&&(x<=40)){
                       grade="7等生";
               }else if((x>=41)&&(x<=50)){
                       grade="6等生";
               }else if((x>=51)&&(x<=60)){
                       grade="5等生";
               }else if((x>=61)&&(x<=70)){
                       grade="4等生";
               }else if((x>=71)&&(x<=80)){
                       grade="3等生";
               }else if((x>=81)&&(x<=90)){
                       grade="2等生";
               }else if((x>=91)&&(x<=100)){
                       grade="1等生";
               }
               return grade;
            }
    
            function getGrade2(score){
                var grade;
                switch(true){
                    case score>=0&&score<10:
                       // alert('不及格');
                        grade="10等生"
                        break;
                    case score>11&&score<=20:
                        //alert('及格');
                        grade="9等生"
                        break;
                    case score>21&&score<=30:
                        //alert('良好');
                        grade="8等生"
                        break
                    case score>31&&score<=40:
                        //alert('优秀');
                        grade="7等生"
                        break;    
                    case score>41&&score<=50:
                        //alert('优秀');
                        grade="6等生"
                        break;   
                    case score>41&&score<=50:
                        //alert('优秀');
                        grade="5等生"
                        break;  
                    case score>51&&score<=60:
                        //alert('优秀');
                        grade="4等生"
                        break;  
                    case score>61&&score<=70:
                        //alert('优秀');
                        grade="3等生"
                        break;   
                    case score>71&&score<=80:
                        //alert('优秀');
                        grade="2等生"
                        break;  
                    case score>81&&score<=90:
                        //alert('优秀');
                        grade="1等生"
                        break;                      
                    default:
                        grade='输入不合法';
                }
                return grade;
            }        
            $("body").click(function(){
                //getGrade2(cursurelt);
                if(cursurelt>=0){
                    //$(".result").html(getGrade(cursurelt));
                    console.log(getGrade2(cursurelt));
                    $(".result").html(getGrade2(cursurelt));
                }
            });
            
        </script>
    </body>
    </html>

        

  • 相关阅读:
    “==” 和 Equals()
    数据持久层的设计
    Jquery Validation :多个按钮都需要做提交验证的解决方案
    留住异常的堆栈信息【throw ex 和 throw 的区别】
    [转] eval() may be evil
    框架结构和脚本跨域的问题
    ue4 材质MipLevels
    spring+json+jquery
    a different object with the same identifier value was already associated with the session错误
    kali 更新国内apt源 (转)
  • 原文地址:https://www.cnblogs.com/karila/p/6919338.html
Copyright © 2011-2022 走看看