JavaScript The Definitive Guide 5th Edition ［摘录］

最新推荐文章于 2024-10-02 05:39:15 发布

冯立彬

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量6.5k

点赞数

分类专栏： JavaScript 文章标签： javascript function xmlhttprequest fun button callback

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

原贴地址：http://blog.csdn.net/smartkernel/archive/2007/07/28/1713094.aspx

www.SmartKernel.com

【书名    】：JavaScript The Definitive Guide 5th Edition
【出版社】：O'Reilly
【作者    】：David Flanagan
【评价    】：★★★★★★★☆☆☆
【正文    】：

----------------------------------------------------------------------------------------------------
0001：
    JavaScript使用Unicode字符集。
----------------------------------------------------------------------------------------------------
0002：
    进制的问题：下面代码输出18
    var a = 03;
    var b = 017;
    document.write(a+b);
----------------------------------------------------------------------------------------------------
0003：
    枚举的使用：
    var point = { x:2.3, y:-1.2 };
    document.write(point.x+"|"+point.y);
----------------------------------------------------------------------------------------------------
0004：
    声明数组的方法：
    var myArray = [1,2,3,4,5];
    for(i = 0;i < myArray.length;i++)
    {
       document.write(myArray[i]+"<br>");
    }
----------------------------------------------------------------------------------------------------
0005：
    Date的特别说明：
    var xmas = new Date(2006, 11, 25);
    document.write(xmas.toLocaleString());//输出2006年12月25日 0:00:00，月份是从0开始的
----------------------------------------------------------------------------------------------------
0006：
    传值调用：Numbers，booleans
    传引用调用：Objects，Arrays，functions

    Strings类似于C#中，也是不变类型
    var s1 = "hello";
    var s2 = "hell" + "o";
    if (s1 == s2)
    {
        document.write("Strings按值比较");
    }
----------------------------------------------------------------------------------------------------
0007：
    函数里面能嵌套函数：
    function fun1()
    {
        function fun2()
        {
            document.write("-------------");
        }
        fun2();
    }
    fun1();
----------------------------------------------------------------------------------------------------
0008：
    global对象：在JavaScript代码运行前将先创建global对象，此对象保存着所有全局变量，函数等的引用。可
以使用this引用global对象。
    <script language="JavaScript">
        var i = "10";
        document.write(this.i+"<br>");
        document.write(this.Math.E+"<br>");
    </script>
----------------------------------------------------------------------------------------------------
0009：
    抛出异常：throw new Error("------------");
----------------------------------------------------------------------------------------------------
0010：
    判断属性是否存在：也可以使用hasOwnProperty
    var myArray = new Array();
    if("length" in myArray)
    {
        document.write("存在这个属性");
    }
----------------------------------------------------------------------------------------------------
0011：
    对象的constructor属性：
    var d = new Date();
    if(d.constructor == Date)
    {
        document.write("这个属性是构造函数的引用");
    }

    这个属性可以用来判断一个对象的类型：
    function fun(o)
    {
        if((typeof(o) == "object") && (o.constructor == Date))
        {
            document.write(o.toLocaleString());
        }
        else
        {
            document.write("-----------");
        }
    }
    var d = new Date();
    try
    {
        fun(d);
    }
    catch(err)
    {
        document.write("异常");
    }
----------------------------------------------------------------------------------------------------
0012：
    function对象的callee属性：
    function fun(x)
    {
        if (x <= 1)
        {
            return 1;
        }
        return x * arguments.callee(x-1);
    }
    document.write(fun(5));
----------------------------------------------------------------------------------------------------
0013：
    声明一个类：
    function Rectangle(w, h)
    {
        this.width = w;
        this.height = h;
        this.area = function()
        {
            return this.width * this.height;
        }
    }
    var aRectangle = new Rectangle(20,10);
    document.write(aRectangle.area());
----------------------------------------------------------------------------------------------------
0014：
    prototype中的属性和直接的属性有先后的执行顺序。首先寻找直接属性，如果直接属性不存在，进一步寻找
prototype中的属性。如果直接属性存在，则不再进一步寻找prototype中的属性。利用这个特点就能实现类的继承。
    function Rectangle(w, h)
    {
        this.width = w;
        this.height = h;
        this.area = function()
        {
            return this.width * this.height;
        }
    }
    Rectangle.prototype.area = function()
    {
        return "面积是："+this.width * this.height;
    }
    Rectangle.prototype.say = function()
    {
        return "-------------------";
    }

    function PositionedRectangle(x, y, w, h, n)
    {
        //调用基类的构造函数
        Rectangle.call(this, w, h, n);
        this.x = x;
        this.y = y;
    }
    //获得基类的属性和方法
    PositionedRectangle.prototype = new Rectangle( );
    //删除不需要的，从基类继承的属性（好像删除了还可以访问？）
    delete PositionedRectangle.prototype.Width;
    delete PositionedRectangle.prototype.Height;
    PositionedRectangle.prototype.constructor = PositionedRectangle;
    PositionedRectangle.prototype.Contains = function(x,y)
    {
        return true;
    }

var aPositionedRectangle = new PositionedRectangle(100,100,20,20,"A区域");

    var aNewPerson = new NewPerson("小王");
    document.write(aNewPerson.Name);
----------------------------------------------------------------------------------------------------
0024：
    覆盖基类的方法：
    function Person(name)
    {
        this.Name = name;
    }
    Person.prototype.Say = function()
    {
        document.write(this.Name);
    }

    function NewPerson(name)
    {
        this.superclass(name);
    }
    NewPerson.prototype.superclass = Person;
    NewPerson.prototype.Say = function()
    {
        document.write("我是："+this.Name);
    }

    var aNewPerson = new NewPerson("小王");
    aNewPerson.Say();
----------------------------------------------------------------------------------------------------
0025：
    命名空间的使用：
    var Solosecond = {}

Solosecond.Form = {}

    Solosecond.Form.Fun = function()
    {
        document.write("Fun被调用了");
    }

    Solosecond.Form.Fun();
----------------------------------------------------------------------------------------------------
0026：
    一个多层命名空间下声明类的使用：
    var Solosecond = {Windows:{Form:{Control:{}}}}

    Solosecond.Windows.Form.Control.Label = function(name)
    {
        this.Name = name;
    }
    Solosecond.Windows.Form.Control.Label.prototype.Say = function()
    {
        document.write(this.Name);
    }

    var aLabel = new Solosecond.Windows.Form.Control.Label("aLabel");
    aLabel.Say();
----------------------------------------------------------------------------------------------------
0027：
    正则表达式相关：

正则表达式的对象使用/.../来声明：var pattern = /s$/;或者var pattern = new RegExp("s$");

    /s$/：以s结尾的字符串
    /s/：字符串中包含s
    [abc]：任何包含a、b、c的字符串
    [^abc]：任何不包含a、b、c的字符串
    .：任何字符
    /w：[a-zA-Z0-9_]
    /W：[^a-zA-Z0-9_]
    /s：任何Unicode字符
    /S：任何非Unicode字符
    /d：[0-9]
    /D：[^0-9]
    [/b]：空格
    {n,m}：之前的字符重复n到m次之间
    {n,}：之前的字符重复n次以上
    {n}：之前的字符重复n次
    ?：之前的字符是可选的，{0,1}
    +：之前的字符重复1次以上，{1,}
    *：之前的字符是可选或重复多少次，{0,}
    ^：以什么开头的
    $：以什么结尾的

    i：区分大小写

|：左边的表达式或者右边的表达式都可以
(...)：将表达式分组

    <button οnclick="startFun( )">Start</button>
    <button οnclick="endFun( )">End</button>
----------------------------------------------------------------------------------------------------
0034：
    <script>
        function Fun()
        {
            var isConfirm = window.confirm("确定打开么？");
            if(isConfirm == true)
            {
                alert("打开了！");
            }
            else
            {
                alert("撤销了！");
            }
        }
    </script>

    <button οnclick="Fun( )">打开</button>
----------------------------------------------------------------------------------------------------
0035：
    异常信息的处理：onerror
    window.onerror = function(err, url, line)
    {
        document.write("--------------------------------------------------------------<br>");
        document.write("异常信息："+err+"<br>");
        document.write("联接地址："+url+"<br>");
        document.write("所在行数："+line);
        document.write("<br>--------------------------------------------------------------<br>");
    }
----------------------------------------------------------------------------------------------------
0036：
    使用DOM模型遍历页面是元素的对象：
    for(var i =0;i < document.documentElement.childNodes.length;i++)
    {
        if(document.documentElement.childNodes[i].nodeType == 1/*Node.ELEMENT_NODE*/)
        {
            document.write(document.documentElement.childNodes[i].tagName+"<br>");
        }
    }
----------------------------------------------------------------------------------------------------
0037：
    获得页面元素引用的几种方式：
    var aBody = document.getElementById("myBody");
    var bBody = document.body;
    var cBody = document.getElementsByTagName("body")[0];//返回的是数组
----------------------------------------------------------------------------------------------------
0038：
    操纵DOM元素的例子：
    <script>
    function sortkids(e)
    {
        if (typeof e == "string")
        {
            e = document.getElementById(e);
        }
        var kids = [];
        if (x.nodeType == 1 /* Node.ELEMENT_NODE */)
        {
            kids.push(x);
            x.firstChild.data = x.firstChild.data.toUpperCase();
        }

        kids.sort
        (
             function(n, m)
             {
                   var s = n.firstChild.data;
                   var t = m.firstChild.data;
                   if (s < t) {return -1;}
                   else if (s > t) {return 1;}
                   else {return 0;}
             }
        );
        for(var i = 0; i < kids.length; i++) e.appendChild(kids[i]);
    }
    </script>
    <ul id="list">
        <li>one
        <li>two
        <li>three
        <li>four
    </ul>
    <button οnclick="sortkids('list')">Sort list</button>
----------------------------------------------------------------------------------------------------
0039：
    用DOM元素增加HTML页面元素：
    var ele = document.createElement("button");
    ele.setAttribute("value","按钮");//ele.value = "按钮";
    ele.style.height = ele.style.width = 50;
    document.body.appendChild(ele);
----------------------------------------------------------------------------------------------------
0040：
    IE中，对象元素注册事件的方法：
    <div id="myDiv" style="width:200; height:200; background-color:Gray;"></div>
    <script>
        function MouseoverFun()
        {
            window.defaultStatus = event.x;
        }
        var myDiv = document.getElementById("myDiv");
        myDiv.attachEvent("onmouseover", MouseoverFun);
    </script>
----------------------------------------------------------------------------------------------------
0041：
    拖动窗口：
    <script language="JavaScript">
    function drag(elementToDrag, myevent)
    {

            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture( );

            if (e.stopPropagation)
            {
                e.stopPropagation( );
            }
            else
            {
                e.cancelBubble = true;
            }
        }
    }
    </script>
    <div style="position:absolute; left:100px; top:100px; width:250px; height:250px;white; border: solid black;">
        <div style="background-color: gray;height:20px; border-bottom: solid;" οnmοusedοwn="drag(this.parentNode, event);">
            <p>拖动窗口</p>
        </div>
        <p> ●.....................</p>
        <p> ●.....................</p>
        <p> ●.....................</p>
        <p> ●.....................</p>
    </div>
----------------------------------------------------------------------------------------------------
0042：
    XMLHttpRequest异步请求的一个小例子：
    <script language="JavaScript">
    var HTTP = [];
    HTTP._factories =
    [
        function() { return new XMLHttpRequest(); },
        function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
        function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
    ];

    HTTP._factory = null;
    HTTP.newRequest = function()
    {
        if (HTTP._factory != null)
        {
            return HTTP._factory();
        }
        for(var i = 0; i < HTTP._factories.length; i++)
        {
            try
            {
                var factory = HTTP._factories[i];
                var request = factory();
                if (request != null)
                {
                    HTTP._factory = factory;
                    return request;
                }
            }
            catch(e)
            {
                continue;
            }
        }
        HTTP._factory = function()
        {
            throw new Error("XMLHttpRequest not supported");
        }
        HTTP._factory();
    }
    function fun()
    {
        var request = HTTP.newRequest();
        request.onreadystatechange = function()
        {
            if (request.readyState == 4/*finished*/)
            {
                if(request.status == 200/*successful*/)
                {
                   alert(request.responseText);
                }
            }
        }
        //异步调用
        request.open("GET","open.htm",true);
        request.send(null);
    }
    </script>
    <input type="button" value="XMLHttpRequest" οnclick="fun()"/>
----------------------------------------------------------------------------------------------------
0043：
    XMLHttpRequest的几个通用方法：
    var HTTP = [];
    //请求文本
    HTTP.getText = function(url, callback)
    {
        var request = HTTP.newRequest();
        request.onreadystatechange = function()
        {
            if (request.readyState == 4 && request.status == 200)
            {
                callback(request.responseText);
            }
        }
        request.open("GET", url);
        request.send(null);
    }
    HTTP.getXML = function(url, callback)
    {
        var request = HTTP.newRequest();
        request.onreadystatechange = function()
        {
            if (request.readyState == 4 && request.status == 200)
            {
                callback(request.responseXML);
            }
        }
        request.open("GET", url);
        request.send(null);
    }
----------------------------------------------------------------------------------------------------