美文网首页
05.JavaScript语句

05.JavaScript语句

作者: Lv_0 | 来源:发表于2017-11-13 22:54 被阅读0次
    • 条件语句

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h1>结果:</h1>
            <script>
                //if语句
                if(2 >= 1){//只有当括号内的条件为true时,才会执行
                    document.write("条件结果:"+(2 >= 1));
                }
                //if...else...语句
                if(false){
                    document.write("条件结果:"+true);
                }else{//当括号内条件结果为false时执行
                    document.write("<br />"+"条件结果:"+false);
                }
                //if...else if...else...语句
                if(0){//满足条件1时执行,执行条件1后不再执行后续
                    document.write("<br />"+"条件1结果:"+true);
                }else if(1){//不满足条件1时,判断条件2,条件2满足时执行
                    document.write("<br />"+"条件2结果:"+true);
                }else{//条件1,条件2,条件...均不满足时执行else语句
                    document.write("<br />"+"所有条件结果:"+false);
                }           
            </script>
        </body>
    </html>
    
    运行图片

    • switch语句

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h1>结果:</h1>
            <script>
                //switch...case...数值判断
                var n = 1;
                switch(n){
                    case 0 : //当n的值和case后面的值相同时执行
                        n = "case0";
                        break;//执行完成后,跳出此方法
                        
                    case 1 :
                        n = "case1";
                        break;
                        
                    case 2 :
                        n = "case2";
                        break;
                        
                    default ://当case的值均不满足的情况下执行
                        n = "default";
                }
                document.write(n);
                
                //switch...case...
                var m = "m";
                switch(m){
                    case "one" :
                        m = "one";
                        break;
                        
                    case "two" :
                        m = "two";
                        break;
                        
                    default :
                        m = "default";
                }
                document.write("<br />"+m);
            </script>
        </body>
    </html>
    
    运行结果

    • for循环

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h2>结果:</h2>
            <script>
                var nums = [1,2,3,4];//数组
                var numDict = {num01:"one",num02:"two",num03:"three"};//对象
                
                //数组的遍历
                //for(1;2;3){};
                for(var i=0;i<nums.length;i++){
                    //1.定义条件变量;2.判断条件,满足执行{}内容;3.{}执行结束后执行
                    document.write(nums[i]+".");
                }
                
                document.write("<br />");
            
                for(var i=0,len=nums.length;i<len;i++){//1中定义多个变量
                    document.write(nums[i]+",");
                }
                            
                document.write("<br />");
    
                var i=0;
                for(;i<nums.length;i++){//省略条件1,用全局变量作为判断条件
                    document.write(nums[i]+";");
                }
                
                document.write("<br />");
                
                for(;;i++){//当省略条件判断时,为避免发生死循环,必须在执行方法中,有跳出for循环的操作
                    document.write(i+":");
                    if(i>10){
                        break;//跳出当前循环,避免形成死循环
                    }
                }
                
                document.write("<br />");
    
                //for in 循环
                //数组的for in
                for(x in nums){//在数组中,循环遍历其下标
                    document.write(x+":"+nums[x]+"<br />");//x即数组的下标
                }
                
                //对象的for in
                for(x in numDict){//在对象中,循环遍历对象的属性名
                    document.write(x+":"+numDict[x]+"<br />");//x即对象的属性名
                }
                
                //嵌套for循环
                function makeStar(){//定义无参方法
                    var n = document.getElementById("numStar").value;//获取输入框输入值
                    var star="";//定义空字符串
                    
                    if(n==""||n==undefined||isNaN(n)){//判断输入框输入值
                        alert("请输入数字!");
                    }
                    
                    for(var i=1;i<=n;i++){//遍历没一行,从第一行开始到第n行
                        for(var j=1;j<=n-i;j++){//每一行的前半部分^个数,首先打印中间行以前的^数
                            star+="^";//尾添加到字符串star中
                        }
                        
                        for(var j=1;j<=2*i-1;j++){//每一行的+个数,打印中间行的+个数
                            star+="+";
                        }
                        
                        for(var j=1;j<=n-i;j++){//打印中间行以后的^个数,形成对称
                            star+="^";
                        }
                        
                    star+="<br />";//每一行的^和+和^个数打印结束,尾添加换行,开始下一行的添加
                    }
                    
                    document.getElementById("displayStar").innerHTML=star;//因写入文件流会清空之前的文件流,故采用此方式
                }
            </script>
            
            <input type="text" id="numStar /">
            <button type="button" onclick="makeStar()">n行星星</button>
            <p id="displayStar"></p>
        </body>
    </html>
    
    运行图片

    • while循环

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h2>结果:</h2>
            <script>
                var nums = [1,2,3,4];//数组
                
                //while循环
                var i=0;
                while(i<5){//循环条件,当条件为true时,执行;注意避免条件一直为ture,形成死循环
                    document.write(i+"*");
                    i++;
                }
                
                document.write("<br />");
                
                //do...while...循环
                var j=0;
                do{
                    document.write(j+"^");
                    j++;
                }while(j<0)//条件在后面,至少会执行一次{}
                
                document.write("<br />");
    
                //遍历数组
                var k=0;
                while(nums[k]){//从数组第一个元素到最后一个元素
                    document.write("nums["+k+"]:"+nums[k]+"<br />");
                    k++;
                }
            </script>       
        </body>
    </html>
    
    示例图片

    • break&continue

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h2>结果:</h2>
            <script>
                cars=["BMW","Volvo","Saab","Ford"];
                
                //break
                for(var i=0;i<4;i++){//for循环
                    if(i==2){//判断条件
                        break;//跳出整个循环,不再执行后面的代码已经循环
                    }
                    document.write("cars["+i+"]:"+cars[i]+"<br />");
                }
                
                document.write("<hr />");
                
                //continue
                for(var i=0;i<4;i++){
                    if(i==2){
                        continue;//跳出当前循环,此次不再执行后面的代码,会继续执行下一个循环
                    }
                    document.write("cars["+i+"]:"+cars[i]+"<br />");
                }
            </script>       
        </body>
    </html>
    
    运行图片

    • 标签语句

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <p id="continueResult"></p>
            <p id="breakResult"></p>
            <p id="go_on"></p>
            <script type="text/javascript">
                var x = 0;
                //定义标签
                table01:
                for(var i=0;i<5;i++){
                    for(var j=0;j<2;j++){
                        x++;
                        if(i==1){
                            document.getElementById("continueResult").innerHTML=x;
                            continue table01;//跳到标签处,若循环未结束,会继续执行下一个循环
                        }
                        //因continue语句不结束循环,故此条件会被执行
                        if(i==2){
                            document.getElementById("breakResult").innerHTML=x;
                            break table01;//跳到标签处,且不再执行循环
                        }
                        //因break语句结束循环,故此条件不会被执行
                        if(i==3){
                            document.getElementById("go_on").innerHTML="Go On ?";
                        }
                    }
                }
            </script>
        </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:05.JavaScript语句

          本文链接:https://www.haomeiwen.com/subject/rpoymxtx.html