반복문 ( while, do while, for, break, continue )

FrontEnd/JavaScript

by H_Develop 2022. 7. 1. 08:25

while 문, do while 문, for 문
반복 루프를 빠져나가는 break 문과 반복을 건너뛰는 continue 문도 있다.

차이

for문의 형식 -조건에 따라 실행

for (초기값; 조건식; 증감식) { 명령어 };

- 구하고자 하는 값의 정확한 조건이 있는 경우. 조건식 초기값 증감식이 모여있어, 가독성이 좋다.

while 문의 형식 - 조건에 따라 실행

while (조건식) { 명령어 증감식 };

- 구하고자 하는 값의 정확한 조건을 모르는 경우, 유동적인 경우. 조건식이 흩어져 있어, 가독성이 나쁨

do while 문의 형식 - 한번은 무조건 실행, 이후 조건에 따라 실행

do { 명령어 증감식 } while (조건식);

WHILE 문
조건 - while(1>0), while(1==1), while(true)... 반드시 break문을 만들어야 한다.
조건에서 사용되는 변수값(while(1>0), while(1==1), while(true)와 같은)이 변환되게 해주는 것이 좋다.

기본 사용법

    <script>
        var x = 1;
        while (x <= 5) {
            document.write("안녕하세요 <br>");
            x++;
        }
    </script>

1 ~ 10까지의 합을 while 문으로 구하시오
합을 구하는 문제는 초기화를 0으로 지정 / 곱을 구하는 문제는 초기화를 1로 지정
초기화( initiative ) 한다는 것은 변수가 있던 메모리상의 데이터를 지운다는 의미
( 이전에 실행했던, 프로그램이 사용했던, 메모리에는 garbage collection을 종료 시,

수행하지 않았다면 local variable의 값은 함수의 소멸과 함께 사라지지만

global variable전역변수, constant상수는 데이터가 계속 메모리에 저장되어 있을 수 있기에 초기화 해주는 것이 좋다. )

    <script>
        var x = 1;
        var sum =0; // 합의 초기화, 곱의 초기화는 1로 설정.
        while (x <= 10) {
            sum += x;   // accumulated 누적되다
            x++;
        }
        document.write(sum);
    </script>

파스칼의 정의 / 등차순열 등 순열을 이용하면 더 좋다.

0~100까지 3의 배수의 sum을 구하시오

    <script>
        var num = 0;
        var sum = 0;
        while (num <= 100) {
            num++;
            if (num %3 == 0) {
                sum += num;
                document.write("중첩 값 : " + sum + "<br>");
            }
        }
    </script>

DO ~ WHILE ~ 문
조건이 do 이후에 판단하기에 적어도 한 번은 실행된다.

    <script>
        var x = 0;
        do {
            document.write("안녕하세요1");
            x++;
        } while (x<5)
    </script>

결과 : 안녕하세요1안녕하세요1안녕하세요1안녕하세요1안녕하세요1
while의 조건이 부합되기까지, do 문장이 수행된다.

for 문
for ( 초기식, 조건식, 증감식 )

배열과 for문을 활용한 코드

    <script>
        var color = ["red","green","blue","yellow","skyblue"];

        for (var i=0; i<=4; i++) {
            document.write("<span style='color:" + color[i] + "''>안녕하세요</span>");
        }
    </script>

Nested For ( 이중 for문 )

구구단 JS

    <script>
        for (var i=2; i<10; i++) {
            for (var j=1; j<10; j++) {
                document.write(i + " * " + j + " = " + i * j + "<br>");
            }
        }
    </script>

구구단 CSS + JS

<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>
    <style>
        div {display : inline-block; padding : 0 20px 30px 20px; margin : 15px;
            border : solid 1px #cccccc; line-height : 2;}
        div h3 {text-align : center; font-weight : bold;}
        
    </style>
</head>
<body>

    <h1>구구단</h1>
        
    <script>

        var i, j;   // 이렇게 한 줄에 여러 변수와 초기값을 줄 수 있다.
        for (i=2; i<=9; i++) {
            document.write("<div>");
            document.write("<h3>"+ i +"단 </h3>");

            for (j=1; j<=9; j++) {
                document.write(i + " x " + j + " = " + j*i + "<br>");
            }
            document.write("</div>");
        }           
        
    </script>
</body>

do while 3! (factorial 피보나치 수열)

등차수열

    <script>
        var n = Number(prompt("아무 숫자나 입력하세요."));
        var msg = "";   // 메시지, 이미지 초기화

        if (n !== null) {
            var nFact = 1;
            var i = 1;

            while (i<=n) {
                nFact *= i;
                i++;
            }
            msg = n + "! = " + nFact;
        } else {
            msg = "값이 없습니다.";
        }
        document.write(msg);

    </script>

Break continue

    <script>
        for (var i=1; i<=5; i++) {
            if (i==3) {
                break;
            }
            document.write("i 값은 : " + i + "<br>");
        }
    </script>
    
if 문에 break 자체를 쓰는 것이 아닌, for 문의 break 개념이다.

짝수 합 구하기.

    <script>
        // var num = Number(prompt("숫자를 입력해 주세요"));
        // var sum = 0;

        // for (var i=1; i<=num; i++) {

        //     if (i %2 == 0) {
        //         sum += i;
                
        //     } else {
        //         continue;
        //     }
        // }
        
        // document.write(sum);
    </script>
    
    
    
    

    <script>
        var i;
        var N = parseInt(prompt("숫자입력"));
        var sum = 0;

        for (i=1; i<N; i++){
            if (i %2 ==1) {
                continue;	// 2나머지가 1인 것들은 continue로 올라가서 계산을 안함.
                sum += i;
               document.write(i+"<br>");
            } 
           
        }
    </script>

좌석 배치도

<style>
    table, td {border : solid 2px #ccc; border-collapse: collapse;}
    td {padding : 5px; font-size : 0.9em;}
</style>
</head>	
  <h1>좌석 배치도</h1>
<body>
<script>
  var memNum = prompt("손님의 수를 입력하세요");
  var colNum = prompt("한줄에 몇명씩 앉힐까요?");
  if (memNum % colNum === 0) {
    rowNum = parseInt(memNum / colNum);
  } else {
    rowNum = parseInt(memNum / colNum) + 1;
    }
// document.write("모두 " + rowNum + "개의 줄이 필요합니다.");
    var i, j;
    document.write("<table>");
    for (i=0; i<rowNum; i++) {
        document.write("<tr>");
        for (j=1; j<=colNum; j++) {
          seatNo = i * colNum + j;  // 좌석번호 
          if (seatNo > memNum) 
            break;
            document.write("<td>좌석 " + seatNo + "</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>")
</script>
</body>

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

외부 JS파일을 HTML에 불러오기 (0)	2022.07.01
while을 이용한, 이미지 삽입, Table (0)	2022.07.01
if else 예문 (0)	2022.07.01
제어문 ( 조건문 if, switch, 3항 연산자 ) (0)	2022.06.30
형변환 및 예제 (0)	2022.06.30