본문 바로가기
💻 1. 웹개발_Front end/1-4 Javascript

[Javascript] 03-4 반복문

by 달님🌙 2021. 9. 7.
반응형

 

while 문

 

1. 의미 : 조건식을 만족하는 동안 코드를 계속 반복 실행, 증간식은 while문 안에 존재

 

2. 예제 1 - 안녕하세요 10번 실행

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while</title>
</head>
<body>
    <script>
        var i = 1;
        // i가 10보다 작을때 계속 실행되고 10보다 커지면 while문 종료
        while(i <= 10) {
            document.write("안녕하세요." + i, "<br>");
            i++;
        }
        document.write(i, "<br>") // i = 11 일때는 while문 실행 안됨
        document.write("============ The End =============");
    </script>
</body>
</html>

 

3. 예제 2 - 30이하의 2의 배수이면서 6의 배수인 자연수 출력

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while</title>
</head>
<body>
    <script>
        var i = 1;
        // i <= 30 계속 실행되고 i > 30면 while문 종료
        while(i <= 30) {
            if(i % 2 == 0 && i % 6 == 0) {
                //br은 닫는 태그가 없지만 HTML5 : <br> 선호, <br/> 및 <br /> 사용 가능
                document.write(i, "<br>");
            }
            i++;
        }
    </script>
</body>
</html>

 

4. 예제 3 - 10~20사이의 수 중 짝수는 파랑색, 홀수는 빨강색으로 스타일 지정하여 내림차순으로 출력

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while</title>
    <style>
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <script>
        var i = 20;
        // i >= 10 while 문 실행, i < 10면 while문 종료
        while(i >= 10) {
            if(i % 2 == 0) {
                document.write("<p class = 'blue'>" + i + "</p>");
            } else {
                document.write("<p class = 'red'>" + i + "</p>");
            }
            i--;
        }
    </script>
</body>
</html>

 

 

do while 문

 

1. 의미 : do-while문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다.

2. 기본형 :

<script>
	// 1. 조건문이 맞지 않아 한 번만 실행된 경우
	var i = 10;
	do {
		document.write("hello", "<br>");
	} while(i < 3) // 조건문이 맞지 않으므로 한번만 실행된 것
</script>

 

3. do-while문  예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. do-while문을 사용한 경우
        //do 안의 스크립트가 먼저 실행이 되고 while문에 조건식을 검사
        //조건식이 true면 do안의 스크립트 반복 실행
        var j = 1;
        document.write("<h4>while문 실행</h4>");
        do {
            document.write("javascript" + j, "<br>");
            j++
        } while(j<=10);

        // 2. while문으로 표현한 경우
        document.write("<h4>while문 실행</h4>");
        var k = 1;
        while(k<=10) {
            document.write("javascript" + k, "<br>");
            k++;
        }  
    </script>
</body>
</html>

 

 

for 문

 

1. 의미 : 조건식을 만족할때까지 특정 코드를 반복하여 실행

2. 특징 : while문 보다 사용하기 편해 사용 빈도가 높은 편 

 

3. 예제 - 5의 배수는 빨강, 7의 배수는 초록, 5와 7의 공배수는 아쿠아색으로 출력

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        } 
        .aqua {
            color: aqua;
        }
    </style>
</head>
<body>
    <script>
        // i가 1부터 100까지 1씩 증가 100보다 커지면 for문 종료
        for(var i = 1; i<100; i++) {
            //5의 배수는 빨간색
            if(i % 5 == 0 && i % 7 != 0) {
                document.write("<p class = 'red'>" + i + "</p>");
            //7의 배수는 초록색
            } else if(i % 5 != 0 && i % 7 == 0) {
                document.write("<p class = 'green'>" + i + "</p>");
            //5와 7의 공배수는 아쿠아색
            } else if(i % 5 == 0 && i % 7 == 0) {
                document.write("<p class = 'aqua'>" + i + "</p>");
            } 
        }
    </script>
</body>
</html>

 

break 문

 

1. 의미 : 반복문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료

break문이 코드보다 앞에 있으면 그 코드는 실행되지 않고 곧바로 반복문이 종료됨

 

2. break 문 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>break</title>
</head>
<body>
    <script>
        // for(var i = 1; i <= 10; i++) {
        //     if(i == 6) {
        //         break;
        //     }
        //     document.write(i,"<br>");
        // }
        var i = 1;
        while(i <= 10) {
            // i가 6이면 while문 종료
            if(i == 6) {
                break;
            }
            document.write(i, "<br>");
            i++;
        }
        document.write("======== The End ==========");

    </script>
</body>
</html>

 

continue 문

 

1. 의미 : continue문 다음에 오는 코드는 무시하고 다시 반복문 처음 위치로 이동

  - while문에서의 continue문 : continue문 다음에 오는 코드는 무시하고 바로 조건식으로 가서 조건 검사를 실행한다.

  - for문에서의 continue문 : continue문 다음에 오는 코드는 무시하고 바로 증감식으로 가서 증감 연산을 실행한다.

 

2. 예제 - 홀수만 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>continue</title>
</head>
<body>
    <script>
        for(var i = 1; i <= 10; i++) {
            //짝수면 다시 조건식으로 돌아감
            if(i % 2 == 0) {
                continue;
            } document.write(i, "<br>");
        }
        document.write("========== The End==========");
    </script>
</body>
</html>

- 짝수일때는 출력하지 않도록 하기 위해 continue문을 이용하여 코드 실행을 건너뛰게 할 수 있음

 

 

중첩 for 문

 

1. 의미 : 말 그대로 for문안의 for문을 의미한다.

2. 사용 예시 : 3행 5열의 표를 만든다고 할 때 1행씩 행이 만들어질 때마다 5개의 열을 만들어야 할 경우 사용

 

3. 예제 - 1행 1열부터 4행 3열까지 출력하는 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doublefor</title>
</head>
<body>
    <script>
        // 중첩 for문 행과 열의 구조 생성
        for(var i = 1; i <= 4; i++) {
            for(var k = 1; k <= 3; k++) {
                document.write(i + "행" + k + "열", "&nbsp&nbsp");
            }
            document.write("<br>");
        } 
    </script>
</body>
</html>

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글

[Javascript] 04-2 내장 객체  (0) 2021.09.12
[Javascript] 04-1 객체  (0) 2021.09.12
[Javascript] 03-3 선택문  (0) 2021.09.06
[Javascript] 03-2 조건문  (0) 2021.09.05
[Javascript] 03-1 제어문이란?  (0) 2021.09.05

관련글

댓글

티스토리툴바