javascript 基础（2）
代码块
<!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>
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>
switch语句
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //语法： 10 /* 11 switch(){ 12 case 值: 13 代码块 14 break; 15 case 值: 16 代码块 17 break; 18 default: 19 代码块 20 break; 21 } 22 */ 23 24 //执行过程 25 //1、计算switch后面（）的值 26 //2、切记这个值不会做任何转化 27 //3、无论这个值是什么都会进入到花括号内部 28 //4、拿这个值去一一对比 case标号后面的值（对比的时候使用的是全等去做对比的） 29 //5、如果对比成功（全等），那么就会执行相应case标号下面的代码块 30 //6、如果所有的标号都不全等，最终会执行default标号下面的代码块 31 32 33 //理解：switch...case是if多分支的一个变种，为了解决if分支比较多的时候，代码可读性不强 34 //而出现的； 35 36 37 //1、输入一个数字，判定星期几 38 // 1 周一 39 // 2 周二 40 // 7 周日 41 42 43 // var num = parseFloat(prompt('请输入一个数')); 44 45 // if(num == 1){ 46 // console.log('周一'); 47 // }else if(num == 2){ 48 // console.log('周二'); 49 // }else if(num == 3){ 50 // console.log('周三'); 51 // }else if(num == 4){ 52 // console.log('周四'); 53 // }else if(num == 5){ 54 // console.log('周五'); 55 // }else if(num == 6){ 56 // console.log('周六'); 57 // }else if(num == 7){ 58 // console.log('周日'); 59 // }else{ 60 // console.log('温馨提示：输入的数字是1-7之间'); 61 // } 62 63 // switch(num){ 64 // case 1://case 代表标号用来做全等用的 65 // console.log('周一'); 66 // break;//作用：在switch语句当中用来跳出switch语句 67 // case 2://case是标号，对比的时候使用，一旦对比成功，所有的标号都失效，它不能阻止代码执行 68 // console.log('周二'); 69 // break; 70 // case 3: 71 // console.log('周三'); 72 // break; 73 // case 4: 74 // console.log('周四'); 75 // break; 76 // case 5: 77 // console.log('周五'); 78 // break; 79 // case 6: 80 // console.log('周六'); 81 // break; 82 // case 7: 83 // console.log('周日'); 84 // break; 85 // default: 86 // console.log('温馨提示：输入的数字是1-7之间'); 87 // break; 88 // } 89 90 //2、输入成绩，判断成绩的优良差不及格 91 // 90 - 100 A 92 // 80 - 90 B 93 // 70 - 80 C 94 // 60 - 70 D 95 // 60以下 不及格 96 97 98 var score = parseFloat(prompt('请输入你的分数')); 99 100 // if(score >= 90 && score <= 100){ 101 // console.log('A'); 102 // }else if(score >= 80 && score < 90){ 103 // console.log('B'); 104 // }else if(score >= 70 && score < 80){ 105 // console.log('C'); 106 // }else if(score >= 60 && score < 70){ 107 // console.log('D'); 108 // }else if(score >= 0 && score < 60){ 109 // console.log('不及格，重修'); 110 // }else{ 111 // console.log('温馨提示：分数应该是0 - 100之间'); 112 // } 113 114 switch(true){ 115 case score >= 90 && score <= 100: 116 console.log('A'); 117 break; 118 case score >= 80 && score < 90: 119 console.log('B'); 120 break; 121 case score >= 70 && score < 80: 122 console.log('C'); 123 break; 124 case score >= 60 && score < 70: 125 console.log('D'); 126 break; 127 case score >= 0 && score < 60: 128 console.log('不及格，重修'); 129 break; 130 default: 131 console.log('温馨提示：分数应该是0 - 100之间'); 132 break; 133 } 134 135 136 137 138 139 </script> 140 </body> 141 </html>
循环语句
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 9 /* 10 * 向页面中输出连续的数字 11 */ 12 /*var n = 1; 13 document.write(n++ +"<br />");*/ 14 15 /* 16 * 循环语句： 17 * 通过循环语句可以反复的执行一段代码多次 18 * 19 * while循环 20 * - 语法： 21 * while(条件表达式){ 22 * 语句... 23 * } 24 * 25 * - while语句在执行时， 26 * 先对条件表达式进行求值判断， 27 * 如果值为true，则执行循环体， 28 * 循环体执行完毕以后，继续对表达式进行判断 29 * 如果为true，则继续执行循环体，以此类推 30 * 如果值为false，则终止循环 31 * 32 * do...while循环 33 * - 语法： 34 * do{ 35 * 语句... 36 * }while(条件表达式) 37 * 38 * - 执行流程： 39 * do...while语句在执行时，会先执行循环体， 40 * 循环体执行完毕以后，在对while后的条件表达式进行判断， 41 * 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推 42 * 如果结果为false，则终止循环 43 * 44 * 实际上这两个语句功能类似，不同的是while是先判断后执行， 45 * 而do...while会先执行后判断， 46 * do...while可以保证循环体至少执行一次， 47 * 而while不能 48 */ 49 var n = 1; 50 51 //向这种将条件表达式写死为true的循环，叫做死循环 52 //该循环不会停止，除非浏览器关闭，死循环在开发中慎用 53 //可以使用break，来终止循环 54 /*while(true){ 55 alert(n++); 56 57 //判断n是否是10 58 if(n == 10){ 59 //退出循环 60 break; 61 } 62 63 }*/ 64 65 //创建一个循环，往往需要三个步骤 66 67 //1.创初始化一个变量 68 var i = 11; 69 70 //2.在循环中设置一个条件表达式 71 /*while(i <= 10){ 72 //3.定义一个更新表达式，每次更新初始化变量 73 document.write(i++ +"<br />") 74 75 }*/ 76 77 /*do{ 78 document.write(i++ +"<br />"); 79 }while(i <= 10);*/ 80 81 /*while(true){ 82 alert(1); 83 }*/ 84 85 86 /* 87 * 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年 88 * 89 * 1000 1000*1.05 90 * 1050 1050*1.05 91 */ 92 93 //定义一个变量，表示当前的钱数 94 var money = 1000; 95 96 //定义一个计数器 97 var count = 0; 98 99 //定义一个while循环来计算每年的钱数 100 while(money < 5000){ 101 money *= 1.05; 102 103 //使count自增 104 count++; 105 } 106 107 108 // console.log(money); 109 console.log("一共需要"+count+"年"); 110 111 </script> 112 </head> 113 <body> 114 </body> 115 </html>
while循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>if练习1</title> <script type="text/javascript"> /* * 从键盘输入小明的期末成绩: * 当成绩为100时，'奖励一辆BMW' * 当成绩为[80-99]时，'奖励一台iphone15s' * 当成绩为[60-80]时，'奖励一本参考书' * 其他时，什么奖励也没有 */ /* * prompt()可以弹出一个提示框，该提示框中会带有一个文本框， * 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数， * 该字符串将会作为提示框的提示文字 * * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容 */ //将prompt放入到一个循环中 while(true){ //score就是小明的期末成绩 var score = prompt("请输入小明的期末成绩(0-100):"); //判断用户输入的值是否合法 if(score >= 0 && score <= 100){ //满足该条件则证明用户的输入合法，退出循环 break; } alert("请输入有效的分数！！！"); } //判断值是否合法 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>
for循环
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * for语句，也是一个循环语句，也称为for循环 10 * 在for循环中，为我们提供了专门的位置用来放三个表达式： 11 * 1.初始化表达式 12 * 2.条件表达式 13 * 3.更新表达式 14 * 15 * for循环的语法： 16 * for(①初始化表达式;②条件表达式;④更新表达式){ 17 * ③语句... 18 * } 19 * 20 * for循环的执行流程： 21 * ①执行初始化表达式，初始化变量（初始化表达式只会执行一次） 22 * ②执行条件表达式，判断是否执行循环。 23 * 如果为true，则执行循环③ 24 * 如果为false，终止循环 25 * ④执行更新表达式，更新表达式执行完毕继续重复② 26 */ 27 28 //创建一个执行10次的while循环 29 //初始化表达式 30 /*var i = 0; 31 32 //创建一个循环，定义条件表达式 33 while(i < 10){ 34 //设置更新表达式 35 alert(i++); 36 }*/ 37 38 for(var i = 0 ; i < 10 ; i++ ){ 39 alert(i); 40 } 41 42 /* 43 * for循环中的三个部分都可以省略，也可以写在外部 44 * 如果在for循环中不写任何的表达式，只写两个; 45 * 此时循环是一个死循环会一直执行下去，慎用 46 * for(;;){ 47 alert("hello"); 48 } 49 */ 50 51 52 53 54 55 56 57 </script> 58 </head> 59 <body> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 打印1-100之间所有奇数之和 10 */ 11 12 //创建一个变量，用来保存奇数之和 13 //var sum = 0; 14 15 //打印1-100之间的数 16 for(var i=1 , sum=0 ; i<=100 ; i++){ 17 18 //判断i是否是奇数 19 //不能被2整除的数就是奇数 20 if(i%2 != 0){ 21 //如果i除以2有余数则证明i是奇数 22 //console.log(i); 23 sum = sum+i; 24 } 25 } 26 27 console.log("奇数之和为 : "+sum); 28 29 </script> 30 </head> 31 <body> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 打印1-100之间所有7的倍数的个数及总和 10 */ 11 //定义一个变量，来保存总和 12 var sum = 0; 13 //定义一个计数器，来记录数量 14 var count = 0; 15 16 //打印1-100之间所有的数 17 for(var i=1 ; i<=100 ; i++){ 18 19 //判断i是否是7的倍数 20 if(i % 7 == 0){ 21 //console.log(i); 22 sum += i; 23 //使计数器自增1 24 count++; 25 26 } 27 28 } 29 30 //输出总和 31 console.log("总和为:"+sum); 32 //输出总数 33 console.log("总数量为:"+count); 34 35 36 37 </script> 38 </head> 39 <body> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。 10 （例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。 11 */ 12 13 //打印所有的三位数 14 for(var i=100 ; i<1000 ; i++){ 15 16 //获取i的百位 十位 个位的数字 17 //获取百位数字 18 var bai = parseInt(i/100); 19 20 //获取十位的数字 21 var shi = parseInt((i-bai*100)/10); 22 23 //获取个位数字 24 var ge = i % 10; 25 26 //判断i是否是水仙花数 27 if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){ 28 console.log(i); 29 } 30 31 32 } 33 34 35 </script> 36 </head> 37 <body> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 9 第一种方法；标志位法：思想 10 11 * 在页面中接收一个用户输入的数字，并判断该数是否是质数。 12 质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。 13 */ 14 15 var num = prompt("请输入一个大于1的整数:"); 16 17 18 //判断这个值是否合法 19 if(num <= 1){ 20 alert("该值不合法！"); 21 }else{ 22 23 //创建一个变量来保存当前的数的状态 24 //默认当前num是质数 25 var flag = true; 26 27 //判断num是否是质数 28 //获取2-num之间的数 29 for(var i=2 ; i<num ; i++){ 30 //console.log(i); 31 //判断num是否能被i整除 32 if(num % i == 0){ 33 //如果num能被i整除，则说明num一定不是质数 34 //设置flag为false 35 flag = false; 36 } 37 } 38 39 //如果num是质数则输出 40 if(flag){ 41 alert(num + "是质数！！！"); 42 }else{ 43 alert("这个不是质数") 44 } 45 46 47 } 48 49 50 //2、计数器法： 思想 51 var n = 0; 52 for(var i = 1; i <= 100; i++){ 53 //外层循环还是在拿被除数 54 for(var j = 1; j <= i; j++){ 55 //内层循环拿除数 56 if(i % j == 0){ 57 n++; 58 } 59 } 60 61 if(n == 2){ 62 console.log(i); 63 } 64 65 n = 0; 66 } 67 68 69 70 71 </script> 72 </head> 73 <body> 74 </body> 75 </html>
嵌套for循环
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 10 通过程序，在页面中输出如下的图形： 11 12 * 1 <1 i=0 13 ** 2 <2 i=1 14 *** 3 <3 i=2 15 **** 4 <4 i=3 16 ***** 5 <5 i=4 17 18 ***** 19 ***** 20 ***** 21 ***** 22 ***** 23 24 ***** 1 j<5(5-0) i=0 25 **** 2 j<4(5-1) i=1 26 *** 3 j<3(5-2) i=2 27 ** 4 j<2(5-3) i=3 28 * 5 j<1(5-4) i=4 29 30 31 */ 32 33 //向body中输出一个内容 34 //document.write("*****<br />"); 35 36 //通过一个for循环来输出图形 37 //这个for循环执行几次，图形的高度就是多少 38 //它可以用来控制图形的高度 39 for(var i=0 ; i<5 ; i++){ 40 41 /* 42 * 在循环的内部再创建一个循环，用来控制图形的宽度 43 * 目前我们的外部的for循环执行1次，内部的就会执行5次 44 * 内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少 45 */ 46 /*for(var j=0 ; j<i+1 ; j++){ 47 document.write("* "); 48 }*/ 49 for(var j=0 ; j<5-i ; j++){ 50 document.write("* "); 51 } 52 53 //输出一个换行 54 document.write("<br />"); 55 56 57 } 58 59 60 61 // 完成一个等腰三角形的打印 62 // 63 // * 64 // *** 65 // ***** 66 // ******* 67 // ********* 68 // *********** 69 // ************* 70 71 72 73 74 //外层循环控制行，内层循环控制列 75 for(var i = 0; i < 7; i++){ 76 //外部循环控制的是7行 77 78 //先打印每一行当中的空格并且不换行 79 for(var j = 0; j < 6 - i; j++){ 80 //打印空格的 81 document.write(' '); 82 } 83 84 //再打印每一行当中的*，完事之后换行 85 86 for(var k = 0; k < 2 * i + 1; j++){ 87 //打印星花的 88 document.write('*'); 89 } 90 91 document.write('<br>'); 92 93 } 94 95 96 97 98 </script> 99 </head> 100 <body> 101 102 </body> 103 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 1.打印99乘法表 10 * 1*1=1 11 * 1*2=2 2*2=4 12 * 1*3=3 2*3=6 3*3=9 13 * 1*4=4 2*4=8 3*4=12 4*4=16 14 * ....9*9=81 15 * 16 * 2.打印出1-100之间所有的质数 17 */ 18 19 //创建外层循环，用来控制乘法表的高度 20 for(var i=1 ; i<=9 ; i++ ){ 21 //创建一个内层循环来控制图形的宽度 22 for(var j=1 ; j<=i ; j++){ 23 document.write("<span>"+j+"*"+i+"="+i*j+"</span>"); 24 } 25 26 //输出一个换行 27 document.write("<br />"); 28 29 } 30 31 32 </script> 33 <style type="text/css"> 34 35 body{ 36 width: 2000px; 37 } 38 39 span{ 40 display: inline-block; 41 width: 80px; 42 } 43 44 </style> 45 </head> 46 <body> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 9 //测试如下的程序的性能 10 //在程序执行前，开启计时器 11 //console.time("计时器的名字")可以用来开启一个计时器 12 //它需要一个字符串作为参数，这个字符串将会作为计时器的标识 13 console.time("test"); 14 15 //打印2-100之间所有的质数 16 for(var i=2 ; i<=100000 ; i++){ 17 var flag = true; 18 for(var j=2 ; j<=Math.sqrt(i) ; j++){ 19 if(i%j == 0){ 20 //如果进入判断则证明i不是质数,修改flag值为false 21 flag = false; 22 //一旦进入判断，则证明i不可能是质数了，此时循环再执行已经没有任何意义了 23 //使用break来结束循环 24 break; 25 26 //不加break 215ms 27 //加break 25ms 28 //修改j<=后 2.6 29 } 30 } 31 //如果是质数，则打印i的值 32 if(flag){ 33 //console.log(i); 34 } 35 } 36 37 //终止计时器 38 //console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数 39 console.timeEnd("test"); 40 41 /* 42 * 36 43 * 1 36 44 * 2 18 45 * 3 12 46 * 4 9 47 * 6 6 48 */ 49 50 //可以通过Math.sqrt()对一个数进行开方 51 //var result = Math.sqrt(97); 52 53 //console.log("result = "+result) 54 55 56 </script> 57 </head> 58 <body> 59 </body> 60 </html>
break和contine
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * break关键字可以用来退出switch或循环语句 10 * 不能在if语句中使用break和continue 11 * break关键字，会立即终止离他最近的那个循环语句 12 */ 13 14 /*for(var i=0 ; i<5 ; i++){ 15 console.log(i); 16 17 if(i == 2){ 18 break; 19 } 20 21 }*/ 22 23 24 /*for(var i=0 ; i<5 ; i++){ 25 console.log("@外层循环"+i) 26 for(var j=0 ; j<5; j++){ 27 break; 28 console.log("内层循环:"+j); 29 } 30 }*/ 31 32 33 /* 34 * 可以为循环语句创建一个label，来标识当前的循环 35 * label:循环语句 36 * 使用break语句时，可以在break后跟着一个label， 37 * 这样break将会结束指定的循环，而不是最近的 38 */ 39 40 /*outer: 41 for(var i=0 ; i<5 ; i++){ 42 console.log("@外层循环"+i) 43 for(var j=0 ; j<5; j++){ 44 break outer; 45 console.log("内层循环:"+j); 46 } 47 }*/ 48 49 50 /* 51 * continue关键字可以用来跳过当次循环 52 * 同样continue也是默认只会对离他最近的循环循环起作用 53 */ 54 /*for(var i=0 ; i<5 ; i++){ 55 56 if(i==2){ 57 continue; 58 } 59 60 console.log(i); 61 }*/ 62 63 outer: 64 for(var i=0 ; i<5 ; i++){ 65 66 for(var j=0 ; j<5 ; j++){ 67 68 continue; 69 70 console.log("-->"+j); 71 72 } 73 74 console.log("@--->"+i); 75 } 76 77 78 </script> 79 </head> 80 <body> 81 </body> 82 </html>
