JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环

简介: 这篇文章讲解了JavaScript中的流程控制语句,包括基本的if条件判断、弹窗提示输入、switch条件分支语句、while和do...while循环以及for循环的使用和示例。

文章目录

  • 1、流程控制语句
    • 1.1 代码
    • 1.2 测试结果
  • 2、弹窗提示输入内容
    • 2.1 代码
    • 2.2 测试结果
  • 3、条件分支语句
    • 3.1 代码
    • 3.2 测试结果
  • 4、while和 do...while循环
    • 4.1 代码
    • 4.2 测试结果
  • 5、for循环
    • 5.1 代码
    • 5.2 测试结果

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 测试结果

在这里插入图片描述

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 测试结果

在这里插入图片描述

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 测试结果

在这里插入图片描述
在这里插入图片描述

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 测试结果

在这里插入图片描述

相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
25天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
27 2
|
11天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
2月前
|
SQL 前端开发 JavaScript
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用,并将其部署到生产环境。文章涵盖了准备阶段,包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节,包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后,作者总结了部署经验,并希望对读者有所帮助。
157 11
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
25天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
42 0
|
2月前
|
前端开发 JavaScript API
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(二)
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(二)
|
2月前
|
前端开发 JavaScript API
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具