대상 상속

6459 단어
(1) 주소 표시줄 매개변수 가져오기



    
     
    
        window.onload = function(){
            //url?aa=tom#12
            var data = window.location.search;//?aa=tom
            var hash = window.location.hash;//#12
            alert(hash);//#12
            var oSpan = document.getElementById('span01');
            // alert(data);//?aa=tom
            var arr = data.split('=');
            // alert(arr);//?aa,tom
            var name = arr[1];
            oSpan.innerHTML = name;
        }
    


    

(2)Math



    
    Math
    
        // var num = Math.random();
        // alert(num);// 0-1 
        var a = 10;
        var b = 20;
        // var num = Math.random()*(b-a)+a;
        // alert(num);// 10-20 
        var arr = [];
        for(var i=0; i<20; i++){
            // var num = Math.floor(Math.random()*(b-a)+a);// ,10-19
            var num = Math.floor(Math.random()*(b-a + 1)+a);// ,10-20
            
            arr.push(num);// 
        }
        alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19
    


    



(3) 단일 객체 만들기



    
     
    
        var Tom = {
            //  
            name:'tom',
            age:18,
            //  
            showName:function(){
                alert(this.name);
            },
            showAge:function(){
                alert(this.age);
            }
        }
        // 
        alert(Tom.name);
        alert(Tom.age);
        
        // 
        Tom.showName();
    


    



(4) 구조 함수



    
     
    
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.showName = function(){
                alert(this.name);
            }
            this.showAge = function(){
                alert(this.age);
            }
            this.showJob = function(){
                alert(this.job);
            }
        }
        //new , 
        var Bob = new Person('bob',18,' ');
        Bob.showJob();
        var Alex = new Person('alex',19,' ');
        Alex.showJob();
        alert(Bob.showName == Alex.showName);//false
    


    



(5) 플랜트 모드에서 객체 만들기



    
     
    
        function Person(name,age,job){
            // 
            // var o = new Object();// 
            var o = {};// 
            o.name = name;
            o.age = age;
            o.job = job;
            o.showName = function(){
                alert(this.name);
            }
            o.showAge = function(){
                alert(this.age);
            }
            o.showJob = function(){
                alert(this.job);
            }
            return o;
        }
        var Tom = Person('tom',18,' ');
        Tom.showJob();
        var Jack = Person('jack',19,' ');
        Jack.showJob();
    


    



(6) 원형 모드



    
     
    
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            Person.prototype.showName = function(){
                alert(this.name);
            }
            Person.prototype.showAge = function(){
                alert(this.age);
            }
            Person.prototype.showJob = function(){
                alert(this.job);
            }
        }
        // showName , 
        var Lucy = new Person('lucy',18,' ');
        // , 
        Lucy.showName = function(){
            alert(' ' + this.name);
        }
        Lucy.showName();// lucy
        var Lily = new Person('lily',19,' ');
        Lily.showName();//lily
        alert(Lucy.showName == Lily.showName);//false
    


    



(7)call 및 apply



    
    call apply
    
        /*
        call apply 
         this, apply 
        */
        function aa(a,b){
            alert(' this ' + this + ', a ' + a + ', b ' + b);
        }
        // this [object Window], a 2, b 3
        // aa(2,3);
        // this abc, a 2, b 3
        // aa.call('abc',2,3);
        // this abc, a 2, b 3
        aa.apply('abc', [2,3]);
    


    



(8) 함수의 계승



    
     
    
        // 
        function Fclass(name, age){
            this.name = name;
            this.age = age;
        }
        Fclass.prototype.showName = function(){
            alert(this.name);
        }
        Fclass.prototype.showAge = function(){
            alert(this.age);
        }
        // 
        function Sclass(name, age, job){
            // call apply 
            Fclass.call(this, name, age);
            this.job = job;
        }
        // : 
        Sclass.prototype = new Fclass();
        Sclass.prototype.showJob = function(){
            alert(this.job);
        }
        // , 
        var Driver = new Sclass('tom',18,' ');
        Driver.showName();
        Driver.showAge();
        Driver.showJob();
    


    



(9) 신규 선택기



    
     
    
        window.onload = function(){
            var oDiv = document.querySelector('#div1');
            alert(oDiv);// [object HTMLDivElement], Div
            // querySelectorAll
            var aLi = document.querySelectorAll('.list li');
            alert(aLi.length);//8
        }
    


    
div
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

좋은 웹페이지 즐겨찾기