前端与移动开发----JavaScript 基础----switch语句，循环，关键词

javaScript基础

switch语句

语法

switch ( 变量 ) {
	 case  值1:
  	 代码语句..
	 break;
	 case  值2:
	 代码语句...
  	break;
	 default:    
	 break;
}

执行过程

执行过程
    1. 先通过 switch 得到变量的值
   	2. 通过 case 后面的值与变量的值进行比较是否相等,如果不相等,则继续向下比较.如果相等则执行对应的逻辑代码,后面的不再执行
    3. 如果所有的比较都不相等,最后执行default中的代码
总结：
	1.如果在程序中要表示一个范围，那么推荐使用条件判断
    2.如果程序中表示的是一个具体的值， 可以用switch语句

注意：
	1. switch 后面的变量数据类型必须和 case 后面的值数据类型保持一至
	2. break 语句必须加

循环

循环：重复的再做一件事件
 	✔ 当条件满足的时候，执行循环代码
    ✔ 条件不满足的时候，不会执行循环代码
注意：避免死循环 (条件很重要)

while循环

语法

while(条件表达式) {
 代码（循环体）
}

执行过程

 1.先条件判断结构是 true 还是 false
 2.如果是true，那么程序会一直执行循环体中的代码
 3.如果条件为false，那么程序会立即跳出循环体代码结束执行

案例

1. 将 1 到 100 之间的所有数字输出到控制台中
<script>
		//初始化变量,从数字1开始
        var i = 1;
        while(i <= 100) {
        	console.log(i);
       		i++;
        }
	</script>
2. 将1到100之间的所有是3的倍数找出来，在控制台中输出
<script>
		var i = 1;
        while (i <= 100) {
            if (i % 3 == 0) {
                console.log(i);
            }
            i++;
        }
	</script>
3. 求1到100之间的数字和。在控制台中输出（5050）
<script>
		var i = 1;
        var sum = 0;
        while (i <= 100) {
            sum += i;
            i++;
        }
        console.log(sum);
	</script>
	
4. 首先接收用户输入用户名和密码，只要用户名不是admin或者密码不是888就一直提示要求重新输入,如果正确则提登录成功.
<script>
		var userName = prompt('请输入用户名');
        var pwd = prompt('请输入密码');
        while (userName != 'admin' || pwd != '888') {
            alert('用户名或密码有误,请重新输入');
            userName = prompt('请输入用户名');
            pwd = prompt('请输入密码');
        }
        alert('登录成功');
	</script>

do … while 循环

语法

do {

   循环体代码
 
}while(条件表达式)

执行过程

☞ 先执行循环体代码
☞ 然后判断条件
☞ 如果条件为true，继续执行循环体代码
☞ 如果条件为false,循环体代码立即结束，跳出循环
与while循环的区别：
  1.如果条件不满足，do while循环会比while循环多执行一次
  2.如果条件满足，do while循环和while循环执行的次数是一样一样的。

do while和while语法区别

1.do while循环的条件在后,先执行代码后判断条件, 条件不满足的情况下,会执行一次
2.while循环条件在前,先判断条件后执行代码, 条件不满足的情况下,不会执行

案例

将1到100之间的所有是3的倍数找出来，在控制台中输出
<script>
	var i = 1;
            do {
                if(i % 3 == 0) {
                    console.log(i);
                }
                i++;
            }while(i <= 100)
</script>

for 循环

☞  如果能明确循环次数，推荐使用for循环， 如果循环次数不确定，可以使用while获取do while循环
for (变量初始化; 条件表达式 ;  变量自增（变量自减）) {
     循环体代码
}

执行过程

1. 先执行变量初始化
2. 条件判断，结构是否为true
3. 如果条件为true，进入循环体中执行代码 【如果条件为false，循环立即结束】
4. 变量自增或自减  --   条件判断   --  true  --- 执行代码

案例

输入班级人数(比如5人),然后依次输入学员成绩
  1.计算班级学员的总成绩
  2.计算班级的平均成绩
<script>
    var num = Number(prompt('请输入班级人数：'));
    var cj;
    var zcj = 0;
    for (var i = 1; i <= num; i++) {
         cj = Number(prompt('请输入成绩：'));
         zcj += cj;
    }
    alert('总成绩为' + zcj);
    alert('平均成绩为' + zcj / num);
</script>    
优化题目：  
  1.判断用户输入的班级人数是不是数字,判断用户输入的学生成绩是不是数字。
  2.如果用户输入的班级学生人数不是数字，程序直接提示退出即可。
  3.如果用户输入的班级人数是数字，那么判断用户输入的学生成绩是不是数字，如果不是数字，提示用户，并程序退出，否则继续计算最后结果。
<script>
   var num = Number(prompt('请输入班级人数：'));
   var cj;
   var zcj = 0;
   if (isNaN(num) == true) {
       alert('请输入数字!');
   } else {
    	for (var i = 1; i <= num; i++) {
        	cj = prompt('请输入成绩：');
        	if (isNaN(cj) == true) {
             	alert('请输入数字!');
             	break;
         	} else {
                cj = Number(cj);
                zcj += cj;
         	}
 		}
        alert('总成绩为' + zcj);
        alert('平均成绩为' + zcj / num);
   }
</script>

代码：

<script>
  for (var i = 1; i <= 2; i++) {
            for (var x = 1; x <= 10; x++) {
                document.write('*');
            }
            document.write('<br>');
        }
  </script>

代码：

<script>
  for (var i = 1; i <= 9; i++) {
            for (var x = 1; x <= i; x++) {
                document.write('*');
            }
            document.write('<br>');
        }
  </script>

代码：

<script>
  for (var n = 1; n <= 9; n++) {
            for (var i = 1; i <= n; i++) {
                document.write(n + '*' + i + '=' + n * i + "             ");
            }
            document.write('<br>');
        }
  </script>

代码：

<script>
      
        //1. 先在网页中输出一个表格
        document.write('<table>');
        // 2. 动态创建tr标签 (9次循环)
        for(var i = 1; i <= 9; i++) {
            document.write('<tr>');
            // 3. 动态创建td
            for(var j = 1; j <= i; j++) {
                document.write('<td>' + j + 'X' + i + '=' + j*i + '</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');    
    </script>

<style>
        table {
            border-collapse: collapse;
        }        
        td {
            border: 1px solid blue;
            width: 80px;
            text-align: center;
        }        
        tr:nth-child(odd) {
            background-color: pink;
        }
        tr:nth-child(even) {
            background-color: orange;
        }    
    </style>

continue语句

特点

 1.  当程序遇到continue的时候，会结束本次循环，后面的代码也不会执行。进入到下一次循环中。

break语句

特点

 1. 当程序遇到break语句的时候，程序会立即终止，后面的代码不执行

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！