대상

(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

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