04.Javascript 반복문 예제

01. while문 예제

while문을 사용하여 1~100까지 숫자의 합계를 구하는 방법이다.

var sum = 0;
var i = 1;

while(i<=100){
    sum += i;
    document.write(sum + ", " + i +"<br>");
    i++;
}

document.write("1~"+(i-1)+"까지의 합"+sum);

먼저 더해지는 값의 변수로 sum과 i 를 초기화해주고 while문을 작성해 준다.

while문의 조건식에 1~100까지 숫자의 합계를 구할 것이기 때문에 i가 100보다 같거나 작아야 true라는 i<=100 을 작성한다.

그리고 더해질 값인 sum에 복합 대입 연산자를 이용하여 값을 누적시키고, i++를 통해 후위 증감을 시킨다.

그렇게 되면 while문이 한 사이클씩 돌 때마다 i 의 값은 1씩 늘어나고 그로써 sum의 값도 증가가 된다.

 

---

---

그러면 이러한 결과물이 나오게 된다. 1~100까지 계속 더한 수가 나오게 되고, 마지막에 document.write( ); 안에 있는

i-1을 한 이유는 위의 while문에서 i 값이 100 초과로 false가 되면 식이 끝나고 다음 문장을 진행하게 되는데 while문을 나온 i 의 값은 101이므로 i값에서 -1을 해준 값으로 표현해 준다.

 

 

02. do-while문 예제

do-while문은 조건식을 가장 나중에 배치하여 실행문이 먼저 실행되고 조건식을 거치는 방식이다.

var inputString = null;

alert("메시지를 입력하세요.");
alert("프로그램을 종료하려면 q를 입력하세요.");

do{
    inputString = prompt("메시지를 입력하세요.");
    document.write(inputString + "<br>");    
}while(!(inputString == "q"));

document.write("프로그램 종료!");

위 do-while문은 사용자가 입력할 수 있는 창에 q 라고 입력을 하면 종료가 되는 시스템이다.

 

do{ } 안에 사용자가 입력할 수 있는 prompt를 사용하고, 그 prompt의 값을 변수로 지정해 준다. 

여기서 맨 윗줄에 var inputString = null; 을 해준 이유는 숫자 값의 초기화라면 = 0; 이라고 했겠지만, 지금은 문자 값을 입력받아야 하기 때문에 null 값으로 초기화를 시켜준 것이다.

그리고 q 를 입력했을 때 프로그램이 종료되기 위해서 while문에 ! 논리 부정 연산자를 이용하여 q 를 입력한 값이

true가 아닌 false로 바꿔 프로그램을 종료시킨다.

 

 

03. while문을 이용한 무한루프 예제

이번 무한루프 예제에서는 숫자 맞추기 게임을 만들 것이다.

 

※ 숫자 맞추기 게임이란?

1~100까지의 정해진 숫자 중에서 랜덤으로 한개의 숫자를 뽑고, 사용자가 그 숫자를 입력하여 맞추는 방식이다.

여기서 예를들어 정답이 50인데 사용자가 입력한 값이 70이라면 프로그램은 정답은 70보다 낮은 수라고 지정을 해준다.

 

먼저 게임에 1~100 까지라는 범위를 정하기 위한 변수 2개와 랜덤으로 나오는 정답 숫자를 위한 변수 1개를 지정해다.

var card = 0;
var high =0;
var low = 0;

card는 랜덤으로 나오는 숫자이고, high는 가장 높은 숫자, low는 가장 낮은 숫자로 변수를 지정해줬다.

 

 

var card = 0;
var high =0;
var low = 0;

while(true){
    var count = 0;
    low = 1;
    high = 100;
}

그리고 while문을 계속 반복할 수 있게 조건식을 true로 적은 뒤에 high와 low, 그리고 사용자가 몇번 시도하였는지를 보여주는 count를 새로운 변수로 지정해준다.

 

 

var card = 0;
var high =0;
var low = 0;

while(true){
    var count = 0;
    low = 1;
    high = 100;
    card = Math.floor(Math.random()*100);
    alert("수를 결정하였습니다. 맞춰 보세요.");
}

다음으로 변수 card를 랜덤으로 숫자를 뽑을 수 있게 Math.random( ) 을 사용하는데, 여기서 주의할 점으로

Math.random( )은 0.111...~ 1.000 까지의 숫자로 표현이 되기 때문에 Math.floor( )를 통해 소수점을 없애고

그 값에 *100을 통해 정수로 바꿔준다. 

 

 

var card = 0;
var high =0;
var low = 0;

while(true){
    var count = 0;
    low = 1;
    high = 100;
    card = Math.floor(Math.random()*100);
    alert("수를 결정하였습니다. 맞춰 보세요.");
    while(true){
    	var n = 0;
        alert(low + "~" + high + " 안에 있습니다.");
        count++;
        alert("시도횟수 : " + count + "번째");

        n = prompt("숫자를 입력하세요!");
        n = parseInt(n);
    }
}

사용자가 숫자를 입력할 수 있는 기능이 반복이 되도록 while문을 한번 더 사용한다.

count의 값은 루프가 돌 때마다 1씩 추가되기 위해서 count++; 를 해주고, 사용자가 입력한 값이 Number값으로 되기 위하여 parseInt( );를 사용한다.

 

 

var card = 0;
var high =0;
var low = 0;

while(true){
    var count = 0;
    low = 1;
    high = 100;
    card = Math.floor(Math.random()*100);
    alert("수를 결정하였습니다. 맞춰 보세요.");
    while(true){
    	var n = 0;
        alert(low + "~" + high + " 안에 있습니다.");
        count++;
        alert("시도횟수 : " + count + "번째");

        n = prompt("숫자를 입력하세요!");
        n = parseInt(n);
        
        if(n > 100 || n < 1){
            alert("값을 벗어났습니다. 다시 입력해주세요.");
        }else{
            if(n == card){
                alert("정답입니다!! :)");
                break;
            }
            else if(n > card){
                high = n;
                alert("정답은 " + n + "보다 작은 수 입니다.");
            }
            else if(n < card){
                low = n;
                alert("정답은 " + n + "보다 큰 수 입니다.");
            }
        }
    }
}

1~100 을 초과하거나 소수의 숫자를 입력했을 때 정확한 값을 입력해달라는 값과, 사용자가 입력한 값이 랜덤으로 나온 숫자를 맞춘 true값이 나왔을 때 그리고 사용자가 입력한 값이 정답보다 크거나 작았을 때를 if문으로 표현한 방법이다.

여기서 정답을 맞춰서 값이 true가 되면 break;가 실행되며 if문이 있는 바로 상위 while문을 탈출하게 된다.

 

 

var card = 0;
var high =0;
var low = 0;

while(true){
    var count = 0;
    low = 1;
    high = 100;
    card = Math.floor(Math.random()*100);
    alert("수를 결정하였습니다. 맞춰 보세요.");
    while(true){
    	var n = 0;
        alert(low + "~" + high + " 안에 있습니다.");
        count++;
        alert("시도횟수 : " + count + "번째");

        n = prompt("숫자를 입력하세요!");
        n = parseInt(n);
        
        if(n > 100 || n < 1){
            alert("값을 벗어났습니다. 다시 입력해주세요.");
        }else{
            if(n == card){
                alert("정답입니다!! :)");
                break;
            }
            else if(n > card){
                high = n;
                alert("정답은 " + n + "보다 작은 수 입니다.");
            }
            else if(n < card){
                low = n;
                alert("정답은 " + n + "보다 큰 수 입니다.");
            }
        }
    }
    var con = confirm("다시 게임을 시작하시겠습니까? yes or no");
    if(con == false){
        break;
    }
}

마지막으로 제일 상위 while문으로 오면서 confirm과 if문을 통하여 사용자가 확인을 누르면 다시 게임을 시작하고,

취소를 누르면 false가 되어 break;를 실행하고 숫자 맞추기 게임은 종료가 된다.

* confirm( ); 은 확인과 취소가 있는 선택이 가능한 창을 띄우는 코드이다.