생활코딩 Javascript #15 객체 활용

Javascript #15 객체 활용

 

 

 

33. 객체 활용

 

1) 객체화 시키기

BodySetBackgroundColor('black');
BodySetColor('white');
LinkSetColor('powderblue');

↓ 아래와 같은 형태를 취하기 위해 앞에서 정의했던 함수들을 객체화 시켜줄 것임

Body . setBackgroundColor('black');
Body . setColor('white');
Link . setColor('powderblue');

 

 

function BodySetColor(color){
    document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
}

↓↓  객체화 시키기 ↓↓ 

var Body = {
    setColor:function (color){
    	document.querySelector('body').style.color = color;
    },
    setBackgroundColor:function (color){
    	document.querySelector('body').style.backgroundColor = color;
    }
}

- body 라는 변수에 객체를 담을 것

- 이 객체의 프로퍼티로 setColor 를 지정

- 프로퍼티는 콤마 , 로 구분

 

 

2) 같은 방법으로 객체화 시키기

function LinkSetColor(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while ( i< alist.length){
        alist[i].style.color = color;
        i = i + 1;
    }
}

↓↓  객체화 시키기 ↓↓ 

var Links = {
    setColor:function (color){
        var alist = document.querySelectorAll('a');
        var i = 0;
        while ( i< alist.length){
            alist[i].style.color = color;
            i = i + 1;
        }        
    }
}