JS基礎闖關大作戰

TZQ_DO_Dreamer發表於2014-09-14
JS
第一關：
<script type ="text/javascript">

     //宣告一個函式，求兩個數的和，測試你宣告的函式
     function sum(a ,b){
         return a+b ;
    }
    document.write (sum(2,3 ));

</script>


第二關：
<script type ="text/javascript">

     //宣告一個函式，求任意個數的和，測試你宣告的函式
    document.write (sum(2,3 ,7)+"<br />" );
    document.write (sum(2,3 ,7,4,3 ,1)+"<br />" );
    document.write (sum("Hello" ," ","Tom" )+"<br />");
    
     function sum () {
         var result = 0;
         //函式實際呼叫執行時傳入的引數，可以從 arguments偽陣列中獲取
         for(var i = 0 ; i < arguments.length ; i++) {
            result += arguments [i];
         }
         return result;
    }

</script>


第三關：

<script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return [23,true ,"恭喜通過第 03關!" ];
    }
    
     //如何得到"恭喜通過第 03關!" ？
    document.write (fun01()[2]);

</script>

第四關：
<script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return {
            stuName : "Tom",
            stuAge : 12,
            stuWords : "恭喜通過第 04關!"
         };
    }
    
     //如何得到"恭喜通過第 04關!" ？
    document.write (fun01().stuWords);

</script>



第五關：

<script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return function (){
             return " 恭喜通過第 05關!" ;
         };
    }
    
     //如何得到"恭喜通過第 05關!" ？
    document.write (fun01()());

</script>


第六關：

<script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return {
            sayHello : function (){
                 return " 恭喜通過第 06關!" ;
             }
         };
    }
    
     //如何得到"恭喜通過第 06關!" ？
    document.write (fun01().sayHello());

</script>

第七關：
  <script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return "abc" ;
    }
    
    fun01.subFun = function(){
         return " 恭喜通過第 07關!" ;
    }
    
     //如何得到"恭喜通過第 07關!" ？
    document.write (fun01.subFun ());

</script>   


第八關：
<script type ="text/javascript">

     //已有函式如下
     function fun01(){
         return "abc" ;
    }
    
    fun01.subObj = {
        subFun : function (){
             return " 恭喜通過第 08關!" ;
         }
    };
    
     //如何得到"恭喜通過第 08關!" ？
    document.write (fun01.subObj.subFun ());

</script>

第九關：
<script type ="text/javascript">

     //已有函式如下
    (function (w ){
        w.jQuery = function(){
             return " 恭喜通過第 09關!" ;
         };
    })(window);
    
     //如何得到"恭喜通過第 09關!" ？
    document.write (window.jQuery ());

</script>

第十關：
<script type ="text/javascript">

     //已有函式如下
    (function (w ){
        w.$ = function(){
             return {
                text : function(){
                     return " 恭喜通過第 10關!" ;
                 }
             };
         }
    })(window);
    
     //如何得到"恭喜通過第 10關!" ？
    document.write ($().text());

</script>





第十一關；
<script type ="text/javascript">

     //已有函式如下
    (function (w ){
        w.$ = function(){
             return function(){
                 return " 恭喜通過第 11關!" ;
             };
         }
    })(window);
    
     //如何得到"恭喜通過第 11關!" ？
    document.write (window.$()());

</script>

第十二關：【boss來了···】
<script type ="text/javascript">

     //已有函式如下
    (function (w ){
        w.$ = function(f){
             return f();
         }
    })(window);
    
     function sayHello(){
         return " 恭喜通過第 12關!" ;
    }
    
     //如何得到"恭喜通過第 12關!" ？不允許直接呼叫 sayHello
    document.write (window.$(sayHello));

</script>


第十三關：
<script type ="text/javascript">
     //已有函式如下
    (function (w ){
        w.$ = function(id){
             return core(document.getElementById (id));
         }
        
         function core(dom ){
             var obj = {
                    element : dom,
                    text : function () {
                         return this.element.firstChild.nodeValue;
                     }
                 };
            obj.text ();
             return obj;
         }
        
    })(window);

    window.onload = function(){
        
         //如何得到"恭喜通過第 13關!" ？
        alert ($("btn" ).text ());
    }

</script>
</head>
<body>

    <button id="btn"> 恭喜通過第13關 !</button>

</body>
</html>


第十四關：【大boss】

<script type ="text/javascript">
     //已有函式如下
    (function (w){
        w.$ = function(argument){
             if(argument instanceof Function){
                window.onload = argument ;
             }else if(argument instanceof String || typeof argument == "string"){
                 var ele = document.getElementById(argument );
                 return $(ele );
             }else if(argument instanceof Element){
                 return {
                    ele : argument ,
                    text : function(){
                         return this.ele.firstChild.nodeValue;
                     }
                 };
             }
         }
    })(window);
    
     //如何在頁面載入完成時得到“恭喜通過第 14關! ”？
    $(function (){
        alert ($("btn" ).text ());
    });
    
     /* window.onload = function(){
        alert("ttt");
    }; */

</script>
</head>
<body>

    <button id="btn"> 恭喜通過第14關 !</button>

</body>






第十四關：【終極boss】

<script type ="text/javascript">
     //已有函式如下
    (function (w){
        w.$ = function(argument){
             if(argument instanceof Function){
                window.onload = argument ;
             }else if(argument instanceof String || typeof argument == "string"){
                 var ele = document.getElementById(argument );
                 return $(ele );
             }else if(argument instanceof Element){
                 return {
                    ele : argument ,
                    text : function(){
                         return this.ele.firstChild.nodeValue;
                     },
                    click : function(callBack){
                        this.ele.onclick = callBack ;
                     }
                 };
             }
         }
    })(window);
    
     //如何在點選按鈕後彈出“恭喜通過第 15關! ”？
    $(function (){
        $ ("btn" ).click (function(){
            alert ($(this ).text ());
             //this.firstChild.nodeValue;
         });
         /* ele.onclick = function(){
            
        }; */
    });

</script>


------恭喜你順利通關！----


相關文章