JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습

playjs.css

0.00MB

playjs.html

0.00MB

playjs.JS

0.00MB

예) 1~100 사이의 난수 생성

Math.random()*100 +1 하시면 1.0~100.0까지의 실수를 반환하겠죠?

소수점을 자르고 정수로 만들고 싶으시다면 , ParseInt()나 Math.floor()를 쓰시면 되겠습니다!

Math.floor(Math.random()*100 +1);

---

자바스크립트(JS)는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 컴파일 돼서 사용됩니다.(node.js 제외)

일단 지금은 브라우저 없이 실습을 할 수 없으니까 html파일과 css파일을 미리 다운 받고, JS를 직접 작성해봅시다.

 

HTML에서 외부 CSS , JS 파일을 참조하는 법

html head태그안에 css는 link , JS는 script태그를 만듭니다.

CSS는 herf , JS는 src에 파일 이름을 작성해 줍니다.

예시)

<link type="text/css" rel="stylesheet" href="playjs.css">

<script src="playjs.js"></script>

 

JS 기초

js는 변수 선언을 var 키워드로 하고, 함수는 function 이름(){} 으로 합니다.

var는 형태가 미리 정해져있지 않은데요, 초기화 하거나 넣어주는 값에 따라 형태가 바뀝니다.

단, 입력값은 무조건 string 형태로 받습니다.

그럼 간단한 덧셈코드를 작성해볼까요?? 

<div class="lab">
                <h3>덧셈 계산기</h3>
                <form name="myform">
                    첫번째 정수:
                    <input id="x"/><br/>
                    두번째 정수:
                    <input id="y"/><br/>
                    합계:
                    <input id="sum" type="text"/><br/>
                    <input type="button" value="계산" onclick="calc();"/>
                </form>
</div>

위는 html 코드 입니다. 위에 html코드를 보면서 JS로 calc() 함수를 작성해봅시다!

 

~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~

 

잘하셨나요?? 아래 처럼 나오면 성공입니다! 그러나 한번에 성공하기 힘들수도 있는데요~?

흔한 실수 몇가지를 알아봅시다!

function calc(){
    //첫번째 수를 x에 저장
    var x = document.getElementById("x").value;
    //두번째 수를 y에 저장
    var y = document.getElementById("y").value;
    //합을 계산
    var sum = parseInt(x) + parseInt(y);
    // id = "sum"인 부분의 문자값을 합으로 지정해줍니다.
    document.getElementById("sum").value = sum;
}

 

 

흔한실수

1.ParseInt()를 쓰지 않은 경우

// 오류
var sum = x + y;

//정답
var sum = parseInt(x) + parseInt(y);

이 함수를 미리 안알려드렸죠? ㅎㅎ 시행착오를 격었으면 좋겠다는 의미에서 그랬습니다ㅠㅠ 죄송합니다 ㅠㅠㅠㅠ

알려드리면 너무 쉬울까봐 그랬습니다!

var는 자동으로 형태가 정해집니다! 예를 들어 var=5; 로 하면 var는 정수형이 됩니다.

그러면 x,y는 자동으로 정수형이 될테니까 x+y로 하면 된다고 생각하셨을텐데, 사실 입력값은 무조건 string으로 형태가 정해집니다.

x = "1" , y ="2" , sum = "12"가 되겠죠?

parseInt(문자열/실수); 를 쓰시면 그 자료형이 정수에 맞게 변환이 돼서 반환됩니다.

 

 

2. var 자료형이 문자열이 될까요? element 객체가 될까요?

// 틀린 예
var sum = document.getElementById("sum").value;
sum = parseInt(x) + parseInt(y);


//이 둘은 엄연히 다릅니다!
sum = parseInt(x) + parseInt(y);
document.getElementById("sum").value = parseInt(x) + parseInt(y);


//올바르게 고쳐보면
var sum = document.getElementById("sum");
sum.value = parseInt(x) + parseInt(y);

틀린 예에서 sum은 string 형태입니다. value를 받은것이기 때문에 객체가 아닙니다. string을 참조해서 값을 바꿀순 없겠죠?

 

그럼 이것은 어떻게 될까요?

var sum = document.getElementById("sum");

var sum는 string이 아니라 Element라는 객체를 담고 있습니다!

그러므로 sum은 객체이므로 참조해서 value를 바꿀 수 있겠죠??

 

 

난수 생성 (Math 객체)

난수 생성에는 Math라는 객체를 이용할 것인데요,

• Math.floor(); : 소수점 이하를 버림한다.
• Math.ceil(); : 소수점 이하를 올림한다.
• Math.round(); : 소수점 이하를 반올림한다.
• Math.random(); : 0~1범위의 실수를 반환한다.

 

예) 1~100 사이의 난수 생성

Math.random()*100 +1 하시면 1.0~100.0까지의 실수를 반환하겠죠?

소수점을 자르고 정수로 만들고 싶으시다면 , ParseInt()나 Math.floor()를 쓰시면 되겠습니다!

Math.floor(Math.random()*100 +1);

 

숫자맞추기 예제

<div class="lab">
                <h3>숫자 맞추기 게임</h3>
                <p>이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다.<br></p>
                <form>
                    숫자:
                    <input type="text" id="user" size="5">
                    <input type="button" value="확인" onclick="guess();">
                    <input type="button" value="다시시작" onclick="replay();">
                    <br><br>
                    추측횟수:
                    <input type="text" id="guesses" size="5">
                    힌트:
                    <input type="text" id="result" size="16">
                    <input type="text" id="test" size="16">
                </form>
</div>

test부분은 난수가 잘 생성되는지 확인하기 위한 text상자 입니다.

숫자 맞출때 초기값은 53으로 합시다!

~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~

 

정답!!

function guess() {
    var inputNum =parseInt(document.getElementById("user").value);
        document.getElementById("guesses").value = ++nGuesses;
    if (inputNum<computerNumber) 
        document.getElementById("result").value = "낮습니다.";
    else if(inputNum>computerNumber)
        document.getElementById("result").value = "높습니다.";
    else
        document.getElementById("result").value = "정답입니다.";

}

function replay() {
    nGuesses = 0;
    computerNumber = Math.floor(Math.random()*100 +1);
    document.getElementById("result").value = "";
    document.getElementById("guesses").value = "";
    document.getElementById("test").value = computerNumber;
}