day1：JavaScript初识

前端基础认识

 前端就是让我们如何在页面上进行渲染让它变得更加美观，增加与客户的交互体验

前端包括许多方面：比如网页、APP、小程序、GUI等

前端使用的相关技术：

html 房屋的结构（dom树）

css 墙面的颜色（规则树）

html(DOM树) + css(规则树) = 渲染树 （render tree）

JavaScript (脚本)  javascript会阻塞渲染树的进程 所以建议将JavaScript放在html后面

浏览器（相当于前端的画板）：

IE 火狐 谷歌 edge O鹏 苹果

谷歌的V8引擎：

渲染速度快

浏览器四大进程

• 主进程 只有一个。
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程：最多一个，用于3D绘制等
• 浏览器渲染进程（即通常所说的浏览器内核）（Renderer进程，内部是多线程的）：主要作用为页面渲染，脚本执行，事件处理等

V8引擎解析过程

var a = 1

• 进行词法分析转换成一个一个token（令牌）

        关键字 var

        名字 a

        符号 =

        数值 1

• 组成ast(抽象语法树)
• 根据抽象语法树声明字节码解析

JavaScript入门

概述：

JavaScript是一门脚本语言（具有侵入性 xxs攻击），需要浏览器的支持(解析器 谷歌V8引擎)，JavaScript是一门弱语言（因为它没有绝对的语法，它的数据类型不是由对应的修饰符来定义 而是根据对应的值来定义（值的类型就是变量的类型）），JavaScript里面由三个内容构成，BOM（浏览器对象模型 操作浏览器），DOM（文档对象模型 操作html文档）,ECMAScript（语法规范 es3（能够兼容各大主流浏览器 所有浏览器都支持） es5（兼容普通版本浏览器、大部分浏览器支持） es6（兼容相关的高版本浏览器、部分浏览器支持）

babel.js 转换ECMAScript的脚本工具，使其他浏览器能兼容高版本ECMAScript

JavaScript书写

内嵌JavaScript

<!-- 内嵌写法 -->

    <a href="javaScript:void">点击</a>

内联JavaScript（写在script标签中 可放在任何位置 建议放在html之后）

 <!-- 内联写法 script标签可写在任意位置 建议写在html后面 顺序遵循文档流 -->

    <script>

    console.log('哈哈')

    </script>

外联JavaScript（通过script标签的src引入）

 <!-- 外联写法 -->

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

JavaScript的代码执行顺序按照从上至下按照对应的文档流

变量定义：

关键词var来修饰 （也可不用 默认以var关键词修饰 变量提升 var声明的是伪全局变量）

var 变量名 = 值

变量名注意事项：

1.语义化命名 见名知意（有道词典）

2.不能使用关键字和保留字

3.驼峰命名法（第一个首字母小写以后的首字母大写）

var userName = 值

4.不能以数字开头（由数字字母下划线以及$符号组成）

var user1_name = 值

<script>
    var math = 1
    var Number = 2 //用保留字会报错
    var 1_math = 1 //数字不能放在开头位置
    var userName = 3 //驼峰命名法
    var user_Name = 4 //由数字、字母、下划线、以及$符号组成
</script>

JavaScript的数据类型（JavaScript数据类型由其值来决定）

基础数据类型 （值类型不能变的（常量）存储在栈上）

数值类型 number

var number = 1

console.log(typeof number)

字符串类型string（单引号、双引号均可）

var str = ‘haha’

console.log(typeof str)

布尔类型boolean（true真false假）

var bool = ture

console.log(typeof bool)

未定义类型 undefined（当前没有给值）undefined是null的派生

 console.log(typeof un) //un == null

空类型null 只有在null值的情况下才为null类型

 var obj = null //空类型

 console.log(typeof obj)

引用数据类型（对象地址分配的 可以变的 存储在堆上）

object array function......

typeof 检测对应的数据类型（二进制原理 返回的是字符串）

type 变量 //返回对应的数据类型的英文

    <script>
        var number = 1 //数值型数据类型
        console.log(typeof number)
        var str = "haha" //字符串数据类型
        console.log(typeof str)
        var bool = true //布尔数据类型
        console.log(typeof bool)
        var obj = null //空类型
        console.log(typeof obj)
        var un = undefined //undefined类型
        console.log(typeof un) //un == null
        console.log(typeof typeof un)//出现两个typeof最终输出的都是string类型

    </script>

JavaScript的注释

注释只是为了表示当前代码片段的意义 方便之后开发者的维护（不会被编译）

单行注释（只注释一行）Ctrl + /

// 单行注释

多行注释（可注释多行）shift+alt+a

/*

多行

注释

*/

值类型之间的转换

数据类型大转小是显示转换 小的转大的就是隐式转换（stirng>number>boolean>undefined）

任意类型转字符串（toString方法的调用（null/undefined不可使用）String方法的调用）

 //数值转字符串
        var num1 = 1
        var str1 = String(num1)
        console.log(typeof str1)
        //布尔类型转换为字符串
        var bool = true
        var str2 = String(bool)
        consle.log(typeof str2)
        //null类型转换为字符串
        var nullObj = null
        var str3 = String(nullObj)
        consle.log(typeof str3)
        //undefined类型转换为字符串
        var un
        var str4 = String(un)
        consle.log(typeof str4)
        //利用toString来转换
        console.log(typeof num1.toString())
        console.log(typeof bool.toString())
        //null转字符串 没有toString方法
        // console.log(String())
        //undefined转字符串 没有toString方法
        // var un
        // console.log(String(un))

任意类型转number类型

使用number方法转换

使用parseInt或者parseFloat（截取）

 // NaN是数值类型
        console.log(typeof NaN)//number数据类型 
        console.log(Number(undefined))//NaN not a number
        // 任意类型转为数值的时候 无法进行转换就会出现NaN
        //字符串转数值类型
        console.log(Number('123'))//NaN
        console.log(Number('haha'))//NaN
        //parseint 转整型（切割前面的内容）parseFloat 转浮点型（保留小数）
        console.log(parseInt('123.123abc'))
        console.log(parseInt('a123.123abc'))//NaN
        console.log(parseFloat('a123.123'))//NaN
        console.log(parseFloat('123.123abc'))
        //布尔类型转number类型
        var bool1 = true
        console.log( Number(bool1))
        //空类型转number类型
        console.log(Number())
        //undefined转number类型
        console.log(Number(un))

注意事项：

1.任意类型转number类型无法转换会出现NaN NaN属于数值类型

2.null转number类型结果为0，undefined转number结果为NaN

3.isNaN专门判断当前是否为NaN类型 出现NaN返回true 没有返回为false

console.log(isNaN(NaN));//返回为ture

Boolean方法

任意类型转boolean

任何类型布尔类型的时候 true会转成1 false会转成0

//数值类型转bool 非0和NaN都是true
        console.log(Boolean('0'))
        console.log(Boolean('NaN'))
        var str2 = 124
        console.log(Boolean(str2))
        //字符串类型转bool 非空字符就是true
        console.log(Boolean('123'))
        console.log(Boolean(' '))
        //空类型转bool
        console.log(Boolean(null))
        //undefined转Boolean
        console.log(Boolean(undefined))

注意事项：

1.string类型转boolean非空就是true 空字符串为false

2.number类型转boolean 非0和非NaN就是true，0和NaN为false

3.undefined和null转换boolean都是false

number的特殊值

NaN当你需要转换为number类型的时候转换不成功出现的值会是无穷大 infinity

var nan = NaN //表示当前无法转换为number类型

//无穷大 无穷小

var number1 = +Infinity //无穷大

var number2 = -Infinity //无穷小

console.log(typeof number1)

运算符及表达式

算术运算符

+   -   *   /   %   ++   --

        console.log(1+true)//2
        console.log(1+true+null)//2
        console.log(1+true+undefined)//NaN
        //出现字符串做连接
        console.log(1+1+undefined+'un'+true+10)//NaNuntrue10
        console.log(1+' '+2)//12
        //取余 取模 小数取大数得到本事 大数取小数得余数
        console.log(3%4)//3
        console.log(10%2+10)//10
        //++的意思在原本的基础上自增1
        var a = 10
        console.log(++a)//11
        //前置和后置的区别
        //++前置先执行+1操作再执行本代码 ++后置先执行代码后自增1
        console.log(a++)//11
        console.log(a)//12
        console.log(12+13+(a++)-(a--)+(++a))//37
        //执行顺序 先算括号 再执行方法 再算*/% 最后加减
        console.log(a*12+undefined-(10/5)%(5).toString)//NaN
        console.log(a*12+"null"+undefined+(10/5)%(5).toString)//156nullundefinedNaN
        

++前置和后置的区别 ++i / i++（--同理 --i / i--）

1.++a前置先执行 先++再执行本代码

2.a++后置后执行 先执行本代码后自增一

注意事项:

1.取余的规则 大的数值取余小的数值得到是余数 小的数值取余大的数值得到的是他本身

比如a÷b得c余d,那么b÷a你可以理解为得0余b

2.字符串进行加法运算会进行字符串的拼接 得到的是字符串

3.其他的任意操作都会先转为对应的number类型再进行运算

4.NaN做任意运算返回的结果都是NaN

逻辑运算符

&&   ||   !

&& 与 两者为true 则返回true(结果为true) 有一个是false就返回false

|| 或 有一个true直接取第一个true 如果都是false则取结果为false

! 非 取反操作 将对应的真的变假的 假的变真的 返回的结果是一个boolean类型

//&&都真才为真（取最后一个真）有一个假就是假（取第一个假）
console.log(1&&'ha'&&true)//true
console.log(1&&'ha'&&true&&2)//2
//||都假才为假（取最后一个假）其余为真（取第一个真）
console.log(1||0||true)//1
console.log(0||false)//false
console.log(!1)//取反 返回的值是布尔类型 false
//兼容写法  第一个不行就第二个
var a = null || 1
console.log(a);//1

注意事项：

1. && 全为真才为真 其余为假
2. || 全为假才为假 其余为真
3. ! 取反操作 将真的转为假的 将假的转为真的
4. 短路与 && 到达为false 后面代码不执行 
5. 短路或 || 到达为true 后面代码不执行

条件运算符

> < = >= <= == === != !==

返回的值为Boolean/布尔类型(true/flase)

var a = 1

var b = 2

console.log(a>b); //false

console.log(a<b); //true

//不同类型的比较

//字符串和对应的数值比较 比较过程转换成数值类型 NaN 出现NaN结果就是false

        //条件运算 返回的是布尔值
        console.log(1>2)//false
        console.log(2>1)//true
        //不同类型比较
        //字符串和对应的数值比较 比较过程转换成数值类型
        //NaN 不等于 NaN NaN == NaN false NaN ！= NaN true
        console.log(NaN == NaN) //false
        console.log(NaN != NaN) //true
        //==判断值是否相等 进行转换操作
        //=== 恒等 在==的基础上判断类型是否相等
        console.log('1' === 1)//false
        console.log(1+2 === '3')//false

注意事项：

1.undefined==null为true undefined===null为false

2.字符串和字符串相比较那么对应的比较ASCII码（先比首字母 大写字母比小写字母小 排在前面比后面的要小）

3.在对应的非数值比较上会自动转位数进行比较

4.NaN==NaN为false在正常比较中没有取反符号的情况下NaN就是false

5.恒等是基于==之上的==为false对应的恒等必定为false（==只比较值/===要比类型）

赋值运算符 （最后执行）

= += -= *= /= %=

        //赋值运算在最后执行
        var n = 10
        console.log(n+=10)//20
        console.log(n-=5)//15
        console.log(n/5)//3
        console.log(n%5)//0

位移运算<< >>

        // 2的二进制为10 如何将2快速变为8
        console.log(2>>2)//前面写值>>后面写要移几位 结果为0 0010 转为00
        console.log(2<<2)//结果为8 1000

位移运算是将对应的数值转为二进制进行位移运算（将一个数值转为二进制使用除二取余法）

扩展内容（进制转换）

常用的进制分为 2进制 4进制 8进制 16进制（颜色设置 最的值为f）

        //将十进制转为其他进制使用toString
        var a = 100 
        console.log(a.toString(2)) //括号里面写要转的进制
        //将其他进制转为十进制用parseInt
        var str = 'ab'//16进制
        console.log(parseInt(str,16,10))//要转的值，值的进制，想要转的进制

三目运算符

boolean值? true的结果 :false的结果

var a = 1+1? 1:2 //结果为1
var i = 0 ? 6:7 //结果为7