网页的血液——javascript

1.简介

         网络开发唯一可选语言， 增加网页动态性与交互性，服务端开发， Nodejs，可以进行数据库文件读写

2.引入

         html内部使用script标签，在script内部直接编写js
         在外部js文件中编写，在script内部通过script的src属性引入外部js

3.变量声明   

const
            声明常量
            必须赋值
            不能更改

let
        声明局部变量
        只能声明一次
        语句块外失效
        没有赋值之前不能访问

 var
        声明全局变量
        可以声明多次
        自带变量提升效果
        没有声明就能访问

4.数据类型

5种基本类型可以使用typeof

数字：Number
字符串：String
布尔值： Bool
空值：Null
            使用typeof返回类型为object
            清除内存

未定义：Undefined
            声明一个变量，但是未赋值

2种复杂类型可以使用instanceof检测类型

数组
        相当于Python中的列表，Array， 逻辑运算符为真

对象
        相当于Python中的字典，Object，逻辑运算符为真

5.运算符    

算数运算法：+ - * / %
赋值运算法：= += -= *= /= %=
        自增：先返回再自加
                        a++
                        a--
                   先自加再返回
                        ++a
                        --a

比较运算法：> >= < <= == !=
        判等
            ==：只比较值
            ===：先比较值，再比较类型

逻辑运算法
        &&
            左侧为真，返回右侧
            左侧为假，返回左侧
        ||
            左侧为真，返回左侧
            左侧为假，返回右侧
        !
            非假为真，非真为假；结果只有true与false

流程结构
        顺序结构：从上向下依次执行
        分支结构
            if(){}
            if(){}else{}
            if(){}else if(){}else{}
        循环结构
            for
            while
                先判断再执行
            doWhile
                先执行再判断

6.函数

    概念
        function：定义关键字
        函数名：小驼峰
        形参：占位符，声明函数使用
        实参：实际值，调用函数使用
        返回值：只有一个
    匿名函数
        没有函数名，不能单独存在
        使用
            赋予一个变量
            函数形参
            对象的键
        案例
            setTimeOut
                clear  TimeOut
                    清除延迟
                开启延迟，延迟1秒执行一次
            setInterval
                clear Interval
                    清除计时
                开启计时，每隔1秒执行一次
    递归函数
        自己调用自己
        递归效率低

7.数据常用操作

1.字符串

         length：长度
        遍历：下标，0，length-1
        cahrAt：根据索引找字符
        indexOf：根据字符返回索引，找不到返回-1
        concat：字符串拼接
        endsWith：结尾
        startWith：开头
        replace：替换
        match：匹配返回对象
        search：返回索引
        slice：切片，不包含stop
        split：切割，支持空字符切割
        toLowerCase：转小写
        toUpperCas：转大写
        trim：剔除空格

2.数组

        length：长度
        遍历： 0，length-1
        concat：数组连接，不影响原始数组
        conclude：包含
        indexOf：返回索引，找不到返回-1
        join：将元素使用字符拼接
        pop：删除末尾
        push：末尾插入
        shift：删除开头
        unshift：开头插入
        sort：排序，影响原始数组
        reverse：逆序，影响原始数组
        slice：切片，不影响原始数组
        splice
            start：操作位置
            deleteCount：删除个数
            items： 插入内容，可以不插入
        高阶函数：形参是匿名函数，第一个参数是值，第二个参数是索引
            forEach：遍历，没有返回值
            every：每一个都是true结果才返回true 
            some：每一个都是false结果才返回false 
            find：返回索引， 只返回一个
            filter： 过滤，返回符合条件的
            map： 映射，一对一返回

3. 对象

        键值对：类似Python字典，值可以是任意数据类型
        Object keys(obj):获取obj的所有键
        JSON.stringify:序列化
        JSON.parse:反序列化

4.BOM

        window：全局对象下的属性
        history
            back：回退
            forward：前进
            go(n)
                正值 前进
                负值 后退
                0 刷新
        location
            href：当前地址
            protocol：协议
            port：端口
            pathname：虚拟路径
            search：查询参数
            hash：路由模式,锚点
            reload()：刷新
        navigator：浏览器身份userAgent

5. DOM：文档对象模型

            通过js来操作页面元素
 1.页面对象的获取
            querySelector
                找到匹配的第一个
            querySelectorAll
                找到所有
                    返回类似数组
                    可以使用下标获取单个
            document.query*
                搜索整个文档
            target.query*
                在target内部去找
2.绑定事件
            鼠标事件
                onclick
                onmouse
                    enter
                    leave
                    down
                    up
                    move
            表单元素
                onfuces：聚焦
                onblur：失焦
                oninput：输入内容改变
                onkeyup：键盘抬起
3.获取、修改
            内容
                innerText：不考虑标签
                innerHTML：可以识别标签
            属性
                非类名
                    href
                    title
                    id
                    ......
                    对象.属性名
                类名
                    对象.classList
                        add：添加
                        remove：删除
                        contains：是否有
                        toggle：有就删，没有就添加
         样式
                设置
                    都是设置行内样式
                     .style.样式属性名=
                获取
                    行内样式可以直接通过style.样式属性名获取
                    内部样式表以及外部样式表
                        需要通过getComputedStyle(obj).样式属性
        相关元素
            parentElement：父节点
            children：所有直接子节点，可以使用下标
            nextElementSibling：下一个相邻
            previoiusElementSibling：上一个相邻
        元素的创建于删除
            createElement：创建元素
            appendChild：将元素插入文档
            remove：删除元素