랜덤 숫자 게임 (Random Number Game)
랜덤 숫자를 이용한 게임을 과제로 받으며 수업 영상대로 화면에 보여졌지만, 내 코드는 다소 길다는 느낌과 반복이 많아보여서 선생님의 코드와 어떤게 다르고 어떤걸 더 생략하여 사용 가능한지 비교를 해보았다.
- e.preventDefault();
=> 입력이 제출되며 브라우저가 초기화되는 고유 동작을 막기 위한 코드 - Math.random()
- 최소값 + 최대값 설정
(Math.random() (최대값 - 최소값)) + 최소값
ex) 내 코드에서는 최대값을 선택한 숫자로 지정하여 작성함const randomNumber = Math.floor(Math.random() yourNumber); - Math.ceil()함수를 통해 값을 올림하고 소수점 이하를 없애준다.
5.parseInt()함수는 문자열을 정수 형태로 바꿔주는 함수
ex) parseInt(select, 10);
<!-- html -->
<!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>
<!-- 최댓값 입력 부분 -->
<div id="select">
<h3 class="js-title">
Generate a number between0 and <input type="number" min="0">
</h3>
</div>
<!-- 사용자가 선택할 숫자 부분 -->
<div id="guess">
<label> Guess the number: </label>
<input type="number" min="0" />
<button> play </button>
</div>
<!-- 승패여부 -->
<div id="js-result">
<span></span>
<br />
<span></span>
</div>
<script src="./app.js"></script>
</body>
</html>*js 보완할 부분 비교
위에 이미지가 선생님, 아래가 내 코드
비교하여 아래와 같이 생략이 되었다.
if(yourNumber === "" || maxNumLine === ""){
warning.innerText = "빈칸에 숫자를 입력후 눌러주세요.";
warning.classList.remove(HIDDEN_CLASSNSME);
warning.style.color = "red";
}else{
warning.classList.add(HIDDEN_CLASSNSME);
} 
위에 이미지가 선생님, 아래가 내 코드
비교결과 삼항연산자를 사용했다면 훨씬 더 깔끔한 코드가 완성되었다.
열공