一、流程控制语句

前提介绍：

  1. 顺序结构语句 js默认由上至下执行
  2. 分支结构语句 js会根据条件的判断,决定是否执行某段代码
  3. 循环结构语句 js会根据条件的判断,反复的执行某段代码

1. prompt函数

prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

var age = parseInt(prompt('请输入您的年龄:'))；
alert(age);

2. if语句

1.概述

if 语句是 JavaScript 中最常用的分支结构，它用于判断某个条件是否成立，如果成立，就执行指定的代码块。

if 语句的基本语法如下：

if (条件) {// 真区间：当条件为 true 时执行的代码
}
  • 其中()里面的 条件 是一个表达式，可以是任何能够返回 true 或 false 的值；
  • 如果是其他类型，会隐式转换为布尔型；
  • 如果 条件 返回 true，那么就会执行花括号内的代码块，返回false，则不执行；
  • 请使用小写的if。使用大写字母（IF）会生成 JavaScript 错误；

2.案例练习

  • 在弹框中输入您的年龄，如果年龄大于18，弹出欢迎来到红浪漫，如果年龄不大于18，则不显示

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>var age = parseInt(prompt('请输入您的年龄:'))if(age > 18) {alert("欢迎来到红浪漫，男宾2位.");}</script></body>
</html>

3. if else语句

1. 概述

if…else 语句是 if 语句的扩展，它允许在条件成立和不成立时分别执行不同的代码块。

if…else 语句的基本语法如下：

if (条件) {// 真区间：当条件为 true 时执行的代码
} else {// 假区间：当条件为false时执行的代码
}
  • 其中()里面的 条件 是一个表达式，可以是任何能够返回 true 或 false 的值；
  • 如果是其他类型，会隐式转换为布尔型；
  • 如果 条件 返回 true，那么就会执行真区间的代码块；
  • 如果 条件 返回 false，那么就会执行假区间的代码块；

2. 案例练习

  • 在弹框中输入您的年龄，如果年龄大于18，弹出欢迎来到红浪漫，否则弹出未成年不能进入。

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>var age = parseInt(prompt('请输入您的年龄:'))if(age > 18) {alert("欢迎光临~");}else{alert("未成年禁止访问");}</script></body>
</html>

4. if…else if…else 语句

1. 概述

if…else if 语句可以检查多个条件，并在条件成立时执行相应的代码块。

if…else if 语句的基本语法如下：

if (条件1) {// 真区间1：当条件为 true 时执行的代码
} else if (条件2) {// 真区间2：当条件为 true 时执行的代码// 可以有N多个else if
} else {// 假区间：当条件为false时执行的代码
}

2. 案例练习

  • 在弹框中输入您的成绩，如果分数少于60，弹出努力吧少年，

    ​ 如果分数在60到80之间，弹出及格，

    ​ 如果成绩在80到90之间弹出良好，

    ​ 如果分数在90到100之间弹出优秀，

    ​ 如果分数是100，则弹出你可以毕业了，告辞！

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>var score = parseInt(prompt('请输入你的成绩:'))if (score < 60 && score >= 0) {alert('努力吧少年');} else if (60 <= score && score < 80) {alert('及格');} else if (80 <= score && score < 90) {alert('良好');} else if (90 <= score && score < 100) {alert('优秀');} else if (score == 100){alert('毕业了,你可以起飞了');}</script></body>
</html>

5. switch…case语句

1. 概述

与 if - else if 语句的多分支结构类似，都可以根据不同的条件来执行不同的代码；但是与 if else 多分支结构相比，switch case 语句更加简洁和紧凑，执行效率更高。

基本语法如下：

var n = 2;
switch (n) {case 1:console.log('n的值是1');break;case 2:console.log('n的值是2');break;case 3:console.log('n的值是3');break;default:console.log('前面都没匹配上');
}
  • 首先设置表达式 n（通常是一个变量），随后会用表达式的值与每个 case 的值做严格比较。
  • 如果结果为真，则与该 case 关联的代码块会被执行，结果为假，则判断下一个case。
  • 通常会使用 **break **来阻止代码自动地向下一个 case 运行。

2. 案例练习

  • 在弹框中输入1~5的评分：

    ​ 如果输入1，则弹出非常满意，

    ​ 如果输入2，则弹出满意，

​ 如果输入3，则弹出一般，

​ 如果输入4，则弹出不满意，

​ 如果输入5，则弹出非常不满意，

​ 否则弹出关门吧。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>var operation = prompt('请输入你的操作序号:')switch(operation){case '1':console.log('非常满意');break;case '2':console.log('满意');break;case '3':console.log('一般');break;case '4':console.log('不满意')break;case '5':console.console.log('非常不满意');break;default:console.log('关门吧');}</script></body>
</html>

6. while循环

1. 概述

思考：在控制台上打印1到10可以吗？打印1到100呢？1000?10000?1000000000?

while循环的基本格式：

while (循环条件) {循环体
}
  1. 如果‘条件’为true，则执行循环体；
  2. 循环体执行完毕，会再次判断‘条件’；
  3. 如果‘条件’还为true，则再次执行循环体，直到‘条件’返回false；
  4. 如果‘条件’一直为true，则是死循环(可以用break终止循环)。

2. 案例练习

  • 用while循环输出1~3

    var i = 1;
while (i < 4) {console.log(i);i++; //自增
}

  • 用while循环输出1~100

  • 用while循环输出10~1

7. for循环

1. 概述

for循环的基本格式：

for (1.初始化; 2.循环条件; 3.自增自减) {4.循环体
}
  1. 先执行‘1.初始化’，再判断‘条件’；
  2. 如果为true，则执行‘循环体’；
  3. 执行完循环体，会执行‘3.自增自减’，然后再判断‘条件’；
  4. 直到‘条件’返回false，结束循环，否则为死循环

2. 案例练习

  • 打印1到100的数字

    for(var i = 1; i <= 100; i++) {console.log(i);
}

  1. 求1到10的和(55)

  2. 求1到100的和(5050)

  3. 求1-100中的偶数

  4. 求1-100中的偶数的和(2550)

  5. 求1-100中是3的倍数的数字和(1683)

  6. 求1~100中7的倍数或尾数带7的整数

  7. 判断12是不是质数

    | 质数：是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数。

  8. 在页面中输入一个数判断是不是质数

  9. 2-100中所有的质数

  10. 九九乘法表

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>九九乘法算表</title></head><body><div id="box"></div><script>var oBox = document.getElementById("box");for (var i = 1; i < 10; i++) {for (var j = 1; j <= i; j++) {var math = j + "*" + i + "=" + j*i+" ";oBox.innerHTML = oBox.innerHTML + math;}oBox.innerHTML += "<br>";}</script></body></html>

JS打印三角形_我是谁的博客-CSDN博客_js打印三角形

  1. for in循环

    for/in 语句循环遍历对象的属性

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>for in循环</title></head><body><script>var person={fname:"Bill",lname:"Gates",age:56};for (x in person){console.log(x + ' ' + person[x]+'\n');}</script></body>
</html>

8. do while循环

  • do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环

  • 语法结构：do {

    ​ 要执行的代码块

    ​ }while (条件);

案例练习：测试do while循环

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>do while循环</title></head><body><script>do{console.log('你好'); //先执行一次do里的代码，然后再判断条件}while(1 > 2);</script></body>
</html>

9. break和continue关键字

  1. break关键字

    • break语句能够结束当前for、for/in、while、do/while或者switch语句的执行。同时break可以接受一个可选的标签名，来决定跳出的结构语句。
    • 如果没有设置标签名，则跳出当前最内层结构。

    案例练习1：for循环遍历范围是1到10，遍历的时候只想打印到3.

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是一个break的测试文件</title></head><body><script>for ( var i=0 ; i<5 ; i++ ) {if ( i == 3 ) {break;}console.log(i);}</script></body>
</html>

    思考：break只能跳出最内层的循环，那么如果有多层的循环，怎么跳出指定哪层或者最外层的for循环？

    案例练习2：两层for循环嵌套，每一个都打印0到9，最终打印5，5。

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是一个break的测试文件</title></head><body><script>outermost:for(var i=0; i<10;i++){for(var j=0; j<10; j++){if(i==5 && j==5){break outermost;}}}console.log(i,j);</script></body>
</html>

  2. continue关键字

    • continue语句用在循环结构内，用于跳出本次循环中剩余的代码，并在表达式的值为真的时候，继续执行下一次循环。
    • 可以接受一个可选的标签名，来决定跳出的循环语句。

    案例练习1：遍历0到4的过程中，如果遇到3则跳过。

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是一个break的测试文件</title></head><body><script>for ( var i=0 ; i<5 ; i++ ) {if ( i == 3 ) {continue;}console.log(i);}</script></body>
</html>

    案例练习2：两层for循环嵌套，每一个都打印0到9，当遇到5，5之后不终止当前循环执行下一次循环。

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是一个break的测试文件</title></head><body><script>outermost:for(var i=0; i<10;i++){for(var j=0; j<10; j++){if(i==5 && j==5){continue outermost;}console.log(i,j);}}</script></body>
</html>

  3. break和continue练习

    • 求整数1～100的累加值，但要求碰到个位为3的数则停止累加

    • 求整数1～100的累加值，但要求跳过所有个位为3的数

    • 求1-100之间不能被7整除的整数的和（用continue）

    • 求200-300之间所有的奇数的和（用continue）

    • 求200-300之间第一个能被7整数的数（break）

    • ATM取钱

      输入相应数字，执行相应功能

 ```html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ATM取钱</title></head><body><script>var res = prompt('请输入您的操作：1=取钱，2=存钱，3=抢钱，4=退出');switch (res) {case '1':alert('取钱操作。。。');break;case '2':alert('存钱操作。。。');break;case '3':alert('抢钱操作。。。');break;case '4':alert('退出操作。。。');break;default:alert('别瞎按');}</script></body></html>```

  • 收银程序

    输入单价和数量，计算总价。如果总价大于500 则打八折。然后用户输入付钱，最终弹出找零。
    ```html

    收银程序

10. 死循环

死循环:在循环中,没有结束条件的循环是死循环,程序中要避免的,否则会造成内存溢出