객체의 활용

sim7688 2020. 8. 2. 22:18

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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'){
		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>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day2" type="button" value="night" onclick="
	  nightDayHandler(this);
    ">
 
  <ol>
  	<li><a href="1.html">HTML</a></li>
  	<li><a href="2.html">CSS</a></li>
  	<li><a href="3.html">JavaScript</a></li>
  </ol>
  	
  <p>
  	<span id="first" class="js">자바스크립트</span>는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어이다. 
  	그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 
  	또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. <span class="js">자바스크립트</span>
  </p>
    
</body>
</html>

중복되지 않는 코드를 바꿔서

body라는 객체에 변수를 담을 것이다.

객체에 property 사이에는(구분할때는) 꼭 콤마를 넣어줘야한다

  // 객체화
  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;
  	}
  }

728x90