1、表达式和语句

【表达式】： 表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

【语句】： js 整句或命令，js 语句是以分号结束（可以省略）

两者区别：

表达式计算出一个值，但语句用来自行以使某件事发生
表达式 3 + 4
语句 alert() 弹出对话框

2、分支语句

if分支语句

单分支

【语法】

if (条件是一个布尔值或布尔表达式){
        满足条件的代码
}

【解释】

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

【案例】

    <script>
        let score = prompt('请输入分数？');
        if (score > 60) {
            alert("你及格了！")
        }
    </script>

双分支

【语法】

if (条件是一个布尔值或布尔表达式){
        满足条件的代码
}else{
        不满足条件的代码
}

【案例】

 <script>
        // 用户输入，如果工龄大于1年，年底奖金+2000， 否则年底没奖金
        // 1. 用户输入工龄
        // let age = +prompt('请输入工龄')
        // let money = 10000
        // 2. 执行分支语句
        // if (age >= 1) {
        //     alert(`您实发工资:${money + 2000}`)
        // } else {
        //     alert(`您实发工资:${money}`)
        // }
        // 2. 让用户输入年份，判断这一年是闰年还是平年并输出
        // 2.1 用户输入年份
        let year = +prompt('请输入年份：')
        // 2.2 执行分支语句
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            alert(`${year}年是闰年`)
        } else {
            alert(`${year}年是平年`)
        }
    </script>

多分支

【语法】

if (条件0) {
   代码0
} else if (条件1) {
   代码1
}else if (条件2) {
   代码2
}else if (条件3) {
   代码3
} else{
   代码n
}

【解释】

先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
可以写N个条件

【代码示例】

    <script>
        //根据输入不同时间，输出不同的问候语
        let time = prompt('请输入小时：')
        
        if (time < 12) {
            document.write(`上午好，好好工作`)
        } else if (time < 18) {
            document.write(`下午好，好好工作`)
        } else if (time < 20) {
            document.write(`晚上好，好好加班`)
        } else {
            document.write(`夜深了，头发还有吗？`)
        }
    </script>

三元运算符

【解释】 是比 if 双分支更简单的写法，有时候也叫做三元表达式。

【语法】

条件 ? 满足条件的代码执行 : 不满足条件的代码执行

【代码示例】

    <script>
        let num1 = 40
        let num2 = 30
        let re = num1 > num2 ? num1 : num2
        console.log(re)
    </script>
    //数字补0案例
     <script>
        // 1. 用户输入数字
        let num = prompt('请您输入一个数字')
        // 2. 判断条件是 小于 10  则数字前面 + '0'   01 否则 不补
        // let t = num >= 10 ? num : '0' + num
        let time = num < 10 ? '0' + num : num
        document.write(time)
    </script>

switch分支语句

【语法】

switch (数据){
            case 数值1:
            代码1
            break
            case 数值2:
            代码2
            break
             case 数值3:
            代码3
            break
             case 数值4:
            代码4
            break
            default:
            代码n
            break
}

【解释】

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码

注意事项：

switch case语句一般用于等值判断,不适合于区间判断
switch case一般需要配合break关键字使用没有break会造成case穿透

案例代码

 <script>
        // 1. 用户输入数字   还有一次 运算符
        let num1 = +prompt('请您输入第一个数:')
        let num2 = +prompt('请您输入第二个数:')
        let sp = prompt('请您输入+ - * / 运算')
        // 2. 根据不同的运算符计算不同的结果 switch
        switch (sp) {
            case '+':
                alert(`您选择的是加法，结果是: ${num1 + num2}`)
                break
            case '-':
                alert(`您选择的是减法，结果是: ${num1 - num2}`)
                break
            case '*':
                alert(`您选择的是乘法，结果是: ${num1 * num2}`)
                break
            case '/':
                alert(`您选择的是除法，结果是: ${num1 / num2}`)
                break
            default:
                alert(`请输入+ - * / `)
        }
    </script>

3、循环语句

while循环

【语法】

while (循环条件) {
     循环体
}

【解释】

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码。
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
小括号判断条件，直到括号内条件不满足，即跳出

【注意事项】

循环需要具备三要素：
变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

【代码案例】

    <script>
        // 循环必须有3要素
        // 变量的起始值
        let i = 1
        // 终止条件
        while (i <= 3) {
            document.write(`月薪过万，哈哈哈<br>`)
            // 变量变化
            i++
        }
    </script>

【综合案例】

 <script>
        // 1. 不断的弹出对话框
        // 3. 金额的变量
        let money = 100
        while (true) {
            let str = prompt(`请您选择操作:
                1. 存钱
                2. 取钱
                3. 查看余额
                4. 退出
            `)

            // 2. 除非输入的是4 则退出循环  break
            if (str === '4') {
                break
            }

            // 4. switch 加减操作
            switch (str) {
                case '1':
                    let cun = +prompt('请您输入存钱的金额:')
                    // money = money + cun 
                    money += cun
                    break
                case '2':
                    let qu = +prompt('请您输入取钱的金额:')
                    money -= qu
                    break
                case '3':
                    alert(`您卡上的余额是${money}元`)
                    break
            }

        }

    </script>

do…while循环

【语法】

do
{
    需要执行的代码
}
while (条件);

【解释】

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

【代码示例】

do
{
    x = x + i + "<br>";
    i++;
}
while (i<5);

4、for循环

【语法】

for (声明记录循环的次数变量; 循环条件; 变化值) {
       循环体
}

【代码练习】

 <script>
        // 1. 利用for循环输出多少岁了
        for (let i = 1; i <= 100; i++) {
            document.write(`我今年${i}岁了 <br>`)
        }
        // 2. 求 1~100 偶数的累加和
        let sum = 0   // 值
        for (let i = 1; i <= 100; i++) {
            // 筛选偶数
            if (i % 2 === 0) {
                // sum = sum + i
                sum += i
            }
        }
        document.write(sum)

        // 3. 页面打印5个小星星
        for (let i = 1; i <= 5; i++) {
            document.write('◇')
        }
        // 1. 循环的最大价值就是遍历数组
        let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
    
        // 利用循环的方式
        // document.write(arr.length)
        // 2. arr.length  数组的长度  通过他可以告诉我们数组里面有几个元素
        for (let i = 0; i < arr.length; i++) {
            document.write(`名字是: ${arr[i]} <br>`)
        }
        
    </script>

for循环嵌套

【语法】

for (外部声明记录循环的次数变量; 循环条件; 变化值) {
      for (内部声明记录循环的次数变量; 循环条件; 变化值) {
       循环体
   }
}

案例代码

案例1

 <script>
        //   假如每天记住5个单词，3天后一共能记住多少单词？
        // 分析
        // 1. 外面的循环 记录第n天 
        for (let i = 1; i < 4; i++) {
            document.write(`第${i}天</br>`)
            for (let j = 1; j <= 5; j++) {
                document.write(`记住了${j}个单词！</br>`)
            }
        }
    </script>

案例2

 <script>
        //需求： 页面中打印出5行5列的星星
        let num1 = prompt('请输入行数')
        let num2 = prompt('请输入列数')
        // 外层行  里层每个的几个星星
        for (let i = 0; i < num1; i++) {
            for (let j = 0; j < num2; j++) {
                document.write('★')
            }
            // 五个星星打完了，再换行
            document.write('</br>')
        }
    </script>

案例3

 <script>
        // 打印倒三角形星星
        // 外层打印几行
        for (let i = 1; i < 6; i++) {
            for (let j = 1; j <= i; j++) {
                document.write('@')
            }
            document.write('</br>')
        }
    </script>

案例4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            margin: 5px;
            background-color: pink;
            padding: 0 10px;
            border: 1px solid hotpink;
            color: deeppink;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            text-align: center;
        }
    </style>
</head>

<body>

    <script>
        // 外层打印几行
        for (let i = 1; i <= 9; i++) {
            // 里层打印几个星星
            for (let j = 1; j <= i; j++) {
                // 只需要吧 ★ 换成  1 x 1 = 1   
                document.write(`

                <div> ${j} x ${i} = ${j * i} </div>
                
                `)
            }
            document.write('<br>')
        }
    </script>
</body>

</html>