03.제어문 - 반복문

01.while문

while문은 조건식을 만족할 때까지 코드를 반복해서 실행할 수 있다.
조건식을 만족할 때 까지 중괄호 안에 있는 코드를 반복해서 실행한다.

<script>
	var 변수 = 초깃값;
    while(조건식){
    	자바스크립트 코드;
        증감식;			//순서는 조건식 > 자바스크립트 코드 + 증감식 > 조건식 순서로 간다.
    }
</script>

예시를 만들어보자.

1.안녕하세요 1부터 10까지 만들기

<script>
	var i = 1;
    while(i<=10){
    document.write("안녕하세요" + i,"<br>");
    i++;
    }
    document.write("--THE END--");
</script>
: i가 10이 될 때까지 안녕하세요+i를 반복한다.

2.1부터 30까지의 숫자에 2의 배수이면서 6의 배수인 숫자만 출력하기
<script>
	var i;
	var i = 1;
	while(i <= 30){
		if(i % 2 == 0 && i % 6 == 0){
    		document.wrtite(i,"<br>");
    	}
    i++;
}
</script>
: i % 2, i % 6 의 나머지가 0 일때 i를 출력한 후 i를 증가후 다시 조건식

02.do while문

while문은 조건식의 만족여부를 먼저 검사했지만 do while문은 일단 한번은 실행하고 조건식을 검사한다.

<script>
	var 변수 = 초깃값;
    
    do{
    	자바스크립트 코드;
        증감식;
    }while(조건식)
</script>

1.예제
<script>
	var i = 10;
    do{
    	document.write("hello");
      } while (i<3);
</script>

: while(i<3)이 false이기때문에 hello는 한번만 출력된 후 종료된다.

03.for문

가장 중요하지 않을까 하는 파트. 조건식을 만족할때까지 특정 코드를 반복하며 실행한다.
while문과 사용방법은 동일하지만 while문 보다 사용하기 편해 사용빈도가 높다.

<script>
	for(초깃값; 조건식; 증감식){
    	자바스크립트 코드;
    }
</script>

01.예제
<script>
	for(var i = 1; i <= 10; i++){		//(var i = 1 : 초깃값) (i <= 10; : 조건식) (i++ : 증감식)
    	document.write("hello" + i, "<br>");
    }
</script>

02.각 배수별로 색표현

<style>
	.red{
    	color : #f00;
    }
    .green{
    	color : #0f0;
    }
    .blue{
    	color : #00f;
    }
</style>

<script>
for(var i = 1; i <= 100; i++){
	if(i %  == 0 && i & 7 != 0) {
    	document.write("<p class='red'>" + i + "</p>");			// 5의 배수이면서 7의 배수가 아닐때
    }else if(i % 7 == 0 && i % 5!= 0){
    	document.write("<p class='green'>" + i + "</p>");		// 5의 배수가 아니면서 7의 배수일때
    }else if(i % 7 ==0 && i % 5 == 0){		
    	document.write("<p class='blue'>" + i + "</p>");		// 5의 배수이면서 7의 배수일때
    }
}
</script>