[제어문] #4. while 문

728x90

while 문

자바스크립트에서 사용할 수 있는 반복문은 for 이외에도 while문과 do-while 문이 있다.

for 문은 카운터 변수를 기준으로 명령을 반복하기 때문에 횟수가 정해져 있는 반복 명령을 실행할 때 유용하다.

for문도 카운터 변수의 한계를 설정하지 않고 while 문과 같은 기능으로 사용할 수 있으나, while 문으로 작성할 때보다 코드가 길기 때문에 보통 사용하지 않는다.

for 문과 다르게 while 문은 특정 조건을 만족하는 동안에만 명령을 반복한다. 즉, 조건을 확인하는 변수가 하나인 것이다.

펙토 리얼을 계산하는 프로그램을 통해 while 문에 대하여 알아보자.

폰트 사이즈 변경하기

팩토리얼 계산에 앞서, 이때까지 document.write() 함수를 작성할 때, 폰트 사이즈가 작아서 시인성이 좋지 못하였다. 이를 해결하기 위해 앞으로는 폰트의 크기를 변경할 수 있는 함수를 사용한다.

아래 코드는 폰트의 크기를 변경하여 출력하는 프로그램이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for 문</title></head>
<body>
<h3>for 문으로 10px~35px 크기 출력</h3>
<hr>
<script>
// document.write("<span style='font-size:10px'>10px</span>");를 출력하면 10px 크기로 글자가 출력된다
for(var size=10; size<=35; size+=5) { // 5씩 증가
    document.write("<span ");
    document.write("style='font-size:" + size + "px'>");
    document.write(size + "px"); // size는 출력되는 글자
    document.write("</span>");
}
</script>
</body>
</html>

폰트 크기 조절 스크립트는 아래 코드를 참조한다.

document.write ("<span ");

document.write ("style='font-size:" + size + "px'>");

document.write (size + "px"); // size는 출력되는 글자

document.write ("</span>");

문장형 폰트 크기 조절 코드는 다음과 같다.

document.write("<span " + "style='font-size:" + 40 + "px'>" + "짝수의 합은" + rst + " 입니다."+"</span>");

팩토리얼 계산 프로그램 만들기

완성 코드는 다음과 같다.

<!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>Calculator</title>

    <style>
        body{
            text-align: center;
        }
    </style>

</head>
<body>
    <script>
        var size = 30;
        var inp = prompt("팩토리얼을 계산할 숫자를 입력하세요.");
        var rst = 1,cnt = inp;
        while(inp > 0){
            rst *= inp;
            inp --;
        }
        document.write ("<span ");
        document.write ("style='font-size:" + size + "px'>");
        document.write (cnt+"!= "+rst); // size는 출력되는 글자
        document.write ("</span>");
    </script>

</body>
</html>

실행 결과

break문과 continue

반복문의 흐름을 조절하고 싶다면 break문과 continue문을 이용한다.

break	현재 for문, switch 문, 또는 while문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다.
continue	현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행

마지막으로 break문과 continue문을 이용한 짝수 더하기 프로그램을 만들어보자.

해당 프로그램은 값을 입력받고 0부터 해당 숫자까지 짝수만 더한 결괏값을 출력한다.

<!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>Calculator</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        var inp  = prompt("숫자를 입력하세요."); 
        var rst = 0; 
        for(var i = 1;i<=inp;i++){ 
            if(i%2 == 1) {continue; }
            rst += i; 
        }
        document.write("<span "); 
        document.write("style='font-size:" + 30 + "px'>"); 
        document.write("짝수의 합은 "+rst+" 입니다."); 
        document.write("</span>"); 
    </script>
</body>
</html>