#关于JS if条件语句及循环语句详解

一、程序结构

​ 程序结构:程序的执行顺序

  • ​ 顺序结构

  • ​ 选择(分支)结构

    ​ if语句

    ​ if…else

    ​ if…else if…else

    ​ switch

  • ​ 循环结构

    ​ for

    ​ while

    ​ do…while

    ​ for…in

二、分支结构

  1. if 语句

    //语法:
    if(条件){
    	代码块;
    }
    
    //执行规则:若条件成立,则执行代码块
    

    示例:

            //周五考试,60分以上及格
            var score = prompt("请输入分数:");//输入框   返回值: 点击确定按钮时,返回  输入框的内容,,点击取消按钮时,返回null
            // console.log(score);
            if (score > 60) {
                alert("及格");
            }
    
  2. if…else语法

    //语法
    if(条件){
    	代码块;
    }else{
    	代码块;
    }
    
    //执行规则:若条件成立,则执行对应的代码块;否则,执行else对应的代码块
    

    示例:

            //根据用户年龄,判断用户是否可以进入网吧 
            var age = prompt("请输入用户的年龄:");
            if (age >= 18) {
                alert("尽情玩耍吧");
            } else {
                alert('回家写作业吧');
            }
    

若if或者else语法后面的代码只要一句,则可以省略{}

3.多分支语句

//语法
if(条件1){
	代码块1;
}else if(条件2){
	代码块2;
}
...
else if(条件n){
	代码块n;
}else{
	代码块m;
}

//执行规则:条件1成立,则执行对应的代码块1,

示例:

        // 周五考试     60分以下的补考  90分以上的 优秀  其它  及格
        var score = prompt('请输入分数:');
        // if (score < 60) {
        //     alert("补考")
        // } else if (score >= 60 && score <= 90) {
        //     alert("及格")
        // } else if (score > 90) {
        //     alert("优秀,有奖...");
        // } else {
        //     alert('请重新输入');
        // }

        if (score > 90) {
            alert("优秀,,奖励");
        } else if (score > 60) {
            alert("及格");
        } else if (score > 0) {
            alert("补考");
        } else {
            alert('非法输入');
        }

4.if语句的嵌套

在分支语句中可以嵌套其它的分支语句

if(){
	if(){}else{}
}


if(){

}else{
	if(){}
}

示例:

        //周五考试   60分以下补考,其它及格
        var score = prompt("请输入考试分数:");
        if (score != null) {
            if (score >= 60) {
                alert('及格');
            } else {
                alert("补考");
            }
        } else {
            alert("点击了取消按钮");
        }

        //点击  取消   score   null

5.switch结构

//语法:
switch(表达式){
	case1:
		代码块;
	break;
	case2:
		代码块;
	break;
	...
	case 值n:
		代码块;
	break;
	default:
		代码块;
	break;
}

//执行规则:switch后的表达式与case后面的值相等时,即执行对应的代码块;若都不相等,则执行default对应的代码

示例:

        switch (slt.value) {        //   slt.value=== "+"
            case "+":
                console.log(v1 + v2);
                break;
            case "-":
                console.log(v1 - v2);
                break;
            case "*":
                console.log(v1 * v2);
                break;
            case "/":
                console.log(v1 / v2);
                break;
            default:
                console.log(v1 + v2);
                break;
        }

注意:switch.case的比较是一个全等的比较 (===)

注意:break的问题,若省略,会出现穿透问题。

三、DOM中查找节点对象的方法

1.根据id找元素

document.getElementById(id);//唯一的节点对象      不存在 null

2.根据标签名找元素

//在文档中,根据标签名找元素
document.getELementsByTagName(tagName);
//在指定的节点下找元素
node.getElementsByTagName(tagName);

该方法的返回值是一个集合(类数组/伪数组), 集合有:length属性,索引

可以通过索引来取出里面的值 : 集合[索引]

3.根据class来找元素

//根据类名找元素
document.getElementsByClassName(cls);

返回值:集合

四、循环结构

重复的执行一段代码

1.for循环

//语法
for(循环变量初始化;循环条件判断;循环迭代){
	循环体;
}
/*
	执行规则:for循环的执行可以分为如下几步:
	第一步:循环变量初始化					var i=0;
	第二步:循环条件的判断					i<5
		若判断结果为真,则执行第三步
		若判断结果为假,则结束循环
	第三步:执行循环体					 console.log(i)
	第四步:循环的迭代					 i++
	第五步:回到第二步
*/
        for (var i = 0; i < 5; i++) {
            console.log(i);
        }

2.循环嵌套

外层循环执行一次,内层循环执行一遍

/*
                *
                ***
                *****
                *******

                行号        *个数
                1           1
                2           3
                3           5
                4           7

                n           2*n-1
        */
        //控制行数
        for (var i = 1; i < 5; i++) {
            //打印一行*
            for (var j = 0; j < 2 * i - 1; j++) {
                document.write('*');
            }
            document.write("<br>");
        }

3.break和continue

break与continue的区别:

​ break结束循环

​ continue 结束本次循环,继续下一次循环

注意:break和continue都是只对所在循环生效(不能控制外层的循环)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值