javascript

为什么使用javascript:javascript是所有浏览器唯一支持的通用语言

javascript由ECMAScpipt,dom,bom共同组成;

 

ECMAScript是标准化的,独立于宿主环境的 编程语言规范(ECMA标准)

dom是操作xml(html)的程序模型,它本身是独立于宿主环境,但是要由某种语言来实现如:ECMAScript语言实现(w3c标准)

bom是浏览器宿主环境对象模型,它是对ECMAScript的扩展,但没有被标准化,是特定的浏览器宿主环境提供的与浏览器交互的对象(浏览器开发厂商不统一,不同浏览器中的bom不完全相同)

 

1.ECMAScript

   是ISO的标准语言;

   ECMAScript只描述:语法 类型 语句 关键字 保留字 运算符 对象;

   是独立于宿主环境(浏览器)的一种语言规范;

   是可以宿主到很多环境包括 web浏览器(最早的宿主环境)中是javascript

                                         flash中是actionscript

                                         nombas中是scriptease;

 

   每种宿主环境都实现ECMAScript并且扩展ECMAScript;

   当前浏览器的ECMAScript是 ECMA-262第三版 

 

   1.1 语法

         区分大小写;

         弱类型;

         分号可有可无;

         变量:

              基本类型: string,number,boolean,null,undefined

                            "123",123,true,null,undefined

              引用类型: String,Number,Boolean,Object(相当于java.lang.Object)

                            new String("123"),new Number(123),new Boolean(true),new Object();

 

                typeof "11" = "string"                               typeof new String("11") = "object"

                typeof  123 = "number"                            typeof new Number(123) = "object"

                typeof  true ="boolean"                            typeof new Boolean(true) = "object"

                typeof  undefined="undefined"                 typeof ref_object = "object"

                typeof null= "object"

 

 

            特殊 typeof function(){}= "function"

                    typeof new Function()="function"

                         

         运算符:delete 是删除一个对象的属性,如: delete ("123".length);

                    ==与!=处理原始值(会类型转换)

                    !==与===的处理引用对象(不会类型转换)

 

 

    1.2 对象描述:对象是属性的无序集合,对象的每个属性存放一个基本类型或一个对象或一个函数(函数也是对象)

 

          js中任何变量或函数都是一个对象.

          var a=1;                                         // a是对象    是Number类对象

 

          var b=new Object();                      //  b是对象    是Object类的对象

 

          function c(){                                  //  c是对象   是Function类的对象  c就是函数

                //...

           }

 

           var  d=function(){                         // d是对象   是Function类的对象  d就是函数 

               //...

            }

 

           function ClassE(){                         // ClassE是对象   还是类定义 ClassE就是函数

            //...                          

            }

 

          总结：js中任何东西都是对象 变量:一定是某个类的对象,也一定是某个方法的一个实例(类定义与方法定义相同);

                                                  函数:一定就是Function类的对象;

                                                  类定义:就是函数定义,也就是Function类的对象

                   js的核心是函数

                   js开发要放弃一部分oo语言的思维,要更加开放,不纯粹的oo语言

 

                   function fun(a1,a2,a3,a4){}

                   fun.length  //外部fun.length表示参数的个数

                   arguments //内部arguments表示参数的个数

   1.3 对象分类:

                      本地对象:独立于宿主环境的ECMAScript对象,需要用户来实例化

                                   Object,Function,Array,String,Boolean,Number,Date,RegExp,Error,

                                   EvalError,RangError,ReferenceError,SytaxError,TypeError,URIError)

                      内置对象:独立于宿主环境的ECMAScript对象,不需要用户来实例化,ECMAScript执行时环境生成就有

                                   Global(js中就是window?),Math

                      宿主对象:bom对象,dom对象 

 

                      所有内置函数,类型,类在js中都是window的属性或方法

 

   1.4 js中在全局范围中定义的任何var都是给window对象在添加属性,即:

          var a=1<==>window.a=1;

 

          js中在全局范围中定义的任何函数都是给window对象在添加方法,即: 

          function A(){} <==>window.A=function(){}

 

          这样以来可以这样认为 在全局范围中执行的代码都可以认为是window对象的方法调用。

                                         在全局范围中this===window。

          js中:this总是指向调用当前this所在函数的对象；

          java c++ c# 中:this 是方法的当前对象

          对象方法的内部引用对象的属性一定要用this,否则会当作全局变量

 

   1.5 面向对象编程

 

         创建类

         function Base(){

         this.a=xxx;

         this.b=xxx;

         this.c=xxx;

         ...

         }

         Base.prototype.m1=function(){}

         Base.prototype.m2=function(){}

         ...

 

 

         创建子类(本地类和宿主类不能作为继承的基类)

         function Sub(){

         Base.call(this);           //call apply 都是用一个对象镜调用一个函数,就好像这个函数是这个对象的方法一样

 

         this.d=xxx;

         this.e=xxx;

         this.f=xxx;

         ...

        }

        Sub.prototype=new Base();                //prototype是Function对象的一个属性,继承时,prototype指向的所                                                                        有属性和方法都会传递给子类的所有对象

        Sub.prototype.constructor=Sub;

        Sub.prototype.m3=function(){}

        Sub.prototype.m4=function(){}

        ...

 

        继承框架:

 

        Function.prototype.extends=function(parent){

        this.prototype=new parent();

        this.prototype.constructor=this;

        }

 

       使用:

       function Sub(){

         Base.call(this);

         this.d=xxx;

         this.e=xxx;

         this.f=xxx;

         ...

        }

       Sub.extends(Base);

       Sub.prototype.m3=function(){}

       Sub.prototype.m4=function(){}

 

 

 

    String.ptototype=="";String.prototype.constructor==String;

    Number.prototype==0;Number.prototype.constructor==Number;

    Boolean.prototype==false;Boolean.prototype.constructor==Boolean;

    Date.prototype==1970.....;Date.prototype.constructor==Date;

 

    内置类型的原型就是该类型的一个默认值对象，构造函数还是该类函数

 

 

    function ClassA(){}

   

    ClassA.prototype== new Object();

    ClassA.prototype.constructor==ClassA

 

    自定义类型的原型就是一个简单的对象，但构造函数还是这个类函数

   

 

 

 

2 bom:浏览器宿主环境中的浏览器对象的模型

   bom的核心是window对象,所有其他的bom对象都直接或间接是window对象的属性

   document:anchors forms images links location

   frames

   history

   location

   navigator

   screen

 

   document既是bom又是dom

3 dom:宿主环境中xml对象模型，将xml(html描绘成节点组成的文档结构)

 

           包括 dom core和dom html

           dom core:访问和操作基本的xml结构(与其他语言环境的api基本一致)

           dom html:对xml文档中的html操作(样式,事件,访问 有html对象自己的方法和属性)

           html是特殊的xml 

 

           <html>

           <><></><></></>

           <></>

           </html> 

           html是document的根元素是document元素

           document既是bom又是dom

          js事件:dom的一部分是 (dom html)的重要部分

          鼠标事件:html目标对象(bom,dom)被点击类

                       click dbclick mousedown mouseout mouseover mouseup mousemove

                       所有html元素都支持鼠标事件

          键盘事件:html目标对象(bom,dom)被键盘输入类

                       keydown keypress keyup

          html事件:html目标对象(bom,dom)上产生事件类

                        window frame iframe img object 有load unload abort error事件

                        input textarea                             有select事件

                        input textarea select                   有change事件

                        form                                            有submit reset 事件

                        任何html元素                                 有focus blur

 

           <script></script>:也是dom的一部分,所以在页面加载时是顺序加载的

                                        <html>

                                        <head>

                                        <script src="xxx.js">

                                        </script>

                                        </head>

                                        <body>

                                        <script>

                                         alert("123");

                                        </script>

                                        <h1>test</h1>

                                        </body>

                                        </html>

                                        在输出test之前会先弹出"123"