코드랩 레퍼런스

Javascript - 반복문 본문

JAVASCRIPT

Javascript - 반복문

webstoryboy 2018. 1. 17. 16:07

반복문

반복되는 부분을 실행할 때 사용하는 제어문입니다.

var 변수 = 초기값

while (조건식){

    실행문;

    증감식;

}

Sample1 while

1번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
7번째 실행
8번째 실행
9번째 실행
10번째 실행
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var count = 1;	
			while(true){
				count++;	
				document.write(count + "번째 실행");
				document.write("<br />");
				
				if(count > 10){	// 조건
					break;
				}
			}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

Sample2 100보다 작은 숫자에서 4의배수 6의배수 출력하기

12
24
36
48
60
72
84
96
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
		var i = 1;

		while(i<=100){			//i가 100보다 작거나 같을 때 반복 실행합니다.
			if( i % 4 == 0 && i % 6 == 0 ){
				document.write(i+"<br />");
			}
			i++;
		}        
		</script>
    </head>
    
    <body>
	...
    </body>
</html>      

Sample3 100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기

1 2 3 4 5 6 7 8 ..... 93 94 95 96 97 98 99 100
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
		var i = 1;

		while(i<=100){			//i가 100보다 작거나 같을 때 반복 실행합니다.
			if( i % 2 == 0 ){
				document.write("<span style='color:blue'>" + i + "</span>","<br />");
			} else {
				document.write("<span style='color:red'>" + i + "</span>","<br />");
			}
			i++;
		}
		</script>
    </head>
    
    <body>
	...
    </body>
</html>      

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

var 변수 = 초기값

do {

    실행문;

    증감식;

}while(조건식)

Sample3 do while문

1번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
...
95번째 실행
96번째 실행
97번째 실행
98번째 실행
99번째 실행
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var count = 1;	
			do{
				count++;	
				document.write(count + "번째 실행","");
			}while(count <100);
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.

for(초기값; 조건식; 증감값){
     //반복 코드
}

0~100까지 반복을 한다면, 다음과 같이 표현합니다.

for(var i=0; i<100; i++){
     //반복 코드
}
초기값 설정 : var i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100 조건에 맞으면 실행됩니다.
증감 설정 : 조건에 맞으면 1씩 증가됩니다.

Example View
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for문</title>
    <script>
        //0~100까지 출력
        for (var i=0; i<=100; i++){
            document.write("숫자"+i,"<br>");
        }
        
        //1~100까지 출력
        for (var i=1; i<=100; i++){
            document.write("숫자"+i,"<br>");
        }
        
        //1~100중에서 짝수만 출력
        for (var i=0; i<=100; i+=2){
            document.write("숫자"+i,"<br>");
        }
        
        //1~100중에서 홀수만 출력
        for (var i=1; i<=100; i+=2){
            document.write("숫자"+i,"<br>");
        }
        
    </script>
</head>
<body>
    
</body>
</html>   
Example2 *표시로 출력하기
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			/* document.write("result =");
	        for (var i = 1; i <= 10; i++) {
	            document.write("*");
	        } */
	        
	        var result = "";
	        for (var i = 1; i <= 10; i++) {
	            result += "*";
	        }
	        document.write("result = " + result);
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example2 5의 배수는 파란색, 7의 배수는 빨간색, 5와7의 배수는 검은색으로 출력하기
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			for(var i=1; i<100; i++){
				if(i%5==0 && i%7!=0){	//5의 배수이고 7의 배수가 아닌경우
					document.write("<span style='color:blue;'>"+i+"</span>","<br>");
				}else if(i%7==0 && i%5!=0) {	//7의 배수이고 5의 배수가 아닌 경우
					document.write("<span style='color:red;'>"+i+"</span>","<br>");
				}else if(i%7==0 && i%5==0){		//7의 배수이고 5의 배수인 경우
					document.write("<span style='color:black;'>"+i+"</span>","<br>");
				}
			}	        
		</script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example3 for문을 이용한 배열의 합 구하기
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
        	var arr4 = new Array(100,200,300,400,500,600,700,800,900); 
        	var sum = 0;
				
			for(var i=0; i<arr4.length; i++) {
				sum = sum + arr4[i];
			}	
				
        	document.write(sum);    
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

for문 안에 for문이 있는 형태입니다.

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

     for(var j=0; j<100; j++){

     }

}

Sample3 구구단 만들기

2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
2 X 4 = 8
2 X 5 = 10
2 X 6 = 12
2 X 7 = 14
2 X 8 = 16
....
9 X 4 = 36
9 X 5 = 45
9 X 6 = 54
9 X 7 = 63
9 X 8 = 72
9 X 9 = 81
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
		for(var i=0; i<8; i++){
			for(var j=0; j<9; j++){
				var num1 = i + 2;
				var num2 = j + 1;
				var sum = num1 * num2;
				document.write(num1 + " X " + num2 + " = " + sum);
				document.write("
"); } } // var i var j // 2~9 1~9 // num1 * num2 = sum // 2 * 1 = 2 // 2 * 2 = 4 // 2 * 3 = 6 // 2 * 4 = 8 // 2 * 5 = 10 // 2 * 6 = 12 // 2 * 7 = 14 // 2 * 8 = 16 // 2 * 9 = 18 </script> </head> <body> ... </body> </html>
Example2 View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			for (var i = 0; i < 10; i++) {
				for (var j = 0; j < i + 1; j++) {
					document.write("*");
				}
				document.write("<br />");
			}   
		</script>
    </head>
    
    <body>
	...
    </body>
</html>     
Example3 피라미드 만들기
<!DOCTYPE html>
  
Example4 다중for문을 이용한 테이블 만들기
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			
			var num=1;
			var t="<table border='1'>"; //테이블 시작 태그
			
			for(var i=1; i<=10; i++){
				t+="<tr>";	//행 시작
				
				for(var k=1; k<=10; k++){
					t+="<td>"+num+"</td>";
					num++;
				}
				t+="</tr>";
			}
			
			t+="</table>"; 
			document.write(t);

		</script>
    </head>
    
    <body>
	...
    </body>
</html>       
for (var i in array){

}
=
for (var i=0; i<array.length; i++){

}
Example1 View
<!DOCTYPE html>
    

break문과 continue문은 반복문을 제어하는 명령어입니다.

break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다.
continue문 : 코드 실행 중에 continue을 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다.
Example View
<!DOCTYPE html>
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>자바스크립트(JavaScript)</title>
        <script type="text/javascript">
			var count = 0;	
			while(true){
				count++;	
				
				if(count == 3){	/
					continue;
				}
				document.write("" + count + "번째 실행");
				document.write("<br />");
				
				if(count > 9){	
					break;
				}
			}
        </script>
    </head>
    
    <body>
	...
    </body>
</html>     

Ad

Comments