JavaScript-day03学习（流程控制）

流程语句

• 顺序语句 – 按照书写顺序执行
• 流程控制语句

需要在不同的条件下，得到不同的结果，以及在不同的时间段，可以执行被控制的代码块

• 循环语句 – 重复执行一段代码块

流程控制语句

• 单分支 – 满足条件就执行，不满足就不执行

语法:

if(条件？){
	条件成立执行的代码块
}

        var num = prompt('请输入你的年龄：')
        // if(num > 18){ //条件的返回值 必须是true 才可以执行
        //     alert("你可以去追求想要的生活了")
        // }

        // 注意： 只能控制一行代码
        if(num > 18){ alert("你可以去追求想要的生活了")}

• 双分支

如果成立了执行成立的代码 否则执行不成立的代码

if(条件？){
	//条件成立执行的代码块
}else{
	//条件不成立执行的代码块
}

        if(num > 18){ 
            alert("你可以去追求想要的生活了")
        }else{
            alert("在家被抽")
        }

• 多分支

根据多个不同的条件，执行不同的结果

语法：

if(条件一){
	//条件一成立的代码块
}else if(条件二){
	//条件二成立的代码块
}
.............
else{
  // 上述条件都不成立执行的代码块
}

var num = prompt('请输入你的成绩：')
if(num >=90){
  alert('娶个媳妇')
}else if(num >=80 && num < 90){
  alert('买个电脑')
}else if(num >=70 && num < 80){
  alert('买个手机')
}else if(num < 70){
  alert('去死吧')
}

switch

也是一个判断语句，但是，是以匹配的方式进行判断的

语法：

switch(条件/表达式){
	case 字符:
		字符匹配成功执行的代码块
		break; //跳出整个程序
	case 字符:
		字符匹配成功执行的代码块
		break; //跳出整个程序
	case 字符:
		字符匹配成功执行的代码块
		break; //跳出整个程序

default:
	上述字符全都不匹配执行的代码块
break; //跳出整个程序

}

注意：如果有一个匹配不成功，会执行break,后续的字符匹配成功也不执行

如果没有break，会匹配多个字符

​```js
        var num = 1
        switch (num) {
            case 1:
                console.log('第一个条件');
                // break
            case 2:
                console.log('第二个条件');
                break
            case 1:
                console.log('第三个条件');
                break
            default:
                console.log('上述条件都不成立');
                break
        }

        var num = prompt('请输入成绩：')
        var sum = parseInt(num / 10)
        switch (sum) {
            case 10:
            case 9:
                alert('娶个媳妇')
                break
            case 8:
                alert('买个电脑')
                break
            case 7:
                alert('买个手机')
                break
            case 6:
                alert('买个棒棒糖')
                break
            default:
                alert('去死吧')
                break
        }

区别：

• 如果条件是一个区间，优先选择IF语句
• 如果是单个值或固定的字符匹配，优先选择switch

获取元素

    <div class="box1"></div>
    <div id="box" class="box">
        <p>123</p>
    </div>
    <div class="box">456</div>
    <script>
        // 根据ID 的名字，只能获取到一个元素
        // var box =document.getElementById('box')
        // console.log(box);

        //document.querysekect(选择器) -- 只能获取页面中出现的第一个元素
        // var box = document.querySelector('.box p')
        // console.log(box);

        //通过标签名获取元素  -- 获取到的是一个类(类似)数组，可以使用数组的长度和下标，但是数组专有的方法是不能使用的
        //只能通过 标签名获取 
        // var div = document.getElementsByTagName('div')
        // console.log(div);
        // console.log(div[0]);
        // console.log(div.length); //3
        
        // 通过class获取元素 -- 获取到的是一个类(类似)数组，可以使用数组的长度和下标，但是数组专有的方法是不能使用的
        //只能通过class类类名获取
        var div1 =document.getElementsByClassName('box')
        var p =div1[0].getElementsByTagName('p')
        console.log(div1);
        console.log(div1[0]);
        console.log(div1.length); //3

        console.log(p);

        //document.querySelectAll(选择器)
        // - 获取到的是一个类(类似)数组，可以使用数组的长度和下标，但是数组专有的方法是不能使用的
        // var div2 = document.querySelectorAll('div')
        // console.log(div2);

循环语句

语法:

for(初始化变量；条件表达式；操作表达式){
  //循环体
}

初始化变量：被用于初始化一个计数器，是使用var关键字声明一个新变量，这个变量，用来次数的

条件表达式：用来确定每一次循环是否能被执行，如果结果是true，继续执行，否则，停止循环

操作表达式：就是一个值变化，变量从初始化开始，变化到结束值

        for(var i=0;i< 5;i++){
          console.log('春江潮水连海平');
        }
        // 执行过程：
        // 1、 i = 0 判断是否满足条件 0 < 5 true 执行打印 console.log('春江潮水连海平');
        // 2、1++ i = 1 判断是否满足条件 0 < 5 true console.log('春江潮水连海平');

双重for循环

for(外初始化变量；外条件表达式；外操作表达式){
		//循环体
   for(初始化变量；条件表达式；操作表达式){
    //循环体
  }
}

外面的for循环，循环一次，里面的for循环，循环到结束

while 循环

语法：

while(条件表达式){
	//循环体代码
}

先执行条件表达式，结果为true，就可以执行循环体代码

如果没有退出循环的条件，会成为死循环

        var i = 1
        while (i < 10) {
            console.log(i);
            i++;
        }

do-while循环

语法：

do{
	//循环体代码
}while(条件表达式)

如果没有退出循环的条件，会成为死循环

但是，这个do-while循环，会先执行一次，再判断条件

this

指本元素

• this指的是触发当前事件的对象，函数中用来表示调用这个函数的对象，事件中，哪个对象触发了事件this就指向谁

• 理解this之前，一定要注意，this既不指向函数本身，也不是指向函数的词法作用域，也就是this在定义的时候，是不知道指向于谁的，只有函数在被调用的那一瞬间，也就是this指向于谁，取决于你是怎么调用函数的

• this永远指向一个对象

• this的指向完全取决于函数的调用的位置