[자바스크립트] - 반복문(while문, for문, do while문)

반복문

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

ex) 게시판 같은 반복해서 나와야하는 곳에 자주 쓰임

 

** if문과 반복문은 세트로 많이 쓴다 

---

1. while문 : ~하는 동안

while문은 조건식을 만족할 때까지 코드를 여러 번 반복 실행한다. 
조건식을 만족할 때까지 { }안의 코드를 실행시키는데, 
    
< while문의 실행순서 >
    먼저 1조건식을 검사하고 만족하면 
    중괄호 안에 있는 2자바스크립트 코드와 증감식을 실행하고
    다시 3조건식을 검사한다. 그리고 만족하면 
    다시 중괄호 안에 있는 2자바스크립트 코드와 증감식을 실행한다. 

    [ 기본형 ]
    var 변수명 = 초기값;

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

var i = 1;

while (i <= 10) {
   document.write(i);
   i++;
}

---

예제 ) 

 var i = 1;  //반복문은 변수명으로 i 많이 쓴다.

      while (i <= 10) {

        document.write("0" + i, "<br>");

        i++;

      } 

i가(1이) 10보다 작은지 검사 -> 작으니깐 아래의 document.write를 실행하고 i++;증감식을 계산,

그럼 2가 되고 다시 i <= 10을 검사하러감.

또 작으니깐 document.write를 실행하고 i++;증감식을 계산 이렇게 10보다 같거나 작을때까지 반복한다. 

---

예제 ) 

 

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

      var i2 = 1;

      while (i2 <= 30) {

        if (i2 % 2 == 0 && i2 % 6 == 0) {

          document.write(i2, "<br>");

        }

        i2++;

      }

 

* while 문안에 if 문 들어갈 수 있음

 

(i2 <=30) 변수 i2가 30보다 작은지 검사 -> 1이여서 작으니깐 아래 if문을 실행하러 간다->

if 만약에 i2를 2로 나눈 값이 0과 같으면서 i2를 6으로 나눈 값도 일치하다면(&&- 모두 다 true) ->

브라우저에 i2 값을 써라 -> 그 뒤 i2를 증감식에 넣어서 증감시킨다. -> 다시 조건식 i2 <=30을 검사하러 간다.

-> 2니깐 또 다시 반복 -> 30이 될때까지 반복해라

 

* 2의 배수 표기법 ->  변수 % 2 == 0   변수를 2로 나눈 값이 0 과 같아야 2의 배수(짝수가 된다)

* 6의 배수는 -> 변수 % 6  == 0

 

%가 나머지값  /는 나누기 ~헷갈리지 말기~

---

예제 ) 

//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>

    <p class="blue"></p>

    <p class="red"></p>

 

 <style>

      .blue {

        color: blue;

      }

      .red {

        color: red;

      }

    </style>

 

* 문자열에 html태그를 넣으면 출력시킬 수 있다. "" '' 에 <tag> 넣어주면 출력시킬 수 있음.

양옆에 문자가 있으니깐 문자결합연산자+로 더해준다.

---

 

 2.  for문 ★★★ 

 

for문도 while문과 마찬가지로 조건식을 만족할때까지 코드를 반복 실행한다.  
사용방법은 while문과 동일하지만 문법이 더 간단해서 for문을 가장 많이 사용한다. 
※  주의 ※ 증감식 뒤에는 ; 오지 않는다.  

 [ 기본형 ]
for(초깃값; 조건식; 증감식) {
         자바스크립트 코드;
}

실행순서:
         초깃값 -> 조건식 검사 -> 자바스크립트 코드 실행 -> 증감식 
         -> 조건식 검사 -> 자바스크립트 코드 실행 -> 증감식 -> 조건식 검사 .....반복

1. 주황화살표 -> 2. 노란 화살표 순

for (var i = 0; i < 10; i++) {
  document.write(i);
}

 

---

예제 ) 0부터 9까지 출력

// 0부터 9까지 총 10번 반복함

      for (var i = 0; i < 10; i++) {

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

      }

 

! 만약 변수 초기값은 0으로 두면서 브라우저에는 1부터 10까지 나오게 하고 싶다면

 for (var i = 0; i < 10; i++) {

        document.write(i + 1, "<br/>");

      }

document.write(i + 1)를 i+1 로 두면 된다. ( 이 방법 자주 씀) 

---

예제 ) 

 //for문을 이용해서 1부터 100까지의 숫자 중에 5의 배수일 경우 빨간색,

      //7의 배수일 경우 초록색으로, 5배수 이면서 7의 배수인 경우 파란색으로 출력.

      for (var i = 1; i <= 100; i++) {

        if (i % 5 == 0 && i % 7 != 0) { //5의 배수면서 7의 배수는 아니여야한다라고 딱 말해줘야한다.

          document.write("<p class='red'>" + i + "</p>");

        } else if (i % 7 == 0 && i % 5 != 0) {

          document.write("<p class='green'>" + i + "</p>");

        } else if (i % 5 == 0 && i % 7 == 0) {

          document.write("<p class='blue'>" + i + "</p>");

        }

      }

- 5의 배수 표현 -> 변수 % 5 ==0

- 7의 배수 표현 -> 변수 % 7 ==0

- 5의 배수면서 7의 배수는 아닌 것 -> 변수 % 5 ==0 && 변수 % 7 != 0

( 변수 % 7 != 0 -> 7로 나눴을 때 나머지값이 0 이 아닌 것 -> 7의 배수는 아닌 것)

- 5의 배수면서 7의 배수인 것 -> 변수 % 5 ==0 && 변수 % 7 ==0

 

명령을 정확하게 내려줘야한다. 

<style>

      .red {

        color: red;

      }

      .green {

        color: green;

      }

      .blue {

        color: blue;

      }

      .black {

        color: #000;

      }

    </style>

---

3. do while 문 

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

[ 기본형 ]
         var 변수 = 초깃값;

         do{
            자바스크립트 코드;
            증감식;
         }while(조건식)

 var i = 10;

      do {

        document.write("hello", "<br>");

        i--;

      } while (i < 3); // 먼저 조건식 검사를 하지않고 코드를 실행하기때문에 조건식이 틀려도 한번은 실행된다

조건식이 틀렸는데도 한번은 실행되어 hello 글자가 한번 출력된다.