js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明

时间:2022-11-06 07:16:28

1、流程控制语句

1.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

           流程控制语句:
                     JS中的程序是从上到下一行一行执行的

                    语法1:
                       if(条件表达式){
                           语句
                       }
                       成功执行括号的内容,一条语句可以省略括号

                    语法2:
                       if(条件表达式){
                           语句
                       }else{
                           语句
                       }


                    语法3:
                         if(条件表达式){
                             语句
                         }else if(条件表达式){
                             语句
                         }else if(条件表达式){
                             语句
                         }else{
                             语句
                         }

    */
                  
            var a = 1, b = 2;
            if(a < b){
                      console.log("成立");
            }

            if(a > b){
                console.log("1111");
            }else{
                console.log("22222");
            }

            

    </script>
</head>

<body>



</body>

</html>

1.2 测试结果

js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明

2、弹窗提示输入内容

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>弹窗</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

              prompt 可以弹出一个提示框,该提示框中会带有一个文本框
                      用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,
                      该字符串作为弹窗的提示内容。

                      用户输入的内容将会作为函数的返回值 返回,可以定义一个变量接收该内容

    */

                          var age = prompt("请输入你的年龄:")
                          console.log(age);
    </script>
</head>

<body>



</body>

</html>

2.2 测试结果

js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明

3、条件分支语句

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>条件分支语句</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*
           
                 条件分支语句也叫switch语句
                         语法
                            switch(条件表达式){
                                case : 表达式:
                                        语句...
                                        break;
                                case : 表达式:
                                        语句...
                                    break;
                                case : 表达式:
                                        语句...
                                    break;
                                default:
                                    语句...
                                    break;
                            }

    */

                          var num = prompt("请输入整数数字")
                          //从弹窗输入的是字符串,需要强制类型转换为num,switch中的判断是 === 比较类型和内容
                          num = Number(num)
                          switch(num){
                              case 1:
                                  console.log("1");
                                  break;
                                    
                              case 2:
                                  console.log("2");
                                  break;
  
                              default:                                
                                  console.log("默认值");
                                  break;
                          }

    </script>
</head>

<body>



</body>

</html>

3.2 测试结果

js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明

4、while和 do...while循环

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>while循环语句</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*

                        循环语句:
                            通过循环语句可以反复的执行一段代码多次

                            语法:
                                while(表达式){
                                    语句...
                                }

                           执行流程: 表达式成立,执行语句

                            do...while() 循环
                               
                               语法:
                                   do{
                                       语句
                                   }while(表达式)

                            执行流程: 先执行一遍循环体,然后条件判断

    */
                            var n = 1 ;
                            //条件表达式写死为true的循环,死循环。可以使用break终止循环
                    /*
                           while(true){
                               alert(n++);
                               break;
                           }

                    */

                    while(n < 6){
                        document.write(n++ +"<br>")

                    }
    </script>
</head>

<body>



</body>

</html>

4.2 测试结果

5、for循环

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>for循环</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*


                          for语句,也是一个循环语句,也称为for循环

                             语法 :
                                  for(初始化表达式;条件表达式; 更新表达式){
                                      语句...
                                  }
                               

    */
                            
                            for(var i =0 ; i < 10; i++){
                                document.write(i+"<br>")

                            }


    </script>
</head>

<body>



</body>

</html>

5.2 测试结果

js中的流程控制语句、条件分支语句、for循环、while循环基础知识详解+详细代码说明