(반복문) while문, do while문, for문

반복문
반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.
예를 들어  '안녕하세요!'라는 문구를 100회 출력하려면 출력문을 100번 작성해야 하지만 반복문을 이용하면 1줄만으로도 문장을 100회 출력 할 수 있다.

 

반복문에는 while문, do while문, for문이 있다.

---

while문
while문은 조건식을 만족할 때 까지 코드를 여러 번 반복 실행한다.
while문은 조건식을 만족할 때까지 {...}안의 코드를 실행시키는데, while문의 실행순서는
     

1 조건식을 검사하고 만족하면 
     ↓
2 중괄호 안에 있는 코드와 증감식을 실행하고
     ↓
3 다시 조건식을 검사한다. 그리고 만족하면
     ↓
2 중괄호 안에 있는 코드와 증감식을 실행한다.


[기본형]

var 변수 = 초기값;

while (1, 3조건식) {
      2
      자바스크립트 코드;
      증감식;
}

    <script>
      var i = 1;

      while (i <= 10) {
        document.write(i, "<br />");
        i++;
      }

      document.write("--------------------------", "<br />");

      // while문을 사용하여 1부터 30까지 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력

      var i = 1;

      while (i <= 30) {
        if (i % 2 == 0 && i % 6 == 0) {
          document.write(i, "<br />");
        }
        i++;
      }

      document.write("--------------------------", "<br />");

      // while문을 사용해서 20부터 10까지의 숫자 중 짝수일 경우 파란색,
      // 홀수일 경우 빨간색으로 화면에 출력해주세요.

      var i = 20;

      while (i >= 10) {
        if (i % 2 == 0) {
          document.write('<p class = "blue">' + i + "</p>");
        } else {
          document.write('<p class = "red">' + i + "</p>");
        }
        i--;
      }
    </script>

---

do while문
while문의 경우 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정한다.
do while문은 반드시 한 번은 코드를 실행한 후에 조건식을 검사한다.

[기본형]
var 변수 = 초기값;
do {
  자바스크립트 코드;
  증감식;
} while (조건식);

    <script>
      var i = 10;

      do {
        document.write("Hello", "<br/>");
        i--;
      } while (i > 3);
    </script>

---

 

for문★★★
for문도 while문과 마찬가지로 조건식을 만족할 때까지 코드를 반복 실행한다.
사용 방법은 while문과 동일하지만 문법이 더 간단해서 for문을 가장 많이 사용한다.

[기본형]
for (초기값; 조건식; 증감식) {
       자바스크립트 코드;
}
실행순서 : 초기값 → 조건식 검사 → 자바스크립트 코드 실행 → 증감식 → 조건식 검사 → 자바스크립트 코드 실행 → 증감식...

    <script>
      // 0~9까지 반복  =  총 10번
      for (var i = 0; i < 10; i++) {
        document.write(i + 1, "<br/>");
      }

      // for문을 이용해서 1부터 100까지의 숫자 중에 5의 배수일 경우 빨간색,
      // 7의 배수일 경우 초록색, 5의 배수이면서 7의 배수일 경우 파란색으로 출력.
      for (var i = 1; i < 101; i++) {
        if (i % 5 == 0 && i % 7 != 0) {
          //5의 배수면 빨간색으로 출력
          document.write("<p class='red'>" + i + "</p>");
        } else if (i % 7 == 0 && i % 5 != 0) {
          //7의 배수면 초록색으로 출력
          document.write("<p class='green'>" + i + "</p>");
        } else if (i % 5 == 0 && i % 7 == 0) {
          //5와 7의 공배수면 파란색으로 출력
          document.write("<p class='blue'>" + i + "</p>");
        }
      }
    </script>