Front-End/1. JavaScript 기초

[JS] Ex17_while문_실습2.html

이뮨01 2023. 6. 14. 22:35

while문 실습으로 컴퓨터가 만든 숫자 맞히기를 하다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>랜덤게임</h1>
    <script>
        // 1. 랜덤한 수 뽑기
        // 2. 숫자 입력 받기
        // 3. 더 큰 숫자를 부르면 "입력한 수보다 작은 수 입니다."(alert)
        // 3. 더 작은 숫자를 부르면 "입력한 수보다 큰 수 입니다."(alert)
        // 5. 같으면 "정답입니다 .축하합니다." (document)
        // 6. 정답일 때 종료

        
        let randNum = parseInt(Math.random()*100) + 1 // 1 ~ 100 랜덤 숫자 생성

            while(true){
            let num = parseInt(prompt("랜덤게임 숫자 맞히기")) // 사용자에게 입력 받기

            if(randNum > num){
                alert("입력한 수보다 큰 수입니다.")
            }
            else if(randNum < num){
                alert("입력한 수보다 작은 수 입니다.")
            }
            else if(randNum == num){
                document.write(`${randNum}, 정답입니다. 축하합니다.😥`) // 정답
                break
            }
            else if(num === null){ // 취소 방지 코드
                break
            }
        }

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

1. 컴퓨터가 만드는 랜덤한 숫자 만들기

 let randNum = parseInt(Math.random()*100) + 1 // 1 ~ 100 랜덤 숫자 생성

처음으로 나온 랜덤한 수를 만드는 방법이다. Math.random()은 0 ~ 1 사이에 랜덤한 소수가 나온다.

여기에 100을 곱하면 0 ~ 100 사이의 소수가 나온다.

정수화 시켜주고 1을 더하면 우리가 원하는 1 ~ 100까지의 자연수가 나온다.

 

2. 사용자에게 수를 입력 받기

사용자가 컴퓨터 수와 같지 않은 값을 입력했을 때 계속해서 입력창이 떠야하기 때문에 

반복문 안에 입력문을 넣어야 한다.

 

3. 반복문 안의 조건문

if - else if 문

입력한 수가 정답보다 크면 입력한 수보다 작다고 출력하고, 작으면 크다고 출력하고, 같으면 정답이라고 출력한다.

 

4. 취소를 눌렀을 경우 오류 처리

취소를 눌렀을 때 값이 null로 처리되는걸 확인하고 입력값이 null일 때 break를 해서 입력창이 다시 뜨게한다.


결과