JAVASCRIPT) 객체

<script>
	function bodySetBackgroundColor(color) {
		document.querySelector('body').style.backgroundColor = color;
	}
	function bodysetColor(color) {
		document.querySelector('body').style.color = color;
	}


	function nightAndDayController(self) {
		
	var target = document.querySelector('body');
	
	if(self.value === 'night') {
		bodySetBackgroundColor('black');
		bodysetColor('white');
		self.value = 'day';
		
		setColor('powderblue);
	}
	else {
		bodySetBackgroundColor('white');
		bodysetColor('black');
		self.value = 'night';
		 
		setColor('blue');
	 }
	}
    </script>

위 코드를 보면 body라는 태그의 배경과 글씨색을 설정하는 함수의 생성 시 

함수 명의 중복이 생길 수 있다.

그러므로 이런 중복을 막기 위해 Body라는 객체(그룹)를 생성하여 그 안에 서로 다른 기능을 가진 함수를 만드는 것이 필요하다!!

	function nightAndDayController(self) {
		
	var target = document.querySelector('body');
	
	if(self.value === 'night') {
		Body.setBackgroundColor('black');
		Body.setColor('white');
		self.value = 'day';
		
		setColor('powderblue);
	}
	else {
		Body.setBackgroundColor('white');
		Body.setColor('black');
		self.value = 'night';
		 
		setColor('blue');
	 }
	}
    </script>

---

• 배열 : 순서대로 데이터를 저장하는 것.
• 객체 : 순서 없이 정보에 이름을 지정하여 저장하고, 그 저장한 이름을 가지고 정보를 꺼내는 것.

coworks라는 변수에 객체들을 생성 후 데이터 추가하기(이 자체가 함수가 됨)

<script>
	var coworkers =  {
		"programmer" : "myeonghee",
		"designer" : "seongjin"
	}
	document.write("programmer : " + coworkers.programmer + "<br>");
	document.write("designer : " + coworkers.designer) +  "<br>";
	
</script>

함수 밖에서 데이터 추가하기

<script>
	var coworkers =  {
		"programmer" : "myeonghee",
		"designer" : "seongjin"
	}

	coworkers.bookkeeper = "Yaesun" // 새로운 데이터를 추가
	document.write("bookkeeper : " + coworkers.bookkeeper) +  "<br>";
	
</script>

객체의 이름에 공백 넣어 값(value)저장 방법

[" "] 대괄호 사용

<script>
    
	coworkers["data scientist"] = "Eunha" // 이름에 공백 넣는 방법
	document.write("data scientist : " + coworkers["data scientist"]) +  "<br>";
	
</script>

---

객체에 저장된 값(value)을 가져오기

<script>
	var coworkers =  {
		"programmer" : "myeonghee",
		"designer" : "seongjin"
	}
	document.write("programmer : " + coworkers.programmer + "<br>");
	document.write("designer : " + coworkers.designer) +  "<br>";
	coworkers.bookkeeper = "Yaesun" // 새로운 데이터를 추가
	document.write("bookkeeper : " + coworkers.bookkeeper) +  "<br>";
	coworkers["data scientist"] = "Eunha" // 이름에 공백 넣는 방법
	document.write("data scientist : " + coworkers["data scientist"]) +  "<br>";
	
</script>

검색 keyword : javascript object iterate

반복문과 in 사용하기(for, while) - key가 순서에 구애받지 않고 가져오게됨. 

<h2>Iterate</h2>
<script>
// 함수에 저장된 정보들을 가져오는 방법 // 객체와 반복문 사용하기
 for ( var key in coworkers) {
	 document.write(key + '<br>');
 }
</script>

Key

이 반복문을 이용해서 구해진 Key를 사용해서 아래와 같이 value를 가져올 수 있다.

<h2>Iterate</h2>
<script>
// 함수에 저장된 정보들을 가져오는 방법 // 객체와 반복문 사용하기
 for ( var key in coworkers) {
	 document.write(coworkers[key] + '<br>');
 }
</script>

value

---

객체프로퍼티와 메소드

coworkers라는 객체에 showAll이라는 함수 생성

<h2>Property & Method</h2>
<script>
	coworkers.showAll = function() {
		 for ( var key in coworkers) {
			 document.write(coworkers[key] + '<br>');
		 }
	}

	coworkers.showAll();	
</script>

but, 아래의 coworkers라는 변수의 이름이 다른 것으로 바뀌면 인식을 못하게 되므로,
함수 내의 변수 coworkers를 this로 바꾸어 줌.

<script>
	var coworkers =  {
		"programmer" : "myeonghee",
		"designer" : "seongjin"
	}
	document.write("programmer : " + coworkers.programmer + "<br>");
	document.write("designer : " + coworkers.designer) +  "<br>";
	coworkers.bookkeeper = "Yaesun" // 새로운 데이터를 추가
	document.write("bookkeeper : " + coworkers.bookkeeper) +  "<br>";
	coworkers["data scientist"] = "Eunha" // 이름에 공백 넣는 방법
	document.write("data scientist : " + coworkers["data scientist"]) +  "<br>";
	
</script>

[this 사용 후]

<h2>Property & Method</h2>
<script>
	coworkers.showAll = function() {
		 for ( var key in this) {
			 document.write(this[key] + '<br>');
		 }
	}

	coworkers.showAll();	
</script>

showAll이 key, 위 화면에 나타난 함수가 value가 됨.

 

• 객체(coworkers)에 소속된 함수(showAll) =>  메소드(Method)
• 객체(coworkers)에 소속된 변수("programmer") => 프로퍼티(Property)

---

객체의 활용

function nightAndDayController(self) {
		
	var target = document.querySelector('body');
	
	if(self.value === 'night') {
		Body.setBackgroundColor('black');
		Body.setColor('white');
		self.value = 'day';
		
		setColor('powderblue);
	}
	else {
		Body.setBackgroundColor('white');
		Body.setColor('black');
		self.value = 'night';
		 
		setColor('blue');
	 }
	}
    </script>

[함수를 객체 안에 넣기 전]

<script>
	function setColor(color) {
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while (i < alist.length) {
		    console.log(alist[i]);
		    alist[i].style.color = 'color';
		    i = i + 1;
		}
		
	}
	function bodySetBackgroundColor(color) {
		document.querySelector('body').style.backgroundColor = color;
	}
    
	function bodysetColor(color) {
		document.querySelector('body').style.color = color;
	}


	function nightAndDayController(self) {
		
	var target = document.querySelector('body');
	
	if(self.value === 'night') {
		bodySetBackgroundColor('black');
		bodysetColor('white');
		self.value = 'day';
		
		setColor('powderblue);
	}
	else {
		bodySetBackgroundColor('white');
		bodysetColor('black');
		self.value = 'night';
		 
		setColor('blue');
	 }
	}
    </script>

[함수를 객체 안에 넣은 후]

 

<body>
</head>
<script>
	var Links = {
		setColor:function (color) {
		
			var alist = document.querySelectorAll('a');
			var i = 0;
			while (i < alist.length) {
			    console.log(alist[i]);
			    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 nightAndDayController(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>

<input type="button" value="night" id="night_day" onclick="nightAndDayController(this)">
<input type="button" value="day" id="night_day" onclick="nightAndDayController(this)">
//★주의 ) 여기서 this는 자신 곧 input tag를 의미
</body>