33. 객체의 활용

 

앞서작성 했던 예제 코드 입니다.

 

<script> 
function nightDayHandler() {
	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>

 

위 코드에서 중복되지 않은 함수명으로 작성했던 코드를 바꿔서 Body라고 하는 변수에 객체를 담아보겠습니다.

... 생략 ...
<script>
   .. 생략 ..
   var Body{

   }
   function nightDayHandler(self){
         .. 생략 ..
   }
</script>

 

그리고 이 객체에 프로퍼티를 setColor를 지정한 다음 function을 지정하면 된다.

... 생략 ...
<script>
   .. 생략 ..
   var Body = {
      setColor: function(color) {
        document.querySelector('body').style.color = color;
      },
      setBackgroundColor: function(color) {
        document.querySelector('body').style.backgroundColor = color; 
      }
   }
   
</script>

 

그리고 객체에서는 프로퍼티와 프로퍼티를 구분하기 위해 콤마를 사용 합니다 !

 

마찬가지로 LinksSetColor() 도 객체로 만들어봅니다.

... 생략 ...
<script>
   .. 생략 ..
   var Body = {
      setColor: function(color) {
        document.querySelector('body').style.color = color;
      },
      setBackgroundColor: function(color) {
        document.querySelector('body').style.backgroundColor = color; 
      }
   }
   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;
        }
      }
   }
</script>

 

이렇게 해서 함수가 무엇인지 확인 됐습니다. 지금까지 사용해온 document 가 객체 였고, querySelector()는 함수 이며, 객체에 소속돼 있었기 때문에 메서드 라는 사실을 알게되었습니다.