05.JavaScript语句

  • 条件语句

<!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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 作者的序言 朋友们,弃疗系列4出来啦,作者还并没有放弃,感觉自己萌萌哒,233。 语句 js程序其实就是一系列可执...
    zhaolion阅读 1,740评论 0 8
  • 表达式在 JavaScript 中是短语,那么语句就是整句命令。表达式用来计算出一个值,语句用来执行以使某件事发生...
    劼哥stone阅读 485评论 0 3
  • Swift 提供了类似 C 语言的流程控制结构,包括可以多次执行任务的for和while循环,基于特定条件选择执行...
    穷人家的孩纸阅读 690评论 1 1
  • 2017年5月19日 晴 昨晚一无所获,有些不甘心,听杰哥说兴隆镇赶集时有人售卖土鸡,前天杰哥媳妇才买了几个,...
    东尼日记阅读 145评论 0 0
  • 时常担心老去的问题于是担心凋谢的季节来到担心花自飘零水自流然后夜晚缓缓降落就淹没在夜色中缄默着呼吸沉重灵魂却向上升...
    老实人艾伦阅读 176评论 0 1