[WEB2 JavaScript] 33. 객체의 활용 | 초코더

오늘은 객체를 활용해서 공부하는 시간을 가져볼게요.

우선 아래의 코드는 함수를 이용하여 night모드와 day모드를 만들어주었습니다.

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){
	if  (self.value === 'night'){
		BodySetBackgroundColor('black');
		BodySetColor('white');
		self.value = 'day'
		
		Links.setColor('powderblue');
	}else{
		BodySetBackgroundColor('white');
		BodySetColor('black');
		self.value = 'night'

		LinksSetColor('blue');
	}
}

 

그럼 객체를 이용하여 코드를 좀 더 간단히 만들어 보겠습니다.

Body라는 이름을 가진 객체를 선언해주고 setColor와 setBackgroundColor라는 프로퍼티를 만들어줍니다.

객체와 객체 사이에 콤마( , )를 붙여주세요!!

- setColor는 color의 속성을 변경해주는 함수

- setBackgroundColor는 background-color의 속성을 변경해주는 함수

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

 

그럼 객체의 선언부를 다짰으니 사용하는 부분의 코드를 짜보겠습니다.

객체는 Body.프로퍼티명(인자); 이런식으로 사용해줍니다. 

function nightDayHandler(self){
	if (self.value === 'night'){
		Body.setBackgroundColor('black');
		Body.setColor('white');
		self.value = 'day';
					
		LinksSetColor('powderblue');
	}else{
		Body.setBackgroundColor('white');
		Body.setColor('black');
		self.value = 'night';

		LinksSetColor('blue');
	}
}

 

그럼 LinksSetColor 부분도 객체화 시켜볼게요.

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 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){
	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');
	}
}