JavaScript高级知识

学习之前先明白的问题：
 JavaScript(ECMAScript, js): 是一门基于对象、事件驱动的弱类型、动态的客户端脚本语言。
    所有的变量都是用var来定义。
    所有的对象的方法都可以动态的添加。
 
 运行环境：浏览器(msie、firefox、opera、chrome)

 为什么要学习JavaScript:
  1. 从事是B/S (Browser/Server)
  2. 无论从事PHP、.net、javaEE都离不开它。
 
 学习JavaScript可以帮我们解决哪些问题：
 1. 前台表单的输入校验。
 2. DOM操作(Document Object Model): 增强用户的交互.
 3. Ajax(Async Javascript And Xml): 改善用户的体验。

 学习JavaScript哪些部分：
 1. 核心部分：基本语法、函数的定义、函数的调用、函数的作用、类、对象、JSON、继承、内置函数.
 2. DOM操作(Document Object Model).
 3. BOM操作(Browser Object Model). window,document,parent,location,self,...
 4. Ajax(Async Javascript And Xml) XMLHttpRequest.

主要知识：

一、JavaScript语句可以写哪些地方：
   1. 可以写在<script type="text/javascript">js语句</script>中间.
   2. 可以写在单独的js文件中。
      在页面引用: <script type="text/javascript" src="test.js"></script>
   3. 可以写在html元素事件监听属性中。
       onclick、onmouseover、onmouseout、onchange、onblur、onfocus,...
      <button onclick="var num = 10; num++; alert(num);">确定</button>
   4. 可以写在a标签的href属性中，但要使用javascript:做为前缀。
      <a href="javascript:alert('dd');"> aaa</a>.
      注意：使用javascript:为前缀写的js语句，是全局的。是属于window.

   
二、函数定义的三种方式：
    
    1. 函数定义的第一种方式：
        function test1(arg1, arg2, ..., argN){
        alert("第一种");
    }
    语法：
    function 函数名(形参列表){
         // 执行体
    }
        
    2. 函数定义的第二种方式：
    var test2 = function(arg1, arg2, ..., argN){
        alert("第二种");
    }
    语法：
    var 函数名 = function(形参列表){
         // 执行体
    }    

    // 匿名函数
    (function(){
        alert("匿名函数");
    })();
    语法：
    (function(形参列表){
    
    })(实参列表);

    
     3. 函数定义的第三种方式：
    var test3 = new Function("a","b","return a + b;");
    语法：
    var 函数名 = new Function(arg1 ,arg2, ..., argN);
    arg1-argN-1: 形参列表
    argN: 函数的执行体。
 
三、 函数调用的三种方式：
     1.  第一种调用函数的方式
     主调.test1(30, 30);
     语法：
       函数的引用(实参列表);
       函数的引用(ar1, arg2,...argN);

     2.  第二种调用函数的方式
     test1.call(window, 50, 60);
     语法：
       函数的引用.call(主调，实参列表);
       函数的引用.call(主调，ar1, arg2,...argN);

     3.  第三种调用函数的方式
     test1.apply(window, [60, 60]);
     语法：
       函数的引用.apply(主调，实参列表);
       函数的引用.apply(主调，[ar1, arg2,...argN]);

     注意：默认主调为window.

     
四、函数的三个作用:
    1. 把函数当作函数用。
       在为html元素绑定事件时用得最多。
       HTML元素事件监听的四种方式：
       a. 第一种方式：
          在html元素事件属性中写js语句.
          <input type="button" value="确定" onclick="1-N条js语句"/>

       b. 第二种方式(这种方式比较常用)：
       var btn = document.getElementById("btn2");
       // 为按钮绑定点击事件
       btn.onclick  = function(){
        alert("第二种方式");
       };

       c. 第三种方式：
       // 第三种方式绑定事件
       var btn3 = document.getElementById("btn3");
       btn3.addEventListener("click", function(){
        alert("第三种方式");
       });

       d. 第四种方式：
      // 第四种方式绑定事件(firefox、chrome不兼容)
      var btn4 = document.getElementById("btn4");
      btn4.attachEvent("onclick", function(){
        alert("第四种方式");
      });
    
    2. 把函数当作类来用.
       当你把函数当作类来用时，它就提供了一个的万能的构造器。
       2.1: 类的静态属性
            var Person = function(){}
        Person.age = 10;
        Person['age1'] = 20;
        语法：
           函数的引用.属性名 = 属性值.
           函数的引用['属性名'] = 属性值.
        调用：
           函数的引用.属性名.
           函数的引用['属性名'].
        说明：这两种方式定义属性与调用是互用的。

       2.2: 类的静态方法
        var Person = function(){}
         Person.say = function(){
        alert(this.age);
         }
         Person['say1'] = function(){
        alert(this.age);
         }
            语法：
           函数的引用.方法名 = 函数的引用.
           函数的引用['方法名'] = 函数的引用.
        调用：
           函数的引用.方法名().
           函数的引用['方法名']().
        说明：这两种方式定义方法与调用是互用的。
            
    2.3: 对象的属性：

        var Person = function(){}
        a. 在创建对象前添加
            // 用prototype添加属性与方法是对象的
        Person.prototype.age = 100;
        Person.prototype['age1'] = 110;
          语法：
             函数的引用.prototype.属性名 = 属性值。
         函数的引用.prototype['属性名'] = 属性值。
          调用：
                 对象.属性名 | 对象['属性名']
              
        b. 在创建对象前之后
        var p = new Person();
        // 为对象动态的添加属性
                p.x = 20;
        p['y'] = 30;
          语法：
             对象.属性名 = 属性值。
         对象['属性名'] = 属性值。
          调用：
                 对象.属性名 | 对象['属性名']

    2.4: 对象的方法：
        var Person = function(){}
        a. 在创建对象前添加
            // 用prototype添加方法是对象的
        Person.prototype.say = function(){};
        Person.prototype['say2'] = function(){};
          语法：
             函数的引用.prototype.方法名 = 函数的引用。
         函数的引用.prototype['方法名'] = 函数的引用。
          调用：
                 对象.方法名() | 对象['方法名']()
              
        b. 在创建对象前之后
        var p = new Person();
        // 为对象动态的添加方法
                p.say = function(){};
        p['say'] = function(){};
          语法：
             对象.方法名 = 函数的引用.
         对象['方法名'] = 函数的引用.
          调用：
                对象.方法名() | 对象['方法名']()
       
        2.5: 类的继承：
         a. 通过对象冒充的方式的实现属性的继承。
         b. 通过prototype实现。
            var Person = function(){};
            Person.prototype.say = function(){
            };

        var Student = function(){
        }

        单个属性或方法继承:
        Student.prototype.say = Person.prototype.say;
        语法：
           子函数的引用.prototype.属性名|方法名 = 父函数的引用.prototype.属性名|方法名
        

        全部继承父函数的属性或方法:
        Student.prototype = Person.prototype;
        语法：
           子函数的引用.prototype = 父函数的引用.prototype;
        
    3. 把函数当作类中方法来用.

五、创建对象的三种方式：
    1. var obj = new new Function();
    2. var obj = new Object();
    3. var obj = {}; // json格式定义JavaScrpt对象。


   JSON: JavaScript Object Notation (js对象标记)
   一、json已经成为跨平台、跨语言进行数据交换的通用格式。
   二、android开发中用到JSON来序列化Java对象。(也是种轻量级的序列化机制)。

   xml|json:
   1. 用xml生成数据或者解析数据都比较繁琐。
   2. 用xml生成数据，冗余的很多。

   json的格式：
     {key : value, key : value}
     key : 只能是字符串. (对象的属性或者是方法)
     value : js能支持数据都可以.
   
   List == > []
   Map  ==> json
   List<User> ==> [{},{}].

   json的访问：
   a.  json.key
   b.  json[key]
   c. for in 迭代。




内置函数：
a. Function: 函数
b. Date : 日期
c. Array: 数组
d. RegExp: 正则表达式