JavaScript的流程控制语句if

浏览数：34 / 时间：2015年06月08日

一、关于if判断语句：

　　1、if判断语句的三种格式：

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

　　2、在使用if判断语句之前，得先有个条件(如果自身没有条件我们自己可以创建条件)

二、第一种格式：　　

　　if (){}

　　 var box = 100;
    if (box > 50) 
        alert(‘box 大于 50‘); //一行的 if 语句，判断后执行一条语句

    var box = 100;
    if (box > 50)
        alert(‘box 大于 50‘); //属于if语句控制范围
    alert(‘不管怎样，我都能被执行到！‘);//不属于if语句控制范围

　　var box = 100;
    if (box < 50) {
        alert(‘box 大于 50‘);
        alert(‘不管怎样，我都能被执行到！‘);
    }

　　对于 if 语句括号里的表达式，ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值。如果值为 true，执行后面的一条语句，否则不执行。

　　if 语句括号里的表达式如果为 true，只会执行后面一条语句，如果有多条语句，那么就必须使用{}把多条语句包含在内。

　　推荐使用第一种或者第三种格式，一行的 if 语句，或者多行的 if 复合语句。这样就不会因为多条语句而造成混乱。

　　/*
    var x;
    if(x==null){
        alert("空值");
　　*/
　　/*
    var x;
    if(typeof(x)=="undefined"){
        alert("空值");
    }
　　*/
　　//对于上面判断x是否是空值，可以使用下面的简写格式（变量x可以直接作为条件表达式来用，如果有值则为true，如果是undefined或null的话就为false）
    var x;
    if(!x){                        
        alert("空值");
    }
    
    var y = 3;
    if(y){                        //当y没有值是undefined或null的时候 这里为false，不执行if下的语句
        alert(y+3);
    }

三、第二种格式：

　　if (条件表达式) {语句;} else {语句;}

    var box = 100;
    if (box > 50) {
        alert(‘box 大于 50‘); //条件为 true，执行这个代码块
    } else {
        alert(‘box 小于 50‘); //条件为 false，执行这个代码块
    }

var x = 100 
if(x!=100)
　　if(x<100)
　　　　alert("x<100");
　　else
　　　　alert("x>100");
//没有结果，else是属于第二个if的

四、第三种格式：

　　if (条件表达式) {语句;} else if (条件表达式) {语句;} ... else {语句;}

    var box = 100;
    if (box >= 100) {                 //如果满足条件，不会执行下面任何分支
        alert(‘甲‘);
    } else if (box >= 90) {
        alert(‘乙‘);
    } else if (box >= 80) {
        alert(‘丙‘);
    } else if (box >= 70) {
        alert(‘丁‘);
    } else if (box >= 60) {
        alert(‘及格‘);
    } else {                         //如果以上都不满足，则输出不及格
        alert(‘不及格‘);
    }

五、关于if判断语句里面的条件表达式

　　有一些HTML的属性不能作为判断条件：

　　　　img标签的src属性

　　 a标签href属性

　　　 innerHTML值别拿来做判断

　　　　颜色值：color: red #f00 rgb() rgba() 颜色值有很多种写法，判断中不能用颜色来判断

<title>无标题文档</title>
<script>
window.onload = function (){
    var oImg = document.getElementById(‘img1‘);
    
    oImg.onclick = function (){
        //alert( oImg.src );//浏览器获取的是绝对路劲
        // if( oImg.src == ‘img/1.jpg‘ ){} //这是错误的写法，不会有效果
        
        
        //这里要使用绝对路劲才有效，但是............你懂得
        if( oImg.src == ‘file:///E:/miaowei9A/img/1.jpg‘ ){
            oImg.src = ‘img/2.jpg‘;
        }
    };
};
</script>
</head>
<body>
    <img id="img1" src="img/1.jpg" width="400" />
</body>

六、if判断语句练习

　　1、类似聊天案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
    #div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script>
    window.onload = function (){
        var oDiv = document.getElementById(‘div1‘);
        var oStrong = document.getElementById(‘strong1‘);
        var oText = document.getElementById(‘text1‘);
        var oBtn = document.getElementById(‘btn1‘);
        
        oBtn.onclick = function (){
            if( oText.value == ‘‘ ){
                alert(‘没说话呢，别急着点~~‘);
            }else{
                oDiv.innerHTML += oStrong.innerHTML + oText.value + ‘<br />‘;
                oText.value = ‘‘;
            }
        };
    };
</script>
</head>

<body>
    <div id="div1"></div>
    <strong id="strong1">张三：</strong>
    <input id="text1" type="text" />
    <input id="btn1" type="button" value="提交" />
</body>
</html>

　　2、通过判断来改变字体大小：通过判断当字体大小打了某个值得时候不在改变

<title>无标题文档</title>
<script>
window.onload = function (){
    var oBtn1 = document.getElementById(‘btn1‘);
    var oBtn2 = document.getElementById(‘btn2‘);
    var oP = document.getElementById(‘p1‘);
    var num = 16;
    
    oBtn1.onclick = function (){
        if( num > 12 ){
            num -= 2;
            oP.style.fontSize = num + ‘px‘;
        }
    };
    oBtn2.onclick = function (){
        if( num < 30 ){
            num += 2;
            oP.style.fontSize = num + ‘px‘;
        }
    };
};
</script>
</head>

<body>
    <input id="btn1" type="button" value="-" />
    <input id="btn2" type="button" value="+" />
    <p id="p1" style="font-size:16px;">10月28日晚，中央纪委，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受</p>
</body>

　　3、通关口令：需要用户输入设定的值才能通过，否则不给通过

<title>无标题文档</title>
<script>
window.onload = function (){
    var oText = document.getElementById(‘text1‘);
    var oBtn = document.getElementById(‘btn1‘);
    
    oBtn.onclick = function (){
        if( oText.value == ‘‘ ){
            alert(‘请输入‘);
        } else if ( oText.value == ‘CSS‘ ){
            alert(‘ok，您输入的是：CSS，恭喜通过！‘);
        } else if ( oText.value == ‘JS‘ ){
            alert(‘ok，您输入的是：CSS，恭喜通过！‘);
        } else if ( oText.value == ‘HTML5‘ ){
            alert(‘ok，您输入的是：HTML5，恭喜通过！‘);
        } else {
            alert(‘我不喜欢你写的内容，88~‘);
        }
    };
};
</script>
</head>
<body>
    <input id="text1" type="text" />
    <input id="btn1" type="button" value="口令确认" />
</body>

　　4、通过判断切换图片

<title>无标题文档</title>
<script>
    window.onload= function(){
        var oImg = document.getElementById(‘img1‘);
        var onOff = true;        //有条件，就用现成的，如果没有，创造条件也得做事

        oImg.onclick = function (){
            // if( oImg.src == ‘img/2.jpg‘ ){}//图片地址不能作为判断条件
        
            if( onOff ){
                oImg.src = ‘img/4.jpg‘;
                onOff = false;
            } else {
                oImg.src = ‘img/2.jpg‘;
                onOff = true;
            }
        };
    };
</script>
</head>
<body>
    <img id="img1" src="img/2.jpg" width="200" />
</body>



　　5、模拟用户登录
　　　　假设用户名和密码都是已知的，都是cray
　　　　通过键盘录入用户名和密码
　　　　把录入的用户名和密码和已知的数据进行判断
　　　　如果不相等，就提示登录失败，如果相等就提示登录成功

<script>
     //通过键盘录入用户名和密码
    var username=prompt("请输入您的名字","cary");
    var password=prompt("请输入密码","cary");
    
    //把录入的用户名和密码和已知的数据进行判断
    if("liuyi"==username && "liuyi"==password){
        alert("登录成功");
    }else{
        alert("用户名或密码错误");
    }
</script>

三、switch语句：switch 语句是多重条件判断，用于多个值相等的比较。

 　　var box = 1;
    switch (box) {                 //用于判断 box 相等的多个值
        case 1 :
            alert(‘one‘);
            break;                 //break;用于防止语句的穿透
        case 2 :
            alert(‘two‘);
            break;
        case 3 :
            alert(‘three‘);
            break;
        default :                 //相当于 if 语句里的 else，否则的意思
            alert(‘error‘);
        }

四、while语句：是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。

　　var box = 1;             
    while (box <= 5) {         //先判断，再执行
        alert(box);
        box++;
    }

五、do...while 语句：是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。

   var box = 1; 
    do {
        alert(box);
        box++;
    } while (box <= 5); //先运行一次，再判断

六、for语句：也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

　　for (var box = 1; box <= 5 ; box++) {           //第一步，声明变量 var box = 1;
        alert(box);                                 //第二步，判断 box <=5
    }                                               //第三步，alert(box)
                                                    //第四步，box++
                                                    //第五步，从第二步再来，直到判断为 false

七、break和continue语句：用于在循环中精确地控制代码的执行。

break 语句会立即退出循环，强制继续执行循环体后面的语句。

 for (var box = 1; box <= 10; box++) {
        if (box == 5) 
            break;                     //如果 box 是 5，就退出循环
        document.write(box);
        document.write(‘<br />‘);
    }

continue 语句退出当前循环，继续后面的循环。

for (var box = 1; box <= 10; box++) {
        if (box == 5) 
            continue; //如果 box 是 5，就退出当前继续下一次循环循环
        document.write(box);
        document.write(‘<br />‘);
    }

八、with语句：作用是将代码的作用域设置到一个特定的对象中。

var box = {                 //创建一个对象
        ‘name‘ : ‘李炎恢‘,         //键值对
        ‘age‘ : 28,
        ‘height‘ : 178
    };
var n = box.name;             //从对象里取值赋给变量
var a = box.age;
var h = box.height;

可以将上面的三段赋值操作改写成：

with (box) {                 //省略了 box 对象名
  var n = name;
  var a = age;
  var h = height;
}

九、for...in语句：是一种精准的迭代语句，可以用来枚举对象的属性和方法。

　　var box = {                 //创建一个对象
        ‘name‘ : ‘李炎恢‘,         //键值对，左边是属性名，右边是值
        ‘age‘ : 28,
        ‘height‘ : 178,
     　　run : function(){
        　　alert("fadsf");
    　　}
    };
    for (var p in box) {         //列举出对象的所有属性和方法
        alert(p);
    }

十、练习：

1.模拟四则运算（就是四个运算加减乘除）

　　键盘录入（promot）参与运算的数据，和操作符时什么(加减乘除)

　　根据输入的操作来判断进行何种操作

　　根据操作输出结果

　　var firstNumber = prompt("请输入第一个操作数:","0");//接收键盘录入的第一个操作数
    
    var operator = prompt("请输入操作符","-");//接收键盘录入的操作符
    
    var secondNumber = prompt("请输入第一个操作数:","0");//接收键盘录入的第一个操作数
    
    /*注意：键盘录入的是字符串，不是数值类型的，所以当进行+法运算时，字符串之间是当做连接符来用的，所以要将键盘录入的操作数转换成数值类型进行加减乘除
        有两种方案：
                方案一：将获取到的操作数，firstNumber和secondNumber都减去0，这样字符串会隐式转换成数值类型（number）这样就可以进行加减乘除的运算了
                方案二：使用praseInt()方法将字符串转换成数值类型，这种做放比较专业
    */
    firstNumber = parseInt(firstNumber);
    secondNumber = parseInt(secondNumber);
    
    switch(operator){
        case "-":
            alert(firstNumber-secondNumber);
            break;
        case "+":
            alert(firstNumber+secondNumber);
            break;
        case "*":
            alert(firstNumber*secondNumber);
            break;
        case "/":
            alert(firstNumber/secondNumber);
            break;
        default:
            alert("目前不支持此种运算");
    }
    //还可以使用if else来实现