前端与移动开发----JavaScript 基础----运算符，分支语句，断点调试

JavaScript基础

赋值运算符

作用：用来给变量赋值运算,不能进行相等比较。
+= （语法糖写法）|  -=   |  *=  |  /=  |   %=    |   = 

var  a += b ;  =====> 等价于  a = a+b;

一元运算符

1.++  和  -- 

2. ++ 运算（--同理）
 	 ++a       在变量a的基础上加1
     a++	   在变量a的基础上加1     
✔ 如果将 a++ 或者 ++a赋值给一个变量的时候，这个变量的值有区别  
 ◆ 如果将 a++ 赋值一个变量，那么先将a原来的值赋值给新的变量，然后自己再加1（先赋值再计算）
 ◆ 如果将 ++a 赋值一个变量，那么先进行加1计算，然后把计算后的结果赋值给新的变量（先计算再赋值）
 例如：
 // var a = 1; 
 // var b = ++a + ++a; 
 // console.log(a); 
 // console.log(b);   
 输出a的值为3，b的值为5.
 // var a = 1; 
 // var b = a++ + ++a;
 // console.log(a); 
 // console.log(b);
 输出a的值为3，b的值为4.
 // var a = 1; 
 // var b = a++ + a++;
 // console.log(a); 
 // console.log(b);
 输出a的值为3，b的值为3.
 // var a = 1; 
 // var b = ++a + a++;
 // console.log(a);
 // console.log(b); 
 输出a的值为3，b的值为4.
 

比较运算符

1. >  
    
2. <
    
3. >=   大于 或者 等于，只要有一个满足即可
    
4. <=   小于 或者 等于，只要满足一个即可

5. ==   只用来比较变量中的值是否相等，不考虑数据类型
    
6. ===  用来判断值和数据类型必须同时相等
    
7. !=	判断值是否不相等，不考虑数据类型
 
8. !==  判断值和数据类型
    
☞ 总结：
 ✔ 通过比较运算符得到的结果只有两个结果，一个是正确的，一个是错误的
 ✔ 通过比较运算符得到的结果 只有 true[正确] 和 false[错误]

逻辑运算符

当程序中出现需要将多个条件连接到一块的时候,可以使用逻辑运算符。
1. ||  或运算：条件只要有一个满足即可（一真全真）
   总结：
     1.如果条件中有一个结果为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true
     2.如果条件中结果都不满足，那么通过或运算后结果为false
     
 2. && 且运算(与运算)：要求所有的条件都必须满足才可以（一假全假）
    总结：
	 1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）
     2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false
     
 3. ! 非（取反）

运算符优先级

优先级从高到底
	1. () 优先级最高   
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符

isNaN()

☞ 判断一个变量的值 是不是数字
 	var n1 = '123';
	//判断n1是不是一个数字
	var res = isNaN(n1);
	console.log(res);
	// isNaN 返回的是一个 true,不是数字
	// isNaN 返回的是一个false , 是一个数字 

条件判断（分支）

语法

//单条件表达式
☞   if (条件表达式) {     
   	    逻辑代码。。。 
     }else {       
        逻辑代码。。。
     }
//三元表达式
☞   （条件表达式） ？ 逻辑代码1 ：逻辑代码2 ；
	三元表达式在执行顺序上,其实与单条件判断是一样的(是单条件判断的另外一种写法)
	执行顺序:
         1. 先判断条件是否成立, 如果条件成立那么就执行逻辑代码1
         2. 如果条件不成立,就执行逻辑代码2
//多条件表达式
☞  if (条件表达式) {
  		逻辑代码。。。
	}else if (条件表达式) {
    	逻辑代码。。。
    }else {
        逻辑代码。。。
    }

执行过程

1.单条件条件判断代码执行过程：
  ✔ 先进行表达式结果判断 
  ✔ 如果结果是true, 程序只会执行if中的语句，不会执行else中的语句
  ✔ 如果结果是false， 程序只会执行else中的语句，不会执行if中的语句

断点调试

定位程序中的错误  +  理解程序的执行过程
断点调试的使用步骤:
  1. 先运行程序
  2. 打开浏览控制程序 ----> 选择 sources选项卡
  3. 点击对应的HMTL页面程序
  4. 在浏览器中设置断点(在程序对应的行号前点击鼠标左键, 目前推荐将断点设置到代码的第一行位置处)
  5. 刷新页面(重新执行程序)
  6. 点击F10 或者 下一步(查看程序执行的过程及上一步执行的结果)
如何观察变量值的变化:
  1.直接将鼠标放到变量上
  2.将变量(或者条件填到监视窗口中) 
    a.直接在监视窗口中添加    
    b.选中对应的变量,点击鼠标右键,选择添加到监视窗口

案例练习

1.接收用户输入两个数字，求两个数的最大数。【排除非法输入】(不考虑相等情况)
	<script>
  		var num1 = Number(prompt('请输入第一个值'));
        var num2 = Number(prompt('请输入第二个值'));
        // 判断用户输入的值是不是数字
        if(isNaN(num1) == false && isNaN(num2) == false) {
             //进行比较大小
             if(num1 > num2) {
                 alert('最大值是第一个值');
             }else {
                 alert('第二个值是最大值');
             } 
        }else {
            // 至少有一个数字是非法输入
            alert('请输入合法的数字');
        }
  	</script>
2.接收用户输入一个数字，判断一个数是偶数还是奇数【将非法输入考虑进去】
	<script>
  		var num = Number(prompt('请输入一个数字'));
        // 判断是不是一个数字: 如果是数字,继续判断是否是偶数  如果不是数字, 提示
        if(isNaN(num) == false) {
             //条件成立,继续判断
             if(num % 2 == 0) {
                 alert('偶数');
             }else {
                 alert('奇数');
             }
        }else {
            //条件不成立,提示
            alert('请输入一个数字');
        }
  	</script>
3.当点击确定，弹出消息提示“您已退出” 当点击取消  弹出消息“您已取消退出”
	<script>
  		var res  = confirm('是否退出?');
        // 如果得到的结果是 true, 代表点击了确定  如果是false,点击了取消
        if(res == true) {
            alert('退出');
        }else {
            alert('取消');
        }
  	</script>
4. 判断一个年份是闰年还是平年
   闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份
	<script>
        var year = prompt('请输入一个年份：');
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            alert(year + '是闰年');
        } else {
            alert(year + '是平年');
        }
    </script>
5. 依据一个人的年龄判断是否成年（大于18岁）
	<script>
        var age = prompt('请输入年龄：');
        age > 18 ? alert('已成年') : alert('未成年');
    </script>
6. 一个加油站为了鼓励车主多加油，所以加的多有优惠。
   92号汽油，每升6元；如果大于20升，那么超出部分每升5.9；
   95号汽油，每升7元；如果大于30升，那么超出部分每升6.95
   编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。
       <script>
        var num = prompt('请输入汽油编号：');
        var l;
        var jiage;
        if (num == 92 || num == 95) {
            l = prompt('请输入要加的数量：  （升）')
            if (num == 92 && l <= 20) {
                jiage = l * 6;
                alert('价格为' + jiage + "元");
            } else if (num == 92 && l > 20) {
                jiage = 20 * 6 + (l - 20) * 5.9;
                alert('价格为' + jiage + "元");
            } else if (num == 95 && l <= 30) {
                jiage = l * 7;
                alert('价格为' + jiage + "元");
            } else if (num == 95 && l > 30) {
                jiage = 30 * 7 + (l - 30) * 6.95;
                alert('价格为' + jiage + "元");
            }
        } else {
            alert('没有此油');
        }
    </script>
      
7.首先接收用户输入的用户名，判断该用户名是否是admin,如果不是直接程序终止，如果是那么再次提示让用户输入密码,如果密码是88888,那么提示登录成功，否则提示登录失败。
	<script>
        var userName = prompt("请输入用户名：");
        var passwd;
        if (userName === 'admin') {
            passwd = prompt('请输入密码：');
            if (passwd == 88888) {
                alert('登录成功');
            } else {
                alert('登录失败');
            }
        } else {
            alert('程序终止');
        }
    </script>
8.分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
	<script>
        var num = prompt("请输入分数：  （100以内）");
        if (num >= 90 && num <= 100) {
            alert('A');
        } else if (num >= 80 && num < 90) {
            alert('B');
        } else if (num >= 70 && num < 80) {
            alert('C');
        } else if (num >= 60 && num < 70) {
            alert('D');
        } else if (num < 60) {
            alert('E');
        }
    </script>

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