js基础-逻辑分支

流程控制(理解)

为什么要学习流程控制

实际项目中, 不可能都是简单的顺序结构(从上往下执行), 会出现不同的条件, 就要根据条件不同做出相应的处理

程序的三种基本结构

顺序结构

• 从上到下执行的代码就是顺序结构

• 程序默认就是从上到下,一行一行的顺序执行的

  console.log("哈哈1");
  console.log("哈哈2");
  console.log("哈哈3");
  

分支结构(重点)

• 分支结构, 也叫选择结构 , 根据不同的情况,执行对应的代码

循环结构

• 循环结构：重复做一件事情

prompt()方法(掌握)

语法：window.prompt(“弹出的输入框提示信息”,”弹出的输入框默认信息”);

描述：打开网页弹出一个输入框

// 弹出输入框
var str = window.prompt("请输入一个数字","1");
//打印用户输入的值
 document.write(str);

脚下留心：

1、prompt()是window对象的方法

2、prompt()有两个参数，参数之间用“,”逗号隔开

3、prompt()方法会返回用户输入的信息

4、参数也可不写

逻辑分支(重点)

下班路上找个小姐姐,问是否愿意做你女朋友,是就约会,不是就自己走!!

if语句(选择分支)

语法:

if(条件){
     执行语句
 }
    
1、if是系统关键字得小写
2、小括号必须是英文下面，小括号结果只有两个状态：true或false，如果为真则执行花括号“{}”里面的js代码

例1:判断年龄是否大于18岁

var age = 10;
if (age >= 18) {  // bool为true和false
    console.log('可以访问该网站')
}

if…else…

语法

    if(条件){

        执行语句1，为真时执行

    }else{

        执行语句2，为假时执行
    }
    
1、if 和 else 都是系统关键字
2、当条件为真，则执行第一个花括号内的代码
3、当条件为假，则执行第二个花括号内的代码

例1:输入一个年龄,大于18可以吃鸡,小于18就回去玩泥巴（注：通过prompt() 方法）

<script>
// 定义一个num变量接受用户输入的数据
var num = prompt("请输入一个数字");
// console.log(num);

if(num>18){
	// 当条件为真，则执行该code
	document.write('可以吃鸡了');
}else {
	// 当条件为假，则执行该code
	document.write('不可以吃鸡');	
}
</script>

例2:判断奇数还是偶数

准备: 奇数除以2不能除尽 偶数可以除尽

  var a = 3;
  console.log(a%2);
  var b= 4;
  console.log(b%2);

案例

    var num = prompt('输入一个数字')
    if(num%2==0){  // 偶数的判断
        console.log('这是偶数')
    }else{
        console.log('这是奇数')
    }

分号:表示一个语句结束

{}:也表示语句结束,所以我们不要在{}后写 ;

if …else if…else

        if(条件1){
            执行语句1
        }else if(条件2){
            执行语句2
        }else if(条件3){
            执行语句3
        }else{
            执行语句4
        }*/
       
1、if、else if、else 都是系统关键字
2、当条件1为真，则执行第一个花括号内的代码
3、当条件2为真，则执行第二个花括号内的代码
4、当所有条件都不为真，则执行else 花括内的代码

例:根据输入的成绩判断出级别

输入一个成绩判断该成绩属于哪个分类

90分及以上，优秀； score>=90

80分及以上，良好 score>=80

70分及以上，一般 score>=70

60分及以上，及格 score>=60

60分以下，不及格

    <script>
      // 多分支结构
    // 场景:三种以上情况的使用
    //  if(条件1){
    //    满足条件1,执行语句1
    // }else if(条件2){
    //     满足条件2,执行语句2
    // }else if(条件3){
    //     满足条件3,执行语句3
    // }else{
    //     不满足以上的条件,则执行这里
    // }
    
    // 根据输入的成绩判断级别
    var score = prompt('输入成绩');
    // 1 判断输入的是否为数字
   // console.log(isNaN(score))  // 非数字则为true
   if(isNaN(score)){
       document.write('输入的成绩有误')
   }else if(score>100){  // 判断成绩是否大于100
       document.write('你是来搞事情的')
   }else if(score>=90){ // 判断成绩是否大于等于90
        document.write('你是优秀的孩子,奖励越南新娘一个')
   }else if(score>=80){
        document.write('成绩良好了,泰国人妖')
   }else if(score>70){
         document.write('成绩一般,给你乔碧萝')
   }else if(score>60){
       document.write('及格万岁,给你辣条');
   }else{
       document.write('不及格啦,给你一群羊');
   }
    </script>

回顾一下:

isNaN(x) 函数用于检查其参数是否是非数字值。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false

工作使用,集合逻辑运算符

判断年龄大于等于 14 ,或者是个女孩,就可以报舞蹈班了

         var age = 10;
         var sex = '女';

         if (age >= 14 || sex == '女') {

            console.log('可以报舞蹈班');
            
         } else {
           console.log('不可以报舞蹈班');
           
         }

判断年龄大于等于14,并且 是个男孩就可以玩吃鸡了

       var age = 10;
          var sex = '男';

          if ( age >= 14 && sex == '男') {

              console.log('可以吃鸡');
              
          }else {
            console.log('不可以吃鸡');
            
          }

练习

1.判断一个整数属于哪个范围：大于0；小于0；等于0

    var num = prompt(); 
    
    if(num>0){
        document.write('输入的数大于0');
    }else if(num<0){
        document.write('输入的数小于0');
    }else{
        document.write('输入的数等于0');
    }

2.判断一个整数是偶数还是奇数，并输出判断结果

第三节

问题:

 if 选择结构能够很好的实现条件判断处理，但也并非完美无瑕。有的时候我们需要处理的条件并没有那么复杂，而仅仅是一些等值判定。这样的时候，我们拥有另一种处理方式可供选择：switch选择结构 。

var userInput = prompt();
if (userInput == 0 ){
    userFlag = '石头';
} else if ( userInput == 1 ){
    userFlag = '剪刀';
} else {
    userFlag = '布';
}

switch选择结构(重点)

语法

switch( 判断条件 ){
		   case expr1: 
		         // 处理代码块
		         break;
		   case expr2: 
		         // 处理代码块
		         break;
		   default: 
		         // 处理代码块
		} 

1、switch、case、default、break都是系统关键字
2、switch中没加break会把所有的case判断一遍
3、switc是不可以写判断一定范围内的数据（前提：当exp不为true）

根据输入的成绩,判断出属于A,B,C,D那个级别

var sum=parseInt(prompt("请输入成绩"));
        var str="";
        if(isNaN(sum) || sum>100 || sum<0){
            str="输入错误";
        }else{
            switch (parseInt(sum/10)){
                case 10:
                    str="S";
                    break;
                case 9:
                    str="A";
                    break;
                case 8:
                    str="B";
                    break;
                case 7:
                    str="C";
                    break;
                case 6:
                    str="D";
                    break;
                default:
                    str="E";
            }
        }

        console.log(str);

break的使用

如果:case后面不使用break终止代码,他就会继续往下走.最终输出错误的结果

 <script>
     var str = prompt('请输入ABCD中的任意一个');
  
      switch(str){
          case 'A':
          console.log('你输入的是A');
          break;
          
         case 'B':
         console.log('你输入的是B');
          break;

          case 'C':
          console.log('你输入的是C');
          break;

          case 'D':
          console.log('你输入的是A');
          break;
      }
    // 总结:break是防止穿越的,匹配到一个case则,停止向下执行
    
    </script>

脚下留心

使用switch就一定要用break,否则就会出现穿透效果

switch和if判断的区别

判断的用途

if常用语判断一定范围内的数据 a>10 b<5
switch常用语判断固定的数据

例:比如判断输入的是男是女var sex = ‘男’;（switch）

 switch(sex){
  case ‘男’:
     document.write(‘性别男’);
      break;
   case ‘女’:
     document.write(‘性别女’);
      break;
    default:
    document.write(‘人妖’);
}

脚下留心：如果数据是一个固定的值，用switch效率会比if判断更高

判断类型区别

if 判断是看运算符号，两个等于则判断值是否相等，三个等于则判断是否全等

switch 默认判断全等

例1: var str=1;使用if和switch的判断区别

// 判断类型的比较
  var num = '2';
//   if(num==2){
//       alert('男儿何不带吴钩');
//   }
//   // 值和类型都要相等
//   if(num===2){
//       alert('收取关山五十州');
//   }

    // switch进行匹配的时候,是完全匹配,相当于 '==='
  switch(num){
      case 2:
      alert('有意栽花花不发');
      break;

      case '2':
      alert('无心插柳柳成荫');
      break;

      default:
        alert('自古多情空余恨,此恨绵绵无绝期');
  }

补充:输入框值的类型

三元运算符(重点)

语法1 条件 ? 值1 : 值2

语法2 条件 ? 表达式1 : 表达式2

1. 三元运算符会得到一个结果，结果根据条件来确定。
2. 如果条件的值为true，会返回表达式1的值/值1
3. 如果条件的值为false，会返回表达式2的值/值2

例1:

 // 输出两个数的最大值
    var a=3;
    var b=5;
    // if(a>b){
    //     document.write(a);
    // }else{
    //     document.write(b);
    // }

    // 三元运算符
    var c = '';
    var c  =  a>b ? a : b;
    document.write(c);

例2:求两个值的最大值

var max = n1 > n2 ? n1 : n2;

例3:求三个数的最小值

 var n1 = 34;
      var n2 = 12;
      var n3 = 3;

     var min =    n1 < n2 ? n1 : n2;

         min =   min < n3 ? min : n3;

       console.log(min);

面试题:写出如下几个场景的值

题1:

    var a=1;
    var b= a-- ? 10 : 0;
    var b= --a ? 10 : 0;
    console.log(b);
    分析:
     a--   返回了  1   1转换布尔值结果true
    --a  先运算a=a-1，再将结果返回  ，结果0  转换布尔值 false 

题2:条件必须为bool值

     var a;
     var b= a<0 || a>10 ?  5 : 10;
      console.log(b);
    
      var a=10;
      var b= a ? 0 : 10;

场景使用

//练习1：土豪的儿子, 输入ABCDE 
    //如果考了A：  买法拉利
    //如果考了B：  买宝马
    //如果考了C：  买三轮
    //如果考了D：  买摩拜自行车
    //如果考了E：  断绝父子关系
    //如果是其他值，提示代码有bug

//练习2： 买手机，输入自己的工资
   //如果超过30000:  买苹果手机
   //如果10000-30000： 买vivo手机
   //如果5000-10000 ： 买魅族手机
   //如果低于5000   ： 还买个锤子

//练习3： 输入自己的每月薪资
    //如果超过15000  : 高富帅
    //如果不超过      ：穷矮丑

思考

&& 和 || 的使用

console.log(true || false);

console.log(false || true);

console.log(1 || 2);

var num = 1|| 2

类型之间的转换

为什么要进行类型转换???

服务器拿回来的数据,有可能是字符串,比如age='18', 
 var age = '18';
 console.log(age+1);

回顾:查看变量的类型

typeof关键字可以查看数据的类型

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);

**小技巧：在控制台可以根据颜色来判断数据的类型哦(^__) **

转换成 数值 -number

• 1 Number()

console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN

• 2 parseInt() 和 parseFloat()

- parseInt()  把字符串类型的整数或者小数都转化为整数;
- parseFloat() 把字符串类型的整数转化整数,把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

• 3 算术运算 (最常用)

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负

//  强制将 - 两边的非数字,转化为数字
console.log(str - 0);  +0呢???

转换成 字符串类型 - string

• 1. String ( )

var num = 5;
num = String(num);
console.log(num);

• 2. toString ( )

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined

• 3. 拼串，(最常用)

var num = 5;
num = num + "";
console.log(num);

转换成布尔类型(重点)

所有的值都可以转换成布尔类型

其中 0, "", undefined，null， NaN，这几个值会转换成false，其他值都会转换成true

这个代表的五大基本类型

// 没有值 => false
// 有值 => true
// number string undefined null 
//  0      ''    

注意 : 
   1. 'false' 它是字符串 
   2.  NaN  => false 

• Boolean()

console.log(Boolean(1));
console.log(Boolean(0));

• !!

var a = "abc";
console.log(!!a);

应用与练习

1 大于6岁且为男的就可以吃鸡

2.案例：输入年份，计算某一年是否为闰年

提示: 能被4整除且不能被100整除，或者能被400整除

    <script>
     // 1 弹出输入框
     var year = prompt('请输入一个年份');
      if(((year%4==0) && (year%100!=0)) || (year%400==0) ){
           document.write('这是闰年');
      }else{
        document.write('这是平年');
      }
    </script>

3.案例：输入数字，显示星期几

提示: 假设1号就是周一

 // 2 根据日期判断星期几
      var date = prompt('请输入一个日期');
      //输入的时间,除以7取余
      var num = date%7;
      //console.log(num);
      var str;
      switch(num){
          case 0:
          str = '今天是周日';
          break;

          case 1:
          str = '今天是周一';
          break;

          case 2:
          str = '今天是周二';
          break;

          case 3:
          str = '今天是周三';
          break;

          case 4:
          str = '今天是周四';
          break;

          case 5:
          str = '今天是周五';
          break;

          case 6:
          str = '今天是周六';
          break;
      }
      console.log(str);

练习

1.案例：输入成绩分数，判定成绩等级(if和switch两种写法)

2.输入月份，显示当月的天数

扩展

NaN

NaN: not a number, 表示一个非数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

• NaN的类型是number类型的，表示一个非数字
• NaN不等于任何值，包括NaN本身
• 通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。

    alert(NaN == NaN);返回false
    var a = 0;
    var b;
    var c = a + b;
    alert(c);

认识isNaN()函数，该函数判断括号内的值是否是NaN，是就返回true，不是就返回false
alert(isNaN(c));

八进制与十六进制

    我们平时所习惯的不过是一种别人规定好的规则而已，比如iphone的价格，这个是认为规定的，我们知道了，并且已经习惯了，它的贵！
    
    那么这样的习惯其实会有所改变。
    
    比如进制，同样也是一种规则，这种规则是什么样的呢？数数字到9以后，你会想到什么？为什么会是10呢？

    9就是10进制的极限了，那么当继续计数的时候，会将9向前进1，然后9归零，这就是10；

    那么什么是二进制呢？逢2进1呗，如何用二进制表示3 ？11

    什么是八进制呢？如何用八进制表示10 ？12

    什么是十六进制呢？如何用十六进制表示25 ？19

    理解就够了；

    32位系统／64位系统
      同理32位的CPU就能在单位时间内处理字长为32位的二进制数据。 
    颜色值
   0-f

错误提示信息。改bug

报错	意义
missing ) after argument list	丢失了一般括号
Unexpected token )	意外符号
oYeear is not defined	没有声明oYeear
Cannot read property ‘value’ of null	无法获取空值的value
Unexpected identifier	意外的标识符

;

#### 八进制与十六进制

我们平时所习惯的不过是一种别人规定好的规则而已，比如iphone的价格，这个是认为规定的，我们知道了，并且已经习惯了，它的贵！

那么这样的习惯其实会有所改变。

比如进制，同样也是一种规则，这种规则是什么样的呢？数数字到9以后，你会想到什么？为什么会是10呢？

9就是10进制的极限了，那么当继续计数的时候，会将9向前进1，然后9归零，这就是10；

那么什么是二进制呢？逢2进1呗，如何用二进制表示3 ？11

什么是八进制呢？如何用八进制表示10 ？12

什么是十六进制呢？如何用十六进制表示25 ？19

理解就够了；

32位系统／64位系统
  同理32位的CPU就能在单位时间内处理字长为32位的二进制数据。 
颜色值

0-f

## 错误提示信息。改bug

| 报错                                 | 意义                |
| ------------------------------------ | ------------------- |
| missing ) after argument list        | 丢失了一般括号      |
| Unexpected token )                   | 意外符号            |
| oYeear is not defined                | 没有声明oYeear      |
| Cannot read property 'value' of null | 无法获取空值的value |
| Unexpected identifier                | 意外的标识符        |