1. HTML 세팅하기

<form id="form">
	<input type="text" id="input">
  <button>확인</button>
</form>
<div id="result"></div>

• HTML5부터는 input태그를 form태그로 감싸는 것이 표준에 더 적합하다.
• 이런 경우에는 보통 eventListener을 input태그가 아닌 form태그에 단다.

2. 랜덤 사용하기

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

• 9를 곱하는 이유 : 원래 랜덤식은 0 ≤ Math.random() < 1 이기 때문에 1 ~ 10 범위를 하고자 * 9 + 1 을 한다.
• Math.floor() 하는 이유 : 소수를 내림하기 위해서 사용한다. (Math는 자바스크립트가 제공하는 객체)
• *참고) 올림 : Math.ceil(), 반올림은 Math.round()
• *참고) window.crypto.getRandomValues() : 암호학적으로 완벽하게 무작위인 함수이다.

3. 중복되지 않은 4개의 숫자 뽑기

//1~9까지 숫자 모음
for (let n = 0; n <= 9; n+=1){
    numbers.push(n+1);
}

//4개의 숫자 뽑기
const answer = [];
for (let n = 0; n<4; n+=1) {
  const cur = Math.floor(Math.random() * (9 - n));
  answer.push(numbers[cur]);
  numbers.splice(cur,1);
}

• 바로 4개를 뽑지 않고, 2개로 분리한 이유
  • 중복 없이 4개를 뽑기 위해서 한 곳에서는 랜덤한 값을 뽑고, 다른 쪽에서는 그 뽑힌 값을 제외하기 위해 2개의 리스트로 분리하였다.
• Math.floor(Math.random() * (9-n));
  • 2번과 달리 +1 을 하지 않은 이유는 cur 은 index값이기 때문에 0부터 시작함을 감안하기 떄문이다.
  • 9-n 을 한 이유는 위 for문 에서 값이 하나씩 빠지기 때문에 인덱스값도 점점 줄어들어야 하기 때문에 9-n 을 통해서 인덱스를 맞추고 있다.
• 예외를 잘 찾기 위해서는 끝값, 극단적인 경우 등을 생각하려고 노력하는 것이 좋다.