[JavaScript] 반복문

반복문

▶ while문

while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있다.

예제 1) '안녕하세요1~ 안녕하세요10'까지 1씩 증가시키면서 10회 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title> while문 </title>
    <script>
      var i = 1;
      while( i <= 10 ) {
        document.write("안녕하세요" + i, "<br />");
        i++;
      }
      document.write("==== The End ====");
    </script>
</head>
<body>
</body>
</html>

예제 2) 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> while문 </title>
<script>
	var i=1;
	while( i <= 30 ) {
		if( i % 2 == 0 && i % 6 == 0) {
			document.write(i ,"<br />");
		}
		i++;
	}
</script>
</head>
<body>
</body>
</html>

예제 3) 20부터 10까지의 숫자 중 짝수일 경우에는 파란색, 홀수일 경우에는 빨간색으로 출력되도록 하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> while문 </title>
<style>
	*{margin: 0;}
	.blue{color: #00f;}
	.red{color: #f00;}
</style>
<script>
	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>
</head>
<body>
</body>
</html>

▶ do-while문

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> do while문 </title>
<script>
	var i = 10;
	do {
		document.write("hello!!");
	} while ( i < 3 )
</script>
</head>
<body>
</body>
</html>

▶ for문

for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다. 사용 방법은 while문과 같지만 while문보다 사용하기 편해 사용 빈도가 높은 편이다.

예제 1) '반복1~반복10'까지 i를 1씩 증가하며 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> for문 </title>
<script>
	for( var i = 1; i <= 10; i++ ) {
		document.write("반복" + i, "<br>"); 
	}
</script>
</head>
<body>
</body>
</html>

예제 2) 1부터 100까지 5의 배수일 경우에는 빨간색 글자, 7의 배수일 경우에는 초록색 글자, 그리고 5의 배수이며 7의 배수일 경우에는 아쿠아색 글자로 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> for문 </title>
<style>
	*{margin: 0;}
	.red{color: #f00;}
	.green{color: #00f;}
	.aqua{color: #0ff;}
</style>
<script>
	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 % 7 == 0 && i % 5 == 0) {
			document.write("<p class='aqua'>"+i+"</p>");
		}
	}
</script>
</head>
<body>
</body>
</html>

▶ break문

반복문인 while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다. 즉, break문은 반복문을 강제로 종료할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> break문 </title>
<script>
	for(var i = 1; i <= 10; i++){ 
		if(i == 6) break;
		document.write(i, "<br>");
	}
	document.write("=== The End ===");
</script>
</head>
<body>
</body>
</html>

▶ continue문

continue문은 반복문에서만 사용할 수 있다. while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 한다.

for문에서 continue문을 실행할 경우에는 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> continue문 </title>
<script>
	for(var i = 1; i <= 10; i++){
		if( i % 2 == 0 ) continue;
		document.write(i, "<br>");
	}
	document.write("=== The End ===");
</script>
</head>
<body>
</body>
</html>

▶ 중첩 for문

for문 안에 for문을 사용한 것을 중첩 for문이라고 한다. 중첩 for문은 예를 들어 자바스크립트를 이용해 3행 5열의 표를 만든다고 할 때 1행씩 행이 만들어질 때마다 5개의 열을 만들어야 할 경우에 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 중첩for문 </title>
<script>
	for(var i = 1; i <= 3; i++){
		for(var k = 1; k <= 2; k++){
			document.write(i + "행" + k + "열", "<br>");
		}
		document.write("<br>");
	}
</script>
</head>
<body>
</body>
</html>

▶ 도전 Mission!

Q1) 다음을 while문을 이용해 출력해 보시오.

while문을 이용하여 구구단 중 5단을 출력하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 제어문 종합문제 </title>
<script>
	var i = 1;
	while(i <= 9) {
		document.write("5 X " + i + "=" + i * 5, "<br>");
		i++;
	}
</script>
</head>
<body>
</body>
</html>

Q2) 다음을 중첩 for문을 이용해 출력해 보시오.

5행 5열 표를 만들고, 데이터가 1부터 25까지 출력되도록 작성하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 제어문 종합문제 </title>
<script>
	var num = 1;
	var t = "<table border='1'>";
	for(var i = 1; i <= 5; i++) {
		t += "<tr>";
		for(var k = 1; k <= 5; k++) {
			t += "<td>" + num + "</td>";
			num++;
		}
		t += "</tr>";
	}
	t += "</table>";

	document.write(t);
</script>
</head>
<body>
</body>
</html>

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

[JavaScript] 함수 (0)	2021.02.11
[JavaScript] 객체 (0)	2021.02.11
[JavaScript] 제어문 (0)	2021.02.02
[JavaScript] 기초 문법, 변수, 연산자 (0)	2021.02.02
[JavaScript] 2020.4.10 공부기록 (0)	2021.02.02

🐠붕어의 코딩 공부 기록🐠

[JavaScript] 반복문

▶ while문

예제 1) '안녕하세요1~ 안녕하세요10'까지 1씩 증가시키면서 10회 출력하기

예제 2) 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하기

예제 3) 20부터 10까지의 숫자 중 짝수일 경우에는 파란색, 홀수일 경우에는 빨간색으로 출력되도록 하기

▶ do-while문

▶ for문

예제 1) '반복1~반복10'까지 i를 1씩 증가하며 출력하기

예제 2) 1부터 100까지 5의 배수일 경우에는 빨간색 글자, 7의 배수일 경우에는 초록색 글자, 그리고 5의 배수이며 7의 배수일 경우에는 아쿠아색 글자로 출력하기

▶ break문

▶ continue문

▶ 중첩 for문

▶ 도전 Mission!

Q1) 다음을 while문을 이용해 출력해 보시오.

Q2) 다음을 중첩 for문을 이용해 출력해 보시오.

'JavaScript > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 반복문

▶ while문

예제 1) '안녕하세요1~ 안녕하세요10'까지 1씩 증가시키면서 10회 출력하기

예제 2) 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하기

예제 3) 20부터 10까지의 숫자 중 짝수일 경우에는 파란색, 홀수일 경우에는 빨간색으로 출력되도록 하기

▶ do-while문

▶ for문

예제 1) '반복1~반복10'까지 i를 1씩 증가하며 출력하기

예제 2) 1부터 100까지 5의 배수일 경우에는 빨간색 글자, 7의 배수일 경우에는 초록색 글자, 그리고 5의 배수이며 7의 배수일 경우에는 아쿠아색 글자로 출력하기

▶ break문

▶ continue문

▶ 중첩 for문

▶ 도전 Mission!

Q1) 다음을 while문을 이용해 출력해 보시오.

Q2) 다음을 중첩 for문을 이용해 출력해 보시오.

'JavaScript > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바