JavaScript知识点总结

                                            JavaScript

一、介绍:
     1.JavaScript是一种专门在浏览器编译并执行的编程语言
     2.JavaScript处理用户与浏览器之间请求问题
     3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

二、弱类型编程语言风格 VS  强类型编程语言风格
    1.强类型编程语言风格：认为对象行为应该受到其修饰类型严格约束。
          Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言
               class Student{
                    public String sname;
                    public void sayHello(){
                        System.out.print("hello world");
                    }
               }
               Student  stu = new Student();
               stu.sname="mike"; stu对象能够调用属性只有sname
               stu.sayHello();   stu对象能够调用方法只有sayHello()

               stu.sid =10;  // 该代码在Java中认为是语法错误，因为修饰stu对象的Student类型没有提供这个属性

    2.弱类型编程语言风格： 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用的属性和方法
          JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

          var  stu = new Object();//stu对象相当于【阿Q】
          stu.car = "劳斯莱斯";//合法
          stu.play = function (){ return  "天天打游戏"}
          stu.play();

三、JavaScript中变量声明方式:
       1.命令格式:
             var 变量名;
             var 变量名 = 值;
             var 变量名1,变量名2=值；

       2.注意：
            在JavaScript中，变量/对象在声明时不允许指定【类型】，只能通过var来进行修饰

四、JavaScript中标识符命名规则:（与Java相同）
       1.标识符只能由四种符号组成  英文字母，数字 , 下划线，美元符号($)
       2.标识符首字母不能以"数字"开头
       3.标识符不能采用JavaScript关键字 比如 var

五、JavaScript数据类型：
       1.分类：  基本数据类型   &  高级引用数据类型
               基本数据类型： number、string、boolean
                数字类型（number）：JavaScript中将整数与小数合称为number类型。
                字符串类型(string)：JavaScript中将字符与字符串合称为string类型
                                   JavaScript字符串既可以使用单引号''又可以使用双引号""。
                布尔类型(boolean)：JavaScript中boolean类型的值只有true或false。

               高级引用数据类型：object、function
                 object类型：JavaScript中所有通过【构造函数】生成的对象都是object类型。

                 function类型：相当于Java中（java.lang.reflect.Method）
                               JavaScript中所有函数都是function类型

       ********** JavaScript是弱类型编程语言，根据变量赋值内容来判断变量数据类型
                  JavaScript中变量的数据类型可以根据赋值内容来进行动态改变      *********************

六、JavaScript中特殊【值】

     1.undefined: JavaScript中所有变量在没有赋值时，其默认值都是undefined
                  由于JavaScript根据变量的赋值来判断变量类型，此时由于变量
                  没有赋值因此JavaScript无法判断当前变量数据类型，此时返回
                  也是undefiled,因此初学者将undefined也理解为是一种数据类型
                  这种理解是错误的。

     2.null：     JavaScript中当一个对象赋值为null时，表示对象引用了一个【空内存】
                  这个空内存既不能存储数据也不能读取数据。
                  此时这个对象数据类型，在JavaScript依然认为是object类型。

     3.NaN：      JavaScript中当一个变量赋值为NaN，表示变量接收了一个【非法数字】（123 合法数字  abc123 非法数字）
                  此时这个变量数据类型，在JavaScript依然认为number类型。

     4.infinity： JavaScript中当一个变量赋值为infinity，表示变量接收了一个【无穷大数字 比如：1/0】
                  此时这个变量数据类型，在JavaScript依然认为number类型。

七、JavaScript中控制语句：
    JavaScript中控制语句与Java中控制语句语法格式完全一致

八、JavaScript中函数声明方式
     1.命令格式:
          function   函数名(形参名1,形参名2,...){
                函数体;
                return  将函数运行结果进行返回;
          }

     2.注意:
          1)JavaScript中，所有函数在声明时，都需要使用function进行修饰

          2)JavaScript中，所有函数在声明时，禁止指定函数返回值数据类型

          3)JavaScript中，所有函数在声明时，形参既不能使用var来修饰也不能使用数据类型修饰

          4)JavaScript中，所有函数在声明时，如果有返回值，此时应该通过return进行返回

九、JavaScript函数调用方式:

   1.浏览器并不会自动调用JavaScript函数

   2.可以通过命令方式来调用JavaScript函数

   3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理

------------------------------------------------------------------------------------------------------------------

                                    JavaScript应用篇

一、JavaScript作用:
        帮助浏览器对用户提出请求进行处理。

二、DOM对象:

    1.DOM 英文全称： Document Object  Model， 中文全称：【文档模型对象】

    2.JavaScript不能直接操作HTML标签，只能通过HTML标签关联的DOM对象对HTML标签下达指令。

三、DOM对象生命周期：

    1.浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，
      每当加载一个html标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象。

    2.在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中。

    3.在浏览器关闭时候，浏览器缓存中DOM对象会被销毁。

    4.在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖。

四、document对象：
    1.document对象被称为【文档对象】

    2.document对象用于在浏览器内存中根据定位条件定位DOM对象。

五、document对象生命周期:

    1.在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】

    存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树（DOM树）

    ****在浏览器将接收的网页中标签加载完毕后，自动在浏览器内存生成一个document对象****

    2.一个浏览器运行期间，只会生成一个document对象 （也就是说：一个HTML文件就只有一个document，

    一个浏览器分成三个网页[比如：在线考试管理系统]那就是分成了三个网页，就有三个document对象）

    【一个BOM可以有一个或多个document，一个document对象中有多个DOM】

    3.在浏览器关闭时，负责将document对象进行销毁

六、通过document对象定位DOM对象方式:
    1.根据html标签的id属性值定位DOM对象
        命令格式       var domObj =  document.getElementById("id属性值")；
        举个例子       var domObj =  document.getElementById("one")；

            通知document对象定位id属性等于one的标签关联的DOM对象

    2.根据html标签的name属性值定位DOM对象
        命令格式    var domArray =  document.getElementsByName("name属性值");

        举个例子    <input type="checkbox" name="deptNo" value="10">部门10
                   <input type="checkbox" name="deptNo" value="20">部门20
                   <input type="checkbox" name="deptNo" value="30">部门30

        var domArray =  document.getElementsByName("deptNo");
        就是通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位

        并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象。

    3.根据html标签类型定位DOM对象
        命令格式      var domArray =   document.getElementsByTagName("标签类型名");

        举个例子      var  domArray = document.getElementsByTagName("p");

                  <p>段落标签</p>

        就是通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回

七、DOM对象对HTML标签属性操作

        1.DOM对象 对标签value属性进行取值与赋值操作
             取值操作:
                  var domObj =  document.getElementById("one");
                  var num = domObj.value;
             赋值操作:
                  var domObj = document.getElementById("one");
                  domObj.value = "abc";

        2.DOM对象 对标签中【样式属性】进行取值与赋值操作

             取值操作:
                   var domObj =  document.getElementById("one");
                   //读取当前标签【背景颜色属性】值
                   var color = domObj.style.背景颜色属性

             赋值操作:
                   var domObj =  document.getElementById("one");
                   //通过DOM对象对标签中【背景颜色属性】进行赋值
                   domObj.style.背景颜色属性 = 值；

        3.DOM对象 对标签中【状态属性】进行取值与赋值操作

             状态属性：状态属性的值都是boolean类型

                  disabled = true ; 表示当前标签不可以使用               
                  disabled = false; 表示当前标签可以使用
                
                  checked: 只存在与radio标签与checkbox标签        
                       checked = true ;  表示当前标签被选中了            
                       checked = false;  表示当前标签未被选中
                
             取值操作:
                  var domObj = document.getElementById("one");
                  var num = domObj.checked;
                
             赋值操作:
                  var domObj = document.getElementById("one");
                  domObj.checked = true;

        4. DOM对象 对标签中【文字显示内容】进行赋值与取值
             文字显示内容:  只存在于双目标签之间;<tr>100</tr>

                    取值操作:
                            var domObj = document.getElementById("one");
                            var num1 = domObj.innerText;

                    赋值操作:
                            var domObj = document.getElementById("one");
                            domObj.innerText = 值；

        innerText与innerHTML 区别:
             innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值
             innerText只能接收字符串
             innerHTML既可以接收字符串又可以接收html标签

八、JavaScript监听事件
       1.监听事件:
            监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时，
            通知浏览器调用对应JavaScript函数对当前用户请求进行处理。

       2.监听事件分类:
            1)监听用户何时使用鼠标操作当前标签
                * onclick :  监听用户何时使用鼠标【单击】当前标签
                * onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
                
                * onmouseout : 监听用户何时将鼠标从当前标签上方【移开】

                * onfocus    : 监听用户何时通过鼠标让当前标签获得【光标】
                * onblur     : 监听用户何时通过鼠标让当前标签丢失【光标】

            2)监听用户何时使用键盘操作当前标签
                * onkeydown  :键盘弹起
                * onkeyup    :键盘按下

------------------------------------------------------------------------------------------------------------------------------------------------
                            JavaScript高级篇
一、arguments：

        1.在JavaScript中每一个函数都包含一个arguments属性

        2.arguments属性是一个数组

        3.在函数被调用的时候，是先将实参输入到函数的arguments属性中，再由arguments将数据传递给形参

        4.arguments属性的存在，可以将JavaScript中函数在调用时传递的实参与函数的形参进行隔离，增强函数调用的灵活性

        5.arguments属性只能在函数体内使用，不能再函数体外使用

二、function类型对象：
        1.介绍：
              * function是JavaScript中一种高级数据类型
              * 一个function类型对象用于管理一个具体函数
              * JavaScript中的function类型相当于java中的Method类型

        2.function类型对象命名方式：
              * 标准声明方式
                   function 函数对象名（形参）{
                       函数体;
                   };

              * 匿名声明方式
                   var 函数对象名 = function（形参）{函数体;};

        3.function类型对象的创建时机：
              * 浏览器在加载<script>标签时，一共加载2次：
                   第一次加载，将<script>标签中所有以标准形式声明的函数对象进行创建，
                   第二次加载，将<script>标签里所有命令行按照自上而下的顺序来执行。

三、局部变量与全局变量：
    1.局部变量：
        * 定义：在函数体内，声明的变量叫做局部变量。
            function fun1(){
                var name = "张三";
            }

        * 特征：局部变量只能在当前函数内使用，不能在函数外使用。

    2.全局变量：
        * 定义：全局变量可以在当前的HTML文件中所有的地方使用

                全局变量被声明时，自动分配给window对象作为其属性

        * 声明全局变量：
            第一种方式：直接在<scripr>标签下，通过var声明的变量，就是全局变量。
            第二种方式：在函数体内，没有通过var修饰符声明的变量也是全局变量。这种情况下函数必须被调用后，这个全局变量才生效。

四、object类型对象特征：

    1.定义：在JavaScript中所有通过【构造函数new】生成的对象，其数据类型都是object类型。

    2.特征：object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可以移除其属性和方法。

    3.属性维护：（两种方式）
        第一种方式：
            添加属性：object类型对象名.新属性名 = 属性值;
            添加函数：object类型对象名.新函数名 = function(){};

        第二种方式：
            添加属性：object类型对象名[新属性名] = 属性值;
            添加函数：object类型对象名[新函数名] = function(){};

        移除object类型对象的属性和方法：
            移除属性：delete object类型对象名.属性名;
            移除方法：delete object类型对象名.函数名;

五、自定义构造函数：

    1.命令格式：   function 函数对象名(){}

    2.构造函数调用：var object类型对象名 = new 函数对象名();

    3.普通函数与构造函数的区分：

        * 函数没有被调用之前无法区分，只能根据函数调用形式来区分。
        * var 变量名称 = 函数对象名();这种形式调用就是普通函数
        * var 变量名称 = new 函数对象名();这种形式调用就是构造函数。

        * 返回值：普通函数运行后需要通过return将执行结果返回，
              而构造函数运行后，直接返回一个object类型的对象，此时函数中的return失效。

六、关于this：
    1.java中的this：
        * 在构造方法中this指向由构造方法生成的实例对象。
        * 在普通方法中this指向调用该方法的实例对象

    2.JavaScript中的this：（与java中的this完全一样）
        * 在构造函数中this指向由构造函数生成的实例对象
        * 在普通函数中this指向调用该函数的实例对象

七、JSON：

    1.JavaScript中获得object类型对象的方式有两种：

        方式一：由构造函数生成的对象都是object类型对象。

        方式二：由JSON数据描述格式生成的对象也都是object类型对象。

    2.JSON数据描述格式：是JavaScript中获得object类型对象的简化版

    3.JSON的标准命令格式：
        var obj = {"属性名1":属性值,"属性名2":属性值};

        开发人员习惯上将由JSON格式描述的对象称为JSON对象。其实就是object类型对象。

    4.JSON数组：
        就是在一个数组中存放若干个JSON对象，这样的数组就是JSON数组。