技术文章 | jishuwenzhang

北京html5培训之JavaScript学习笔记(D3)

 

第3天北京html5培训之课堂笔记
(本课程共8天)

一、北京html5培训switch语句

开头语句,允许程序去计算一个表示式的值,然后让这个值去匹配case标签。匹配成功执行该case标签的执行体。
语法:

1 switch(表达式){
2     case 值1:
3        执行体1;
4        break;
5     case 值2:
6        执行体2;
7        break;
8  ……
9     default:执行体;  //前面case 值都不匹配时 ,执行的语句。
10          break;(这个break可有可无)
11 }
 
1 var xingzuo = prompt("请输入你的星座","白羊座");
2 switch(xingzuo){
3 case "白羊座":
4 alert("你是白羊座,不错");
5 break;
6 case "金牛座":
7 alert("金牛座");
8 break;
9 case "双子座":
10 alert("双子座");
11 break;
12 default:
13 alert("没有你要查询的星座");
14 break;
15 }
 
default:表示前面case都不匹配时执行的情况。可以书写也可以不写。不写表示前面都不匹配时,直接跳出switch语句。
 

1 // 改写成if语句
2 if(xingzuo == "白羊座"){
3 alert("你是白羊座,不错");
4 }else if(xingzuo == "金牛座"){
5 alert("金牛座");
6 }else if(xingzuo == "双子座"){
7 alert("双子座");
8 }else{
9 alert("没有你要查询的星座");
10 }
 
break作用:在switch语句中,表示满足case匹配情况时 ,不再往下执行其他的case ,跳出switch语句。

1 var a = parseInt(prompt("请输入一个数字"));
2 switch(a){
3 case 1:
4 alert(1);
5 case 2:
6 alert(2);
7 case 3:
8 alert(3);
9 default:
10 alert(a);
11 }
 
当输入1时,会弹出1,2,3,1.因为:输入1 匹配到了case 1:。输出1.但是没有break,switch语句不会结束继续往下执行,即使case不匹配也会输出后面的执行体。直到遇见break会跳出switch语句。default语句不写break也可以,也会跳出switch。
 
有时可以利用一下break:
书写一个月份天数的案例:

1 // 用户输入一个月份,我们弹出该月份是天数。
2 // 2,28
3 // 1,3,5,7,8,10,12  31天
4 // 其他的都是30天
5 var a = parseInt(prompt("请输入你想知道的月份"));
6 switch(a){
7 case 2:
8 alert("该月有28天。");
9 break;
10 case 1:
11 case 3:
12 case 5:
13 case 7:
14 case 8:
15 case 10:
16 case 12:
17 alert("该月是31天。");
18 break;
19 default:
20 alert("该月有30天。");
21 break;//可写可不写
22 }
 
 

1 case 1 || 3 || 5 || 7 || 8 || 10 || 12;//计算机遇见表达式,会先计算。该表达式计算后是1
 
switch语句的一种另类写法:switch表达式中直接书写true。case 后面书写表达式,当case后 的表达式为true时,匹配switch执行后面的语句。
 

1 var a = parseInt(prompt("请输入你的分数"));
2 switch(true){
3 case a < 60:
4 alert("很遗憾没有及格");
5 break;
6 case a < 80:
7 alert("良好");
8 break;
9 case a < 100:
10 alert("优秀");
11 break;
12 }
总结:if语句适用最广泛,也最灵活。
三元表达式:一般用于赋值时且值是二选一的情况。
switch当值有多种可能性时。

二、北京html5培训循环语句

循环语句就是重复执行一段代码指代遇见某个指令时结束该循环。
直白解释:就是重复执行一段代码直到,条件为假时跳出循环。
for循环,do while,while ,for in(遍历循环)。

2.1 for循环

for循环是一个前测试循环语句。就是执行循环语句之前,先判断是否满足条件,满足条件时循环才执行。
基本语法:(for比较灵活不限定死。)
for(循环变量的初始值;最大值;步长){
循环体
}

1 for(var i = 0; i <= 100; i ++){
2 console.log("这是第" + i + "输出");
3 }
4 console.log("我是for后面的语句");
 
for机理:for循环判断条件表达式,当条件表达式为真时执行循环语句,直到条件为假时跳出循环。结束循环后再执行for循环后面的语句。
 
for循环的过程:
for循环第一次执行时,首先执行一次语句1,然后执行语句2,判断是否满足条件,当结果为真,向内执行循环语句3;如果为假,直接跳出for循环,执行语句5。
如果能进入语句3,然后执行语句4之后。再执行语句2,判断是否满足条件,当条件为真是继续向内执行语句3;如果条件为假时,跳出for循环。执行语句5.……
当条件为真时,重复执行语句2,语句3,语句4.直到条件为假时,跳出for循环,执行语句5.
 
我们了解for循环的过程可以宏观看for循环,可以不用输出直接根据过程得出for循环的结果。
 
 
练习1:for循环的步长可以是任意值。

1 for(var i = 3; i <= 15 ; i += 4){
2 console.log(i);
3 }
4 // i = 3 , 3 <= 15 真, 3
5 // i = 7 , 7 <= 15 真, 7
6 // i = 11 , 11 <= 15 真, 11
7 // i = 15 , 15 <= 15 真, 15
8 // i = 19 , 19 <= 15 假, 结束for循环。

   练习2:步长的变化比较灵活,可以自加,也可以自减。
1 for(var i = 13 ; i > 5 ; i -= 3){
2 console.log(i);
3 }
4 // i = 13 , 13 > 5 真, 13
5 // i = 10 , 10 > 5 真, 10
6 // i = 7 , 7 > 5 真, 7
7 // i = 4 , 4 > 5 假, 结束循环。
 
练习3:变量i是全局变量,可以书写for语句的外面(即使变量i书写在for外,初始值后面的分号也要书写。)

1 // 变量是全局变量
2 var i = 3;
3 for(;i < 13 ; i += 4){
4 console.log(i);
5 }
6 // i = 3 , 3 < 13 真, 3
7 // i = 7 , 7 < 13 真, 7
8 // i = 11 , 11 < 13 真, 11
9 // i = 15 , 15 < 13 假, 结束循环
 
一般for变量可以使用任意变量名,但是我们有一个约定俗成,变量名一般是i,j,k。
练习4:for循环的的循环语句可以一次都不执行。

1 // 循环体可以一次都不执行
2 var i = 3;
3 for(console.log(i ++); i > 10 ; i += 4){
4 console.log(i);
5 }
6 // i = 4 , 4 > 10 假,条件为假,不会进行循环语句。
 
练习5:
当条件一直为真时,是一个死循环,电脑会死机。

1 for(var i = 1 ; i > 0 ; i ++){
2 console.log(i);
3 }
    
练习6:

1 for(var i = 4 ; i < 15 ; i += 5){
2 console.log("输出");
3 }
4 console.log(i);
5 // i = 4 , 4 < 15 真, 输出
6 // i = 9 , 9 < 15 真, 输出
7 // i = 14 , 14 < 15 真, 输出
8 // i = 19 , 19 < 15 假, for循环结束。
9 // for循环结束,然后执行语句5。19
 
 
练习7:

1 for(var i = 4 ; i != 10 ; i += 3){
2 console.log(i);
3 }
4 // i = 4 , 4 != 10 真, 4
5 // i = 7 , 7 != 10 真, 7
6 // i = 10 , 10 != 10 假, for循环结束

l for循环可以嵌套if语句。if语句想执行必须满足2条件。必须满足for循环的条件还必须满足if语句的条件。
1 for(var i = 4 ; i <= 25 ; i += 4){
2 if(i % 5 == 0){
3 console.log(i);
4 }
5 }
6 // i = 4 , 4 <= 25 真, 4 % 5 == 0为假
7 // i = 8 , 8 <= 25 真, 8 % 5 == 0为假
8 // i = 12 , 12 <= 25 真, 12 % 5 == 0为假
9 // i = 16 , 16 <= 25 真, 16 % 5 == 0为假
10 // i = 20 , 20 <= 25 真, 20 % 5 == 0为真,console.log(20)
11 // i = 24 , 24 <= 25 真, 24 % 5 == 0为假
12 // i = 28 , 28 <= 25 假,结束循环
 
l for循环可以嵌套for循环,两个变量不可以相同。

1 for(var i = 0 ; i < 5 ; i ++){
2 for(var j = 0 ; j < 5 ; j ++){
3 console.log(i,j);
4 }
5 }
 

2.2 穷举思想

概念:我们经常想得到一组数据,有一些特定的要求,计算机没法自己帮我们输出这些数据。我们人为的需要编写一段程序,让计算机去帮我们实现程序。将所有的可能情况,一一的列举出来,然后我们人为限定判断条件,把符合条件的数据就给它输出,不满足的就跳过,继续验证下一个数据是否满足条件,直到把所有可能情况都验证一个遍。这个方法就叫做全举法,也叫穷举法。
外层:一一列举,for循环。
内层:进行判断,if语句。
案例1:在控制台输出一个数的所有约数。
约数概念:a %b ==0,那么a叫做b的倍数,b叫做a的约数或者因数。
一个数的约数,最小是1,最大是它本身。
比如找出6的所有约数。
1,  6%1 == 0
2,
3
6
 

1 //6,输出1,2,3,6
2  num = parseInt(prompt("请输入正整数"));
3  for(var i = 1 ; i <= num ; i ++){
4   if(num % i == 0){
5   console.log(i);
6   }
7  }
 
案例2:找三位数里的“水仙花数”,在控制台输出。
条件1:三位数,得全部列举出来100,~999
条件2:水仙花数,每一个位数的三次方,他们的和,还等于原来的三位数通过判断找到符合条件的水仙花数
 

1 // 一一列举100-999所有的三位数
2 for(var i = 100 ; i <= 999 ; i ++){
3 var ge = i % 10;
4 var shi = parseInt(i / 10) % 10;
5 var bai = parseInt(i / 100);
6 var sum = Math.pow(ge,3) + Math.pow(shi,3) + Math.pow(bai,3);
7 if(sum == i){
8 console.log(i + "是水仙花");
9 }
10 }
 

2.3 累加器和累乘器

累加器:我们不想输出所有的可能值,只想输出一个最后满足条件的总数。
累加器需要变量,当满足条件时变量就自加1,最后在for循环外输出最终的结果。
案例:找出任意一个正整数的约数总个数。

1 // 一个数的约数的总个数。
2 var num = parseInt(prompt("请输入一个正整数"));
3 // 累加器的变量sum需要设置在for循环外,防止每次循环被重置
4 var sum = 0;
5 // 一一列举
6 for(var i = 1 ; i <= num ; i ++){
7 // 判断num的约数
8 if(num % i == 0){
9 // i是num的约数,sum自加1
10 sum ++;
11 }
12 }
13 // sum输出应该在for外
14 console.log(sum);
练习:判断一个数是不是质数。
条件:只有1和他本身外没有其他的约数叫做质数。
比如:2是质数(只有1和2这个两个约数)
      13也是质数(1和13约数)


15 // 一个数的约数的总个数。
16 var num = parseInt(prompt("请输入一个正整数"));
17 // 累加器的变量sum需要设置在for循环外,防止每次循环被重置
18 var sum = 0;
19 // 一一列举
20 for(var i = 1 ; i <= num ; i ++){
21 // 判断num的约数
22 if(num % i == 0){
23 // i是num的约数,sum自加1
24 sum ++;
25 }
26 }
27 // 用户输入任意的数,判断这个数是不是质数
28 if(sum == 2){
29 alert(num + "是质数");
30 }else{
31 alert(num + "不是质数");
32 }
 
注意:①累加器的变量sum,必须放在for循环外(以防每次重置为0),sum初始值必须是0
  ②当满足条件时sum自加1.
  ③sum的输出必须在for循环外。得到的是总个数。
 
l 累乘器:保存我们前面乘数的积。
阶乘:8!= 8 * 7 * 6 * 5 * 4 * 3 *2 *1
注意:
①累乘器的变量必须写在循环外面。
②初始值必须是1.
③输出也必须是在for循环完毕之后。
输出一个正整数的阶乘。
 

1 // 求阶乘
2 var num = parseInt(prompt("请输入一个正整数"));
3 // 在for循环外声明累乘器
4 // 初始值是1
5 var cheng = 1;
6 for(var i = num ; i >= 1 ; i --){
7 cheng *= i;
8 }

10 console.log(cheng);
 

2.4 do while

do while循环语句是重复执行一段代码,知道遇见某个指令跳出循环体。
do while 后测试循环语句。do while直接执行循环体,然后进行出口判断,如果满足条件,继续执行循环体;如果不满足条件,直接跳出循环。
do while语句和for语句不同,需要将循环变量设置在do while语句外。否则会重置变量。造成死循环。

1 do{
2   循环体;
3 }while(表达式)
 
1 var i = 3 ;
2 do{
3 console.log(i);
4 i += 4;
5 }while(i < 15)
6 // 第一次执行,i = 3, console.log(3), i = 7, 7 < 15 真可以循环
7 // 第二次执行 console.log(7), i = 11, 11 < 15 真可以循环
8 // 第三次执行 console.log(11), i = 15, 15 < 15 不满足条件结束循环
 
注意:do while至少执行一次循环体。

1 // do while至少会执行一次循环体
2 var i = 3 ;
3 do{
4 console.log(i);
5 i += 2;
6 }while(i < 3)
7 // 第一次执行,i = 3 ,console.log(3), i = 5 , 5 < 3不满条件,结束循环。
 

2.5 while语句

while循环语句,是重复执行一段代码,当条件为假时,结束循环。
while前测试循环语句。先判断是否满足条件,当条件为真时,执行结构体;当条件为假时跳出循环。
变量需要设置在while语句外面。
 

1 while(条件表达式){
2    循环体;
3 }
 
1 // 变量需要书写在循环外
2 var i = 3 ;
3 while(i < 13){
4     console.log(i);
5     i += 4;
6 }
7 // i = 3, 3 < 13 真,进行循环 3 , i = 7
8 // i = 7, 7 < 13 真,进行循环 7 , i = 11
9 // i = 11, 11 < 13 真,进行循环 11 , i = 15
10 // i = 15, 15 < 13 假,结束循环
 
while语句的输出的位置非常重要。

1 // 输出语句的位置非常重要
2 var i = 3 ;
3 while(i < 13){
4 i += 4;
5 console.log(i);
6 }
7 // i = 3, 3 < 13 真,进行循环 i = 7 ,7
8 // i = 7, 7 < 13 真,进行循环  i = 11, 11
9 // i = 11, 11 < 13 真,进行循环 i = 15, 15
10 // i = 15, 15 < 13 假,结束循环
 
1 // 改写for循环
2 var i = 3;
3 for(i += 4 ; i < 13 ; i += 4){
4 console.log(i);
5 }
6 console.log(i);
7 // i = 7 , 7 < 13 , 7
8 // i = 11 , 11 < 13 , 11
9 // i = 15  , 15 < 13 , 条件为假,结束循环
10 // for循环结束后执行语句5 console.log(15);
 

2.6 break

break:我已经找到满足条件的变量,不再往下执行,结束for循环。
1 // 只要找到一个能被3整数的数就结束循环
2 for(var i = 2 ; i < 200 ; i ++){
3 if(i % 3 == 0){
4 console.log(i);
5 break;
6 }
7 }
8 // i = 2 , 2 < 200,  
9 // i = 3 , 3 < 200, 3 % 3 == 0console.log(3),遇见break结束整个循环
 
遇到break,会强制停止我们当前的循环。
 
它会立即终止当前所在的 while,do-while,for,或者 switch 并把控制权交回这些结构后面的语句。不会帮我们终止外层循环。
 

1 for(var i = 0 ; i < 5 ; i ++){
2 for(var j = 0 ; j < 5 ; j ++){
3 if(j == 2){
4 break;//break只能管理j,不能管理i
5 }
6 console.log(i,j);
7 }
8 }
9 // i = 0 ,j = 0 ,(0 0)
10 // i = 0 ,j = 1 , (0 1)
11 // i = 0 ,j = 2 ,  2 == 2满足条件,遇见break结束内层循环。
12 // i = 1 ,j = 0 ,(1 0)
13 // i = 1 ,j = 1 , (1 1)
14 // i = 1 ,j = 2 ,  2 == 2满足条件,遇见break结束内层循环。
 
 
我们可以给外层循环添加一个标签,让break引用。

1 waiceng: for(var i = 0 ; i < 5 ; i ++){
2 for(var j = 0 ; j < 5 ; j ++){
3 if(j == 2){
4 break waiceng;//break只能管理i,不能管理j
5 }
6 console.log(i,j);
7 }
8 }
9 // i = 0 , j = 0 (0 0)
10 // i = 0 , j = 1 (0 1)
11 // i = 0 , j = 2 2 == 2为真,break。

2.7 continue

continue:这个结果不是我想要的,赶快继续下一个测试。
1 for(var i = 2 ; i < 15 ; i ++){
2 if(i % 3 == 0){
3 continue;
4 }
5 console.log(i);
6 }
7 // i = 2, 2 < 15,console.log(2);
8 // i = 3 , 3 < 15, 3 == 3满足if条件。
9 // i = 4 , 4 < 15 , console.log(4)
 
1 for(var i = 0 ; i < 5 ; i ++){
2 for(var j = 0 ; j < 5 ; j ++){
3 if(j == 2){
4 continue;//continue只能管理j,不能管理i
5 }
6 console.log(i,j);
7 }
8 }
9 // i = 0 ,j = 0 ,(0 0)
10 // i = 0 ,j = 1 ,(0 1)
11 // i = 0 ,j = 2 ,2 == 2,遇见continue,这个(0 2)不是我们想要的,继续试验下一个j
12 //i = 0 ,j = 3 ,(0 3)
 
遇见continue,结束该次循环,立即执行下一次循环。也是只能控制本层的循环不能控制外层循环。
如果想控制外层循环需要使用标签。
 

1 waiceng: for(var i = 0 ; i < 5 ; i ++){
2 for(var j = 0 ; j < 5 ; j ++){
3 if(j == 2){
4 continue waiceng;//continue只能管理i,不能管理j
5 }
6 console.log(i,j);
7 }
8 }
 
 

爱创课堂是一家专门做前端培训的机构,由百度高级工程师,<javascript设计模式>作者张容铭老师亲自授课,全程20个项目实战。我们前端课程的五大优势:
1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. :与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 
扫描下方二维码或搜索微信公众号:icketang  
关注并回复:js  领取 js基础全套视频教程+课堂笔记+案例

 
访问:http://www.icketang.com/?zh获取更多信息。