12 (H5*) JS第二天 流程控制：顺序结构、分支结构、循环结构

目录

1：一元运算符

2：流程控制

3：分支之if语句

4：分支之if-else语句

5：分支语句之三元运算符

6：if和else if语句

7：switch-case语句

8：while循环

9：do-while循环

10：for循环

11：for循环案例

12：调试

复习

 <script>

    /*
     *
     * 一元运算符:  ++  --
     *
     * 如果不参与运算, ++在前面还是在后面结果都是一样的  +1
     * 如果不参与运算, --在前面还是在后面结果都是一样的  -1
     *
     * var num=10;
     * num++;   后+
     * ++num;   前+
     * 无论是前+还是后+只要参与运算,结果可能就不太一样
     * 如:
     *  var num=10;
     *  var sum= num++ +10;
     *  ++在后面的时候,先参与运算,然后自身加1
     *  var num=10;
     *  var sum=++num +10;
     *  ++在前面的时候,先自身加1,然后再参与运算
     *
     *  流程控制: 代码的执行过程
     *  1. 顺序结构:代码的执行的顺序,从上到下,从左到右(不严谨)
     *  2. 分支结构: if,if-else ,if-esle if,switch-case ,三元表达式
     *  3. 循环结构:while 循环,do-while,for循环  for-in循环
     *
     *  总结分支:如果只有一个分支,就用if
     *  如果有两个分支,就用if-else
     *  如果多个分支,一般是范围的,推荐使用if-else if
     *  如果多个分支,一般是具体的值,推荐使用switch-case
     *
     *
     *
     *
     *  总结循环:
     *  while:先判断后循环,有可能一次循环都不执行
     *  do-while:至少执行一次循环体,再判断
     *  for循环:知道了循环的次数,推荐使用for循环
     *
     *
     *  调试:是为了找代码的错误和问题所在,
     *  断点,不加断点,就不方便调试
     * */

    //本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？

//    var money = 10000;//本金
//    var rate=0.003;
//    for(var i=0;i<5;i++){
//      //money=money+money*rate;
//      money+=money*rate;
//    }
//    console.log(money);

    //有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？（兔子的规律为数列，1，1，2，3，5，8，13，21）

    //每个月的值 就是前两个月的和

//    var num1=1;//第一个月
//    var num2=1;//第二个月
//    var sum=num1+num2;//第三个月
//
//
//    var num1=num2;//第二个月
//    var num2=sum;//第三个月
//    sum=num1+num2;//第四个月
//
//
//    var num1=num2;//第三个月
//    var num2=sum;//第四个月
//    var sum=num1+num2;

    var num1=1;//第一个月
    var num2=1;//第二个月
    var sum=0;
    //i=3是从第三个月开始
    for(var i=3;i<=12;i++){
      sum=num1+num2;
      num1=num2;
      num2=sum;
    }
    console.log(sum);
    //求斐波那契数列数列第12个月的值

    //卡卡西  佐助  大蛇丸 鸣人  雏田

    //练习: ++ 和 --

    //    var a = 1;
    //
    //    var b = ++a + ++a;
    //
    //    console.log(b);

    //    var a = 1;
    //
    //    var b = a++ + ++a;
    //    console.log(b);

    //    var a = 1;
    //
    //    var b = a++ + a++;
    //    console.log(b);

    //    var a = 1;
    //
    //    var b = ++a + a++;
    //    console.log(b);

    //    var a=1;
    //    var b=++a + ++a+a++ + ++a;

    //  var sum=0;
    //  for(var i=1;i<=100&&i%2==0;i++){
    //    sum+=i;
    //  }
    //  console.log(sum);

    //    var num = 10;
    //    switch (num) {
    //      case 1:
    //      case 2:console.log("嘎嘎");break;}

    //    var i=1;
    //    j=i++ + i++;
    //    j=1+ 2++;
    //    console.log(j);

  </script>

1：一元运算符

 <script>

    /*
    *    ++  -- 都是运算符
    *    ++ 和 --  可以分为:前+ 和后+  and   前- 和后-
    *
    *  如果++在后面:如: num++ +10参与运算
    *  先参与运算,运算结束后自身再加1
    *
    *  如果++在前面:如: ++num+10参与运算
    *  先自身加1,然后再参与运算
    *
    *  Ctrl+/可以把选中的代码全部注释掉
    *
    *
    *
    *
    *
    * */

//    var num=10;
//    num++;//自身加1--自加
//    console.log(num);

//    var num=10;
//    ++num;//自身加1
//    console.log(num);

//    var num=10;
//    var sum=num++ +10;
//    console.log(sum);//20

//    var num=10;
//    var sum=++num +10;
//    console.log(sum);//
//    console.log(num);

//    var num=10;
//    var sum=--num +10;
//    console.log(sum);//19
//    console.log(num);//9

//    var num=10;
//    var sum=num-- +10;
//    console.log(sum);//20
//    console.log(num);//9

  </script>

2：流程控制

<script>

    //流程控制；代码的执行过程
    //流程控制:有三种方式
    /*
    * 1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构(不是很眼睛)
    * 2.分支结构:if语句,if-else语句,if-else if-else if...语句,switch-case语句,三元表达式语句
    * 3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环
    *
    *
    * */

    var num=10;
    console.log(num);
  </script>

3：分支之if语句

 <script>

    /*
    *
    * if语句:主要是判断
    * 语法:
    * if(表达式){
    *   代码块
    * }
    *
    * 执行过程:
    * 先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的
    *
    * 例子:
    * 1.如果8大于6,请输出8,如果一个数字大于另一个数字则输出大的数字
    * 2.问:小苏的年龄是否大于18岁,如果是成年的,则提示,可以看电影了
    *
    *
    * */
//    if(8>6){
//      console.log(8);
//    }
    //例子1:
//    var num1=10;
//    var num2=100;
//    if(num1>num2){
//      console.log(num1);
//    }
//    console.log("我执行了");

    //例子2
    var age=19;
    if(age>=18){
      console.log("可以看电影了,嘿嘿...");
    }
    //例子3:
    //问小杨帅不帅,则输出真的好帅
    var str="帅";
    if(str=="帅"){
      console.log("真的好帅");
    }

  </script>

4：分支之if-else语句

 <script>

    /*
     *
     * if-else 语句
     * 两个分支,只能执行一个分支
     *
     * if-else语句的语法:
     *
     * if(表达式){
     *   代码1
     * }else{
     *   代码2
     * }
     * 执行过程:
     * 如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2
     *
     *
     * */

    //例子:问；小苏的年龄是否是成年人,如果是成年人则提示,可以看电影,否则；回家写作业区

    //定义变量,并初始化
//    var age = 100;
//    //判断
//    if (age >= 18) {
//      console.log("可以看电影了,嘎嘎...");
//    } else {
//      console.log("看什么看,回家写作业去");
//    }

    //提示用户请输入年龄----
//    var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中
//    console.log(age);//最终的结果是字符串的类型

    //案例1:
//    var age = parseInt(prompt("请您输入年龄"));
//    //判断
//    if (age >= 18) {
//      console.log("可以看电影了,嘎嘎...");
//    } else {
//      console.log("看什么看,回家写作业去");
//    }

    //练习1:找到两个数字中的最大值
    var num1=10;
    var num2=20;
    if(num1>num2){
      console.log(num1);
    }else{
      console.log(num2);
    }

    //练习2:判断这个数字是奇数还是偶数

    var number=parseInt(prompt("请输入一个数字"));
    if(number%2==0){
      console.log("偶数");
    }else{
      console.log("奇数");
    }

  </script>

5：分支语句之三元运算符

 <script>

    //获取两个数字中的最大值
    //if-else语句
    //    var num1 = 10;
    //    var num2 = 100;
    //    if (num1 > num2) {
    //      console.log(num1);
    //    } else {
    //      console.log(num2);
    //    }

    //两个分支,最终的结果是两个分支中的一个,像这种情况可以使用三元表达式

    /*
     * 三元表达式
     * 运算符号:  ?  :
     *
     * 语法:
     *  var 变量=表达式1?表达式2:表达式3;
     *  执行过程:
     *  表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量
     *  如果表达式1的结果是false,则执行表达式3,把结果给变量
     *
     *
     *
     * */

    //两个数字中的最大值
    var x = 10;
    var y = 20;
    var result1 = x > y ? x : y;
    console.log(result1);

    //显示成年还是未成年
    var age = 10;
    var result2 = age >= 18 ? "成年了" : "未成年";
    console.log(result2);

    //总结:大多数情况,使用if-else的语句都可以用三元表达式的方式来表示

  </script>

6：if和else if语句

 <script>

    //if语句只有一个分支
    //if-else语句有两个分支,最终执行一个分支
    //if-else if-else if-else if-else if..........else---多分支,最终也是执行一个

    /*
     *
     * if-else if语句...
     *
     * 语法:
     * if(表达式1){
     *   代码1
     * }else if(表达式2){
     *   代码2
     * }else if(表达式3){
     *   代码3
     * }else{
     *   代码4
     * }
     *
     * else if---这种结构可以写多个,具体多少个看需求,
     * else--结构是可以不用写的,具体也是看需求
     *
     *
     * 执行过程:
     * 先判断表达式1的结果,
     * 如果为true则执行代码1
     * 如果为false,则判断表达式2
     * 如果表达式2为true则执行代码2
     * 如果为false,则判断表达式3
     * 如果表达式3为true则执行代码3
     * 否则执行代码4
     *
     *
     * */

    /*
     * 例子: 成绩的结果是在90到100(包含)之间则 显示A级
     *  如果成绩是在80到90(包含)之间,则显示B级
     *  如果成绩是在70到80(包含)之间,则显示C级
     *  如果成绩是在60(包含)到70(包含)之间,则显示D级
     *  如果成绩在0到60(不包含)之间,则显示E级
     *
     *
     *
     * */

    //实现代码
    var score = Number(prompt("请您输入成绩"));//有bug
    if (!isNaN(score)) {//如果为true就说明 不是数字
      if (score > 90 && score <= 100) {
        console.log("A级");
      } else if (score > 80) {
        console.log("B级");
      } else if (score > 70) {
        console.log("C级");
      } else if (score >= 60) {
        console.log("D级");
      } else {
        console.log("E级");
      }
    } else {
      console.log("您输入有误");
    }

    //练习:判断一个年份是不是闰年
    //定义变量存储一个年份
    var year = 2017;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      console.log("闰年");
    } else {
      console.log("平年");
    }

  </script>

7：switch-case语句

<script>

    /*
     * switch-case语句---分支语句---多分支语句
     * 语法:
     * switch(表达式){
     *  case 值1:代码1;break;
     *  case 值2:代码2;break;
     *  case 值3:代码3;break;
     *  case 值4:代码4;break;
     *  ...多个case
     *  default:代码5;
     *
     * }
     *
     * 注意问题:
     * default后面的break是可以省略的
     * default也可以省略
     *
     * switch-case 语句中和case后面的值比较的时候使用的是严格的模式
     * break是可以省略
     *
     *
     * 执行过程:
     * 获取表达式的值,和值1比较,如果一样,则执行代码1,遇到break则跳出整个的语句,后面代码不执行
     * 如果表达式的值和值1不一样,则和值2比较,如果相同则执行代码2,遇到break则跳出
     * 否则和值3比较,相同则执行代码3,遇到break,跳出,否则和值4比较,相同则执行代码4,遇到break则跳出,否则直接执行代码5
     *
     *
     *
     *
     *
     *
     * */

    //例子:获取一个人的成绩的级别,如果是A级则显示90到100直接的分数
    /*
     * 如果是B级则显示80到90分
     * 如果是C级则显示70到80之间分数
     //     * 如果是D级则显示60到70分之间
     //     * 否则显示0到59之间
     //     * */
    //    var jiBie = "E";
    //    switch (jiBie) {
    //      case "A":
    //        console.log("90到100之间");
    //        break;
    //      case "B":
    //        console.log("80到90之间");
    //        break;
    //      case "C":
    //        console.log("70到80之间");
    //        break;
    //      case "D":
    //        console.log("60到70之间");
    //        break;
    //      default :
    //        console.log("0到59之间");
    //    }

    //注意问题

//    var num = "10";//字符串
//   // console.log("10"===10);//true还是false
//    switch (num) {
//      case 10:
//        console.log("数字的10");
//        break;
//      case "10":
//        console.log("字符串的10");
//        break;
//    }

    //根据月份显示对应的天数
    //1,3,5,7,8,10,12 ---31天
    //2----28天
    //4,6,9,11----30
//    var month=parseInt(prompt("请输入月份"));
//    switch (month){
//      case 1:console.log("31天");break;
//      case 2:console.log("28天");break;
//      case 3:console.log("31天");break;
//      case 4:console.log("30天");break;
//      case 5:console.log("31天");break;
//      case 6:console.log("30天");break;
//      case 7:console.log("31天");break;
//      case 8:console.log("31天");break;
//      case 9:console.log("30天");break;
//      case 10:console.log("31天");break;
//      case 11:console.log("30天");break;
//      case 12:console.log("31天");break;
//
//    }

//
//    var month=parseInt(prompt("请输入月份"));
//    switch (month){
//      case 1:
//      case 3:
//      case 5:
//      case 7:
//      case 8:
//      case 10:
//      case 12:console.log("31天");break;
//      case 4:
//      case 6:
//      case 9:
//      case 11:console.log("30天");break;
//      case 2:console.log("28天");break;
//    }

    //练习:根据数字显示对应的星期
//    var num=parseInt(prompt("请输入一个星期的数字"));
//    switch (num){
//      case 1:console.log("星期一");break;
//      case 2:console.log("星期二");break;
//      case 3:console.log("星期三");break;
//      case 4:console.log("星期四");break;
//      case 5:console.log("星期五");break;
//      case 6:console.log("星期六");break;
//      case 7:console.log("星期日");break;
//      default:console.log("输入错误");
//    }

  </script>

8：while循环

 <script>
    //循环:一件事不停的或者是重复的做
    //循环要有结束的条件,循环还应该有计数器(记录循环的次数的)

    //while循环
    /*
    * while循环语法:
    *
    * 计数器
    * var 变量=0;
    * while(循环的条件){
    *   循环体;
    *   计数器++;
    *
    * }
    *
    * 执行过程:
    * 先判断条件是否成立,(条件的结果是true还是false),如果是false,那么循环的代码(while的大括号中的代码都不执行),如果是true,那么先执行循环体,然后执行计数器,然后,直接去--->循环的条件,再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环
    *
    * var i=0;
    * while(i<20){
    * 循环体
    * i++;
    * }
    *
    *
    *
    * */

    //请输出10次:哈哈,我又变帅了
//    var i=0;//计数器
//    while(i<10){
//      console.log("哈哈,我又变帅了"+(i+1));
//      i++;//记录次数
//    }

//    var i=0;//计数器
//    while(i<100){
//      console.log("哈哈,我又变帅了"+(i+1));
//      i++;//记录次数
//    }

    //练习:计算1-100之间所有数字的和

    var sum=0;//存储最终的和
    var i=1;//计数器
    while(i<=100){
      //sum=sum+i;//不停的计算数字的和
      sum+=i;
      i++;
    }
    console.log("和为:"+sum);

//    var sum=0;//存储最终的和
//    var i=0;//计数器
//    while(i<=5){
//      //sum=sum+i;//不停的计算数字的和
//      sum+=i;
//      i++;
//    }
//    console.log("和为:"+sum);

  </script>

9：do-while循环

 <script>

    /*
     *
     * do-while循环
     *
     * 语法:
     *
     * do{
     *     循环体
     * }while(条件);
     *
     * 执行过程:
     * 先执行一次循环体,然后判断条件是否成立,不成立,则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出.....
     *
     * */

    //例子:
    //输出:哈哈,我又变帅了..10次

    //    var i=0;//计数器
    //    do{
    //      console.log("哈哈,我又变帅了");
    //      i++;
    //    }while(i<10);

    //例子:问用户:您觉得我帅吗?提示用户请输入y/n ,如果n就一直问,我帅不帅,如果用户输入的y,则结束,并提示用户,您真有眼光

    //    do {
    //      //把用户输入的结果存储到result变量中
    //      var result = prompt("您觉得我帅吗?y/n");
    //    } while (result != "y");
    //    console.log("您真有眼光");

    //练习:求100以内所有3的倍数的和

    //    var i = 1;
    //    var sum = 0;
    //    while (i <= 100) {
    //      if (i % 3 == 0) {
    //        sum += i;
    //      }
    //      i++;
    //    }
    //    console.log(sum);//1683

    var i = 1;
    var sum = 0;
    do {
      if (i % 3 == 0) {
        sum += i;
      }
      i++;
    } while (i <= 100);
    console.log(sum);

  </script>

<script>

    /*
     * for循环
     *
     * 语法:
     * for(表达式1;表达式2;表达式3){
     *   循环体;
     * }
     *
     * 执行过程:
     * 先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环
     * 如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环
     * 如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此
     *
     * for(var i=0;i<10;i++){
     *
     * }
     *
     *
     * */

    //例子:打印10次,哈哈,我又变帅了
    for (var i = 0; i < 10; i++) {
      console.log("日照香炉生紫烟,一对情侣在林间.远看身影如神仙,近看竟然是于千");
    }

    //求1-100之间所有数字的和

    var sum = 0;
    for (var i = 1; i <= 100; i++) {
      sum += i;
    }
    console.log("和为:" + sum);

    //    for (var i = 0; i < 10; i++) {
    //      console.log("小杨好帅");
    //    }

  </script>

11：for循环案例

  <script>

    //画星星

    //控制行数的---正方形的
    for (var i = 0; i <= 5; i++) {
      //控制每一行有几个星星
      for (var j = 0; j <= 5; j++) {
        document.write("★");
      }
      document.write("<br/>");
    }

    //
    //    for(var j=0;j<=2;j++){
    //      document.write("★");
    //    }

    //三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星
    for (var i = 0; i <= 5; i++) {
      //控制每一行有几个星星
      for (var j = 0; j <= i; j++) {
        document.write("★");
      }
      document.write("<br/>");
    }

  </script>

12：调试