标签：
一、关于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来实现
标签：
原文地址：http://www.cnblogs.com/LO-ME/p/3581026.html
