JavaScript

一、JS基础（1995年出现 ES6是2015出现）

1.JavaScript作用？

    1.减轻服务器压力

    2.添加页面动态效果

2.JavaScript定义?

    JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

3.脚本语言？

    介于HTMLCSS和编译型语言之间的，是一种快速的由浏览器解释性语言

    Java 是一种编译型语言，并且是一种强类型语言

    JavaScript 是一种解释性语言，并且是一种弱类型语言

4.JavaScript特点？

    向HTML页面中添加交互行为

    脚本语言，语法和Java类似

    解释性语言，边执行边解释

5.JavaScript组成？

    ECMAscript    核心语法

        变量

            三种赋值方式

                先声明后赋值

                同时声明赋值

                不声明直接使用（不推荐）

            作用域：

                全局变量

                    定义在JS文件里，但是在方法外的变量叫全局变量

                    定义在使用之前

                局部变量

                    定义在函数里面的变量叫局部变量

        数据类型

            underfined   声明但未赋值

            null         空值

            number       数字类型包含整数和小数

            boolean      布尔值

            string       字符串 单引号和双引号效果一致，首字符可以小写

                属性:

                    length

                方法:

                    charAt(index)    返回在指定位置的字符

                    indexOf(str，index)    查找某个指定的字符串在字符串中首次出现的位置

                    substring(index1，index2)    返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

                    split(str)    将字符串分割为字符串数组

            对象

            数组          

        数组

            三种创建方式

                    var s = new Array(size);

                    var s = new Array('a','b','c');

                    var s = ['a','b','c'];

            和Java数组不同之处

                可以存放不同类型

                创建方式也不一样

                数组长度可变

            属性：

                length

            方法：

                join()    把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

                sort()    对数组排序

                push()    向数组末尾添加一个或更多元素，并返回新的长度

        运算符号

            typeof 检测变量的返回值

                underfined: 声明但是未赋值

                string: 单引号或者双引号包围的内容

                number:整数或者浮点数

                boolean:true   false

                object: null   对象  数组

            算术运算符

                + - * / % ++ --

                和Java一样

            赋值运算符

                = += -=

                Java中+=和-=属于符合算术运算符

            比较运算符

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

                java中叫关系运算符 并且没有=== 和！==

            逻辑运算符

                && || ！ 

        控制语句

            if

            switch

            for  for in (对比Java的增强for循环，for in 遍历的是下标)

            while

            循环中断

                break

                continue   

        注释

            单行注释  ctrl+/

            多行注释  shift + alt+ A

        输入输出

            alert("":) 警告框

            prompt("","")  提示框

        语法约定

            代码区分大小写

            变量对象和函数的名称

            一句话写完之后分号不能忘

    BOM           浏览器对象模型

    DOM           文档对象模型

6.JavaScript基本结构？

    <script>

    </script>

   

7.JavaScript执行原理？

    浏览器接受用户输入

    浏览器去向服务器发送包含JavaScript的请求

    服务器解析HTMLCSSJavascript

    服务器将响应页面返回给浏览器

    浏览器下载JavaScript页面并解释执行

8.网页中引入JS的三种方式？

    外部引入

    script直接使用

    在标签内部使用

9.程序调试

    在代码中加debugger

    或者F12，切换到源代码  然后就可以打断点（要先刷新一下）

        F10  单步调试

        F11  步入方法

        F8   跳到下一个断点

10.函数

    定义：

        类似于Java中的方法，是完成特定任务的代码语句块

    页面只要引入了这个JS就可以使用里面定义的函数

    分类：

        系统函数

            parseInt()   将字符串转化为int类型

            parseFloat()  将字符串转化位float类型

            isNaN()   判断入参是否是数字，false表示是数字，true表示非数字

        自定义函数

            匿名函数

                通过事件直接调用

                    事件名= function(){

                       

                    }

            命名函数

                function 函数名(){

                     //JavaScript语句

                     [return 返回值]

                }

                根据小括号是否由参数分为有参无参函数

                根据是否由return语句区分为是否由返回值的函数

            调用：

                事件名="函数名()"

11.事件

     onload    一个页面或一幅图像完成加载（一般使用在body标签）

     onclick    鼠标单击某个对象（按钮）

     onmouseover    鼠标指导移到某元素上

     onkeydown    某个键盘按键被按下 

     onchange    域的内容被改变

二、BOM

1.定义

    BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

    BOM使JavaScript有能力与浏览器"对话"

2、组成

3.具有功能

    弹出新的浏览器窗口

    移动、关闭浏览器窗口以及调整窗口的大小

    页面的前进、后退

4.window 对象   

    常用属性：

        history：返回用户访问过的URL信息

        location:返回当前URL信息

        window.location="http://www.kgc.cn";     

    常用方法：

     

5.三种弹框的区别？

    alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

 alert('弹出警告')

    prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

function accounts() {
    var text;
    var like = prompt("你喜欢什么东西");
    switch (like) {
        case '小猫':
            alert("我也喜欢小猫");
            break;
        case '小狗':
            alert("小狗哇哇叫");
            break;
        default:
            alert("没听过");
            break;
    }

}

    confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

function accounts(){
    var flag= confirm('上述信息是否正确，请问你要提交表单吗');
    if(flag){
      alert('提交成功')
    }else{
      alert('提交失败')
    }
}

6.history对象

    常用方法：   

        back()    加载 history 对象列表中的前一个URL  history.go(-1)

        forward()    加载 history 对象列表中的下一个URL   history.go(1)

        go()    加载 history 对象列表中的某个具体URL

7.location   

    常用属性：

        host    设置或返回主机名和当前URL的端口号

        hostname    设置或返回当前URL的主机名

        href    设置或返回完整的URL

    常用方法：  

        reload()    重新加载当前文档    做刷新效果

        replace()    用新的文档替换当前文档

8.document对象

    常用属性：   

        referrer    返回载入当前文档的URL

        URL    返回当前文档的URL

    常用方法：

        getElementById()    返回对拥有指定id的第一个对象的引用

        getElementsByName()    返回带有指定名称的对象的集合

        getElementsByTagName()    返回带有指定标签名的对象的集合

        write()    向文档写文本、HTML表达式或JavaScript代码

    innerHTML 往标签内部添加内容

    innerTEXT 往标签内部添加内容

        innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。

        innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

        同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性

9.内置对象

    Array：用于在单独的变量名中存储一系列的值

    String：用于支持对字符串的处理

    Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

        常用方法：

            ceil()    对数进行上舍入    Math.ceil(25.5);返回26

            Math.ceil(-25.5);返回-25

            floor()    对数进行下舍入    Math.floor(25.5);返回25

            Math.floor(-25.5);返回-26

            round()    把数四舍五入为最接近的数    Math.round(25.5);返回26

            Math.round(-25.5);返回-26

            random()    返回0~1之间的随机数    Math.random();例如：0.6273608814137365

    Date：用于操作日期和时间

        定义：

            var 日期对象=new Date(参数)

            参数格式：MM  DD,YYYY,hh:mm:ss

            var  today=new Date();   //返回当前日期和时间

            var tdate=new Date("september 1,2013,14:58:12");

        常用方法：

            getDate()    返回 Date 对象的一个月中的每一天，其值介于1～31之间

            getDay()    返回 Date 对象的星期中的每一天，其值介于0～6之间

            getHours()    返回 Date 对象的小时数，其值介于0～23之间

            getMinutes()    返回 Date 对象的分钟数，其值介于0～59之间

            getSeconds()    返回 Date 对象的秒数，其值介于0～59之间

            getMonth()    返回 Date 对象的月份，其值介于0～11之间

            getFullYear()    返回 Date 对象的年份，其值为4位数

            getTime()    返回自某一时刻（1970年1月1日）以来的毫秒数

10.定时函数

    setTimeOut()   双参数，第一个参数是调用函数，第二个参数是时间，单位是毫秒数

    setInterval() 双参数，第一个参数是调用函数，第二个参数是时间，单位是毫秒数

    不同之处在与  setTimeOut调用函数只调用一次，而setInterval一直在循环调用函数

    清除函数

        clearTimeout(setTimeOut()返回的ID值)

        clearInterval(setInterval()返回的ID值)

11.BOM小结

三、DOM

1.节点分类
    元素节点、文档节点、注释节点、文本节点、属性节点

2.节点关系
    父子关系
    兄弟关系
3.访问节点方式
    直接访问
        getElementById()
        getElementsByName()
        getElementsByTagName()
    根据层次关系进行访问节点
        parentNode    返回节点的父节点
        childNodes    返回子节点集合，childNodes[i]
        firstChild    返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
        lastChild    返回节点的最后一个子节点
        nextSibling    下一个节点
        previousSibling    上一个节点
    
    element属性（根据层次关系获得元素节点对象）
        firstElementChild    返回节点的第一个元素子节点，最普遍的用法是访问该元素的文本节点
        lastElementChild    返回节点的最后一元素个子节点
        nextElementSibling    下一个元素节点
        previousElementSibling    上一个元素节点

4.节点信息
    nodeName：节点名称
    nodeValue：节点值
    nodeType：节点类型
    
                                属性名     属性类型   属性值
        1.document 文档节点     document    9         null
        2.element  元素节点     标签名      1         标签内容
        3.text     文本节点     text        3         文本内容
        4.comment  注释节点     comment     8         注释内容
        5.attr     属性节点     属性名      2         属性值
5.操作节点属性
    getAttribute("属性名")
    setAttribute("属性名","属性值")
6.创建节点
    createElement( tagName)    创建一个标签名为tagName的新元素节点
    A.appendChild( B)    把B节点追加至A节点的末尾
    insertBefore( A,B )    把A节点插入到B节点之前
    cloneNode(deep)    复制某个指定的节点
7.删除和替换节点
    removeChild( node)    删除指定的节点
    replaceChild( newNode, oldNode)属性attr     用其他的节点替换指定的节点
    先得到他们的父节点，再通过父节点调用删除和替换方法
8.操作修改节点样式
    style
        HTML元素.style.样式属性＝"值"
    className
        HTML元素.className="样式名称"
            类选择器样式
        如果先使用style修改样式，然后还可以通过className修改样式
        如果先使用className修改样式，就不能再使用style修改样式
9.获取元素样式（注意浏览器兼容性）
    使用style只能获取行内样式
    document.defaultView.getComputedStyle(元素,null).属性;
    可以获取非IE浏览器所有样式
    HTML元素. currentStyle.样式属性;
    可以获取IE浏览器样式
10.可以获取哪些元素样式
    offsetLeft     返回当前元素左边界到它上级元素的左边界的距离，只读属性
    offsetTop    返回当前元素上边界到它上级元素的上边界的距离，只读属性
    offsetHeight    返回元素的高度
    offsetWidth    返回元素的宽度
    offsetParent    返回元素的偏移容器，即对最近的动态定位的包含元素的引用
    scrollTop    返回匹配元素的滚动条的垂直位置
    scrollLeft    返回匹配元素的滚动条的水平位置
    clientWidth    返回元素的可见宽度
    clientHeight    返回元素的可见高度
    
    
    document.documentElement.scrollTop;
    document.documentElement.scrollLeft;
    或者
    document.body.scrollTop;
    document.body.scrollLeft;
    var sTop=document.documentElement.scrollTop||document.body.scrollTop;