Orchemi

Orchemi

I start where others stop.

[JS] 2.4. 반복문

작성:    

업데이트:

카테고리:

태그: , ,

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작


반복문: while

만약 웹 브라우저에 1 2 3 4의 내용을 가지는 li 태그를 써내려간다면 다음과 같이 쓸 수 있다.

document.write("<li>1</li>");
document.write("<li>2</li>");
document.write("<li>3</li>");
document.write("<li>4</li>");


그런데 중간에 2와 3을 여러 번 반복하고 싶을 수 있다. 그렇다면 똑같은 코드를 여러 번 반복하면 되겠지만, 우리는 반복을 최대한 줄여야 하는 숙명을 가졌기 때문에 반복문을 사용한다.

document.write("<li>1</li>");
var i = 0;
while (i < 2) {
  document.write("<li>2</li>");
  document.write("<li>3</li>");
  i++;
}
document.write("<li>4</li>");

이를 단순히 표현하면 아래와 같다.

while(조건이 true인동안 코드 실행){
  실행할 코드
  반복 종료까지 증감해야 하는 변수의 조작
}



while (조건이 true인동안 코드 실행):
  실행할 코드
  반복 종료까지 증감해야 하는 변수의 조작

python의 반복문과 중괄호와 콜론을 제외하고는 다를 것이 없다. 다만 자바스크립트에서는

while문의 마지막에는 i를 1 증가시켜줄 때 i=i+1, i+=1, i++ 모두 사용이 가능하다.


반복문의 활용

앞서 만든 다크모드의 HTML 파일을 보자.

<body style="color: black; background-color: white;">
  <h1><a href="#">WEB</a></h1>

  <input
    type="button"
    value="night"
    onclick="
    var target = document.querySelector('body')
    if(this.value === 'night'){
      target.style.color='white';
      target.style.backgroundColor='black';
      this.value = 'day';
      }

    } else {
      target.style.color='black';
      target.style.backgroundColor='white';
      this.value = 'night';
      }
    }
  "
  />

  <ul>
    <li><a href="#">내용</a></li>
    <li><a href="#">내용</a></li>
    <li><a href="#">내용</a></li>
  </ul>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>

다크모드 버튼을 누를 때 night 모드면 링크의 색을 powderblue 색으로, day 모드면 링크의 색을 blue 모드로 바꿔보겠다.

우선 document에 있는 모든 a 태그를 배열에 모은다. 이는 document.querySelectorAll(CSS selector)을 이용한다. 이전에 사용했던 document.querySelector(CSS selector)는 document에 있는 0번째 selector에만 해당되었다. multiple하게 찾는 것은 뒤에 All을 붙이기만 하면 된다.

이렇게 모은 리스트는 각각의 요소들이 태그의 정보를 담고 있다. 따라서 리스트 내부의 태그 각각에 대해 .style.color='blue'; 등으로 속성을 지정해주면 된다. 반복문을 사용하는 이유는 리스트에 스타일을 씌울 수는 없고 각각의 항목 태그들에 개별적으로 스타일을 지정해주어야 하기 때문이다.

<input
  type="button"
  value="night"
  onclick="
    var target = document.querySelector('body')
    if(this.value === 'night'){
      target.style.color='white';
      target.style.backgroundColor='black';
      this.value = 'day';

      var i = 0;
      var a_arr = document.querySelectorAll('a')

      while(i < a_arr.length){
        a_arr[i].style.color='powderblue';
        i++;
      }

    } else {
      target.style.color='black';
      target.style.backgroundColor='white';
      this.value = 'night';

      var i = 0;
      var a_arr = document.querySelectorAll('a')

      while(i < a_arr.length){
        a_arr[i].style.color='blue';
        i++;
      }
    }
  "
/>

그렇게 만든 코드는 위와 같다. 배열의 index를 반복문의 index를 이용해 채워넣으며 배열의 몇 번째, 즉 document에서 몇 번째에 위치하는 a 태그를 타겟으로 하는지를 설정하고 이 각각의 스타일을 지정해주면 되겠다.


Chapter 02. 종료

image

배열과 반복, 조건문에 대해서 배웠다. 1강에 비해 프로그래밍 언어로서의 정체성을 강렬하게 보여준 챕터였기 때문에 정리할 내용들이 많아 시간을 많이 들였다.

배열의 메서드나 for 반복문 등 아직 다루지 않은 것들이 많은데 더 깊고 다양하게 다뤄보고 싶다.

댓글남기기

참고