马克-to-win,马克java社区，mark-to-win,c,javascript,火狐firebug单步调试,prototype,call和apply

第一章 JS 基础

第一节 JS 基础

1.基础知识：

1）Helloworld：（视频下载）（全部书籍）

例 1.1

<html>
<head>
    
</head>
<script type="text/javascript">
    var a ;
    /*before you set value, a' type can not be defined.*/
    document.writeln(typeof(a) + "<br>他们");
    a = true;
    document.writeln(typeof(a) + "<br>");
    /*下面的console.log只有安装了firebug的firebox不报错*/
    console.log("This is the 1 message 马克-to-win write in %s", a);
    document.writeln(a);
</script>我们

输出结果：
undefined
他们 boolean
true 我们

2）火狐的firebug如何单步调试程序（视频下载）（全部书籍）

马克-to-win：火狐中：工具/web 开发者/调试器，开始时没有文件，在浏览器当中点刷新按钮，文件就加载进来了。

3）html当中如何引用js文件（视频下载）（全部书籍）

马克-to-win：如果需要javascript工程师和html美工各干各的工作，需要分开写文件。

例 1.2

<html>
<head>
    <script src="Hello.js"></script>
    <title></title>
</head>
<body>
</body>
</html>

Hello.js（如果你用notepad建立一个txt之后你再改为js，一定在存时，要存成utf-8或unicode格式）:

    var a ;
    /*before you set value, a' type can not be defined.*/
    document.writeln(typeof(a) + "<br>他们");
    a = true;
    document.writeln(typeof(a) + "<br>");
    /*下面的console.log只有安装了firebug的firebox不报错*/
    console.log("This is the 1 message 马克-to-win write in %s", a);
    document.writeln(a);

2.简单语法：

例 2.1

<html>
<head>
</head>
<body>
<script type="text/javascript">
    var i = 0;
    do
    {
        i += 1;
        window.document.write("i=" + i + "<br>");
    }
    while (i < 3)
</script>我们
</body>
</html>

输出结果：
i=1
i=2
i=3
我们

例 2.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        var i = 5;
        while (i > 0) {
            window.document.write("i is" + i + "<br>");
            i--;
        }
    </script>
</head>
<body>

</body>
</html>

输出结果：
i is5
i is4
i is3
i is2
i is1

例 2.3（自动转化，比如3<"4"）

<html>
<head>
    <script type="text/javascript">
        result = 0;
        function qiuhe()
        {
            var num = window.document.getElementById("num").value;
            /*the following typeof(num) is a string. can automatically convert string to number.*/
            alert("typeof(num) is "+typeof(num));
            for (var i = 1; i <= num; i++)
            {
                result = result+i;
            }
            window.document.getElementById("result").value = result;
        }
    </script>
</head>
<BODY>
1加到
<input type="text" id="num" size="5">和是 <br>
<input type="text" id="result">
<input type="submit" onclick="qiuhe();" value="cal">
</BODY>
</html>

例 2.4

马克-to-win：javascript中，当作为字符串时，单引号和双引号是通用的，都行。如下面的例子：如二者同时用，才需要配对。比如： <BODY onload='a("a","b","c")'>

<html>
<head>
    <script type="text/javascript">
        var sex = 'female';
        if (sex == "female")
            this.document.writeln("小姐");
        else
            this.document.writeln('先生');
    </script>
</head>
<body>

</body>
</html>

输出结果：
小姐

例 2.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        document.write("hello World<br>");
        with (document) {
            write("hello world with with1<br>");
            write("hello world with with.2");
        }
    </script>
</head>
<body>

</body>
</html>

输出结果：
hello World
hello world with with1
hello world with with.2

例 2.6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <SCRIPT LANGUAGE="JavaScript">
        
    </SCRIPT>
    <title></title>
</head>
<body>

</body>
</html>

输出结果：
c=47 b=34 a=13

例 2.7（Document.write语法）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title></title>
</head>
<body>
this content is before document.write <br>
<script type="text/javascript">

    document.write("<hr size=2 color='orange' width=50% align=left>");
    for (var i = 5; i > 0; i--)
    {
        if (i == 3) continue;
        document.write("i=" + i + "<br>");
    }

</script>
<br>this content is after document.write <br>
</body>
</html>

输出结果：
this content is before document.write

i=5
i=4
i=2
i=1

this content is after document.write

例 2.8（prompt）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <Script>
        /*JavaScript syntax: - myResult = myWindow.prompt(aString, aDefaultValue)
        - myResult = prompt(aString, aDefaultValue)
        Argument list: aDefaultValue An initial content for the text box
        aString Some text to explain what to enter
        */
        var yourgender = prompt("你的性別是：\n男生请按11，女生请按22", "22");

        switch (yourgender) {
            case "11"    : document.writeln("你好！"); break;
            case "22"    : document.writeln("你好！woman"); break;
            default    : document.writeln("重按！");
        }

    </script>
</head>
<body>

</body>
</html>

结果；
你好！woman

3.其他高级话题：

1）类型转换，typeof的用法（视频下载）（全部书籍）

例 3.1.1

<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</BODY>
</HTML>

输出结果：
number typeof(as) is string typeof(x) is number numberis typeof(age2) objectis typeof(age3) x=23,y=NaNtypeof y is number

例 3.1.2

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    /*javascript support type automatic conversion.the same value is equal */
    document.writeln(6 == "6");
    /*the following requires that value and type should be the same.*/
    document.writeln(6 === "6");
        /*When the Global object is created, it always has at least the following properties:
       Object object       Function object       Array object       String object
       Boolean object       Number object       Date object       Math object
       Value properties
   */
    var obj1 = new window.Object();
    var obj2 = new Object();
    /*Object references must refer to the same object instance.otherwise return false.*/
    document.writeln(obj1 == obj2);
    document.writeln(typeof(obj1) === typeof(obj2));
</script>

输出结果：
true false false true

例 3.1.3（null和undefined的==和===的比较）（视频下载）（全部书籍）

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    //马克-to-win：声明变量x
    /* if a value is not set, its typeof is undefined, its value is undefined, if a value= null, its typeof is object, its value
is null,but when you use == to test, they are the same, but when to
use === to test, they are not the same,== means as long as value is the same, ok, but === means type also must be equal. */
    var x;
    var z1 = "d";
    var y = null;

    //      document.writeln("z1 is"+z1);
    /*if you cancel commenting out the following statement, it will give the blank page, which means it has error.*/
    //        document.writeln(zyx);
    document.writeln(x + " is x");
    document.writeln(typeof(x) + " is typeof(x)");
    document.writeln(y + " is y");
    document.writeln(typeof(y) + " is typeof(y)");
    var z = undefined;
    document.writeln(z + " is z");
    document.writeln(typeof(z) + " is typeof(z)");
    if (y == undefined)
    {
        document.writeln('null and undefined is interchangable');
    }
    if (z1 != null)
    {
        document.writeln('z1 != null');
    }
    if (y === undefined)
    {
        document.writeln('null and undefined is exactly the same');
    }
    if (x == undefined)
    {
        document.writeln('声明变量后默认值为undefined');
    }

    if (x === undefined)
    {
        document.writeln('声明变量后默认值为exactly the same as undefined');
    }

    if (x == null)
    {
        document.writeln('声明变量后默认值为null');
    }

    if (x === null)
    {
        document.writeln('马克-to-win：声明变量后默认值为exactly the same as null, note that null\' s typeof is Object.');
    }

    if (x == y)
    {
        document.writeln("x等于y");
    }
    if (x === z)
    {
        document.writeln("x三等于z");
    }
</script>

输出结果：
undefined is x undefined is typeof(x) null is y object is typeof(y) undefined is z undefined is typeof(z) null and undefined is interchangable z1 != null 声明变量后默认值为undefined 声明变量后默认值为exactly the same as undefined 声明变量后默认值为null x等于y x三等于z

2）局部变量和全局变量 （视频下载）（全部书籍）

马克-to-win：浏览器里面 window 就是 global，通常可以省。

nodejs 里没有 window，但是有个叫 global 的。

例 3.2.1

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/* 马克-to-win：有var无var，在function外是一样的，都是全局的，在function里面时，var是局部的，而无var时是代表全局的*/
    var testVar = "全量";
    document.writeln("window.testVar is" + window.testVar+testVar);
    var testqVar = "全量q";
/*如不屏蔽下句话，程序直接停在这了，因为出错了，不认识testGlobal，得把下一句和下下句换一下位置，就ok了 */
// document.writeln("testGlobal is" + testGlobal);
    testGlobal = "全量global";
    document.writeln("abc is" + abc);
    var abc;
    testGlobalInVar = "全量globalInVar";
    function testSco()
    {
        var lll = "qqq";
        var testVar = "局量"; //此testVar非外面的testVar
        testqVar = "全量qchange"; //此testqVar就是外面的testqVar
        testGlobal = "全量globalchange";
        var testGlobalInVar = "局量global";//此testGlobalInVar非外面的testGlobalInVar
        /*local variable is stronger than global variable.so "testVar" in the following statement means local variable.*/
        document.writeln(testVar);
        document.writeln(testqVar);
        document.writeln("testGlobalInVar is " + testGlobalInVar);
    }

    testSco();
    document.writeln("second test is " + testVar);
    document.writeln("second testqVar is " + testqVar);
    document.writeln("testGlobal is " + testGlobal);
    document.writeln("testGlobalInVar is " + testGlobalInVar);

</script>

输出结果：

window.testVar is全量全量 abc isundefined 局量全量qchange testGlobalInVar is 局量global second test is 全量 second testqVar is 全量qchange testGlobal is 全量globalchange testGlobalInVar is 全量globalInVar

例 3.2.2

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>

    var abc = "全量";
    function testscope()
    {
        /* refer to 上例 first. 马克-to-win： because already defined local variable, but does not assign value, so it is undefined. If we totally remove var abc = "局量"; alert(abc);
will print out 全局变量, but local "scope" will override the global "scope", it is undefined.   so we can learn a lesson, if we use a local variable, we must first assign value, then we can use it.
        */
        document.writeln(abc);
        var abc = "局量";
        document.writeln(abc);
    }
    testscope();
    document.writeln(abc);
</script>

输出结果：
undefined 局量全量

例 3.2.2_1:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>

    var abc = "全量";
    function testscope()
    {
        document.writeln(abc);
    }
    testscope();
    document.writeln(abc);
</script>

输出结果：
全量全量

例 3.2.3(noblockScope)

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    function test()
    {
        /* 马克-to-win: there are only global variable (outside of any function) and function variable, no block variable at all.*/
       /*note that in javascript, there is no block variable, only function variable, so m and z are function variable.*/
            for (var z = 0; z < 2; z++)
            {
                var m = 1;
                //m的作用范围是整个函数内，而不是循环体内
                document.writeln(z);
            }
        //即使出了循环体，m和z的值依然存在
        document.writeln(z + " is z"+m+" is m" );
    }
    /*document is a property of global object---window,so can directly use.*/
    test();
    document.writeln("马克-to-win");
    /*the following statement is wrong because no global m is defined first, so nothing can be printed out*/
    document.writeln(m + "is m");
    document.writeln("马克-to-win");
</script>

输出结果：

0 1 2 is z1 is m 马克-to-win

例 3.2.4（局部变量，全局变量）

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    function M1(qqqv, qixyv)
    {
/*马克-to-win：note that here if var m1=new M1(8,9); then this.qqq means m1's property, while
if you directly call M1(2,3); then this.qqq means window's property. */
        this.qqq = qqqv;
        /*note that here "qixy" means the windows's property*/
        qixy = qixyv;
        /*the following "q" is a local variable, so inside another function, it can not be called. */
        var q = 3;
    }
    function M2()
    {
        document.writeln("qixy is" + qixy);
        document.writeln("window.qixy is" + window.qixy);
        document.writeln("this.qixy is" + this.qixy);
        document.writeln("this.qqq is" + this.qqq);
//alert("q is"+ q);
    }

    var m1 = new M1(8, 9);
    m1.info = function()
    {
        document.writeln("inside m1.info this.qqq is " + this.qqq);
    };
    m1.info();
    /*note that the following mk.info(); must be commented out, otherwise, it report error, because mk does not have
info() function, because the fucntion of info only belong to m1. this is also the difference between prototype
and m1.info(); */
    //    var mk=new M1(8,9);
    // mk.info();
    M2();
    document.writeln("this的qqq属性为" + this.qqq);
    document.writeln("this的qixy属性为" + this.qixy);
    document.writeln("m1的qqq属性为" + m1.qqq);

    document.writeln("the second step");
    M1(2, 3);
    M2();
    document.writeln("this的qqq属性为" + this.qqq);
    document.writeln("this的qixy属性为" + this.qixy);

</script>

</html>

输出结果：

inside m1.info this.qqq is 8 qixy is9 window.qixy is9 this.qixy is9 this.qqq isundefined this的qqq属性为undefined this的qixy属性为9 m1的qqq属性为8 the second step qixy is3 window.qixy is3 this.qixy is3 this.qqq is2 this的qqq属性为2 this的qixy属性为3

3）嵌套函数（视频下载）（全部书籍）

例 3.3.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    function outerFun(){
        var i = 0;
        function innerFun(){
            document.write(i);
        }
        innerFun();
    }
    outerFun();
    /*马克-to-win：here you can not call innerFun(), because it is inside another function outerFun, so it will cause error.*/
    innerFun();
    document.write("马克-to-win");
</script>

输出结果：

0

4）Function用法（视频下载）（全部书籍）

例 3.4.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    /*马克-to-win：When the Global object is created, it always has at least the following properties:
       Object object
       Function object
       Array object
       String object
       Boolean object
       Number object
       Date object
       Math object
       Value properties
   */

    /*Function的好处是，函数体可以是运行时的一个传入的动态字符串，for the Function class, the last parameter is
    function body, while the parameters before the last one are input arguments., 'x' can be changed to "x" */
    var a='return x + y;';
    var f = new Function('x', 'y',a );// 等价于var f = function(x, y){return x + y;}
    document.write(f(1, 1));
</script>

输出结果：

2

5）构造函数的用法：（视频下载）（全部书籍）

例 3.5.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    function Student(name, age)
    {
        /* 马克-to-win：later on we can use it in
        var doc = new ActiveXObject( "Microsoft.XMLDOM" );
                    doc.async="false";
                    doc.load(str);
        when a property has a this, means that this property is a member property.
        */
        this.name = name;
        this.age = age;
        this.parti = function()
        {
            document.writeln("名字是：" + this.name + "<br>");
            document.writeln("年纪是：" + this.age + "<br>");
        };
    }
    var p = new Student('jeri', 3);
    document.writeln("typeof p is " + typeof(p));
    //typeof(p) is object
    p.parti();
    p.age = 4;
    p.parti();
    /*the following two methods can also access some properties.*/
    document.writeln("" + p["age"]);
    document.writeln("" + p["a" + "ge"]);

    if (p instanceof Student) document.writeln("p是Student的实例<br>");
    /*javascript 中的对象全部是Object 的子类
    Because this object is the topmost parent object in the prototype inheritance hierarchy, all other object classes inherit its methods and properties. It's a close enough call that JavaScript 2.0 may well move it into the class-based object-oriented category at which time the prototype inheritance would be replaced with super-class/sub-class mechanisms and the arguments become null and void. */
    /*When the Global object is created, it always has at least the following properties:
       Object object
       Function object
       Array object
       String object
       Boolean object
       Number object
       Date object
       Math object
       Value properties
   */
    if (p instanceof Object) document.writeln("p是Object的实例");
</script>

输出结果：
typeof p is object 名字是：jeri
年纪是：3
名字是：jeri
年纪是：4
4 4 p是Student的实例
p是Object的实例

例 3.5.2

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    function f2()
    {
        this.lll = "马克-to-win";
        document.writeln("in f2<br>");
        /*for new operator, the following statement got no use. */
        return 'Hello 马克-to-win';
    }
    /*so f2 has dual role, one is ordinary function, another is that construactor, see whether you use new operator or just simply call it.*/
    var f5 = f2();
    document.writeln("typeof f5是：" + typeof f5 + "qqq" + typeof f2 + "qqqq" + f5 + "<br>");
    document.writeln("f5.lll是：" + f5.lll + "<br>"+window.lll+lll);
    var f6 = new f2();
    document.writeln("typeof f6是：" + typeof f6 + "qqq" + typeof f2 + "qqqq" + f6 + "<br>");
    document.writeln("f6.lll是：" + f6.lll + "<br>"+window.lll+lll);

    var zhanwei = "zhanwei";
</script>

输出结果：
in f2
typeof f5是：stringqqqfunctionqqqqHello 马克-to-win
f5.lll是：undefined
马克-to-win马克-to-win in f2
typeof f6是：objectqqqfunctionqqqq[object Object]
f6.lll是：马克-to-win
马克-to-win马克-to-win

6）静态方法和prototype（难）（视频下载）（全部书籍）

例 3.6.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    /*note that 马克-to-win： static variable's value has nothing to do with instance's variable's value.instance 名称 can not 直接access static member like in java.
This is different from Java，比如下面例子中，Student.number=2,但是d1.number就为undefined.This is different from Java，但在实例方法中（比如d1.info）可以访问Student.number。这是和java中一样的。或者说function外或任何地方都可以访问Student.number。反过来，d1.age也可以在静态方法中访问，就像在function外一样，任何地方都能访问d1.age。String.prototype.abcd，这是给所有的实例加属性而不是静态属性。*/
    function Student(number, agev)
    {
        this.age = agev;
        /*static variable's value can not be accessed by instance */
        Student.number = number;
        /*lb is local variable, but not a member variable because it is not modified by this. from outside it can not be accessed. refer to noblockScope.html */
        var lb = 0;
    }
    var d1 = new Student(1, 3);
    document.writeln("this的age属性为means window.age" + this.age + "<br>");
    document.writeln("d1的age属性为" + d1.age + "<br>");
    document.writeln("d1的number属性为" + d1.number + "<br>");
    document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
    document.writeln("d1的lb属性为" + d1.lb + "<br><hr>");
    d1.qixy = "abc";/*以随意为实例加属性或方法*/
    document.writeln("可以随意为实例加属性或方法see following，d1的qixy属性为" + d1.qixy + "<br><hr>");
    document.writeln("是否有静态变量qixy" + Student.qixy + "<br><hr>");
    d1.info = function()/*此方法仅为d1对象所用*/
    {
        document.writeln("对象的qixy属性:" + this.qixy);

        document.writeln("对象的age属性:" + this.age);
        /*下列话是合法的，因为不是this.number，而是Student.number*/
        document.writeln("static method is " + Student.number);
    };
    Student.prototype.infop = function()/*此方法可以为所有Student对象所用*/
    {
        document.writeln("对象的qixy属性p:" + this.qixy);
        document.writeln("对象的age属性p:" + this.age);
        /*下列话是合法的，因为不是this.number，而是Student.number*/
        document.writeln("static method is " + Student.number);
    };
    Student.staticMethod = function()
    {
        /*下列话是合法的，因为是d1.age，就像在function外一样，任何地方都能访问d1.age*/
        document.writeln("d1的age属性为" + d1.age + "<br>");
        document.writeln("static method is " + Student.number);
    };
    d1.info();
    Student.staticMethod();
    var d2 = new Student(2, 4);
    /*the following statement can not be added, otherwise, it report error. because info is d1's method.
this is the beneit of prototype.prototype 能给类添加instance方法*/
    //    d2.info();
    d2.infop();
    d1.infop();
    document.writeln("d1的age属性为" + d1.age + "<br>");
    document.writeln("d1的number属性为" + d1.number + "<br>");
    document.writeln("d2的age属性为" + d2.age + "<br>");
    document.writeln("d2的number属性为" + d2.number + "<br>");
    document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
    Student.number = 3;
    document.writeln("通过Student访问静态number属性为" + Student.number + "<br>");
    Student.number1 = 31;
    document.writeln("通过Student访问静态number1属性为" + Student.number1 + "<br>");
/*马克-to-win： abc是静态属性。只能通过String.abc这样静态的属性来访问。通过以下的as.abc这样的
实例属性是访问不着的。用以下的String.prototype.abcd，这是给所有的实例加属性而不是静态属性，用as.abcd这样的实例属性就能访问着了*/
    /*When the Global object is created, it always has at least the following properties:
       Object object       Function object       Array object       String object
       Boolean object       Number object       Date object       Math object
       Value properties
   */
    String.abc = "qixy";
    document.writeln("通过String访问静态abc属性为" + String.abc + "<br>");
    var as="aString"
    document.writeln("as.abc is " +as.abc + "<br>");
    String.prototype.abcd="qixyqixy";
    document.writeln("as.abcd is " +as.abcd + "<br>");
    /*a property can be nonexist, it is still can be printed out.*/
    document.writeln("d1的noexist属性为" + d1.noexist + "<br><hr>");
    /* p3 does not exists, error is generated.so program will stop here. */
    document.writeln("p3的lb属性为" + p3.lb + "<br><hr>");
    document.writeln("d1的noexist属性为" + d1.noexist + "<br><hr>");
</script>
here is body which is after the tag of script

输出结果：

this的age属性为means window.ageundefined
d1的age属性为3
d1的number属性为undefined
通过Student访问静态number属性为1
d1的lb属性为undefined

可以随意为实例加属性或方法see following，d1的qixy属性为abc

是否有静态变量qixyundefined

对象的qixy属性:abc 对象的age属性:3 static method is 1 d1的age属性为3
static method is 1 对象的qixy属性p:undefined 对象的age属性p:4 static method is 2 对象的qixy属性p:abc 对象的age属性p:3 static method is 2 d1的age属性为3
d1的number属性为undefined
d2的age属性为4
d2的number属性为undefined
通过Student访问静态number属性为2
通过Student访问静态number属性为3
通过Student访问静态number1属性为31
通过String访问静态abc属性为qixy
as.abc is undefined
as.abcd is qixyqixy
d1的noexist属性为undefined

here is body which is after the tag of script

prototype（视频下载）（全部书籍）
见上一节，马克-to-win：prototype作用就是给某个类增加一个实例方法。

例 3.6.2

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
/*When the Global object is created, it always has at least the following properties:
       Object object       Function object       Array object       String object
       Boolean object       Number object       Date object       Math object
       Value properties
   */
    Array.prototype.mymethod = function(number)
    {
        var result = -1;
/*注意mymethod功能是找出某数在数组中出现的位置。作为Array的一个function，可以访问Array的属性this.length，参见上一个prototype的例子，
    Student.prototype.infop = function()/*此方法可以为所有Student对象所用*/
    {
        document.writeln("对象的qixy属性p:" + this.qixy);
        document.writeln("对象的age属性p:" + this.age);
        /*下列话是合法的，因为不是this.number，而是Student.number*/
        document.writeln("static method is " + Student.number);
    };
*/
        for (var i = 0; i < this.length; i ++)
        {
            if (this[i] == number)
            {
                result = i;
                break;
            }
        }
        return result;
    }
    var a = [3,5,23,4,67];
    document.writeln(a.mymethod(4));
    var zhanwei = "zhanwei";
</script>

输出结果：

3

7）onload（视频下载）（全部书籍）

马克-to-win：onload就是等页面加载完后才执行。

例 3.7.1

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <SCRIPT LANGUAGE="JavaScript">
        
    </SCRIPT>
</HEAD>
<BODY onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</BODY>

结果：
part 1

例 3.7.2

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <SCRIPT LANGUAGE="JavaScript">
        
    </SCRIPT>
</HEAD>
<BODY onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</BODY>

结果：
part 11

例 3.7.3

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <SCRIPT LANGUAGE="JavaScript">
        
    </SCRIPT>
</HEAD>
<BODY onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</BODY>

结果：
part 5 part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。 part 11

8）arguments（视频下载）（全部书籍）

例 3.8.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    /* 马克-to-win：when there are n functions with the same function name, only the last one is used. */
    function test()
    {
        document.writeln("no argument constructor.");
    }
    function test(person)
    {
        document.writeln("马克-to-win2");
        /*Function.arguments[] (Collection) The values passed to the function when it is called.
        马克-to-win: inside function,we can directly use arguments.
        */
        var n = arguments.length;
        document.writeln("n is " + n);
        for (var i = 0; i < n; i++)
        {
            document.writeln("马克-to-win3");
            document.writeln(arguments[i])
        }
        document.writeln(person);
        document.writeln(typeof(person) + "is typeof");
    }
    /*when no param, undefined is passed in. no overloaded function concept.*/
    test();
    /*when there is no this function, program stops here.*/
    change();
    document.writeln("finally");
</script>

输出结果：

马克-to-win2 n is 0 undefined undefinedis typeof

例 3.8.2

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <SCRIPT LANGUAGE="JavaScript">
        
    </SCRIPT>
</HEAD>
<BODY onload='a("a","b","c")'>
part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。
</BODY>

输出结果：
part 1 part2,onload 会在ｐａｒｔ１和ｐａｒｔ２打印之后再执行。 b is a3aokbokcok

9）Object（视频下载）（全部书籍）

例 3.9.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
        /*马克-to-win：When the Global object is created, it always has at least the following properties:
       Object object       Function object       Array object       String object
       Boolean object       Number object       Date object       Math object
       Value properties
   */
    var oi = new Object();
    oi.name = 'mark';
    oi.height = 4;
    function xxx()
    {
        document.writeln("对象的name属性:" + this.name);
        document.writeln("<br>");
        document.writeln("对象的height属性:" + this.height);
    }
    oi.list = xxx;
    oi.list();
    document.writeln(oi["name"] + oi["height"]);
</script>

输出结果：

对象的name属性:mark
对象的height属性:4 mark4

10）json（视频下载）（全部书籍）

例 3.10.1

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<script>
    var student =
    {    name : 'mark',
        age : 3 ,
        classes : ['小' , '中' , "大"],
        /* 马克-to-win：class is an array of string, also parents is also an array of json object. */
        parents :[
            {
                name : 'father',
                age : 42,
                salary : 'low'
            }
            ,
            {
                name : 'mother',
                age : 37,
                salary : 'high'
            }
        ]
    };
    document.writeln(student.name);
    document.writeln("<hr>");
    document.writeln(student.age);
    document.writeln("<hr>");
    document.writeln(student.classes[1]);
    document.writeln("<hr>");
    document.writeln(student.parents[1].name);
</script>

输出结果：

mark

中

mother

11）for in Array（视频下载）（全部书籍）

例 3.11.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var a=['hello','teacher','马克-to-win'];
        for(var iii in a){
            this.document.write('inidex'+iii+'的值是'+a[iii]+"<br>");
        }
    </script>
</head>
<body>

</body>
</html>

输出结果：

inidex0的值是hello
inidex1的值是teacher
inidex2的值是马克-to-win

12）函数指针（视频下载）（全部书籍）

例 3.12.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

        function sortNumber(a, b)
        {
            document.writeln(a + b);
        }
        function sortq(sortNumberqqq)
        {
            document.writeln("马克-to-win");
            sortNumberqqq(1, 2);
            return 6;
        }
        /* note that it will report error if we write the following statement as document.write("test "+sortq(sortNumberqixy));
       note that here sortNumber is a function pointer.
        下面这句话是先执行sortq(sortNumber)，等返回值以后，再执行document.write("test "*/
        document.write("test " + sortq(sortNumber));

    </script>
</HEAD>

<BODY>

</BODY>
</HTML>

输出结果：
马克-to-win 3 test 6

13）call()和apply()（视频下载）（全部书籍）
马克-to-win：call是在特定的作用域中调用函数。

例 3.13.1

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>

    </title>
    <script type="text/javascript">
        function A(name) {
            this.name = name;
        }
         A.prototype.info = function()
         {
         /*如果下局解开屏蔽，最后结果则打印出就为A，结论就是在call时，先在A里找this.name，如果找不着，则用b环境里找，现在A的构造函数从来没有执行过，所以最后用的是B环境的name，见下一个例子*/
                //this.name="A";
                return "A的名字是 "+this.name;
         }

        function B(agev) {
            this.age=agev;
            this.name="I am B"
        }
            var b = new B(2);
    var tmp =A.prototype.info;
    document.writeln(tmp.call(b));

    var zhanwei="zhanwei";

    </script>
</head>
<body>

输出结果：
A的名字是 I am B

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>

    </title>
    <script type="text/javascript">
        function A(name,col) {
/*实参一个，但形参2个，所以最后一个参数color为undefined，id和name都有，所以是把B给冲了的，但age是用了B的*/
            this.color=col;
            this.id="a";
            this.name = name;
            return "A(name) 名字是 "+this.id+this.name+this.age+this.color;
        }
         A.prototype.info = function()
         {
                return "名字是 "+this.name;
         }
        A.prototype.country = "China";

        function B(agev) {
            this.id="b";
            this.age=agev;
            this.name="this is B"
        }
            var b = new B(2);

    document.writeln(A.call(b, "马克-to-win"));
    var zhanwei="zhanwei";

    </script>
</head>
<body>

结果：
A(name) 名字是 a马克-to-win2undefined

例 3.13.2
<script>
/*
他们的用途相同，都是在特定的作用域中调用函数。screenX是window的一个field。
3、接收参数方面不同，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。 */
    function sum(num1, num2) {
        return screenX+num1 + num2;
    }
    document.writeln(screenX+" is screenX");
    document.writeln(sum.call(window, 10, 10)); //20+screenX
    document.writeln(sum.apply(window,[10,20])); //30+screenX

</script>

输出结果：
-4 is screenX 16 26