【JavaScript】8_代码块与if_else

简介: # 流程控制## 1、代码块使用 {} 来创建代码块,代码块可以用来对代码进行分组, 同一个代码中的代码,就是同一组代码,一个代码块中的代码要么都执行要么都不执行let 和 var \- 在JS中,使用let声明的变量具有块作用域​ 在代码块中声明的变量无法在代码块的外部访问 \- 使用var声明的变量,不具有块作用域``` { var a = 10 }```## 输出方式:```console.log(`需要存${year}年,最终的钱数为${money}元!`)```##

流程控制

1、代码块

使用 {} 来创建代码块,代码块可以用来对代码进行分组,

同一个代码中的代码,就是同一组代码,一个代码块中的代码要么都执行要么都不执行

let 和 var

- 在JS中,使用let声明的变量具有块作用域

​ 在代码块中声明的变量无法在代码块的外部访问

- 使用var声明的变量,不具有块作用域

        {
            var a = 10
        }

输出方式:

console.log(`需要存${year}年,最终的钱数为${money}元!`)

2、if语句

流程控制语句可以用来改变程序执行的顺序

1. 条件判断语句
    2. 条件分支语句
    3. 循环语句

if语句

- 语法:
    if(条件表达式){
        语句...
    }
    

    - 执行流程
        if语句在执行会先对if后的条件表达式进行求值判断,
            如果结果为true,则执行if后的语句
            如果为false则不执行

    if语句只会控制紧随其后其后的那一行代码,如果希望可以控制多行代码,可以使用{}将语句扩起来
        最佳实践:即使if后只有1行代码,我们也应该编写代码块,这样结构会更加的清晰

    如果if后的添加表达式不是布尔值,会转换为布尔值然后再运算
<script>
        if(false)
            alert('哈哈哈')

        let a = 10
        if(a > 10){
            alert('a比10大')
        }
            
        // if(100){
        //     alert('你猜我执行吗?')
        // }

        if(a == 10){
            alert('a的值是10!')
        }
</script>

3、if-else

if-else语句

  • 语法:
    if(条件表达式){

    语句...

    }else{

    语句...

    }

  • 执行流程:
    if-else执行时,先对条件表达式进行求值判断,

    如果结果为true 则执行if后的语句
    如果结果为false 则执行else后的语句
    

if-else if-else语句:

  • 语法:
    if(条件表达式){

    语句...

    }else if(条件表达式){

    语句...

    }else if(条件表达式){

    语句...

    }else if(条件表达式){

    语句...

    }else{

    语句...

    }

  • 执行流程:
    if-else if-else语句,会自上向下依次对if后的条件表达式进行求值判断,

    如果条件表达式结果为true,则执行当前if后的语句,执行完毕语句结束
    如果条件表达式结果为false,则继续向下判断,直到找到true为止
    如果所有的条件表达式都是false,则执行else后的语句
    

    注意:

    if-else if-else语句中只会有一个代码块被执行,
        一旦有执行的代码块,下边的条件都不会在继续判断了
        所以一定要注意,条件的编写顺序
    
    
    

prompt() 可以用来获取用户输入的内容

它会将用户输入的内容以字符串的形式返回,可以通过变量来接收

        // prompt() 可以用来获取用户输入的内容
        // 它会将用户输入的内容以字符串的形式返回,可以通过变量来接收
        let num = +prompt("请输入一个整数:")
        alert(typeof num)
<script>
    if(age >= 18 && age < 30){
        alert('你已经成年了!')
    }else if(age >= 30 && age < 60){
        alert('你已经步入中年了!')
    }else if(age >= 60){
        alert('你已经退休了!')
    }
</script>

练习1

        <script>
            /* 
                - 练习1:
                    编写一个程序,获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。
            */
            // 编写一个程序,获取一个用户输入的整数
            // let num = +prompt("请输入一个整数")
            let num = parseInt(prompt("请输入一个整数"))

            // 验证一下,用户的输入是否合法,只有是有效数字时,我们才检查它是否是偶数
            // 我们不能使用==或===来检查一个值是否是NaN
            // 可以使用isNaN()函数来检查一个值是否是NaN
            if (isNaN(num)) {
                alert("你的输入有问题,请输入整数!")
            } else {
                // 然后通过程序显示这个数是奇数还是偶数。
                if (num % 2 === 0) {
                    alert(`${num} 是偶数!`)
                } else {
                    alert(`${num} 是奇数!`)
                }
            }
        </script>

练习2

<script>
            /* 
                - 练习1:
                    编写一个程序,获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。
            */
            // 编写一个程序,获取一个用户输入的整数
            // let num = +prompt("请输入一个整数")
            let num = parseInt(prompt("请输入一个整数"))

            // 验证一下,用户的输入是否合法,只有是有效数字时,我们才检查它是否是偶数
            // 我们不能使用==或===来检查一个值是否是NaN
            // 可以使用isNaN()函数来检查一个值是否是NaN
            if (isNaN(num) || num % 1 !== 0) {
                alert("你的输入有问题,请输入整数!")
            } else {
                // 然后通过程序显示这个数是奇数还是偶数。
                if (num % 2 === 0) {
                    alert(`${num} 是偶数!`)
                } else {
                    alert(`${num} 是奇数!`)
                }
            }
</script>

练习3

    <script>
        /* 
            - 练习3:
            大家都知道,男大当婚,女大当嫁。那么女方家长要嫁女儿,当然要提出一定的条件:
                高:180cm以上; 富:1000万以上; 帅:500以上;
                如果这三个条件同时满足,则:'我一定要嫁给他'
                如果三个条件有为真的情况,则:'嫁吧,比上不足,比下有余。'
                如果三个条件都不满足,则:'不嫁!'
        */

        // 获取男生的数据(身高、财富、颜值)
        let height = +prompt('请输入你的身高(厘米):')
        let money = +prompt('请输入你的身价(万):')
        let face = +prompt('请输入你的颜值(像素):')
        
        // height 180↑  money 1000↑ face 500↑
        if(height>180 && money>1000 && face>500){
            // 如果这三个条件同时满足,则:'我一定要嫁给他'
            alert('我一定要嫁给他!')
        }else if(height>180 || money>1000 || face>500){
            // 如果三个条件有为真的情况,则:'嫁吧,比上不足,比下有余。'
            alert('嫁吧,比上不足,比下有余。')
        }else{
            // 如果三个条件都不满足,则:'不嫁!'
            alert('不嫁!')
        }
    </script>
相关文章
|
5月前
|
JavaScript 前端开发
js函数:函数是JS的基本组成单元,用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
js函数:函数是JS的基本组成单元,用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
56 1
|
前端开发
前端学习笔记202305学习笔记第三十一天-js-什么是代码块1
前端学习笔记202305学习笔记第三十一天-js-什么是代码块1
45 0
|
JavaScript
js基础笔记学习34-代码块
js基础笔记学习34-代码块
54 0
js基础笔记学习34-代码块
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
76 2
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
67 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
59 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
75 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
77 3