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

在这里插入图片描述

相关文章
|
9月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
464 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
5月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
7月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
205 1
|
9月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
562 24
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
271 32
|
11月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
11月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
11月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章