[간단 프로그램]lotto 프로그램 만들기

✅ 주요 기능

1 부터 45까지의 정수가 랜덤으로 화면에 나오는 프로그램

 

1. 1 - 45 랜덤 정수 만들기

num 변수 생성 후 Math.random()를 사용해서 랜덤으로 숫자를 나오게 한 뒤 45까지 수가 나와야 하므로 * 45를 해줬다. 그 뒤에는 +1을 더해서 0의 자리 숫자는 나오지 않게 했다. 그리고 난 후 콘솔에 찍어보면 소수점이 있는 수가 출력되는데 소수점을 없애고 정수만 출력하기 위해 parseInt() 함수를 사용했다.

var num = parseInt(Math.random() * 45 + 1);

📍 Math.random() : 0 ~ 1까지의 난수를 생성하는 함수
📍 parseInt() : 문자열을 숫자로 반환하는 함수지만 정수값만 리턴하는 특징이 있어 소수점을 자를때 도 사용됨

 

2. 랜덤한 수 6개 뽑기

랜덤한 수 6개 뽑아야하는데 이 6개의 수를 모두 담을 배열을 먼저 lotto라는 변수에 담았다. 이후에 6 위의 랜덤 정수 만들기를 6번 반복해야 하므로 for문으로 6번 반복 시키게 하고 한번 반복될 때마다 push() 메서드로 lotto 배열에 밀어넣었다.

var lotto = [];

for(i = 0; i < 6; i++){
 lotto.push(parseInt(Math.random() * 45 + 1));
}

 

📍.push() : 배열의 끝에 요소를 추가하는 함수

 

3. 동일한 수는 배열에 들어오지 않게 하기

만약 랜덤으로 수가 배열 안에 들어올때 34가 나오고 또 34가 들어오면 안되므로 반복되는 수는 배열에 들어오지 못하도록 조건문을 이용했다 이때 조건으로 .indexOf() 메서드를 사용하고 indexOf가 -1 일때에만 배열에 합류  할 수 있도록 했다.

var lotto = [];

for(i = 0; i < 6; i++){
    if(lotto.indexOf() == -1){
        lotto.push(parseInt(Math.random() * 45 + 1));
    }
}

📍.indexOf(): 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환

 

4. 무조건 6개 숫자까지 들어오게 하기

만약 6번을 반복하던 중 조건문으로 인해 수가 들어오지 않는다면 배열에는 6개까지 수가 들어오지 않을수도 있기 때문에 기존 for 문 에서 while 반복문으로 변경해준다. 이때 조건으로는 .length 배열의 수가 6개를 넘지 않게 한다고 설정했다

var lotto = [];

while(lotto.length < 6){
    if(lotto.indexOf() == -1){
        lotto.push(parseInt(Math.random() * 45 + 1));
    }
}

📍for은 특정 횟수 만큼 반복하는 거지만 while은 특정 조건 만큼 반복한다는 차이점이 있다.
📍.length : 배열의 길이를 반환 / indexOf는 0 부터 세지만 length는 1부터 셈

 

5. document 에 표시하기

만들어진 정수들이 각각 document 에 나타나야 하기 때문에 document.write()를 통해 div 를 생성하고 그 사이에 lotto의 인덱스를 통해 순서대로 각 숫자들을 불러왔다.

        document.write("<div class='ball1'>" + lotto[0] + "</div>");
        document.write("<div class='ball2'>" + lotto[1] + "</div>");
        document.write("<div class='ball3'>" + lotto[2] + "</div>");
        document.write("<div class='ball4'>" + lotto[3] + "</div>");
        document.write("<div class='ball5'>" + lotto[4] + "</div>");
        document.write("<div class='ball5'>" + lotto[5] + "</div>");

 

🌟완성본