JAVASCRIPT) 비교연산자와 블리언

비교연산자 : 좌항 VS 우항 

좌항과 우항의 값을 비교하여 true 또는 false라는 boolean의 값을 나타내는 것.

1. ===
2. <
3. >
4. =<
5. =>

조건문

lf의 ()안의 값에 따라 실행되는 것이 달라짐.  

if (true) {

}

else {

}

리팩토링 중복의 제거

 - 코드의 유지보수 편리

•  this : 코드가 포함되어있는 태그를 가리킴.
• var target = document.querySelector('body')

배열

배열 만드는 방법

var 과일 = ["사과", "배"]

인덱스 사용하여 해당 요소 조회하기

과일[0] == "사과"

배열의 갯수 

과일.length

배열에 포도 추가하기

과일.push('포도')

반복문

while () {

}

()의 값이 false가 될때까지  {}안의 코드들이 실행되고 그 다음에 {} 뒤의 코드가 실행됨.

반복문을 언제 종료 시킬 지 조건을 ()에 달아줌.

예시
	<script>
	var colors = ['red', 'blue', 'pink']
	</script>
    
	<h2>colors</h2>
    
	<script>
		var i = 0;
		while(i < colors.length) {
			document.write('<li><a href="http://a.com/' + colors[1] + '">'+colors[i]+'</a></li>');
			i = i + 1;
		}
	</script>

---

배열과 반복문의 활용

Selector를 통해 태그를 가져오기

 1. document.querySelector

  2. document.querySelectorAll = > 배열 형태로 저장된 것을 확인할 수 있음.

배열에 담긴 태그 활용하기

var alist = document.querySelectorAll('a');

console.log(alist[1]);

console.log(alist.length);

배열과 반복문으로 배경화면, 글자색바뀌는 버튼 만들기

(onclick활용)

<input type="button" value="night" id="night_day" onclick="
	var target = document.querySelector('body');

	if(this.value === 'night') {
		target.style.backgroundColor='black';
		target.style.color='white';
		this.value = 'day';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while (i < alist.length) {
		    console.log(alist[i]);
		    alist[i].style.color = 'powderblue';
		    i = i + 1;
		}
	}
	else {
		target.style.backgroundColor='white';
		target.style.color ='black';
		this.value = 'night';
		
		var alist = document.querySelectorAll('a');
		var i = 0;
		while (i < alist.length) {
		    console.log(alist[i]);
		    alist[i].style.color = 'blue';
		    i = i + 1;
		}   
	 }
	">;

---