JavaScript对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而

前端认识：

光会html+css你只能算是一个网页设计
前端html+css+js+node.js（框架）
一个完整的页面应用
- html页面结构
- css表现
- js行为给页面增加动态效果
- 原生JS就是内功可以让我们页面更具生命力
前端的工作
- html5+原生APP（IOS 安卓）
- 微信公众号小程序（水滴步步宝）
- 客户端 RN app
- pc 移动页面
- node.js后端
- 全栈工程师

JS是什么

JS (JavaScript) 一门动态脚本语言主要运行浏览器里 + node.js(服务端)
JS让我们页面有动态交互效果其实就是有更好的与用户互动

JS里面我们要学习些什么

ECMAScript(标准)简称ES (ES6 ES7 ES8) 制定了 JS中核心内容（语法变量数据类型语句关键字保留字运算符）
文档对象模型DOM(Document Object Model)：提供了一些属性和方法
让我们操作html页面中的元素（html标签)
浏览器对象模型BOM(Browser Object Model)：提供了一些属性和方法让我们操作浏览器

JS学习视频

pan.baidu.com/s/15WJ5UcOS…

day1

javascript 三大部分

ECMAScript（标准）简称ES 规定了JS中核心内容（语法变量数据类型语句关键字运算符等）
DOM（文档对象模型）提供了一些属性和方法
让我们能够操作页面中的html元素(document.getElementByID())
BOM(浏览器对象模型)提供了一些属性和方法让我们能够操作浏览器（window.open()）

JS引入方式

外链式

<script src="test.js"></script>

内嵌式

<script type="text/javascript">
    alert("hello world!");
</script>

行内式

<h3 onclick="alert('hello world！')">你好</h3>

JS的引入方式
- 1.外链式页面js太多时推荐使用好维护
- 2.内嵌式 JS代码比较少时
- 3.行内式不常用
注意：内嵌式和外链式不能混用
错误写法:

<script src="test.js">
    alert("hello world!");
</script>

正确写法:

<script>
     alert("珠峰");
</script>

JS为什么放在body中

按照传统的做法，所有script元素都应该放在页面的head元素中，这种做法的目的就是把所有外部文件（包括css和JavaScript文件）的引用都放在相同的地方，可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面内容（浏览器在遇到body标记时才开始呈现内容）
对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为避免这个问题，现代web应用程序一般都把全部JavaScript引用放在元素中页面内容的后面。

<script>
        // 获取元素必须要等html元素解析完才行
        //    在js中 根据ID名 获取页面中元素（html标签）
        var doc = document.getElementById('box');
        Console.log(doc);
</script>

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #ff3344;
        }
    </style>
    <div class="box" id="box">12328923</div>
    <!-- DOM就是通过js操作html标签 -->
    <script>
        // 获取元素必须要等html元素解析完才行
        //    在js中 根据ID名 获取页面中元素（html标签）
        var asc = document.getElementById('box');
        console.log(asc);
    </script>
    <!-- 
        JS引入方式
        注意的
        JS存放位置
        1.JS 一般最好是放在body底部（要先让浏览器加载HTML 然后再JS获取元素）
        2.外链式和内嵌式不能混用在一个script标签当中
     -->

JS中的变量

变量：可变化的值存储数据（值）
定义变量:
- var 变量名 = 值
关键字在JS中有特殊意义的单词我不能随便用
一个= 赋值的意思
var n = 2019;

n 这个变量存储的值就是2019

text这个变量存储的值就是下面这段话:

var text = '关键字 在JS中有特殊意义的单词 我不能随便用';

alert("弹出框内容");
变量用来存储值和代表值
把变量n所存储的值作为弹框内容

alert(n); //alert(n) => alert(2019)
alert(text) //alert(text) => alert('关键字 在JS中有特殊意义的单词 我不能随便用')

js代码自上而下一行一行执行的
创建一个变量叫title并且他存储的值是100

    var title = 100;
    // 把此时title这个变量 所储存的值 通过弹窗打印出来
    alert(title); //100
    // 变量的值是可以修改的
    // 将title变量存储的值 修改成2018
    title = 2018; 
    // 再次将title的值 打印出来
    alert(title);//2018
    title = 2019; 
    alert(title);//2019

常量恒久不变的量一旦被定义就不能被修改
const 也是关键字用来创建常量的 const 常量名 = 值

    const hello = 'hello world!';
    alert(hello);
    hello = 2019;

变量就是用来存储值和代表值的 var num = 100;
定义变量 var 变量名 = 值（所要储存的值）
变量的值可以被修改

    var n = 1000;
    n = 100;

JS中的输出方式

js中的输出方式就把js中的内容输出显示到页面中
输出到页面中 DOM里面提供的方法

document.write('我是页面中的 内容')

innerHTML 将内容输出到指定页面元素中
innerText
将变量text存储的数据内容输出到页面当中
JS把内容直接放到body里面了

    document.write(text);
    document.write('<h1>JavaScript</h1>');
    document.write('<h1>JavaScript</h1>')
    document.write('<h2>JavaScript</h2>')
    document.write('<h3>JavaScript</h3>')
    document.write('<h4>JavaScript</h4>')

<body>
   <h3 id="title"></h3>
   <p id="c"></p>
  <script>
     //获取ID名为title的页面标签h3
    var a = document.getElementById('title');
     // 元素.innerHTML = 元素内容
    // 将内容输出显示到页面h3标签中
    // a.innerHTML = '我是页面中的 标题3'
    var text = '欢迎来到掘金！我们给你的102495553@qq.com邮箱发送了一封账号验证邮件，为了你的账号安全，请尽快验证。重新发送邮件'
     var c = document.getElementById('c')
     c.innerHTML = text
 </script>
 </body>

innerHTML 和innerText作用一样
区别:

innerText不能够识别标签内容 innerHTML能够识别标签内容

innerText将内容作当做普通文本直接输出到页面元素中

    a.innerText = '<i>我是页面中的标题3434</i>';
    a.innerHTML = '<i>我是页面中的标题3434</i>';

页面中输出方式

    document.write('<h3>hello</h3>');将内容直接输出到body中,能够识别标签

innerHTML/innerText将内容输出到指定元素标签内
弹窗输出会阻塞浏览器渲染页面

    alert('弹窗内容');//普通提示框
    confirm('你确认要退出登录');//确认框
    prompt('你的名字是什么？');//输入框

控制台输出（通常进行JS代码调试）
控制台会显示出一些JS代码运行时错误信息

<body>
   <h3 id="title"></h3>
  <script>
    console.log('控制台输出');
    console.dir('')//在控制台输出更详细的内容
    var ele = document.getElementById('title');
    console.log(ele);
    console.dir(ele);
    var ele = 123;
    console.log(ele);
  </script>

命名规范

var 变量名 = 值
1. 驼峰式命名法(小驼峰大驼峰)
小驼峰命名法第一个单词首字母小写从第二个单词开始首字母要大写 var getContextId = 123;
大驼峰每个单词首字母都要大写 (面向对象定义类) var GetElementById = 20;
2.严格区分大小写

    var a = 100;
    var A = 200;
    console.log(a);
    console.log(A);

3.数字字母,但是数字不能作为开头

        var 1a = 100; //错误写法
        var c1 = 200;
        _ $ 可以作为开头
        var _c = 'c';//内置的自定义变量
        var $c = 'c';//jQuery类库中的元素

4.定义变量时不能使用关键字和保留字(后面升级关键字) var document const

数据类型

规定JS中值都可以有哪些

        var n = 123;
        var text = '数据类型';
        var str = '123';
        var str = "123";
        var s = '';//空字符串
        var s = "";

基本数据类型(原始数据类型)
- number 数字类型例如 1 -1 0.25
- String 字符串类型例如 '' ""
- Boolean 布尔类型 true 真 (对) false 假(错)
- Null null 空值空指针对象
- undefined 未定义
- (Symbol ES6标准)
引用数据类型(复合数据类型)

对象数据类型

    数组 Array[]
    正则 /\d+/
    date 日期对象 
    Math 数学对象   
    ...

函数数据类型 function() {}

检测数据类型

typeof
instanceof
constructor
Object.prototype.toString.call()
typeof
语法
typeof 值/变量

        //Number
        var n = 2019;
        console.log(typeof n);//"number" typeof n => typeof 2019
        console.log(typeof 1);//"number"
        // String
        console.log(typeof "你好"); //"String"
        // Boolean
        console.log(typeof true); //"Boolean"
        console.log(typeof false);//"Boolean"
        // Null
        console.log(typeof null); //"object" 空指针对象 先特殊记
        // undefined 
        console.log(typeof undefined);//"undefined"
        // 普通对象{}
        var obj = {id: 1};
        console.log(typeof obj); //"object"

        // 数组[]
        var arr = [1,2,3];
        console.log(typeof arr); //"object"
        //正则
        var reg = /\d+/;
        console.log(typeof reg); //"object"

缺陷 typeof 不能够具体细分对象数据类型中数组正则普通对象

        // 函数
        function fe() {}
        console.log(typeof fe);//"function"

typeof 通常用来检测基本数据类型和函数
typeof的返回值都哪些
"number" "string" "boolean" "undefined" "object" "function"

JS数据类型之Number

Number 数字类型：正数小数负数 0 NaN（非数字特殊值）

        console.log(typeof NaN); //"number"
        /*
            typeof 1
            typeof -1
            typeof 0.25
            typeof 0        
        */

数字类型转换,主要针对的是将字符串转换为数字
Number() 严格转换只要包含非数字字符就直接返回NaN

        console.log(Number('10')); // 10
        console.log(Number('a10')); // 返回 NaN
        console.log(Number('10.12')); // 10.12

将boolean类型转化为数字

        console.log(Number(true)); // 1
        console.log(Number(false)); // 0
        // null
        console.log(Number(null)); // 0
        // undefined
        console.log(Number(undefined)); // NaN

Array 先将数组转换为字符串在转换成数字
- 数字转换成字符串就是把中括号换成引号

        Number([]); // Number([]) => Number('') => 0
        Number([100]); // Number([100]) => Number('100') => 100
        Number([10, 20, 30]); // Number([10,20,30]) => Number('10,20,30') => NaN
        // Number({})
        // NaN
        // Number(/\d+/)
        // NaN
        // Number(function fe() {})
        // NaN
        console.log(Number([undefined])); // 等价于 Number([])

将字符串中的数字提取出来
- parseInt
- parseInt 从左到右进行提取一旦遇到非数字字符停止提取将提取到的数字字符一数字形式返回
- 如果开头第一个字符就是非数字字符就直接返回 NaN
- parseInt 不能识别小数点它有取整作用

        // parseInt (10.5); //10
        // parseInt (10.5px); //10

parseFloat
parseFloat 和 parseInt 功能一样只是多识别一个小数点

        console.log(Number('100px')); //NaN
        console.log(parseInt('-100a')); //100

操作符 + 和Number()方法一样

        +'' //0
        +'12321' //12321
        +'123a12' //NaN
        +'a12' //NaN

isNaN() 检测一个值是不是NaN（代表非数字）
isNaN(NaN)如果是NaN 返回true 说明这个值不是有效数字
isNaN(1) 如果不是NaN 返回false 说明这个值是有效数字

        isNaN(1 + undefined);  //isNaN(1 + undefined) => isNaN(NaN) => true

isNaN先将值用Number()方法转换下然后再判断是不是NaN

        isNaN('10'); //isNaN(Number('10')) => isNaN(10) => false
        isNaN('10px'); //isNaN(Number('10px')) => isNaN(NaN) => true
        isNaN(null); //isNaN(Number('null')) => isNaN(0) => false
        isNaN(true); //isNaN(Number('true')) => isNaN(1) => false
        isNaN(10); //isNaN(Number('10')) => isNaN(10) => false
        isNaN([1]]); //isNaN(Number([1])) => isNaN(1) => false

Number()方法返回值情况只有两种
- 如果成功转换为数字就返回这个数字
- 如果转换数字失败就返回NaN

        var num = parseFloat('width:100px');
        console.log(typeof num =='number');

数据类型之Boolean

boolean:true(真) false(假)
其他类型都可以转换成boolean类型（true或false）
- 0 '' null NaN undefined 这五个值转换为Boolean类型都是false 其余都是true
怎么转换为Boolean类型
- Boolean()将其他类型的值转换为boolean

       console.log(Boolean(0)) //false
       console.log(Boolean('')); //false
       console.log(Boolean(null)); //false
       console.log(Boolean(NaN)); //false
       console.log(Boolean(undefined)); //false

!! 操作符等价于 Boolean（）

        console.log(!!0) //false
        console.log(!!'') //false

! 取反
- 先转换为Boolean再取反

        console.log('!0', !0)
        console.log('!空字符串', !'')
        console.log('!null', !null)
        console.log('!NaN', !NaN)
        console.log('!undefined', !undefined)

0 '' null NaN undefined 这五个值取反都是true 其余都是false

JS普通对象

引用数据类型就是用来存储多个值的(集合)
语法
- var obj = {属性名1:属性值,属性名2:属性值...};
创建一个对象属性是以键值对形式存在的
属性名：属性值(键值对)
- key:value
- 多个属性之间用逗号隔开
定义了一个对象存储数据

        var obj = {
            title:"豆瓣电影Top10",
            name:'zhufeng',
            age:10,
            sex:'男'
        };

关于对象的增删改查
如何获取对象中的某个属性
1. 对象名.属性名
- 通过obj这个对象找到属性title

    console.log(obj.title);
    console.log(obj.age);

1. 对象名['属性名']

    console.log(obj['sex']);
    console.log(obj['name']);

先获取元素

    var bt = document.getElementById('title');
    var text = document.getElementById('text');
    bt.innerHTML = obj.title;
    text.innerHTML = obj.text;

获取属性需要注意的
- 对象p名.属性名
- 数字作为属性名是不能使用第一种方式获取属性名
```
    var o = {
        0: '你好',
        1: 'hello'
    }
```

错误写法 console.log(o.0);

console.log(o[0]); // '你好'

如果用第二种方法属性名没有加引号会把当做变量来解析

console.log(o[sex]);

在JS中会把所有的单词当做变量来解析

        var c = 100;
        console.log(c);
        var obj2 = {
            title: 'hello',
            id: 24,
            0: 2019
        }
        console.log('title:' + obj2.title + '\n' + 'id:' + obj2.id + '\n' + '0:' + obj2[0]);

2.增加属性

    var con = {
        id: 24
        };
    console.log('增加前', con);
    con.city = 'Beijing';
    con.name = 'zhufeng';
    con['city'] = 'Beijing';
    con['name'] = 'zhufeng';
    console.log('增加后', con);

3.修改属性

        var n = {
            title: 'hello'
        };
        // 将对象 n的title属性 修改为24
        console.log('修改前', n);
        n.title = 24;

        n.text = 'hello';
        console.log('修改后', n);

4.删除属性

    var info = {
        age: 20,
        name: 'zhufeng'
    }
    // 真删除
    // console.log('删除前',info);
    // delete info.age;
    // console.log('删除后',info);
    // 假删除
    console.log('删除前', info);
    info.age = null;
    console.log('删除后', info);

如何创建一个对象
创建对象的目的就是用来存储多个值（存储数据）

        var obj = {
            name: 'zhufeng',
            id: 24,
            10: '数字属性'
        }

对象增删改查

查

1.对象名.属性名

console.log(obj.name);

2.对象名['属性名']

    console.log(obj['name']);

获取一个数字属性

    console.log(obj['10']);

增加

    obj.title = 'hello zhufeng';
    obj['text'] = 'hello world';
    console.log(obj);

修改把原有的属性重新赋值

        obj.name = 'xiugai';
        console.log(obj);

    delete obj.id;
    console.log(obj);

假删除

    info.name = null;
    console.log(obj);

对象里不能有重复的属性如果有的话是以最后一个为准

    var num = {
        id: 20,
        id: 30,
        id: 40,
        id: 2019
    };
    console.log(num); // {id: 2019}

基本数据类型与引用数据类型的区别

基本数据类型操作的是值

    var num = 100;

引用数据类型操作的是地址
- 对于对象数据类型会为对象单独分配一块内存来存储多个值

        var num = {
            num1: 100,
            num2: 200,
            num3: 300
        }

JS代码主要运行在浏览器里
浏览器会为我们JS代码提供运行环境全局作用域（地球）

alert('你好');
var num = 100;

obj2 实质上存储的就是这个对象内存地址（引用地址）

var obj2 = { id: 123, title: 'hello' };

根据obj2存储的地址来找到里面的叫title的这个属性

obj2.title;

基本数据类型操作的是值（直接存储的就是一个具体的值）
引用数据类型操作的是引用地址（存储的是一个引用地址）
info存储引用地址 xxxfff11

    var info = {
      name: 'gaohuan',
      age: 18,
      iphone: 13811111111
    };

把变量info存储的值给变量text一份
把info变量存储的地址又给了text一份

    var text = info;
    info = xxxfff11;
    text = xxxfff11;

通过text存储引用地址找到这块儿内存将里面的age属性的值修改为28

    text.age = 28; // xxxfff11.age = 28
    // xxxfff11.age
    console.log(info.age); // 28
    var a = 2;
    // 将变量a存储的值 有给变量b一份
    var b = a; // b = 2
    console.log('b', b);

循环

循环：根据循环次数一遍又一遍执行相同的代码

for 循环语句
语法：
- for(初始值;执行条件(循环结束条件);累加记录步长){ 代码块每次要执行的代码code }
通过for循环打印输出五次'hello world'

for(var i = 0; i < 5; i++) {
    console.log('hello world!');
}

每次循环分三步
- 1.进行条件判断 i < 5 条件为true
- 2.条件为true 执行循环体里的代码
- 3.执行完后就让i的值累加一次 i++

for(var i = 0; i < 9; i++) {
    console.log('n',n); //最后一次循环  n = 9
}
// 注意：每次循环完 最后都要加加一次 i++
//循环结束后 n的值
console.log('end',n); // 10

while循环
语法
while(条件) {只要条件成立为true，就会一直xun循环执行下去}

var n = -10;
while(n < 5) {
    //在自身的基础上累加5
    n+=5; //n=-5 n = 0 n = 5
    console.log('n',n); // -5 0 5
}
a ++; // a+=1
var a = 1;
a += 10;// a= a+10
console.log(a);

var n = 0;
while(n < 5) {
    n++;
    console.log('n:',n);
}

判断

if语句条件语句进行判断
语法
if(条件) {条件为true执行代码}

大于 >

小于 <

大于等于 >=

小于等于 <=

相对等于 ==

绝对等于 ===

不等于 !=

//绿灯
var text = "绿灯";
if(text === "绿灯") {
   console.log("前方是绿灯，可以通行");
}

//true
if(2 > 1) {
   console.log("2 > 1"); 
}
//false
if(6 < 3) {
   console.log("6 < 3");
}

if else

如果...否则...

语法
if(条件) {条件为true时执行代码} else {条件为false执行的代码}

var light = '红灯';
if(light === '绿灯') {
    console.log("当前是绿灯，请通行。");
} else {
    console.log("请等一等 当前不是绿灯");
}

多条件

if(条件1) {

当条件1为true时,执行的代码

} else if(条件2) {

当条件2为true时执行的代码

} else {

当条件1和条件2都不为true是执行的代码

}

var light = '黄灯';
if(light === '绿灯') {
    console.log("当前是绿灯，请通行。");
} else if(light === '黄灯') {
    console.log("请等一等 当前是黄灯");
} else {
    console.log("请一直等，当前是红灯");
}

===========================================
var time = 'morning';
if(time === 'morning') {
    console.log('Good morning 😊');
}else if (time === 'noon') {
    console.log('Good noon 😃')
} else if (time === 'afternoon') {
    console.log('Good afternoon 🙂')
} else {
    console.log('Good evening 🌙')
}

其他的所有类型都可以转换为boolean值(true or false)
0 '' NaN null undefined 这五个值转换为Boolean都是false 其余全是true
if() 会吧括号里的内容隐式转换为boolean值
- true 条件成立
- false 条件不成立

if (0) {
    console.log(0000000);
}
if(2 + 3) {
    console.log('hello world'); 
}
if(-1 + 1) {
    console.log('bye bye world'); 
}

定义一个变量age
如果 age 等于 1 输出 hello 1
如果 age 等于 10 输出 hello 10
如果 age 等于 20 输出 hello 20
否则输出 hello world

var age = 10;
if(age === 1) {
    console.log('hello 1');
} else if(age === 10) {
    console.log('hello 10');
} else if(age === 20){
    console.log('hello 20');
} else {
    console.log('hello world');
}

switch 条件语句
语法

    switch (值 / 变量) {
    case 1: //case 等于的意思
    // 等于1的时候 执行的代码
        break; //相当于结束中断
    case 2:
    // 等于2的时候 执行的代码
         break;
    case 3:
    // 等于3的时候 执行的代码
        break;
    default: //相当于else
    // 以上都不成立时 执行这里的代码
    }

var num = 3;
switch (num) {
    case 1:
        console.log('数字1');
        break; //相当于结束中断
    case 2:
        console.log('数字2');
        break;
    case 3:
        console.log('数字3');
        break;
    default: //相当于else
        console.log('随便哪个数字啦');
}
=====================================================================================
var day = 3;
switch (day) {
    case 1:
        console.log('今天是周一 上班');
        break;
    case 2:
        console.log('今天是周二 上班');
        break;
    case 3:
        console.log('今天是周三 上班');
        break;
    case 4:
        console.log('今天是周四 休息');
        break;
    case 5:
        console.log('今天是周五 上班');
        break;
    case 6:
        console.log('今天是周六 上班');
        break;
    case 7:
        console.log('今天是周日 休息');
        break;
    default:
        console.log('今天 爱星期几 星期几, 我只想休息~😏')
}

通常每个case 后面要加一个break
如果不加break 就会继续往下执行知道碰到下一break

    var num = 1
    switch (num) {
    case 1:
        console.log('数字1');
        //  break;
    case 2:
        console.log('数字2');
        //  break;
    case 3:
        console.log('数字3');
        //  break;
    default:
        console.log('随便哪个数字啦');
    }

break 和 continue

break(中断)
- 只要在循环体中遇到break 整个循环就结束了
- 包括break 后面的代码都不会执行了以及i++也不执行了

for(var i = 0; i < 10; i++) {
    //当 i = 5 的时候 整个循环就结束了
    if(i == 5) {
        break; //一旦遇到break整个循环就结束了
    }
    console.log('i',i); // 0 1 2 3 4
}
console.log('end',i); // end 5

continue(跳到下一轮)
- 直接跳到下一轮就把 continue 后面的代码忽略掉并不会中断循环

for(var i = 0; i < 10; i++) {
    if(i < 5) { // i 小于5的时候 遇到continue
        // 不会执行 continue 后面的代码直接跳到下一轮循环
        continue;
    }
    console.log('i',i);// 5 6 7 8 9
}

逻辑或与逻辑与

逻辑或 ||
逻辑与 &&

取值

逻辑或

先看左边值哪一个是真(true)就返回哪一个
如果都为true就返回第一个
如果都为false就返回最后一个

console.log(0 || 2);// 2
console.log(NaN || 'ABC');//ABC
console.log(2 || null); // 2
// 如果都为false就返回最后一个
console.log(undefined || NaN); // NaN
console.log(1 || 3 || 0 || NaN); // 1
console.log(0 || 3 || 0 || NaN); // 3

逻辑与 &&

先看左边值哪一个是(false)就返回哪一个
如果都为true就返回最后一个
如果都为false就返回第一个

console.log(0 && null); // 0
console.log(0 && 2); // 0
console.log(2 && null); // null
console.log(2 && 1); //1
//先看左边值 哪一个是假(false)就返回哪一个值
console.log(2 && null && 3 && NaN); // null
//&& 优先级高于 ||
console.log(3 && 4 || NaN || 0 && 1); // 4

逻辑或 || (或者)
逻辑与 && (并且)
主要是在if 语句中应用
|| 相当于或者or

if(条件1 || 条件2) {
    只要其中一个条件为true，就执行这里的代码
}
var n = 1;
//变量n的值 等于1或2的时候 都可以执行里面的代码
if(n == 1 || n == 2) {
    console.log('1或者2都可以');
}
// null 转换为Boolean  false
// 1 转换为Boolean true
if (null || 1) {
    console.log('hello true');
}
if (null || '') {
    console.log('hello 123');
}

语法
&& 相当于并且and

if (条件1 && 条件2) {
    //两边条件都为true时 就执行这里代码
}
 var n = 2;
 if (n == 2 && n != 3) {
    console.log('hello true');
}

var score = 75;
if(score >= 70 && score <80) {
    console.log('您的成绩中等');
}

取模

% 取模(取余)获取余数
得到3%2的余数

console.log(3 % 2);//1
console.log(0 % 2);//0
console.log(1 % 2);//1
console.log(2 % 2);//0
console.log(3 % 2);//1
console.log(4 % 2);//0

模几反值情况就有几种
比如%2 返回值情况两种0 1
比如%3 返回值情况两种0 1 2
比如%4 返回值情况两种0 1 2 3

console.log(0 % 4) // 0
console.log(1 % 4) // 1
console.log(2 % 4) // 2
console.log(3 % 4) // 3
console.log(4 % 4) // 0
console.log(5 % 4) // 1
console.log(6 % 4) // 2
console.log(7 % 4) // 3
console.log(8 % 4) // 3

如果一个数 %2 0 说明是偶数
如果一个数 %2 1 说明是奇数
定义一个变量 num
如果num除以2 余数等于0 输出"这是一个偶数"
如果num除以2 余数等于1 输出"这是一个奇数"

var num = 3;
if(num % 2 === 0) {
    console.log('这是一个偶数');
} else {
    console.log('这是一个奇数');
}

0 '' null undefined NaN 转换为Boolean类型都是 false 其余都是true
if语句的小括号会隐式将条件转换为Boolean值(true或 false)在进行判断执行
true 条件成立条件不成立
num % 2 返回值情况 0 1

var num = 2;
if(!(num % 2)) {//2 % 2 = 0
    console.log("这是个偶数");
} else {
    console.log("这是个奇数");
}

=======================================

if (num % 2 === 0) {
    console.log("“这是个偶数”")
} else {
    console.log("“这是个奇数”")
}

三元运算符

语法:

条件?为true时执行 : false时执行

var price = 11;
if(price < 10) {
    console.log('比较便宜');
} else {
    console.log('太贵了');
}
price < 10 ? console.log('比较便宜') : console.log('太贵了，能不能便宜点');

将简单的if语句改写成三元运算

if (price == 10) {
    console.log('价格刚刚好');
}

null undefined 相当于用来占位避免语法报错

price == 10 ? console.log('比较刚好') : null;

三元运算符冒号以及后面的内容是不能省略的
错误写法会报语法错误

price === 10 ? console.log('价格刚好')

= 赋值运算符
三元运算符优先级要高于赋值运算符

var num = 10 < 1 ? 'hello' : 'world';

JavaScript

前端认识：

JS是什么

JS里面我们要学习些什么

JS学习视频

day1

javascript 三大部分

JS引入方式

JS为什么放在body中

JS中的变量

JS中的输出方式

命名规范

数据类型

检测数据类型

JS数据类型之Number

数据类型之Boolean

JS普通对象

基本数据类型与引用数据类型的区别

循环

循环：根据循环次数 一遍又一遍执行相同的代码

判断

break 和 continue

逻辑或与逻辑与

取模

三元运算符

循环：根据循环次数一遍又一遍执行相同的代码