【JavaScript流程控制语句的用法及练习】
1、做判断(if语句)
if语句是基于条件成立才执行相应代码时使用的语句。
语法: if(条件){
条件成立时执行代码 }
例子:1.假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司。
1 <h4>你会HTML技术吗?</h4> 2 <input type="button" onclick="an()" id="button1" value="会"/> 3 <script> 4 function an(){ 5 var an=document.getElementById("button1").value; 6 if (an=="会") { 7 alert("欢迎加入公司"); 8 }else{ 9 alert("不欢迎加入公司"); 10 } 11 } 12 </script>
2、二选一(if...else语句)
if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法:
if(条件){
条件成立时执行的代码
}else{
条件不成立时执行的代码
}
例子:2.假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司,否则你面试不成功,不能加入公司.
1 <h4>你会HTML技术吗?</h4> 2 <input type="button" onclick="an()" id="button1" value="会"/> 3 <input type="button" onclick="an1()" id="button2" value="不会"/> 4 <script> 5 function an1(){ 6 var an=document.getElementById("button2").value; 7 if (an=="会") { 8 alert("欢迎加入公司"); 9 }else{ 10 alert("不欢迎加入公司"); 11 } 12 } 13 </script>
3、多重判断(if...else嵌套语句)
要在多组语句中选择一组来执行,使用if..else嵌套语句。
语法:
if(条件1)
{ 条件1成立时执行的代码}
else if(条件2)
{ 条件2成立时执行的代码}
...
else if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}
例子:联合国世界卫生组织对年龄的划分标准, 44岁以下为青年;45岁至59·岁为中年人。60岁至89岁为老年人;90岁以上为长寿老年人。赵红今年99岁了,她属于哪个年龄阶 段的。
1 <span>我今年</span><input type="number" value="" id="age"><button onclick="an2()">查看我的年龄阶段</button> 2 <script type="text/javascript"> 3 function an2(){ 4 var age=document.getElementById("age").value; 5 if (age>=0 &&age<=44){ 6 alert("青年!"); 7 } 8 else if (age>=45 && age<=59){ 9 alert("中年人!"); 10 } 11 else if (age>=60 && age<=89){ 12 alert("老年人!"); 13 } 14 else if(age>=90){ 15 alert("长寿老年人!"); 16 } 17 } 18 </script>
4、多种选择(Switch语句)
语法:
switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码
}
例子:我们来做个周计划,周一、二学习理念知识,周三、四到企业实践,周五总结经验,周六、日休息和娱乐。
1 <button onclick="an3()">今天是周几,今天干什么</button> 2 <script> 3 var d=new Date().getDay(); 4 function an3(){ 5 switch (d) 6 { case 1: 7 case 2:x="今天学习理念知识"; 8 break; 9 case 3: 10 case 4:x="今天到企业实践"; 11 break; 12 case 5:x="今天是星期五总结经验"; 13 break; 14 case 6: 15 case 7:x="今天休息和娱乐。"; 16 break; 17 } 18 alert(x); 19 } 20 </script>
5、重复重复(for循环)
很多事情不只是做一次,要重复做。如打印10份试卷,每次打印一份,重复这个动作,直到打印完成。这些事情,我们使用循环语句来完成,循环语句, 就是重复执行一段代码。
语法:
for(初始化变量;循环条件;循环迭代)
{
循环语句
}
例子:假如,一个盒子里有6个球,我们每次取一个,重复从盒中取出球,直到球取完为止。
1 <input type="button" onclick="an4()" value="点我看有几颗球"> 2 <script type="text/javascript"> 3 var qiu=6; 4 function an4(){ 5 for (qiu=6;qiu>=1;qiu--){ 6 alert("第"+qiu+"个球"); 7 } 8 } 9 </script>
例子:我们有1,2,3...10不同面值的钱,使用for语句完成合计,看看我们一共有多少钱?
1 <script type="text/JavaScript"> 2 var sum=0; 3 for(var money=1;money<=10;money++){ 4 sum=sum+money; 5 } 6 document.write("我们一共有:"+sum); 7 </script>
6、反反复复(while循环)
和for循环有相同功能的还有while循环, while循环重复执行一段代码,直到某个条件不再满足。
语法:
while(判断条件)
{
循环语句
}
例子:使用while循环,完成从盒子里取球的动作,每次取一个,共6个球。
1 <input type="button" onclick="an5()" value="点我看有几颗球"> 2 <script> 3 var qiu1=1; 4 function an5(){ 5 while(qiu1<=6){ 6 alert("第"+qiu1+"个球"); 7 qiu1++; 8 } 9 } 10 </script>
7、来来回回(Do...while循环)
do while结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件,如果条件为真,继续循 环。
语法:
do
{
循环语句
}
while(判断条件)
例子:使用do...while语句,输出1-6这6个数字。
1 <script> 2 var num1=1; 3 do{ 4 document.write("输出数字"+num1+"<br />"); 5 num1++; 6 } 7 while(num1<=6) 8 </script>
8、退出循环break
在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。
语法:
for(初始条件;判断条件;循环后条件值更新){
if(特殊情况)
{break;}
循环代码
}
例子:考试成绩输出,如果成绩及格继续输出下个成绩,如果成绩不及格,退出并且后面成绩不输出.
1 <script type="text/JavaScript"> 2 var num2 =new Array(60,70,80,10,20,30,40,50,90,100); 3 for(var i=0;i<num2.length;i++){ 4 if (num2[i]<60) { 5 document.write(num2[i]+"——我不及格,那我后面的我也不给看<br/>") 6 break; //结束整个循环 7 } 8 document.write(num2[i]+"——及格了<br/>") 9 } 10 </script>
9、继续循环continue<跳过当次循环,进入下次循环>
语法:
for(初始条件;判断条件;循环后条件值更新){
if(特殊情况){
continue;
}
循环代码
}
例子:考试成绩输出,如果成绩及格继续输出下个成绩,如果成绩不及格,则不输出该成绩。
1 <script type="text/JavaScript"> 2 var num2 =new Array(60,70,80,10,20,30,40,50,90,100); 3 for(var i=0;i<num2.length;i++){ 4 if (num2[i]<60) { 5 document.write("我不及格,我不想给你看<br/>") 6 continue; //结束本次循环(跳过下一步) 7 } 8 document.write(num2[i]+"——及格了<br/>") 9 } 10 </script>
10、数组循环
例子:在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的 女生的的名字哦。
学生信息如下:
('小A','女',21,'大一'), ('小B','男',23,'大三'), ('小C','男',24,'大四'), ('小D','女',21,'大一'), ('小E','女',22,'大四'), ('小F','男',21,'大一'), ('小G','女',22,'大二'), ('小H','女',20,'大三'), ('小I','女',20,'大一'), ('小J','男',20,'大三')
1 <script> 2 var arr = new Array 3 arr[0] = new Array ('小A','女',21,'大一'); 4 arr[1] = new Array ('小B','男',23,'大三'); 5 arr[2] = new Array ('小C','男',24,'大四'); 6 arr[3] = new Array ('小D','女',21,'大一'); 7 arr[4] = new Array ('小E','女',22,'大四'); 8 arr[5] = new Array ('小F','男',21,'大一'); 9 arr[6] = new Array ('小G','女',22,'大二'); 10 arr[7] = new Array ('小H','女',20,'大三'); 11 arr[8] = new Array ('小I','女',20,'大一'); 12 arr[9] = new Array ('小J','男',20,'大三'); 13 14 for(i=0;i<arr.length;i++){ 15 if (arr[i][3]=='大一' && arr[i][1]=='女') { 16 document.write("我是大一的女生"+arr[i][0]+"哦!<br />"); 17 } 18 } 19 </script>