《JavaScript核心技术》

 

Chapter 11. Creating Custom JavaScript Objects

 

JavaScript中所见的四种不同域的对象:

    JavaScript内置的对象.

    浏览器对象模型中的对象.

    文档对象模型中的对象.

    开发人员自己的自己定义的对象.

 

JavaScript中的原型(prototyping)   prototype属性

    1.对内置对象的扩展

          (String添加trim()方法)

        ****************

        String.prototype.trim = function(){

            return(this.replace(/^[/s/xA00+]+/,"").replace(/[/s/xA0]+$/));

        }

        var strTemp = new String(" a ");

        strTemp = strTemp.trim();

        ****************

        (直接在对象实例上添加trim()方法)

        *********************

        var strTemp = " a ";

        strTemp.trim = function(){...}

        *********************

        只是该种添加之后只有这个实力能够访问新增函数.

 

JavaScript中的共有和私有属性 this

    1.this的作用:

         this用来给对象的属性赋值.它作为对上级对象的引用,指向我们创建的新对象的一个实例.(准确地讲,this所做的是:创建一个可以从对象之外访问的共有属性.)

         而对象中使用var创建的变量属性则仅能在对象内部访问,不能从对象之外访问,则成为私有成员.

 

JavaScript中的对象封装(函数在外部定义)

 

    封装一个跨浏览器调节透明度的div对象

 

    var theobjs = new Array(  );

    function alphaOpacity(value) {
       var opacity = value * 100;
       this.style.filter = "alpha(opacity:"+opacity+")";
    }

    function cssOpacity(value) {
       this.obj.style.opacity = value;
    }

    function getOpacity(  ) {
       if (this.obj.style.filter) {
           return this.obj.style.filter.alpha;
       } else {
           return this.obj.style.opacity;
       }
    }

 

   function DivObj(obj) {
       this.obj = obj;
       this.objGetOpacity = getOpacity;
       this.objSetOpacity = obj.style.filter ? alphaOpacity : cssOpacity ;
    }

    function changeOpacity(  ) {

       // div1
       var currentOpacity = parseFloat(theobjs["div1"].objGetOpacity(  ));
       currentOpacity-=0.1;
       theobjs["div1"].objSetOpacity(currentOpacity);

       // div2
       currentOpacity = parseFloat(theobjs["div2"].objGetOpacity(  ));
       currentOpacity+=0.1;
       theobjs["div2"].objSetOpacity(currentOpacity);
    }

   

    function setup(  ) {
      theelements = document.getElementsByTagName("DIV");
      for (i = 0; i < theelements.length; i++) {
          var obj = theelements[i];
          if (obj.id) {
             theobjs[obj.id] = new DivObj(obj);
          }
      }

      // set initial opacity
      theobjs["div1"].objSetOpacity(1.0);
      theobjs["div2"].objSetOpacity(0.0);

      // event handlers
      document.onclick=changeOpacity;
    }

 

链式构造函数和JS继承(apply和call方法)

    apply 方法
    应用某一对象的一个方法，用另一个对象替换当前对象。
    apply([thisObj[,argArray]])

    如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
    如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

    call 方法
    调用一个对象的一个方法，以另一个对象替换当前对象。
    call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

    thisObj 可选项。将被用作当前对象的对象。
    arg1, arg2,  , argN  可选项。将被传递方法参数序列。
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将被调用函数的上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

 

    函数的apply和call方法使你能在另一个对象的上下文环境中对一个方法进行应用和调用,实现函数功能的继承.

    如果apply和call方法使用在对象构造函数上,它会链起(chain 将两个函数功能有一定顺序拼接在一起)构造函数:从而实现一个类型对另一个类型的所有属性和方法的继承.

    obj.call(this,arg1,arg2,..., argn);

    obj.apply(this,arguments);

 

    apply与call的唯一区别是他们所传递的参数,它们的行为是相同的.

 

一次性对象

    创建一次性对象的一种方式:为属性和方法创建一个关联数组,然后将它们赋给一个变量.

    var oneoff={

         variablea : "valuea",

         variableb : "valueb".
         method : function (  ) {
             return this["variablea"] + " " + this["variableb"];
    }

    首先构造一个Object新对象,然后把属性和方法增加到对象实例上.

    var oneOff = new Object(  );
        oneOff.variablea = "valuea";
        oneOff.variableb = "valueb";
        oneOff.method = function (  ) {
                             return this.variablea + " " + this.variableb;
                             };
    使用构造函数来直接初始化赋值给一个变量.

    var oneOff = new function(  ) {
              this.variablea = "variablea";
              this.variableb = "variableb";
              this.method = function (  ) {
                                  return this.variablea + " " + this.variableb;
                              }
              }

 

高级错误处理技术(try,throw和catch)

    6个错误类型:

    EvalError

        当使用不正确(所执行的代码不正确)时,由eval抛出这个错误.

    RangeError

        数字值超出范围

    ReferenceError

        使用了无效的引用

        当检测到无效的引用时，发生本错误。例如，如果所想要使用的引用为 null 时就会发生本错误。

    SyntaxError

        使用了无效的语法

        当对错误语法的源文本进行解析时，发生本错误。例如，调用 eval 函数时其参数不是有效的程序文本，就会发生本错误。

    TypeError

        当变量不是所预期的类型时抛出

 

    URIError

        当不挣取得使用encodeURI()或decodeURI()时抛出

        当检测到非法的统一资源标识符 (URI) 时发生本错误。例如，在被编码或解码的字符串中发现非法字符，就会发生本错误。

    ConversionError

        当试图将一个对象转换为其不能转换的某种类型时，产生本错误。

    RegExpError

         当正则表达式产生编译错误时，发生本错误。然而，只要该正则表达式经过了编译，就不会产生本错误。例如，如果使用无效语法，或标志不为 i、g、m，或者同一标志出现多次的样式声明正则表达式时，就会发生本错误。

    RangeError

        当函数的某个给出的参数不在允许范围时，发生本错误。例如，当试图建立的 Array 对象的长度不是有效的正整数时就会发生本错误。

 

    使用instanceOf(指明对象是否是特定类的一个实例)f可以知道错误是否为某种内置类型.

 

JavaScript中随机数生成方法

    Math.random();生成0(包括)-1(不包括)之间的一个随机数.

 

 

 

Chapter 1. Introduction and First Looks

 

Script标记的有效属性:type,src,defer和charset

    charset

        属性定义了脚本使用的字符编码方式,除非需要使用的编码方式与文档所定义的字符编码方式不同,否则该属性通常不需要设置.

    defer

        一个非常有用的属性.它标识了该段script与页面的关系:是否需要立即执行,是否会动态地生成文档.当吧defer属性值设置为true时,它告诉浏览器:脚本不会生成任何文档内容,浏览器可以继续处理页面的其他部分,当页面处理和显示完成之后再返回到脚本.

        defer与src属性联合使用(即引用外部js文件)，可以使这些脚本在后台被下载，前台的内容则正常显示给用户。

     [以下引用自http://www.cnblogs.com/stupidliao/articles/797698.html]

 

     使用defer属性应注意的问题
    1、不要在defer型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果(动态生成了文档)。 
    2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

     加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！

    <button id="myButton" onclick="alert('ok')">test</button>
    <script>
    myButton.click();
    </script>

   
   
    <script defer>
    myButton.click();
    </script>
    <button id="myButton" onclick="alert('ok')">test</button>

    // 该段click将在加载完成之后执行,能够正确执行
   
    <script>
    myButton.click();
    </script>
    <button id="myButton" onclick="alert('ok')">test</button>

    // 该段执行时将出错,因为myButton处于未定义状态.

 

JavaScript代码的位置

    最佳方式:将JavaScript程序代码块放入到外部JavaScript文件中.

    JS块放置位置规则:

        1.当JavaScript要再页面加载过程中动态建立一些Web页面的内容时,应将JavaScript放在body中.

        2.定义为函数并用于页面时间的JavaScript应放在head标记中,因为它会在body之前加载.

        *仅当页面载入器件脚本会建立一些Web页面内容时,才将脚本嵌入body中;否则,将其放在head中.

 

关键字var和作用域

    使用var声明的变量,每个变量的作用域都是局部的,这意味着它们将只能在它们所定义的函数内部访问.

    如果不使用var的话,变量的作用域就是全局的,也就是变量可以被Web页面中任何地方的JavaScript代码(或者在本页面所包含的任何外部JS库中)访问.

 

    rules regarding scope:

        If a variable is declared with the var keyword in a function, its use is local to that function.
        If a variable is declared without the var keyword in a function, and a global variable of the same name exists, it's assumed to be that global variable.
        If a variable is declared locally with a var keyword but not initialized (i.e., assigned a value), it is accessible but not defined.
        If a variable is declared locally without the var keyword, or explicitly declared globally, but not initialized, it is accessible globally but not defined.

   

 

Chapter 5. Functions

 

创建函数的方式

    JavaScript中主要有3种创建函数的方式:静态声明方式,动态匿名方式和直接量方式.

    静态声明的函数:

    最常见的的函数创建方式是静态声明方式.这种方式开头有个function关键字,接着是括号,其中包含有0或几个参数,最后是函数体.

 

    function functionname (param1, param2, ..., paramn) {
        function statements
    }
    静态声明的函数只解析一次,就是在加载页面时,而每一次调用这个函数时,所使用的都是其第一次加载后结果.这种方法易于阅读和理解,也没有内存泄露之类的负面影响.

 

    函数返回值及参数:

    对于基于基本数据类型的变量(字符串,布尔量,数值),会以传值的方式传给函数.  ----值传递.

    对于对象类型的变量,则采用传引用的方式传给函数. ----引用传递.

 

    动态匿名创建的函数(使用函数的构造函数)

    函数也是对象.使用构造函数,像创建String对象或其他对象那样,创建一个函数,然后将其赋值给一个变量,即为匿名函数.

 

    var variable = new Function ("param1", "param2", ... , "paramn", "function body");

    var sayHi = new Function("toWhom","alert('Hi ' + toWhom);");
    sayHi("World!");

    对于那些只有在运行时才能确定函数必须满足何种需要的情况,动态函数是定义功能的一种重要方法.

 

    函数直接量

    不使用构造函数,而像使用String那样,让JavaScript隐式地将函数语句进行包装.

    var func = function (x, y) {
    return x * y;
    }
    alert(func(3,3));

 

    // invoking third argument as function
    function funcObject(x,y,z) {
       alert(z(x,y));
    }
   
    // third parameter is function
    funcObject(1,2,function(x,y) { return x * y});

 

    var func = function multiply(x,y)

    {

        return x * y;

    }

    // 这个名字只能在函数内部访问除非要实现一个递归函数时间可以使用.

   

    英文:

    Declarative function
    A function in a statement of its own, beginning with the keyword function. Declarative functions are parsed     once, static, and given a name for access.

    Anonymous function
    A function created using a constructor. It's parsed each time it's accessed and is not given a name     specifically.

    Function literal or function expression
    A function created within another statement as part of an expression. It is parsed once, is static, and may     or may not be given a specific name. If it is named, the name is accessible only from within the functi o n   itself.

 

    回调函数

    回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。

    Array中需要用到回调函数的方法:fliter,forEach,every,map和some, 属 JavaScript 1.6标准,为保证在其他版本通用,使用时间可以加上下面对应的各段代码(摘自http://www.tutorialspoint.com/javascript/index.htm)

        filter(过滤)方法:对数组中的元素进行过滤,将通过规则的值加入到返回的数组中去.(This method creates a new array with all elements that pass the test implemented by the provided function.)

if (!Array.prototype.filter) { Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; // in case fun mutates this if (fun.call(thisp, val, i, this)) res.push(val); } } return res; }; } 

        every(每个都符合)方法:对数组中元素进行某个规则的测试,验证是否都符合该规则;对数组中的每个元素运行一个回调函数,直到返回一个假值.(This method tests whether all elements in the array pass the test implemented by the provided function.)

if (!Array.prototype.every) { Array.prototype.every = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && !fun.call(thisp, this[i], i, this)) return false; } return true; }; }

        some(某些符合)方法:与every相反,它对数组的每个元素运行一个回调函数,直到返回一个真值.(This method tests whether some element in the array passes the test implemented by the provided function.)

if (!Array.prototype.some) { Array.prototype.some = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && fun.call(thisp, this[i], i, this)) return true; } return false; }; }

        map(数据映射处理)方法:对数组的所有元素运行一个回调函数,对元素进行某种处理,将结果放入到返回数组中去.(This method creates a new array with the results of calling a provided function on every element in this array.)

if (!Array.prototype.map) { Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(len); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) res[i] = fun.call(thisp, this[i], i, this); } return res; }; }

        forEach(每个都执行操作)方法::对数组的所有元素运行一个回调函数.(This method calls a function for each element in the array.)

if (!Array.prototype.forEach) { Array.prototype.forEach = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); } }; }

        回调函数都有三个参数:元素,索引和数组

        filter使用例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html>w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Array filter and callback functions</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <mce:script type="text/javascript"><!-- if (!Array.prototype.filter) { Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; // in case fun mutates this if (fun.call(thisp, val, i, this)) res.push(val); } } return res; }; } // check color range callback function function checkColor(element,index,array) { return (element >= 0 && element < 256); } // check to ensure you have three RGB colors function checkCount(element,index,array) { return (element.length == 3); } // color array var colors = new Array( ); colors[0] = [0,262,255]; colors[1] = [255,255,255]; colors[2] = [255,0,0]; colors[3] = [0,255,0]; colors[4] = [0,0,255]; colors[5] = [-5,999,255]; // filter on color range var testedColors = new Array( ); for (var i in colors) { testedColors[i] = colors[i].filter(checkColor); } // filter on three values var newTested = testedColors.filter(checkCount); for (i in newTested) { document.writeln(newTested[i] + "<br />"); }// --></mce:script> </body> </html>

 

函数闭包(此处是网上摘抄,没有引用书上内容是因为原书上貌似没有下面的更加清晰)

 

        一、什么是闭包？

    “官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

    相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：

    function a(){
      var i=0;
      function b(){
        alert(++i);
      }
      return b;
    }
    var c = a();
    c();

    c();

    这段代码有两个特点：

    1、函数b嵌套在函数a内部；

    2、函数a返回函数b。

    这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1,第二次为2)。这段代码其实就创建了一个闭包，为什么？因为函数 a外的变量c引用了函数a内的函数b，就是说：

    当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

    我猜想你一定还是不理解闭包，因为你不知道闭包有什么作用，下面让我们继续探索。

    二、闭包有什么作用？

    简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。

在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

    那 么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引 用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

    三、闭包内的微观世界

    如 果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

    1、当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。

    2、当函数a执行的时候，a会进入相应的执行环境(excution context)。

    3、在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。

    4、然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a 的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。

    5、下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。

    6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

    到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

    当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：

    如图所示，当在函数b中访问一个变量的时候，搜索顺序是先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依 次查找，直到找到为止。如果整个作用域链上都无法找到，则返回undefined。如果函数b存在prototype原型对象，则在查找完自身的活动对象 后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

    四、闭包的应用场景

    1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

    2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

    以上两点是闭包最基本的应用场景，很多经典案例都源于此。

    五、Javascript的垃圾回收机制

    在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

 

 

Chapter 6 . Catching Events

 

事件

    W3C将事件分为3个不同类别:用户接口(键盘,鼠标),逻辑(处理的结果),和变化(对文档进行修改的行动).

   将事件作为HTML元素的一个属性来增加,称为内联事件,然而应该限制内联事件的使用.原因为:如果给HTML元素增加了事件,倘若要修改函数名,则需要打开每个页面文件进行修改;使用传统的事件注册方法更好一些。

   当不想然事件继续完成其默认的处理时,可以在事件处理函数中返回false.通过此来告诉浏览器在此时终止该事件的后续处理.

Event对象

   IE中把Event做为Windows对象的一个属性出现,不过它只可以在事件句柄中使用该对象.即在处理事件的函数执行时,系统会自动的填写当前对应事件的信息.

   而基于Netscape的浏览器,Event是作为函数的一个参数传入的.

   处理方案

   使用带有参数的事件处理,不过要测试函数中所传入的参数是否已实例化.如果已实例化,就把它赋值给一个局部变量,否则就把window.event赋值给该局部变量.

事件浮升与事件捕捉

    IE遵循事件浮升(event bubbling),即,事件首先会落到最底层元素的事件句柄上,然后由此向上传递

    Netscape则是支持W3C的两种共存机制,因而支持事件浮升同时也可以支持事件捕捉(event capturing),即,事件将首先落到的元素是最上层元素.

    取消事件向上或者向下传递的方法:IE中使用事件的cancelBubble属性(event.cancelBubble = true);Netscap/Mozilla模型中使用事件的stopPropagation方法(evnt.stopPropagation();).

 

    Two models
Not surprisingly, back in the bad old days Netscape and Microsoft came to different conclusions.

    * Netscape said that the event on element1 takes place first. This is called event capturing.
    * Microsoft maintained that the event on element2 takes precedence. This is called event bubbling.

The two event orders are radically opposed. Explorer only supports event bubbling. Mozilla, Opera 7 and Konqueror support both. Older Opera's and iCab support neither.
Event capturing

When you use event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  / /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

the event handler of element1 fires first, the event handler of element2 fires last.
Event bubbling

When you use event bubbling

                   / /
--------------- | |-----------------
| element1   | |                  |
|   -----------  | |-----------     |
|   |element2| |          |      |
|   -------------------------     |
|        Event BUBBLING      |
-----------------------------------

the event handler of element2 fires first, the event handler of element1 fires last.
W3C model

W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

                     | |  / /
-----------------| |--| |-----------------
| element1    | |  | |                    |
|   -------------| |--| |-----------      |
|   |element2 / /  | |              |    |
|   --------------------------------     |
|        W3C event model            |
------------------------------------------

You, the web developer, can choose whether to register an event handler in the capturing or in the bubbling phase. This is done through the addEventListener(). If its last argument is true the event handler is set for the capturing phase, if it is false the event handler is set for the bubbling phase.

 

   火狐与IE其他的不兼容很多,网上也多都有很好的解决方案了,:-)

 

2级DOM
    2级DOM最大变化是:由于早期版本以来于句柄属性,而只能在一个属性上执行唯一值,所以导致一个事件只能注册一个事件处理函数.2级DOM不依赖于事件句柄属性(onLoad,onClick等),而这意味着可以在任何一个事件注册多个事件处理函数.
    addEventListener,removeEventListener各有三个参数:第一个参数是时间名称;第二个参数是处理函数名,第三个参数是用于确定事件是作为一个向下级联(event capturing)的事件还是向上浮升(event bubbling)的事件(如果是假则是向上浮升的,如果是真则是向下级联的).
    object.addEventListener('event',eventFuction,boolean);

Chapter 7. Forms and JiT Validation

动态修改选择列表
    添加Option元素 创建一个新的option元素,将其添加到options数组中
        selectOpts.options[selectOpts.options.length] = new option("option Four", "opt 4");
    删除一个元素 将options数组中相应的选项置为null,该操作也将重拍数组索引,因而索引数字不会有中断
        selectOpts.options[2] = null;
    删除所有选项 将options数组的长度设置为0
        selectOpts.options.length = 0;

Chapter 8. The Sandbox and Beyond: Cookies, Connectivity, and Piracy

JavaScript的同源策略(same-origin)
    同源策略组织从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性,它确保了不能通过脚本在不同域﹑协议和端口的页面之间通信.
    同源策略适用于不同页面之间通信,或者从一个父窗口对一个嵌入窗口(比如frame或iframe)的通信.
    同源策略不适用的情况:从其他域链入的脚本.即,页面可以从任何地方链入脚本,这种脚本会被当做域当前页面本身的脚本一样(运行在页面的域,而不是脚本的域,包括可以在页面的同域范围内进行通信)
    JavaScript的同源策略URL     结果     原因http://store.company.com/dir2/other.html成功     
 http://store.company.com/dir/inner/another.html 成功     
 https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html 失败     端口不同http://news.company.com/dir/other.html失败     主机名不同
    可以设置document.domain的值为当前域的一个后缀，比如域store.company.com的后缀可以是company.com。如果这样做的话，短的域将作为后续同源检测的依据。这样可以增加当前页面的可访问者,即由store.company.com下的所有页面扩展到了company.com下面的所有页面.

   

    同源策略同样适用于cookie

cookie
    cookie是一些键值对,同时关联过期日期和域名/路径.它所包含的信息在也卖弄访问时将作为Web页面请求的一部分发送,因而服务器和浏览器都可以使用.
    cookie创建格式:document.cookie = "cookieKeyName=cookieKeyValue;expirationdate;path";
    为保证cookie有效准确,应尽量使用那些能转换为字符串的基本数据类型.
    path的说明:与document.domain作用类似,限制其访问者的范围.如果设置为path=/,就等于把cookie所允许访问的路径设为该域顶级目录.
    设置cookie
    function setCookie(key,value) {
       var cookieDate = new Date(2010,11,10,19,30,30);
       document.cookie=key + "=" + escape(value) + "; expires=" + cookieDate.toGMTString(  ) + "; path=/";
    }
    读取cookie
    function readCookie(key) {
      var cookie = document.cookie;
   
      var first = cookie.indexOf(key+"=");
   
      // cookie exists
      if (first >= 0) {
        var str = cookie.substring(first,cookie.length);
        var last = str.indexOf(";");
   
        // if last cookie
        if (last < 0) last = str.length;
   
        // get cookie value
        str = str.substring(0,last).split("=");
        return unescape(str[1]);
      } else {
        return null;
      }
    }
    清除cookie(清除他的值,或者把日期设为一个过去的日期)
    function eraseCookie (key) {
   
       var cookieDate = new Date(2000,11,10,19,30,30);
       document.cookie=key + "=; expires=" + cookieDate.toGMTString(  ) + "; path=/";
    }
 

Chapter 9. The Basic Browser Objects

窗口之间的通信,对窗口及其内容的操作
    如果要操作当前窗口可以在代码中使用self来引用自身
        self.moveTo(0,0);
    如果要从代码中引用一个自己打开的窗口,就要捕捉调用window.open时返回的该窗口引用
        var newWindow = window.open("http://somecompany.com","NewWindow", "...options...");
        newWindow.moveTo(0,0);
    如果要错做当前窗口的父窗口(打开当前窗口的窗口),则要使用opener来引用.
        opener.moveTo(0,0);
   
    可以使用一个打开的窗口的引用来引用它所打开的任何东西.每个窗口都可以调用其他窗口的方法(包括自定义方法),包括访问:window document frames location 等对象.
    除了大多数浏览器不允许被打开的窗口关闭原来的床哭哦之外,对于窗口之间的通信几乎没有限制.
Chapter 10. DOM: The Document Object Model

访问HTML对象的方式
    1.getElementById
    2.使用集合来访问document.forms[0]
    3.使用getElementsByName

节点(Node)的属性和方法

    nodeName
    The object name, such as HEAD for the HEAD element
    nodeValue
    If not an element, the value of the object
    nodeType
    Numeric type of node
    parentNode
    Node that is the parent to the current node
    childNodes
    NodeList of children nodes, if any
    firstChild
    First node in NodeList children
    lastChild
    Last node in NodeList children
    previousSibling
    If a node is a child in NodeList, it's the previous node in the list
    nextSibling
    If a node is a child in NodeList, it's the next node in the list
    attributes
    A NamedNodeMap, which is a list of key-value pairs of attributes of the element (not applicable to other objects)
    ownerDocument
    The owning document object
    namespaceURI
    The namespace URI, if any, for the node
    prefix
    The namespace prefix, if any, for the node
    localName
    The local name for the node if namespace URI is present
文本节点
包含文本的元素,他们实际上是包含了一个指向文本节点的引用,而文本包含在文本节点中,即一段文本本身就是一个text节点,虽然没有标记.

对Dom文档的处理注意点(所有xml文档都如此)
文档的处理函数必须基于脚本页面的onload事件,即必须在文档加载完毕情况之下,否则将出现未知结构

 

工厂方法,一些方法用来创建并返回他们所包装的对象,这种方法就是工厂方法.

Dom中大多数创建新元素实例的工厂方法都是核心document对象的方法.