🎈 반복문

• Consol.log() Consol창에 괄호 안에 있는 결과가 출력된다.
• while() 조건식이 true일 경우, 계속해서 반복한다.
• for() 정해진 횟수만큼 반복하며, 반복횟수를 알고 있을 때 사용한다.

let count = 1;
for (let i = 0; i <= 5; i++) {    
  count = count + 1;
}

// 0부터 5까지 1씩 증가시키면서 계속 반복하라는 뜻이다.

for (반복조건) {
   // 반복조건이 맞으면 실행할 코드
}

• querySelectorAll() 괄호 안의 모든 태그를 찾아 배열로 출력해준다.
  
  
  

📋 실습

<input type="button" value="night" 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) {
            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) {
            alist[i].style.color = 'blue';
            i = i + 1;
        }
    }
">
alist 변수로 모든 a를 찾아 배열화시키고, i=0 변수를 지정 후
반복문(while)을 활용해 모든 a에 style 이벤트를 준다.

✔ 결과물
night 버튼을 누를 시 day로 바뀌며, 텍스트들의 색이 powderblue로 변경된다. 다시 한 번 버튼을 누르면 night로 바뀌며 기존 색으로 변경된다.

WEB

1. HTML
2. CSS
3. JavaScript