0
83
¥ 1.00 ¥39.00 限时秒杀
开通会员,立省0.10元, 立即开通
立即购买

你将收获

通过学习JS 基础知识Helloworld,火狐的firebug如何单步调试程序

htm当中如何引用js文件,简单语法,局部变量和全局变量,嵌套函数,构造函数的用法

静态方法和prototype(难),函数指针,等相关概念让大家对JS 基础编程打下好的基础。

适用人群

最好学过

课程介绍


重要声明如果感觉声音小,可以选择耳机或加音箱或电脑自带的声音,反复试一试。


Java大数据培训学校全套视频课程:"java大数据培训学校全套教材"系列课程由750集视频构成,基本就是

1)时下流行的java培训学校主流内部教材,

2)和市面上培训学校的通 行的课程体系几乎一样。

3)所以这套课程都能自己学下来,等于上了培训学 校一次,完全可以找个java工程师的工作了。

本门课程为"java大数据培训学校全套教材"系列课程的第二十篇,学习Js,构造函数,局部变量等相关概念让大家对JS 基础编程打下好的基础。

4)课程特色:专业细致,偏案例,理论强,多作业。
5)课程软件使用:记事本,火狐浏览器。

课程讨论

老师讲的特别到位,引人入胜。很细致,学到了很多
有些不明不白的
有些不明不白的
有些不明不白的
有些不明不白的
有些不明不白的
老师讲的不错,真的不错,真的挺好的,继续学习
讲的不错,继续学习啦!!!讲的不错,继续学习啦!!!
老师讲的真不错呀,点赞点赞,点赞
挺好,老师讲的挺好的,真的挺不错的

同学笔记

  • yetugeng 2020-02-15 20:11:29

    来源:局部变量和全局变量1 查看详情

    作者的示例代码在如下地址: http://www.mark-to-win.com/Javascript/js1_web.html

    本文内容是根据讲师马克的视频笔记,参考作者的代码,由于作者的代码太随性了,且是txt的,看着效果实在难受,遂经将其整理收录至本文。

    第一章 JS 基础

     

    第零节 前言

     

    第一节 JS 基础

    1.基础知识

    1) Helloworld

    例 1.1

    <html>
    <head>
        <!-- 如果你用notepad建立一个txt之后你再改为html,一定在保存时,要保存为utf-8或unicode格式,
    或者你也可以用myeclipse html designer编辑,这样你看的文本是有颜色的,如果觉得字体小,
    可以在myeclipse html designer下面的窗口里右击鼠标,/preferences/general/editor/text editor.
    注意在texteditor窗口里面的右边最下面,有一行不起眼你的小字,color and font,你可以设置。-->
    </head>
    <script type="text/javascript">
        var a ;
        /*before you set value, a' type can not be defined.*/
        document.writeln("Before set value, type of 'a' is " + typeof(a) + ";<br>");
        a = true;
        document.writeln("After set a boolean type value, tpye of 'a' is " + typeof(a) + ";<br>");
        /*下面的console.log只有安装了firebug的firebox不报错*/
        console.log("This is the a message when show value of %s ;", a);
        document.writeln("After set a boolean type value, value of 'a' is " + a + ";");
    </script>
    </html>
    

    输出结果:

    Before set value, type of 'a' is undefined;
    After set a boolean type value, type of 'a' is boolean;
    After set a boolean type value, value of 'a' is true; 

     控制台显示如下

    2)火狐的firebug如何单步调试程序

    3)html当中如何引用js文件

    注:如果需要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

    <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("value of i is : " + i + "<br>");
                i--;
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

    输出结果:

    value of i is : 5
    value of i is : 4
    value of i is : 3
    value of i is : 2
    value of i is : 1

    例 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>

    输出结果:

    当输入50时

    例 2.4

    注:javascript中,当作为字符串时,单引号和双引号是通用的,都行。

    如下面的例子:如二者同时用,才需要配对。比如: <body οnlοad='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

    <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 with2<br>");
            }
        </script>
    </head>
    <body>
    </body>
    </html>

    输出结果:

    hello world
    hello world with with1
    hello world with with2

    例 2.6

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    
        <script language="javascript">
            var a = 12,b = 34,c = 56;
            c = ++a + b;
            //a值再加1为13,再加b34,c值为47
            document.writeln("c=" + c + "<br>");
            document.writeln("b=" + b + "<br>");
            document.writeln("a=" + a + "<br>");
        </script>
        <title></title>
    </head>
    <body>
    </body>
    </html>

    输出结果:

    c=47
    b=34
    a=13

    例 2.7(Document.write语法)

    <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>
    

    输出结果:

     

    例 2.8(prompt)

    <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>

    输出结果:

    默认的输入框是22

    若是输入11则

    如是输入 其他数字,如123,则

    3.其他高级话题:

    1)类型转换,typeof的用法

    例 3.1.1

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        </head>
        <body>
            <script language="javascript">
                <!--
                /*
                Cast operator (Definition)  refer to 过去的网站www.favo.com
                A way of converting data types.
                Primitive values can be converted from one to another or rendered as objects by using object constructors to convert the values.
                                        
                Boolean                                      
                Number                                       
                String                                       
    
                Number() (Function)  马克-to-win: actually Number() is the method of Global object.
                A Number type convertor.
    
                Property/method value type: Number primitive
                JavaScript syntax: - Number()
                - Number(aValue)
                Argument list: aValue A value to be converted to a number.
    
                When the Number() constructor is called as a function, it will perform a type conversion.
                The following values are yielded as a result of calling Number() as a function:
    
                Value                            Result
                Number                            No conversion, the input value is returned unchanged.
                Non numeric string                NaN
    
                window.Number("23");在favo中查不出来, 但Idea中可以打点打出来。
                */
                -->
                
                var a = 9;
                /*下句话如果放在ie8中执行, 必须打开debug工具*/
                console.log(typeof(a));
                document.writeln("typeof(a) is : " + typeof(a) + "<br>");
                var as = String(a);
                //string是global的方法
                document.writeln("typeof(as) is : " + typeof(as) + "<br>");
                var x = window.Number("23");
                document.writeln("typeof(x) is : " + typeof(x) + "<br>");
                var age2 = Number("56");
                document.writeln("typeof(age2) is : " + typeof(age2) + "<br>");
                var age3 = new Number(56);
                document.writeln("typeof(age3) is : " + typeof(age3) + "<br>");
                var y = Number("23xyz");
                document.writeln("x=" + x + ", y=" + y + ", typeof(y) is : " + typeof(y) + "<br>");
    
            </script>
        </body>
    </html>
    

    输出结果:

    例 3.1.2

    <html>
        <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");
            document.writeln("<br>");
            /*the following requires that value and type should be the same.*/
            document.writeln(6 === "6");
            document.writeln("<br>");
                /*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("<br>");
            document.writeln(typeof(obj1) === typeof(obj2));
        </script>
        
        <body>
        </body>
    </html>
    

    输出结果:

    true
    false
    false
    true 

    例 3.1.3(null和undefined的==和===的比较)

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        </head>
        
        <script>    
            /* 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. */
            //声明变量x
            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 + " <br>");
            document.writeln("typeof(x) is : " + typeof(x) + "<br>");
            document.writeln("y is : " + y + "<br>");
            document.writeln("typeof(y) is : " + typeof(y) + "<br>");
            var z = undefined;
            //document.writeln("z is : " + z + "<br>");
            document.writeln("typeof(z) is : " + typeof(z) + "<br>");
            if (y == undefined)
            {
                document.writeln('null and undefined is interchangable <br>');
            }
            if (z1 != null)
            {
                document.writeln('z1 != null');
                document.writeln('<br>');
            }
            if (y === undefined)
            {
                document.writeln('null and undefined is exactly the same <br>');
            }
            if (x == undefined)
            {
                document.writeln('声明变量后默认值为 undefined <br>');
            }
    
            if (x === undefined)
            {
                document.writeln('声明变量后默认值为 exactly the same as undefined <br>');
            }
    
            if (x == null)
            {
                document.writeln('声明变量后默认值为 null <br>');
            }
    
            if (x === null)
            {
                document.writeln('马克-to-win:声明变量后默认值为 exactly the same as null, note that null\' s typeof is Object. <br>');
            }
    
            if (x == y)
            {
                document.writeln("x等于y <br>");
            }
            if (x === z)
            {
                document.writeln("x三等于z <br>");
            }
        </script>
    
        <body>
        </body>
    </html>
    

    输出结果:

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

    2)局部变量和全局变量

    注:浏览器里面 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 + "<br>");
            var testqVar = "全局变量q";
            /*如不屏蔽下句话,程序直接停在这了,因为出错了,不认识testGlobal,得把下一句和下下句换一下位置,就ok了 */
            //document.writeln("testGlobal is" + testGlobal);
            testGlobal = "全局变量global";
            document.writeln("value of 'abc' is " + abc + "<br>");
            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("value of 'testVar' is : " + testVar + "<br>");
                document.writeln("value of 'testqVar' is : " + testqVar + "<br>");
                document.writeln("value of 'testGlobalInVar' is : " + testGlobalInVar + "<br>");
            }
    
            testSco();
            document.writeln("value of second 'test' is : " + testVar + "<br>");
            document.writeln("value of second 'testqVar' is : " + testqVar + "<br>");
            document.writeln("value of 'testGlobal' is : " + testGlobal + "<br>");
            document.writeln("value of 'testGlobalInVar' is : " + testGlobalInVar + "<br>");
        </script>
        
        <body>
        </body>
    </html>

    输出结果:

    window.testVar is 全局变量 | 全局变量
    value of 'abc' is undefined
    value of 'testVar' is : 局部变量
    value of 'testqVar' is : 全局变量qchange
    value of 'testGlobalInVar' is : 局部变量global
    value of second 'test' is : 全局变量
    value of second 'testqVar' is : 全局变量qchange
    value of 'testGlobal' is : 全局变量globalchange
    value of '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之前 : " + abc + "<br>");
                var abc = "局部变量";
                document.writeln("函数内部赋值abc之后 : " + abc + "<br>");
            }
            testscope();
            document.writeln("函数外部赋值abc之后 : " + abc + "<br>");
        </script>
        
        <body>
        </body>
    </html>

    输出结果:

    函数内部赋值abc之前 : undefined
    函数内部赋值abc之后 : 局部变量
    函数外部赋值abc之后 : 全局变量

    例 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 + "<br>");
            }
            testscope();
            document.writeln("函数外输出 : " + abc + "<br>");
        </script>
        <body>
        </body>
    </html>

    输出结果:

    函数内输出 : 全局变量
    函数外输出 : 全局变量

    例 3.2.3(noblockScope)

    <html>
    <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 is : " + z + "<br>");
                }
                //即使出了循环体,m和z的值依然存在
                document.writeln("z is : " +z + ", m is : " + m + "<br>");
            }
            /*document is a property of global object---window,so can directly use.*/
            test();
            document.writeln("马克-to-win" + "<br>");
            /*the following statement is wrong because no global m is defined first, so nothing can be printed out*/
            document.writeln("m is : " + m + "<br>");
            document.writeln("马克-to-win" + "<br>");
        </script>
        <body>
        </body>
    </html>

    输出结果:

    z is : 0
    z is : 1
    z is : 2, m is : 1
    马克-to-win

    例 3.2.4(局部变量, 全局变量)

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    </head>
    
        <script>
            function M1(arg1, arg2)
            {
            /*马克-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 = arg1;
                /*note that here "bbb" means the windows's property*/
                bbb = arg2;
                /*the following "q" is a local variable, so inside another function, it can not be called. */
                var q = 3;
            }
            function M2()
            {
                document.writeln("value of 'bbb' is : " + bbb + "<br>");
                document.writeln("value of 'window.bbb' is : " + window.bbb + "<br>");
                document.writeln("value of 'this.bbb' is : " + this.bbb + "<br>");
                document.writeln("value of 'this.qqq' is : " + this.qqq + "<br>");
            //alert("q is"+ q);
            }
    
            var m1 = new M1(8, 9);
            m1.info = function()
            {
                document.writeln("value of 'this.qqq' inside of m1.info is : " + this.qqq + "<br>");
            };
            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("<br>");
            document.writeln("attribute 'qqq' of 'this' outside of function is : " + this.qqq + "<br>");
            document.writeln("attribute 'bbb' of 'this' outside of function is : " + this.bbb + "<br>");
            document.writeln("attribute 'qqq' of 'm1' outside of function is : " + m1.qqq + "<br><br>");
    
            document.writeln("the second step ..." + "<br><br>");
            M1(2, 3);
            M2();
            document.writeln("<br>");
            document.writeln("attribute 'qqq' of 'this' outside of function is : " + this.qqq + "<br>");
            document.writeln("attribute 'bbb' of 'this' outside of function is : " + this.bbb + "<br>");
        </script>
        
        <body>
        </body>
    </html>

    输出结果:

    value of 'this.qqq' inside of m1.info is : 8
    value of 'bbb' is : 9
    value of 'window.bbb' is : 9
    value of 'this.bbb' is : 9
    value of 'this.qqq' is : undefined
    
    attribute 'qqq' of 'this' outside of function is : undefined
    attribute 'bbb' of 'this' outside of function is : 9
    attribute 'qqq' of 'm1' outside of function is : 8
    
    the second step ...
    
    value of 'bbb' is : 3
    value of 'window.bbb' is : 3
    value of 'this.bbb' is : 3
    value of 'this.qqq' is : 2
    
    attribute 'qqq' of 'this' outside of function is : 2
    attribute 'bbb' of 'this' outside of function is : 3

    3)嵌套函数

    例 3.3.1

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

    输出结果:

    value of 'i' is : 0

    4)Function用法

    例 3.4.1

    <html>
    <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("value of f(1, 1) is : " + f(1, 1));
        </script>
        
        <body>
        </body>
    </html>

    输出结果:

    value of f(1, 1) is : 2 

    5)构造函数的用法:

    例 3.5.1

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    </head>
    
        <script>
            function Student(name, age)
            {
                /* Note :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) + "<br>");
            //typeof(p) is object
            p.parti();
            p.age = 4;
            p.parti();
            /*the following two methods can also access some properties.*/
            document.writeln('value of p["age"] is : ' + p["age"] + "<br>");
            document.writeln('value of p["a" + "ge"] is : ' + p["a" + "ge"] + "<br>");
    
    
            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>
        
        <body>
        </body>
    </html>

    输出结果:

    typeof p is : object
    名字是 : jeri
    年纪是 : 3
    名字是 : jeri
    年纪是 : 4
    value of p["age"] is : 4
    value of p["a" + "ge"] is : 4
    p是Student的实例
    p是Object的实例 

    例 3.5.2

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    </head>
    
        <script>
            function f2()
            {
                this.lll = "马克-to-win";
                document.writeln("where is 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 is : " + typeof f5 + "; typeof f2 is : " + typeof f2 + "; value of f5 is : " + f5 + "<br>");
            document.writeln("<br>");
            document.writeln("f5.lll is : " + f5.lll + "<br>'window.lll' is : " + window.lll + "<br>'lll' is : " + lll + "<br>");
            document.writeln("<br>");
            var f6 = new f2();
            document.writeln("typeof f6 : " + typeof f6 + " ; typeof f2 is : " + typeof f2 + "; value of f6 is :  " + f6 + "<br>");
            document.writeln("<br>");
            document.writeln("f6.lll is : " + f6.lll + "<br>'window.lll' is : " + window.lll + "<br>'lll' is : " + lll + "<br>");
            
            var zhanwei = "zhanwei";
        </script>
        
        <body>
        </body>
    </html>

    输出结果:

    where is in f2
    typeof f5 is : string; typeof f2 is : function; value of f5 is : Hello 马克-to-win
    
    f5.lll is : undefined
    'window.lll' is : 马克-to-win
    'lll' is : 马克-to-win
    
    where is in f2
    typeof f6 : object ; typeof f2 is : function; value of f6 is : [object Object]
    
    f6.lll is : 马克-to-win
    'window.lll' is : 马克-to-win
    'lll' is : 马克-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

    注: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

    注:onload就是等页面加载完后才执行。

    例 3.7.1

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
            function a(b)
            {
    document.write("part 1");
            }
    
            //-->
        </SCRIPT>
    </head>
    <body onload='a("a","b","c")'>
    part2,onload 会在part1和part2打印之后再执行。
    </body>

    输出结果:

    part 1

    例 3.7.2

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <script LANGUAGE="JavaScript">
            <!--
            function a(b)
            {
    document.write("part 11");
            }
    document.write("part 5");
            //-->
        </script>
    </head>
    <body onload='a("a","b","c")'>
    part2,onload 会在part 11和part2打印之后再执行。
    </body>

    输出结果:

    part 11

    例 3.7.3

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <script language="JavaScript">
            <!--
            function a(b)
            {
    document.write(document.body.innerHTML + "part 11");
            }
    document.write("part 5");
            //-->
        </script>
    </head>
    <body onload='a("a","b","c")'>
    part2,onload 会在part 11和part2打印之后再执行。
    </body>

    输出结果:

    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">
            <!--
            function a(b)
            {
                document.write(document.body.innerhtml + "b is " + b);
                /*function.arguments[] (collection)
    the values passed to the function when it is called.with firebug, we can directly see arguments*/
                var n = arguments.length;
                document.write(n);
                for (var i = 0; i < n; i++)
                {
                    document.write(arguments[i]);
                    document.write("ok");
                }
            }
            document.write("part 1");
            //-->
        </script>
    </head>
    <body onload='a("a","b","c")'>
    part2,onload 会在part1和part2打印之后再执行。
    </body>
    

    输出结果:

    part 1 part2,onload 会在part1和part2打印之后再执行。 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


    3



    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()

    注: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 
  • csdnceshi14 2020-01-16 17:21:58

    来源:null和undefined的==和===的比较1 查看详情

    ;山东人

  • zhou_RR 2020-01-13 16:54:58

    来源:简单语法5 查看详情

    Java大数据培训学校全套视频课程:"java大数据培训学校全套教材"系列课程由750集视频构成,基本就是

    1)时下流行的java培训学校主流内部教材,

    2)和市面上培训学校的通 行的课程体系几乎一样。

    3)所以这套课程都能自己学下来,等于上了培训学 校一次,完全可以找个java工程师的工作了。

    本门课程为"java大数据培训学校全套教材"系列课程的第二十篇,学习Js,构造函数,局部变量等相关概念让大家对JS 基础编程打下好的基础。

没有更多了