JS基础(二)

一、流程控制语句

• 关系比较运算

<script>
    // 等于
    var num1 = 10;
    var num2 = '10';
    var num3 = 6;

    console.log(num1==num2);  //这里的结果是true,先进行转换再比较
    // === 绝对等于，类型和值都要相等
    console.log(num1===num2);//这里的结果是false
    // != 不等于
    console.log(num1!=num3);//这里结果为true
    // !== 绝对不等于
    console.log(num1!==num2);//这里结果是true
    
    var num1=7.1;
    var num2=8.2;
    if((num1*10+num2*10)/10==15.3){
        document.write('运算正确');
    }else{
        document.write('运算错误');
    }

</script>

• 分支结构

<script>
    var a = 1;
    console.log(a);

    var b = 2;
    console.log(b);

    var c = 3;
    console.log(c);

    var d = 4;
    console.log(d);
</script>

if 语句
<script>
    //需求：根据学生成绩开分等级
    // 60分以下 不及格
    // 60-80（不包含） 及格
    //80（包含） 优秀

    var score = 70;
    if(score<60){
        document.write('该学生成绩不及格')
    }else if(score >=60 && score<80){
        document.write('该学生成绩及格')
    }else{
        document.write('该学生成绩优秀')
    }
</script>

if else if 语句
<script>
    /*
    需求: 根据一个人年龄进行分段
    1. 在页面输出这个人所属阶段
    2. 具体规则如下
    未成年人：0至17岁；
    青年人： 18岁至65岁；
    中年人： 66岁至79岁；
    老年人： 80岁至99岁；

    弹出一个输入框，输入的数直接成为age的值
    prompt('输入');
    */
    var age = 22;
    if(age<18){
        document.write('小伙子还未成年呀');
    }else if(age>18 && age<=65){
        document.write('大家都是成年人了，能成熟点不');
    }else if(age>65 && age<=79){
        document.write('中年生活得过的有滋有味呀');
    }else{
        document.write('老年了，要注意身体');
    }
</script>

swich 语句
<script>
    /*
    需求：饮料机根据所按按钮提供相应的饮料
    红色（red）-茶 黄色（yellow）-橙汁 白色(write)-牛奶 紫色(viotel)-葡萄汁
    */

    // break;要加上，case后的条件要绝对相等
    var color = 'yellow';
    switch(color){
        case 'red':
            document.write('喝茶');
            break;
        case 'yellow':
            document.write('橙汁');
            break;
        case 'write':
            document.write('牛奶');
            break;
        case 'viotel':
            document.write('葡萄汁');
    }

    document.write('<br>');
    //需要2，在一栋有五层楼的电梯里，根据按钮上到对应楼层
    // 第二种prompt('输入')
    var num = 5;
    switch(num){
        case '1':
            document.write('您将去到1楼')
            break;
        case '2':
            document.write('您将去到2楼')
            break;
        case '3':
            document.write('您将去到3楼')
            break;
        case '4':
            document.write('您将去到4楼')
            break;
        case '5':
            document.write('您将去到5楼')
    }

</script>

• 循环结构
  for 循环

<script>
    /* 需求：计算从1加到5的结果
    for循环由四部分组成
    (1) var i = 1;  循环变量初始值
    (2) var i <= 5; 循环条件
    (3) i++; 改变循环条件
    (4) 大括号里面的代码;循环体
    若满足循环条件（值为true）则执行循环体，否者则停止循环

    循环4部分执行顺序
    第一次 1-2-4-3
    第二次之后 2-4-3 2-4-3
    */
    var sum= 0;
    for (var i = 0;i <= 5; i++) {
        sum += i;
    }
    document.write(sum);


    var num = 0;
    for (var j = 0; j <= 100; j++) {
        num += j;
    }
    document.write('<br>'+num);

</script>

break 和 continue

<script>
    for(var i =0;i<10;i++) {
        // console.log(i);  //有5
        if(i===5){
            // 停止（退出）循环
            break;
        }
        console.log(i); //没有5
    }

    console.log('............................');
    for (var i = 0; i < 10; i++) {
        if (i === 5) {
            // 跳过本次循环
            continue;
        }
        console.log(i); //没有5
    }
    
</script>

死循环

<script>
    // 死循环，不需要任何条件
    // for循环的四部分都不是必须的
    var i = 0;
    for(;;){
        console.log(i);
    }
</script>

遍历

<script>
    //数组的循环（迭代、遍历）
    var list = ['张三','李四','王五','陈六'];

    for (var i=0;i<list.length;i++){
        console.log(list[i]);
    }

    var list2=[
        {
            name:'张三',
            address:'广西',
            age:20
        },
        {
            name:'李四',
            address:'湖南',
            age:30
        }
    ]
    for(var i=0;i<list2.length;i++){
        // console.log(list2[i].age);
        var person = list2[i];
        // console.log(person.name,person.age,person.address);
        console.log(person);
    }
</script>

模板字符串 ``

<script>
    var username = '樊勇';
    var address = '江西';
    // 我的名字是xx，我来自xxx
    var str = '我的名字是'+username+','+'我来自'+address;
    document.write(str);

    document.write('<br>');
    // 模板字符串
    //在引号里${变量}，输出的时候就是变量的值在字符串里
    // var str2 = `我的名字是${username}`;
    // document.write(str2);
    document.write('<br>');
    var hobby = '打羽毛球';
    // 得到的效果跟上面的一样
    var str2 = `我的名字是${username},我来自${address}`;
    document.write(str2);
    document.write('<br>');
    // 练习，拼接日期，今天是xxx年，xxx月,xxx日
    var year = '2019';
    var month = '02';
    var day = '18';
    var test = `今天是${year}年,${month}月,${day}日`;
    document.write(test);
</script>

获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        这是id为app的标签
    </div>

    <div class="content">
        content
    </div>

    <ol>
        <li class="item">第1个li</li>
        <li class="item">第2个li</li>
        <li class="item">第3个li</li>
        <li class="item">第4个li</li>
        <li class="item">第5个li</li>
    </ol>

    <script>
        /*获取元素节点
        querySelector 获取单个元素的元素节点*注意后面括号里面是对应id或者class的名，
        前面得加相对于的符号，比如id是#，class是点
        */
        var app = document.querySelector('#app');
        app.innerHTML = `<button>dsafafa</button>`;

        //  document.querySelector('.content').innerHTML = '54321';
        //  直接通过这样的也可以给.content里添加内容
        
        var content = document.querySelector('.content');
        content.innerHTML = '上一条也可以添加成功';

        var item = document.querySelector('.item');
        item.innerHTML = '我是item';

        /* querySelectorAll 获取全部括号里的元素节点，*注意后面括号里面是对应id或者class的名，
        前面得加相对于的符号，比如id是#，class是点
         由于是全部，所以得遍历查询，然后挨个实行
         下列遍历的之后的结果都放在items里面，items在进行把要放在item类里的东西放里面，
         注意，items的执行语句要在for循环里面
         */
        var item2 = document.querySelectorAll('.item');
        for(i=0;i<=item2.length;i++){
            var items = item2[i];
            items.innerHTML = '我是item';
        }
    </script>
</body>
</html>

for循环遍历渲染列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .item {
        border-bottom: 1px solid #999;
        padding: 10px;
      }

      .name {
        color: red;
      }
    </style>
  </head>

  <body>
    <h3>成员列表</h3>
    <div class="box">
      <!-- <div class="item">
            <span class="name">姓名: 张三</span>
            <span>年龄: 29</span>
            <span>地址: 广西</span>
        </div>
        <div class="item">
            <span class="name">姓名: 张三</span>
            <span>年龄: 29</span>
            <span>地址: 广西</span>
        </div>
        <div class="item">
            <span class="name">姓名: 张三</span>
            <span>年龄: 29</span>
            <span>地址: 广西</span>
        </div> -->
    </div>

    <script>
      var students = [
        {
          name: "樊勇",
          age: 20,
          address: "江西"
        },
        {
          name: "樊勇",
          age: 20,
          address: "江西"
        },
        {
          name: "樊勇",
          age: 20,
          address: "江西"
        },
        {
          name: "樊勇",
          age: 20,
          address: "江西"
        }
      ];
      var sum = "";
      for (i = 1; i < students.length; i++) {
        var list = students[i];
        var str = `<div class="item">
        <span class="name">姓名: ${list.name}</span>
        <span>年龄: ${list.age}</span>
        <span>地址: ${list.address}</span>
        </div>`;
        sum += str;
      }
      var box = document.querySelector(".box");
      box.innerHTML = sum;
    </script>
  </body>
</html>

循环结构小结

for 循环
1.1.for循环的四个部分
1.2.四个部分的执行顺序
2.break和continue->break结束，continue跳出当前循环
3.死循环
4.数组的循环(迭代、遍历)
5.模板字符串
    ``：模板字符串，获取数据拼接的时候很麻烦，可以用，模板字符串进行更简便的获取
    var 变量名 = `今天是${年的变量}年、${月的变量}月、${日的变量}日`;
    document.write(变量名);
    打印出来的效果是，今天是多少年、多少月、多少日。这里的多少对应的就是变量的值。
6.获取元素节点
    * document.querySelector
    * document.querySelectorAll
    获取到节点时括号里是要按css里选定元素一样
    id前得加#，clas前得加上.