现在的位置: 首页 > 综合 > 正文

javaScript读书笔记(二)

2013年08月11日 ⁄ 综合 ⁄ 共 9177字 ⁄ 字号 评论关闭

javaScript第三章:对象基础

1.javascript中病没有类的定义,只是将对象实例化时看做类的实例。
2.面向对象的语言要有四种能力:
   封装-吧相关信息存储在对象中的能力。
   聚集-把一个对象封装在另一个对象中的能力。
   继承-由另一个类得到累的属性和方法的能力。
   多态-编写能以多种方法运行的函数和方法的能力。
3.声明和实例化:
  var oObject = new Object();
4.在ECMAScript中,不能访问对象的物理表示,只能访问对象的引用,
  每次创建对象时,存储在变量中的都是该对象的引用,而不是对象本身。
5.ECMAScript中有一种”无用存储单元收集程序“,可以自动销毁对象释放内存。
  如果将对象的引用设置成null,可以强制的废除对象。
  var oObject = new Object();
  oObject = null; //废除对象
6.对象的类型:有三种:本地对象;内置对象;宿主对象。
 
  本地对象:Object,Function ,Boolean,String,Array,Number.......
   Array:  var arr = new Array('red','green');和java中一样。
           alert(arr.length);
           toString().ValueOf()返回数组的字符串形式,
           还有join()方法,连接字符串的作用。
   Date:基于java.util.date类。
         var d = new Date();  
         还有两个方法:parse()接收字符串为参数,将时间转换成毫秒数。
                      UTC()返回的也是时间毫秒数。
         var d = new Date(Date.parse("May 25,2008"));
         var d = new Date(Date.UTC(2009,6,8));
         或者:var d = new Date(2009,3,4);
         其他的方法:getTime();getDate().......
    内置对象:Global,Math.
       Global:
             其实它根本不存在。
             isFinite(),parseInt()都是Global对象的方法。
             encodeURI(),encodeURIComponent()用于编码传递给浏览器的URL.
             var url = "http://www.baidu.com";
             alert(encodeURL(url));
             还有一个函数eval(); eval(alert("hello"));等价于alert(“hello”);
        Math:
             min(),max(),abs(),ceil(),floor(),round(),sqrt(),sin(),cos(),......random(),
     宿主对象:
           所有的DOM,BOM对象都是宿主对象。
7。作用域:ECMAScript中只有一种作用域:公用作用域,所有的属性和方法都是公用的。
8。定义类和对象的方式:
   (1)工厂方式
     //工厂函数
     function createCar(isColor,iDoor){
        var car = new Object;
    car.color = isColor;
        car.doors = iDoor;
        car.showcolor = function(){alert(this.color)}
    return  car;
     }
    var car1 = createCar("red",4);
    var car2 = createCar("yellow",3);
    利用一个工厂函数进行创建对象。
    (2)构造函数方式
       function Car(isColor,iDoor){
        var car = new Object;
    car.color = isColor;
        car.doors = iDoor;
        car.showcolor = function(){alert(this.color)}
    return  car;
     }
    var car1 = new Car("red",4);
    var car2 = new Car("yellow",3);
    (3)原型方式
     利用了对象的prototype属性。
     function Car(){}
     Car.prototype.color = "red";
     Car.prototype.doors = "4";
     Car.prototype.showColor = function(){alert(this.color)};
     Car.prototyp.drivers = new Array("sue","json");
     var car1 = new Car();
     var car2 = new Car();
     原型方式不能根据传递参数构造对象,不尽人意,有木有更好的方式呢,有!!
    (4)混合的构造函数/原型方式===============================================这种方式使用最广泛
       即用构造函数定义对象的非函数的属性,用原型构造对象的函数属性。
       function Car(isColor,iDoor){
        var car = new Object;
    car.color = isColor;
        car.doors = iDoor;
        this.drivers = new Array("sue","json");
    return  car;
     }
    car.prototype.showcolor = function(){alert(this.color)};
    
    var car1 = new Car("red",4);
    var car2 = new Car("yellow",3);
    car2.drivers.push("Mike");
   
    alert(car1.drivers); //sue,json
    alert(car2.drivers); //sue,json,Mike
有些开发者还是觉得不满意,所以使用:
    动态原型方法,混合工厂方式。

9.在ECMAScript中,每个本地对象都有一个prototype属性
  可以通过它对已有类定义新的方法。
  Number.prototype.toHexstring(){return this.toString(16)};
  var num = 15;
  alert(num.toHexString()); //输出为 ”F“(15的16进制表示)

  也可以重定义已有的方法。

************************第四章:继承****************************

1.继承机制实例
   几何形状:用UML图表示继承关系:基类:shape,子类:Ellipse,子类circle
2.继承的方式
  (1)call()方法
   function sayColor(Sprefix,sSuffix){
       alert(sprefix+this.color+sSufix);
   }

   var obj = new Object();
   obj.color = "red";
   
   sayCorlor.call(obj,"this color is",",a very nice color indeed")
   它的第一个参数是this,其他的参数要传给函数本身。
   最后的结果是”this color is red,a very nice color indeed.

   (2)apply()方法
    它有两个参数,第一个参数是this,第二个参数是由字符串构成的数组。
     function sayColor(Sprefix,sSuffix){
       alert(sprefix+this.color+sSufix);
   }

   var obj = new Object();
   obj.color = "red";
   
   sayCorlor.call(obj,new Array("this color is",",a very nice color indeed"))
  (3)原型链
    function classA(){
    }
    classA.prototype.color = "red";
    classA.prototype.saycolor = function(){
          alert(this.color);
     }
    
     function classB(){}
     classB.prototype = new classA();
     把classB的prototype设置成classA的实例。classA的所有属性和方法必须在prototype中被赋值,因为之前的所有方法必须删除。
     classB.prototype.color = "yellow";
    
    这种方式不支持多继承。
   
   (4)混合方式
    对象冒充和原型链。
       function classA(color){
          this.color = color;
      }
    classA.prototype.sayColor = function(){

       alert(this.color);
    }

    function classB(color,name){
       classA.call(this,color);
       this.name = name;
    }

    classB.prototype = new classA();
    classB.prototype.sayName = function(){
        alert(this.name);
    }

    var objA = new classA("red");
    var objB = new classB("blue","Niches");

    objA.sayColor();//red
    objB.sayColor();//blue
    objB.sayName();//Niches

 一个更实际的例子:
        function Polygon(sides){
           this.sides = sides;
        }
        Polygon.prototype.getArea = function(){
             return 0;
        }

        function Triangle (base,height){
            Polygon.call(this,3);
           this.base = base;
           this.height = height;

        }

        Triangle.prototype = new Polygon();
        Triangle.prototype.getArea = function(){
            return 0.5*this.base*this.height;

        }

        var triangle = new Triangle(12,4);
        alert(triangle.sides);
        alert(triangle.getArea());
到此为止讲完了ECMAScript的基础知识。  
 
*************************** 第五章:web浏览器中的javaScript*****************************

1.HTML中的JavaScript
  <script/>标签
       包含在<head>标签中。其中language="JavaScript" src是可选的。
       javaScript代码是写成内嵌代码,还是外部文件???
       写成外部文件的原因如下;
       1.安全性-查看源代码就能看到js代码。用户就知道你做了什么操作。
       2.代码维护-js代码分布在很多html页面中不好管理,应该放在一个文件夹下易于维护。
       3.缓存-浏览器根据特定的设置缓存加载所需要的js文件。
  <noscript/>标签
       开发者定义了一种方法,当浏览器不支持javascript 代码时显示什么内容,就用这个标签。
       支持javascrpt的浏览器就忽略这些代码,不支持的就显示这些代码。
       <noscript>
        your brower doesn't support Javascript。
      </noscript>
2.XHTML中的改变
     <script/>中的language不再使用,改为了type="text/javascript"
3.SVG中的javaScript
     SVG是基于XML语言,在web上绘制矢量图形。(了解)
 
4.BOM

          浏览器对象模型。
          window对象是整个BOM的核心,
window对象:
             表示整个浏览器窗口。还可以移动调整浏览器的大小等。
                     </head>
              <frameset rows="100,*">
                  <frame src="javaScript/frame.html" name="topFrame"/>
                  <frameset cols="50%,50%">
            <frame src="javaScript/anotherFrame.html" name="leftFrame"/>         
            <frame src="javaScript/twoFrame.html" name="rightFrame"/>         
              </frameset>
          </frameset>
   window.frames["topFrame"]:答案为:frame.html
   top.frames[0];             答案为:frame.html
   top对象指向的是最顶层的框架,即浏览器本身。
   window.name;答案:“”  window的name属性,存储的是框架的名字,一定是空白或者top
   如果页面上没有框架的话, 那么window,self,top就是指浏览器自身。
   
  (1)窗口操作
     moveBy(dx,dy);像素移动
     moveTo(x,y);坐标移动
     resizeBy(dw,dh);调整像素
     resizeTo(w,h);高宽调整
  (2)导航和打开新窗口
     window.open();四个参数,第一个:url.第二个:新窗口的名字,第三个:特性字符串,第四个:是否用新载入的页面替换当前页面的boolean值。
     一般用前三个参数、
     window.open("http://www.baidu.com.cn",“topFrame”);
     专用的框架名:_self,_parent,_top,_blank;
  (3)系统对话框
     弹出窗口:alert(),confirm(),prompt();
     window.alert("hello");等价于alert("hello");
     window.prompt("what's your name","");
     confirm("Are you sure");
  (4)状态栏
      status,defaultstaus 属性
      status可以使状态栏上的文本暂时改变。
      defaultstaus当用户要离开本页面时才改变。
  (5)时间间隔和暂停
      window对象的setTimeout()方法设置暂停。
      function sayHi(){
            alert("hello world");
       }
         setTimeout(sayHi,5000);
      结果:隔五秒中之后,弹出一个窗口显示“Hello world”
      window对象使用setInterval()方法设置时间间隔。
     function sayHi(){
            alert("hello world");
       }
         setInterval(sayHi,5000);
    结果:每间隔5秒,弹出一个窗口。
   (6)历史
     历史就是用户访问过的站点。history属性。
     后退一页:window.history.go(-1);等价于history.go(-1)等价于history.back();
     前进一页:history.forword();等价于history.go(1)

     
document对象:
     
     它是window对象的属性。
     它是唯一一个既属于BOM又属于DOM的对象。
   
    document对象是一系列集合构成的,可以访问到文档的各个部分。
    有两个方法:write().writeln();接收写入文档的字符串。

location对象:
 
     location对象表示的是:载入窗口的URL.
     最常用的是location.href=""
     location.reload(false);从缓存载入
     location.reload(true);从服务器载入

navigator对象,Screen对象(了解)

**********第六章   DOM基础**************************

1.当谈论DOM树的时候,实际上讨论的是节点(node)的层次。

2.DOM定义了node的接口以及许多种节点类型来表示XML节点的多个方面。
   Document--最顶层的节点。
   DocumentType--DTD引用的对象表现形式。<!DOCTYPE HTML PBLIC "W3C//DTD/...>
   Element--表示起始标签和结束标签之间的内容,例如<tag></tag>
   Attr--代表一对特性名和特性值。
   Comment--代表XML注释。
   Text--普通文本
   。。。。。
   

  Node接口也定义了一些特性和方法:
  nodeName、nodeValue.nodeType.....

3.使用DOM
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>DOM.html</title>
      </head>
 
      <body>

       <p>hello world</p>
       <p>isn't this exceting??</p>
       <p>You're learning the Dom</p>
      </body>
    </html>

        var h= document.documentElement;
    alert(h);
        结果是:[object HTMLHtmlElement] 是<html>
        
    var a = h.firstChild;
        alert(a);
        结果是:[object HTMLHeadElement] 是<head>

    var b = h.lastChild;
    alert(b);
        结果是:[object HTMLBodyElement] 是<body>
4.访问指定的节点
    getElementByTagName():用来返回包含所有的tagname特性等于某个特定值的元素的NodeList.
                  例如: var h = document.getElementByTagName("img");
                  alert(h[0].tagname); //IMG
    
    getElementByName(): 通过name=“”来获取元素。
    getElementById():通过id来获取元素。

5.创建和操作节点。
    创建新节点,常用的方法:
    createElement();createTextNode();appendChild();

    要想使用DOM添加下列代码:<p>Hello word</p>
    这样写:var op = document.createElement("p");
           var oText = document.createTextNode("Hello world");
           op.appendChild(oText);
           document.body.appendChild(op);
 
     删除节点,
     常用的方法:removeChild();replaceChild();insertChild();

     var op = document.body.getElementByTagName("p");
     document.body.removeChild(op);
     
     替换节点:用replaceChild(newNode,oldNode)方法、
     添加节点:用appendChild(node);方法

6.遍历DOM
     NodeIterator
     用它可以对树进行深度优先的搜索。
    TreeWalker
     有点像NodeIterator的大哥,它有NodeIterator所有的功能(nextNode(),previousNode()),
     还增加了一些方法,
        firstChild(),lastChild().......

接下来要讲的是事件

抱歉!评论已关闭.