流程控制
一、代码块
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 程序是由一条一条语句构成的 * 语句是按照自上向下的顺序一条一条执行的 * 在JS中可以使用{}来为语句进行分组, * 同一个{}中的语句称为是一组语句,它们要么都执行,要么都不执行,一个{}中的语句我们也称为叫一个代码块 * 在代码块的后边就不用再编写;了 * * JS中的代码块,只具有分组的的作用,没有其他的用途 * 代码块里面的内容,在外部是完全可见的 */ { var a = 10; alert("hello"); console.log("你好"); document.write("语句"); } console.log("a = "+a); </script> </head> <body> </body> </html>
二、流程控制语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 流程控制语句 * JS中的程序是从上到下一行一行执行的 * 通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行 * 语句的分类: * 1.条件判断语句 * 2.条件分支语句 * 3.循环语句 * * * 条件判断语句: * 使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。 * * if语句 * 语法一: * if(条件表达式){ * 语句... * } * * if语句在执行时,会先对条件表达式进行求值判断, * 如果条件表达式的值为true,则执行if后的语句, * 如果条件表达式的值为false,则不会执行if后的语句。 * if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中 * if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句 */ var a = 25; if(a > 10 && a <= 20){ alert("a大于10,并且 a小于等于20"); } </script> </head> <body> </body> </html>
1、if语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * if语句 * 语法二: * if(条件表达式){ * 语句... * }else{ * 语句... * } * * if...else...语句 * 当该语句执行时,会先对if后的条件表达式进行求值判断, * 如果该值为true,则执行if后的语句 * 如果该值为false,则执行else后的语句 * * 语法三: * if(条件表达式){ * 语句... * }else if(条件表达式){ * 语句... * }else if(条件表达式){ * 语句... * }else{ * 语句... * } * * if...else if...else * 当该语句执行时,会从上到下依次对条件表达式进行求值判断 * 如果值为true,则执行当前语句。 * 如果值为false,则继续向下判断。 * 如果所有的条件都不满足,则执行最后一个else后的语句 * 该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句 */ var age = 50; if(age >= 60){ alert("你已经退休了~~"); }else{ alert("你还没退休~~~"); } age = 200; if(age > 100){ alert("活着挺没意思的~~"); }else if(age > 80){ alert("你也老大不小的了~~"); }else if(age > 60){ alert("你也退休了~~"); }else if(age > 30){ alert("你已经中年了~~"); }else if(age > 17){ alert("你已经成年了"); }else{ alert("你还是个小孩子~~"); } age = 90; if(age > 17 && age <= 30){ alert("你已经成年了"); }else if(age > 30 && age <= 60){ alert("你已经中年了"); }else if(age > 60 && age <= 80){ alert("你已经退休了"); }else{ alert("你岁数挺大的了~~"); } </script> </head> <body> </body> </html>
2、练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>if练习1</title> <script type="text/javascript"> /* * 从键盘输入小明的期末成绩: * 当成绩为100时,'奖励一辆BMW' * 当成绩为[80-99]时,'奖励一台iphone15s' * 当成绩为[60-80]时,'奖励一本参考书' * 其他时,什么奖励也没有 */ /* * prompt()可以弹出一个提示框,该提示框中会带有一个文本框, * 用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数, * 该字符串将会作为提示框的提示文字 * * 用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容 */ //score就是小明的期末成绩 var score = prompt("请输入小明的期末成绩(0-100):"); //判断值是否合法 if(score > 100 || score < 0 || isNaN(score)){ alert("拉出去毙了~~~"); }else{ //根据score的值来决定给小明什么奖励 if(score == 100){ //奖励一台宝马 alert("宝马,拿去~~~"); }else if(score >= 80){ //奖励一个手机 alert("手机,拿去玩~~~"); }else if(score >= 60){ //奖励一本参考书 alert("参考书,拿去看~~~"); }else{ alert("棍子一根~~"); } } /* * 大家都知道,男大当婚,女大当嫁。那么女方家长要嫁女儿,当然要提出一定的条件: * 高:180cm以上; 富:1000万以上; 帅:500以上; * 如果这三个条件同时满足,则:'我一定要嫁给他' * 如果三个条件有为真的情况,则:'嫁吧,比上不足,比下有余。' * 如果三个条件都不满足,则:'不嫁!' */ var height = prompt("请输入你的身高(CM):"); var money = prompt("请输入你的财富(万):"); var face = prompt("请输入你的颜值(PX):"); //如果这三个条件同时满足,则:'我一定要嫁给他' if(height > 180 && money > 1000 && face > 500){ alert("我一定要嫁给他~~"); }else if(height > 180 || money > 1000 || face > 500){ //如果三个条件有为真的情况,则:'嫁吧,比上不足,比下有余。' alert("嫁吧,比上不足,比下有余。"); }else{ //如果三个条件都不满足,则:'不嫁!' alert("不嫁。"); } /* * 编写程序,由键盘输入三个整数分别存入变量num1、num2、num3, * 对他们进行排序,并且从小到大输出。 */ //获取用户输入的三个数 /* * prompt()函数的返回值是String类型的 */ var num1 = +prompt("请输入第一个数:"); var num2 = +prompt("请输入第二个数:"); var num3 = +prompt("请输入第三个数:"); //找到三个数中最小的数 if(num1 < num2 && num1 < num3){ //num1最小,比较num2和num3 if(num2 < num3){ //num1 num2 num3 alert(num1 +","+num2 + ","+num3); }else{ //num1 num3 num2 alert(num1 +","+num3 + ","+num2); } }else if(num2 < num1 && num2 < num3){ //num2最小,比较num1和num3 if(num1 < num3){ //num2 num1 num3 alert(num2 +","+num1 + ","+num3); }else{ //num2 num3 num1 alert(num2 +","+num3 + ","+num1); } }else{ //num3最小,比较num1和num2 if(num1 < num2){ // num3 num1 num2 alert(num3 +","+num1 + ","+num2); }else{ //num3 num2 num1 alert(num3 +","+num2 + ","+num1); } } </script> </head> <body> </body> </html>
3、switch语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 条件分支语句也叫switch语句 * 语法: * switch(条件表达式){ * case 表达式: * 语句... * break; * case 表达式: * 语句... * break; * default: * 语句... * break; * } * * 执行流程: * switch...case..语句 * 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较, * 如果比较结果为true,则从当前case处开始执行代码。 * 当前case后的所有的代码都会执行,可以在case的后边跟着一个break关键字, * 这样可以确保只会执行当前case后的语句,而不会执行其他的case * 如果比较结果为false,则继续向下比较 * 如果所有的比较结果都为false,则只执行default后的语句 * * switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能, * 同样使用if也可以实现switch的功能,所以使用时可以根据自己的习惯选择。 */ //根据num的值,输出对应的中文 var num = 3; if(num == 1){ console.log("壹"); }else if(num == 2){ console.log("贰"); }else if(num == 3){ console.log("叁"); } num = 2; switch(num){ case 1: console.log("壹"); //使用break可以来退出switch语句 break; case 2: console.log("贰"); break; case 3: console.log("叁"); break; default: console.log("非法数字~~"); break; } </script> </head> <body> </body> </html>
4、switch练习一
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>switch练习1</title> <script type="text/javascript"> /* * 对于成绩大于60分的,输出'合格'。低于60分的,输出'不合格' * * 6x / 10 = 6 * 7x / 10 = 7 * 8x / 10 = 8 * 9x / 10 = 9 * 100 / 10 = 10 */ var score = 75; switch(parseInt(score/10)){ case 10: case 9: case 8: case 7: case 6: console.log("合格"); break; default: console.log("不合格"); break; } switch(true){ case score >= 60: console.log("合格"); break; default: console.log("不合格"); break; } </script> <body> </body> </html>
5、switch练习二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>switch练习2</title> <script type="text/javascript"> /* 从键盘接收整数参数,如果该数为1-7,打印对应的星期,否则打印非法参数 */ var num=+prompt("请输入一个整数(1-7)") switch(num){ case 1: alert("星期一"); break; case 2: alert("星期二"); break; case 3: alert("星期三"); break; case 4: alert("星期四"); break; case 5: alert("星期五"); break; case 6: alert("星期六"); break; case 7: alert("星期日"); break; default: alert("非法参数"); break; } </script> <body> </body> </html>
6、循环控制语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 向页面中输出连续的数字 */ /*var n = 1; document.write(n++ +"<br />");*/ /* * 循环语句: * 通过循环语句可以反复的执行一段代码多次 * * while循环 * 语法: * while(条件表达式){ * 语句... * } * * while语句在执行时, * 先对条件表达式进行求值判断, * 如果值为true,则执行循环体, * 循环体执行完毕以后,继续对表达式进行判断 * 如果为true,则继续执行循环体,以此类推 * 如果值为false,则终止循环 * * do...while循环 * 语法: * do{ * 语句... * }while(条件表达式) * * 执行流程: * do...while语句在执行时,会先执行循环体, * 循环体执行完毕以后,在对while后的条件表达式进行判断, * 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推 * 如果结果为false,则终止循环 * * 实际上这两个语句功能类似,不同的是while是先判断后执行, * 而do...while会先执行后判断, * do...while可以保证循环体至少执行一次,而while不能 */ var n = 1; //向这种将条件表达式写死为true的循环,叫做死循环 //该循环不会停止,除非浏览器关闭,死循环在开发中慎用 //可以使用break,来终止循环 while(true){ alert(n++); //判断n是否是10 if(n == 10){ //退出循环 break; } } //创建一个循环,往往需要三个步骤 //1.创初始化一个变量 var i = 11; //2.在循环中设置一个条件表达式 while(i <= 10){ //3.定义一个更新表达式,每次更新初始化变量 document.write(i++ +"<br />") } do{ document.write(i++ +"<br />"); }while(i <= 10); /*while(true){ alert(1); }*/ </script> </head> <body> </body> </html>
7、while练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /*假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年 */ //定义一个变量,表示当前的钱数 var money = 1000; //定义一个计数器 var count = 0; //定义一个while循环来计算每年的钱数 while(money < 5000){ money *= 1.05; //使count自增 count++; } console.log("一共需要"+count+"年"); /* * 从键盘输入小明的期末成绩: * 当成绩为100时,'奖励一辆BMW' * 当成绩为[80-99]时,'奖励一台iphone15s' * 当成绩为[60-80]时,'奖励一本参考书' * 其他时,什么奖励也没有 */ /* * prompt()可以弹出一个提示框,该提示框中会带有一个文本框, * 用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数, * 该字符串将会作为提示框的提示文字 * * 用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容 */ //将prompt放入到一个循环中 while(true){ //score就是小明的期末成绩 var score = prompt("请输入小明的期末成绩(0-100):"); //判断用户输入的值是否合法 if(score >= 0 && score <= 100){ //满足该条件则证明用户的输入合法,退出循环 break; } alert("请输入有效的分数!(0-100)"); } //判断值是否合法 if(score > 100 || score < 0 || isNaN(score)){ alert("拉出去毙了~~~"); }else{ //根据score的值来决定给小明什么奖励 if(score == 100){ //奖励一台宝马 alert("宝马,拿去~~~"); }else if(score >= 80){ //奖励一个手机 alert("手机,拿去玩~~~"); }else if(score >= 60){ //奖励一本参考书 alert("参考书,拿去看~~~"); }else{ alert("棍子一根~~"); } } </script> </head> <body> </body> </html>
8、for循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * for语句,也是一个循环语句,也称为for循环 * 在for循环中,提供了专门的位置用来放三个表达式: * 1.初始化表达式 * 2.条件表达式 * 3.更新表达式 * * for循环的语法: * for(①初始化表达式;②条件表达式;④更新表达式){ * ③语句... * } * * for循环的执行流程: * ①执行初始化表达式,初始化变量(初始化表达式只会执行一次) * ②执行条件表达式,判断是否执行循环。 * 如果为true,则执行循环③ * 如果为false,终止循环 * ④执行更新表达式,更新表达式执行完毕继续重复② */ //创建一个执行10次的while循环 //初始化表达式 var i = 0; //创建一个循环,定义条件表达式 while(i < 10){ //设置更新表达式 alert(i++); } for(var i = 0 ; i < 10 ; i++ ){ alert(i); } /* * for循环中的三个部分都可以省略,也可以写在外部 * 如果在for循环中不写任何的表达式,只写两个; * 此时循环是一个死循环会一直执行下去,慎用 * for(;;){ alert("hello"); } */ </script> </head> <body> </body> </html>
9、for循环练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 打印1-100之间所有奇数之和 */ //创建一个变量,用来保存奇数之和 //var sum = 0; //打印1-100之间的数 for(var i=1 , sum=0 ; i<=100 ; i++){ //判断i是否是奇数 //不能被2整除的数就是奇数 if(i%2 != 0){ //如果i除以2有余数则证明i是奇数 sum = sum+i; } } console.log("奇数之和为 : "+sum); /* * 打印1-100之间所有7的倍数的个数及总和 */ //定义一个变量,来保存总和 var sum = 0; //定义一个计数器,来记录数量 var count = 0; //打印1-100之间所有的数 for(var i=1 ; i<=100 ; i++){ //判断i是否是7的倍数 if(i % 7 == 0){ sum += i; //使计数器自增1 count++; } } //输出总和 console.log("总和为:"+sum); //输出总数 console.log("总数量为:"+count); /* * 水仙花数是指一个3位数,它的每个位上的数字的3 次幂之和等于它本身。 * (例如:1^3 + 5^3 + 3^3 = 153),请打印所有的水仙花数。 */ //打印所有的三位数 for(var i=100 ; i<1000 ; i++){ //获取i的百位 十位 个位的数字 //获取百位数字 var bai = parseInt(i/100); //获取十位的数字 var shi = parseInt((i-bai*100)/10); //获取个位数字 var ge = i % 10; //判断i是否是水仙花数 if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){ console.log(i); } } /* * 在页面中接收一个用户输入的数字,并判断该数是否是质数。 * 质数:只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数。 */ var num = prompt("请输入一个大于1的整数:"); //判断这个值是否合法 if(num <= 1){ alert("该值不合法!"); }else{ //创建一个变量来保存当前的数的状态,默认当前num是质数 var flag = true; //判断num是否是质数 //获取2-num之间的数 for(var i=2 ; i<num ; i++){ //判断num是否能被i整除 if(num % i == 0){ //如果num能被i整除,则说明num一定不是质数,设置flag为false flag = false; } } //如果num是质数则输出 if(flag){ alert(num + "是质数!!!"); }else{ alert(num + "不是质数") } } </script> </head> <body> </body> </html>
10、嵌套for循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* 通过程序,在页面中输出如下的图形: ***** ***** ***** ***** ***** * * 1 <1 i=0 ** 2 <2 i=1 *** 3 <3 i=2 **** 4 <4 i=3 ***** 5 <5 i=4 ***** 1 j<5(5-0) i=0 **** 2 j<4(5-1) i=1 *** 3 j<3(5-2) i=2 ** 4 j<2(5-3) i=3 * 5 j<1(5-4) i=4 */ //向body中输出一个内容 //document.write("*****<br />"); //通过一个for循环来输出图形 //这个for循环执行几次,图形的高度就是多少 //它可以用来控制图形的高度 for(var i=0;i<5;i++){ for(var j=0;j<5;j++){ document.write("* "); } document.write("<br />"); } for(var i=0 ; i<5 ; i++){ /* * 在循环的内部再创建一个循环,用来控制图形的宽度 * 目前外部的for循环执行1次,内部的就会执行5次 * 内层循环可以来决定图形的宽度,执行几次图形的宽度就是多少 */ for(var j=0 ; j<i+1 ; j++){ document.write("* "); } //输出一个换行 document.write("<br />"); } for(var i=0;i<5;i++){ for(var j=0 ; j<5-i ; j++){ document.write("* "); } document.write("<br />"); } </script> </head> <body> </body> </html>
11、嵌套for循环练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 1.打印99乘法表 * 1*1=1 * 1*2=2 2*2=4 * 1*3=3 2*3=6 3*3=9 * 1*4=4 2*4=8 3*4=12 4*4=16 * .... * 1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 */ //创建外层循环,用来控制乘法表的高度 for(var i=1 ; i<=9 ; i++ ){ //创建一个内层循环来控制图形的宽度 for(var j=1 ; j<=i ; j++){ document.write("<span>"+j+"*"+i+"="+i*j+"</span>"); } //输出一个换行 document.write("<br />"); } /* * 2.打印出1-100之间所有的质数 */ for(var i=2 ; i<=100 ; i++){ //创建一个布尔值,用来保存结果,默认i是质数 var flag = true; //判断i是否是质数 //获取到2-i之间的所有的数 for(var j=2 ; j<i ; j++){ //判断i是否能被j整除 if(i%j == 0){ //如果进入判断则证明i不是质数,修改flag值为false flag = false; } } //如果是质数,则打印i的值 if(flag){ console.log(i); } } </script> <style type="text/css"> body{ width: 2000px; } span{ display: inline-block; width: 80px; } </style> </head> <body> </body> </html>
12、break和continue关键字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * break关键字可以用来退出switch或循环语句 * 不能在if语句中使用break和continue * break关键字,会立即终止离他最近的那个循环语句 */ for(var i=0 ; i<5 ; i++){ console.log(i); if(i == 2){ break; } } for(var i=0 ; i<5 ; i++){ console.log("@外层循环"+i) for(var j=0 ; j<5; j++){ break; console.log("内层循环:"+j); } } /* * 可以为循环语句创建一个label,来标识当前的循环 * label:循环语句 * 使用break语句时,可以在break后跟着一个label, * 这样break将会结束指定的循环,而不是最近的 */ outer: for(var i=0 ; i<5 ; i++){ console.log("@外层循环"+i) for(var j=0 ; j<5; j++){ break outer; console.log("内层循环:"+j); } } /* * continue关键字可以用来跳过当次循环 * 同样continue也是默认只会对离他最近的循环循环起作用 */ for(var i=0 ; i<5 ; i++){ if(i==2){ continue; } console.log(i); } outer: for(var i=0 ; i<5 ; i++){ for(var j=0 ; j<5 ; j++){ continue; console.log("-->"+j); } console.log("@--->"+i); } </script> </head> <body> </body> </html>
13、优化质数练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //测试如下的程序的性能 //在程序执行前,开启计时器 //console.time("计时器的名字")可以用来开启一个计时器 //它需要一个字符串作为参数,这个字符串将会作为计时器的标识 console.time("test"); //打印2-100之间所有的数 for(var i=2 ; i<=100000 ; i++){ var flag = true; for(var j=2 ; j<=Math.sqrt(i) ; j++){ if(i%j == 0){ //如果进入判断则证明i不是质数,修改flag值为false flag = false; //一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义了 //使用break来结束循环 break; } } //如果是质数,则打印i的值 if(flag){ //console.log(i); } } //终止计时器 //console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数 console.timeEnd("test"); </script> </head> <body> </body> </html>