JS——流程控制

《一》代码块：

我们的程序是由一条一条的语句构成；语句是按照自上向下的顺序一条一条执行的；

 {
        var str = '撩课学院';
        console.log("itlike.com");
        document.write("喜欢IT，就上撩课");
    }

    console.log("str=" + str);

在JS中可以使用 {} 来为语句进行分组；同一个 {} 中的语句我们称是一组语句；它们要么都执行，要么都不执行；一个 {} 中的语句我们也称为叫一个代码块；在代码块的后边就不用再编写；了。

JS中的代码块，只具有分组的作用，没有其他用途。

《二》流程控制语句：

1  三种流程结构：1顺序结构、2选择结构、3循环结构

2  if：

<1>if的基本格式：if（条件表达式）{

    语句1

} 后续语句

<2>如果条件表达式为真，执行语句块1，否则不执行

var age=20;


if(age> 18){
        console.log("可以上网")
    }
    console.log("哈哈哈");

<2>如果条件表达式为真，则执行语句块1，否则执行语句块2

var age=2;

if(age > 18) {
        console.log('可以上网哈');
    } else {
        console.log('不可以上网');
    }

<3>如果条件表达式为真，则执行语句块1，否则执行语句块2；如果条件表达式为真，则执行语句块2，否则再判断条件表达式3；如果条件表达式为真， 则执行语句块3，当表达式1、2、3都不满足，会执行最后一个else语句。

var age=20;
    if(age > 40){
        console.log('老年人');

    }else if(age >20 ){
        console.log('中年人');

    } else if (age > 12){
        console.log('成年人');
    }else {
        console.log('未成年');
    }

 

<4>注意点：

1 如果只有一条语句时if后面的大括号可以省略 （建议不要省略大括号）

var age=10;
    if (age>18)
        console.log("成年人");
    console.log("你控制不了我！")

2 分号”；“也是一条语句，空语句

 if(4>6);
    {
        console.log('4>6');
    }

3  if else是一个整体，else匹配的时候匹配离它最近的一个if

    if (0)
        if (1)
            console.log("A");
        else
            console.log("B");
    else
       if (1)
            console.log("c");//    c
       else
            console.log("D");

所以这个匹配输出的就是 C。

4  对非Boolean类型的值，会先转换为Boolean类型后再判断

if (1){
        console.log("itlike")
    }

5 判断变量与字面量的问题

if (0==a){
        console.log("a的值是0\n");
    }else {
        console.log("a的值不是0\n");
    }

6  if语句可以嵌套使用

var num=20;
    if (num>=10){
        if (num<=30){
            console.log("满足条件!");
        }
    }

    var num=20;
    if (num>=10 && num<=30){
        console.log("满足条件！");
    }

5 课堂练习：石头剪刀布的实现

       0——剪刀，1——石头，2——布 

 //1 定义变量
    var player,computer;
    //2 电脑出拳
    computer=parseInt(Math.random()*3)
    console.log( parseInt(computer));
    //3 玩家出拳
    player=parseInt(+(window.prompt('请出拳：0—>剪刀，1->石头，2->布')));
    // console.log(player);
    //4判断用户输入内容
    if (player<0||player>2){//    不满足条
        player=parseInt(+(window.prompt('请出拳：0—>剪刀，1->石头，2->布')));
        console.log(player);

    }else {//    满足条件
        if (
            (player===0 && computer===2) ||
            (player===0 && computer===2) ||
            (player===0 && computer===2)

        ){
            alert('恭喜你，赢了');
        }else if (
            (player===0 && computer===1) ||
            (player===1 && computer===2) ||
            (player===2 && computer===0)
        ){
            alert('很遗憾，输了');
        }else {
            alert('平局');
        }
    }

 

3 Switch:

<1>switch示例：

var num=3;
    switch (num) {
        case 1:
            console.log('壹');
            break;
        case 2:
            console.log('贰');
            break;
        case 3:
            console.log('叁');
            break;
            default:
                console.log('其他数字');

    }

<2>注意事项：

1 case全等问题

var str="123";
    switch (str) {
        case 123:
            console.log("123数字");
            break;
        case "123":
            console.log("123");
                break;
        default:
            console.log("default");

    }

var num=120;
    switch (120) {
        case num:
            console.log("120");
            break;
        case 110:
            console.log("110");
            break;
        default:
            console.log("default");
            break;

    }

2  表达式判断问题

 switch (110+1) {
        case 110:
            console.log("110");
            break;
        case 1:
            console.log("1");
            break;
            console.log("1+110");
            break;
        default:
            console.log("default");
            break;
    }

3  case的穿透问题

 var num=1;
    switch (num) {
        case 1:
            console.log("壹");
            break;
        case 2:
            console.log("贰");
        case 3:
            console.log("叁");
        default:
            console.log("非法数字")

    }

4 循环：重要的结构，其他特点在给定条件成立时，反复执行某程序段，直到条件不成立为止。

<1给定的条件称为循环条件，反复执行的程序称为循环体。

循环结构简单来说就是：一次又一次的执行相同的代码块。

<2while循环特点:如果while中的条件一开始就不成立，那么循环体中的语句永远不会被执行。

<3 while

示例：

爱你3000遍
    var num=0;
    while (num<3000){
         num++;
        console.log('爱你' +num+'遍！\n');
     }
    var num=10;
     while (num<10){
         alert(num);
         num++;
     }

1 提示用户输入一个正整数n，计算1+2+3+...+n的和

    var sum=0;
     var num=1;
     while (num<10){
        sum+=num;
         num++;
     }
 console.log(sum);

2 获取1~100之间7的倍数的个数并打印，并统计个数

     var count=1;
     var num=0;
     while (count<=100){
         if (count % 7===0){
             console.log(count);
             num++;

         }
         count++;
     }
 console.log(num);

 

4 for循环

// 爱你3000遍
    for (var i=0;i<=3000;i++){
        console.log('爱你'+i+'遍\n' );

    }

//    好友列表1
//     好友1
//     好友2
//     好友3
//     好友列表2
//     好友1
//     好友2
//     好友3
    for (var i=1; i<=2; i++){
        console.log('好友列表'+i);
        for (var j=1;j<=3;j++){
            console.log('好友'+j);
        }
    }

 

2 for循环嵌套实现：打印99乘法表

 for (var i=1; i<=9;i++){
        for(var j=1;j<=i;j++){
            document.write('<span>'+j+'*'+i+'='+i*j+'</span>')
        }
        document.write('<br/>')
    }

想做出乘法表还需要一些样式，才能有乘法表的感觉。