javascript기초문법-반복문(while문,do while문,for문)

반복문

여러 동작을 반복해야 하는 경우가 종종 생길 때 반복문을 사용한다.

상품 목록에서 상품을 차례대로 출력하거나 숫자를 1부터 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우에 반복문을 사용하는데 예를 들어 '안녕하세요!'라는 문구를 100회 출력하려면 출력문을 100번 작성해야 하지만 반복문을 이용하면 1줄만으로도 문장을 100회 출력할 수 있다. 이처럼 반복문(loop) 을 사용하면 동일한 코드를 원하는 횟수만큼 여러 번 반복할 수 있다.
반복문의 종류에는 while문, do while문, for문이 있다.
*컴포넌트 기능을 넣을 때 많이 사용한다.

while문 (=~하는동안)

조건이 참이면 실행되는 반복문이다.

while문은 조건식을 만족할때까지 코드를 여러 번 반복 실행한다.
while문은 조건식을 만족할때까지 {...}안의 코드를 실행시킨다.(2~3번 반복)

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

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

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

예시로 아래와 같이 사용할 수있다.

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

변수 % 2 ==0 >2의배수를 표현
변수 % 6 ==0 >6의 배수를 표현

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

while문을 사용해서 20부터 10까지의 숫자 중 짝수일 경우 파란색, 홀수일 경우 빨간색으로 출력하려면

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

위와 같이 while문을 사용할 수 있다.

*이때 태그값과 변수값은 + 로 연결해준다.

do while문

위의 while과는 달리 do{}에 작성된 코드는 최소 1번 실행된다는 것이다.
최소 1번 실행 후, while 조건이 false인 경우 더이상 실행되지 않는다.

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

for문★★★

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

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

*증감문 뒤에는 세미콜론을 사용하지않는다.

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

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

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

예시로 위와 같이 입력해서 사용할 수있는데 위의 코드를 입력시 0~9까지 출력된다.
*보통 초깃값은 0으로 시작한다.
예시)

for문을 이용해서 1부터 100까지의 숫자 중에 5의 배수일경우 빨간색,
7의 배수일 경우 초록색, 5의 배수이면서 7의 배수일 경우 파란색으로 출력하려면

 for (var i = 1; i <= 100; i++) {
    if (i % 5 == 0 && i % 7 != 0) {
      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>");
    } else {
      document.write("<p class='black'>" + i + "</p>");
    }
  }