객체의 활용

예시) 주/야간모드 토글버튼 : 객체

before

<script>
function LinksSetColor(color){
    var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = color;
            i = i + 1;
        }
}
function BodySetColor(color){
    document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
        BodySetBackgroundColor('black');
        BodySetColor('white');
        self.value = 'day';

        LinksSetColor('powderblue');

    } else {
        BodySetBackgroundColor('white');
        BodySetColor('black');
        self.value = 'night';

        LinksSetColor('blue');
    }
}
</script>

after

<script>
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;
        }
    }
}
var Body = {
    setColor : function(color){
        document.querySelector('body').style.color = color;
    },
    setBackgroundColor : function(color){
        document.querySelector('body').style.backgroundColor = color;
    }
}
function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day';

        Links.setColor('powderblue');

    } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
    }
}
</script>

set : 설정하기

document.querySelector('body').style.color

document → 객체임을 알 수 있음

BodySetBackgroundColor('white'); → Body.setBackgroundColor('white');

BodySetColor('black'); → Body.setColor('black');

LinksSetColor('blue') → Links.setColor('blue')

querySelector('body') 객체에 속해있는 함수 → 메소드(Method)

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

객체가 2개 이상일 때

프로퍼티와 프로퍼티를 구별해 주기 위해 ' , ' 콤마 꼭 찍어줘야 인식함

변수명 : Body, Links

프로퍼티 : setColor, setBackgroundColor