javascripts知识点梳理2

load 事件

load 表示的是加载
表示数据加载完成就会被触发

如果我们需要将 js 代码放到 head 标签中, 那么就应该将 js 代码写在 load 事件里面
 window.onload = function () {
       // 页面中所有的 内容 全部加载完毕
       // 那么就会触发, 而且只会触发一次
};
        

流程控制

顺序结构

概念： 由上至下的执行代码就是顺序结构。

分支结构

三元表达式 ? :

表达式1 ? 表达式2 : 表达式3

if else

switch case 结构

switch( 变量 ){ 
    case value1:
        //表达式结果 等于 value1 时 要执行的代码
        break;
    case value2:
        //表达式结果 等于 value2 时 要执行的代码
        break;
    default:
        //表达式结果 不等于任何一个 value 时 要执行的代码
}



var strResult = '';
var usrNum = prompt('请输入一个 1- 7 之间的数字：'); // 接收用户输入的一个数字字符串
usrNum = parseInt(usrNum);// 将数字字符串 转成 整数数值
switch(usrNum){
    case 1:
        strResult = '星期一';
        break;
    case 2:
        strResult = '星期二';
        break;
    default:
        strResult = '星期天';
}
alert('您输入的数字对应的是' + strResult);

switch 与 if 对比

- switch...case通常处理case为常量的情况，而if…else…更加灵活有范围
- 当只有分支比较少的时候，if效率比   switch高
- switch 进行一次条件判断后直接执行到程序的条件语句。而if…else 有几种条件，就得判断多少次。
- 分支比较多，是switch的效率比较高，而且结构更清晰 

循环结构

for 循环

语法

//for 循环一般 用来 根据次数 循环 
for(初始化; 条件表达式; 自增表达式 ){
    //循环体
}
//如：
for(var i = 0; i < 10; i++){
    console.log('i='+i);
}

例句

求1-100之间所有偶数的和
var sumNum = 0;
for(var i = 1;i <= 100; i++){
    if(i % 2 == 0){ // 如果 i 取模2 等于0，则 i 为 偶数
        sumNum += i;
    }
}
console.log('1-100之间所有偶数的和 = ' + sumNum);


求1 - 100 之间所有数的平均值
// var sum = 0;
        // var average = 0;
        // for (var i = 1; i <= 100; i++) {
        //     sum += i;
        // }
        // average = sum / 100;
        // console.log(average);



同时求1 - 100 之间所有偶数和奇数的和
var evenSum = 0,
            oddSum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                evenSum += i;
            } else {
                oddSum += i;
            }
        }
        console.log('偶数的和:' + evenSum);
        console.log('奇数的和:' + oddSum);



求1-100之间所有能被3整除的数字的和
var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 === 0) {
                sum += i;
            }
        }
        console.log(sum);

while 循环

语法

//条件表达式为 true 时重复执行循环体代码
//条件表达式为 false 退出循环
while (条件表达式) {
    // 循环体代码 
}

do…while 循环

do{
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行顺序 先执行一次循环体代码，再判断 循环条件

1.先执行一次 循环体代码 

2.再执行 条件表达式 ，结果为 true，则 继续执行循环体代码

                                        如果为 false，则退出 循环，进入后面代码执行


课堂案例： 使用do-while循环：输出你喜欢我吗？(y/n):"，直到输入y退出，否则继续询问。（提示：使用 prompt ）
do {
   var ask = prompt('你喜欢我吗？ y/n');
} while (ask !== 'y');
alert('我也喜欢你啊');


- do..while 循环和 while 循环非常像，二者经常可以相互替代，但 do..while 的特点是不管条件成不成立，都会执行一次。
- do...while 语句就是先执行一遍，后面才根据 条件是否满足 决定执行次数；
- 和 while 循环一样，在循环体内部，需要修改循环条件，否则会造成死循环。

双重 for 循环

for (外循环的初始; 外循环的条件; 外循环的增量) {
    
    for (内循环的初始; 内循环的条件; 内循环的增量) {  

       需执行的代码;
   }

}

1. 内层循环可以看做外出循环的语句。 
2. 内层循环执行的顺序也要遵循for循环的执行书序。 
3. 外层循环执行一次，则内层循环要执行全部次数（跑完毕）。


课堂案例 4 使用 for循环 打印 九九乘法表
var str = ''
for (var i = 1; i <= 9; i++) { //  外层for控制 行数  9行
    for (var j = 1; j <= i; j++) { // j 控制列数    列数和行数是一样的  j <= i 
        // 我们发现了一个非常好的规律   第一行有 一列   第二行有2列 第三行有3列  第9行有9列
        str += j + " × " + i + " = " + i * j + '\t';
    }
    str += '\n';
}
console.log(str);

continue 跳出本次循环

- 概念：立即跳出本次循环，继续下一次循环（本次循环体 continu 之后的 代码 就都少执行这一次）
- 通俗： 吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子。


要求：模拟 吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子。
for(var i = 0; i < 5; i++){
    if(i==2){
        console.log('f~! 第 '+(i+1)+' 个里面有虫子！扔掉！');
        continue;//跳出 i == 2 这次循环，进入 i == 3 的循环
    }
   	console.log('哈哈哈，吃完了第 '+ (i+1) +' 个大包子~~！');
}

break 退出整个循环

- 概念：理解跳出整个循环（循环结束），开始执行 循环后面的代码
- 通俗： 吃5个包子，吃到第3个吃饱了，就不再吃后面的包子。

调试JavaScript的方式

断点调试

• alert()
• console.log()
  断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

调试错误的 步骤：

• 1.先到 console 控制台 tab 页 去看 是不是 有 报错！（JS语法错误）
• 2.如果 没有语法错误，就应该 resource 资源 tab页 去页面js代码中设置断点，并 f11 逐句调试。