原生JS(JavaScript)

JS
一丶JavaScript简述
JS基于对象和事件驱动脚本语言，作用在浏览器上

---

二丶JS的事件
①onsubmit
主要用于表单的提交，绑定的位置在form标签里面，要有返回标记，如果提交的数据校验未通过，不允许表单提交
②onload
用于页面加载的时候使用的事件，绑定的位置在body标签里，也可以用window.οnlοad=function(){}
③onclick/ondblclick
主要用于鼠标点击事件，常见的有按钮、图片、文字、超链接等等
④onfocus/onblur
聚焦离焦事件，主要用于表单相关的标签
⑤onmouseover/onmouseout/onmousemove
主要用于鼠标移入，移出，移动
常规应用：电商网站商品详情页
⑥onchange
当改变域的内容时使用，常用于下拉列表

---

三丶js三大核心板块
核心一：ECMAScript

---

1.语法
    严格区分大小写
    变量是弱类型！：在定义变量的时候，如果没有对其赋值，那么此变量是没有具体类型的，只有赋值之后才有具体的类型。
    每行代码结束后分号可有可无，建议写上！
    注释、以及代码块等内与java一致。

---

    2.变量
    声明统一使用关键字var来定义。也可以不用声明。(如果不声明，表示该变量是一个全局的！)
    变量命名规则与java一致。不要使用关键字和保留字。
    如果不确定是不是关键字，建议字母后加数字

---

3.数据类型
  3.1 原始数据类型
    undefined:变量已经定义，但是未为其赋值
    null:变量压根儿都不存在，一般用作占位符
    number
    string
    boolean

  3.2 引用数据类型

    3.2.1 JS的内置对象

    3.2.1.1 Array
    创建对象的3种方式
        new Array();
        new Array(size);
            注意，size是数组的长度，而不是该数组有一个元素为size
        new Array(element0,element1.....);

    3.2.1.2 String

    注意里面的几个方法
        substr()
            从起始索引位置截取指定长度的字符串
        substring()
            截取两个索引位置之间的字符串
        match()主要用于正则

    3.2.1.3 Math

    3.2.1.4 Date
    getTime()主要用于解决浏览器缓存问题

    3.2.1.5 Boolean

    3.2.1.6 Number

    3.2.1.7 RegExp

    注意对象的创建

    全局函数
    注意其中的部分方法(与编码解码相关的方法，eval函数)

---

4.运算符
    全等运算符，==与===的区别。
    ==会进行一个类型转换(尝试着转换)，===它不会进行类型转换

---

5.语句
    语句与java一致。

---

6.函数
    有名称
        function 函数名称(){
}
        匿名
            function(){
}

---

核心二:浏览器对象模型：BOM
HTML文档运行在浏览器端，JS提供浏览器端相关的对象

---

        1.window对象：代表的是整个浏览器对象
            setInterval();
                一直执行
                在该方法中有2个参数，第一个参数是一个函数或者表达式，一般都要加引号，第二个参数是以毫秒值为单位的时间间隔。
            clearInterval();
                参数是setInterval()的返回值
            setTimeout();
                只执行一次
            clearTimeout();
            以上是与弹窗相关的方法.

---

            alert();
                警告框
            prompt();
                输入框
            confirm();
                确认框
            window对象拥有其它几个对象的一个只读引用！

            以上是与定时操作有关的方法.

---

        2.location对象：url地址
            href属性：实现页面的跳转功能

---

        3.history对象：历史记录
            back():查看上一个历史记录
            forward():查看下一个历史记录
            go(有参数)：可以实现上面两个功能。如果参数为负整数，其功能与back()一致。如果参数为正整数，其功能与forward一致

---

        4.navigator对象：整个浏览器信息相关的对象

---

        5.screen对象：客户端屏幕相关的信息

---

核心三:文档对象模型：DOM

        Document对象
            ①获取元素对象的方法
                getElementById()
                getElementsByName()
                getElementsByTagName()

            ②创建节点的方法
                创建文本节点
                    createTextNode()
                创建元素节点
                    createElement()

---

        Element对象
            appendChild()在元素的末尾添加一个新的子节点
            firstChild()获取第一个子节点
            insertBefore()在指定的元素节点前面插入一个新的子节点
            removeChild()移除子节点
            replaceChild()替换节点

---

        Attribute对象
            attr.value设置或返回属性的值

---

        Event对象
        都属于节点Node，还有一个文本节点对象，Test