오늘은 마무리 문제2를 풀어보겠습니다!
자바스크립트 마무리 문제
클릭하면 로또 번호를 생성해주는 프로그램을 만들어보겠습니다! 번호는 중복되지 않게 set을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다.
구조
<body>
<div id="container">
<h1>로또 번호 생성기</h1>
<button>Click!</button>
<div id="result"></div>
</div>
</body>스크립트를 짜기 전에, set()에 대해 알아보겠습니다.
set()
JavaScript에서 Set은 값(value)의 컬렉션(collection)을 나타내는 데이터 구조입니다. Set은 중복을 허용하지 않으며, 순서를 유지합니다.
Set 객체는 new Set() 생성자 함수를 사용하여 생성하며, 값(value)을 추가하기 위해서는 add() 메소드를 사용합니다. 값을 삭제하기 위해서는 delete() 메소드를 사용합니다.
스크립트
const btn = document.querySelector("button");
const result = document.querySelector("#result");
btn.addEventListener("click", () => {
const numbers = new Set();
while ([...numbers].length < 6) {
numbers.add(Math.floor(Math.random() * 45) + 1);
}
result.innerText = [...numbers].join(', ');
});1. numbers 라는 이름의 새로운 Set 객체를 생성합니다. Set 객체는 중복을 허용하지 않으므로, numbers 객체에는 중복되지 않은 값들만 저장됩니다.
2. while 반복문을 사용하여, numbers 객체의 길이가 6보다 작을 때까지 다음 동작을 반복합니다.
3. Math.random() 함수를 사용하여 1과 45 사이의 랜덤한 실수를 생성합니다.
4. Math.floor() 함수를 사용하여 소수점 이하를 버리고, 정수로 변환합니다.
5. 1과 45 사이의 정수를 반환하기 위해 +1 연산을 수행합니다.
6. numbers 객체에 생성된 랜덤한 숫자를 추가합니다.
7. numbers 객체에 저장된 값들을 배열로 변환하고, join() 메서드를 사용하여 쉼표(,)로 구분된 문자열로 변환합니다.
8. result 요소의 innerText 속성에 join() 메서드로 변환된 문자열을 할당합니다.
따라서 이 코드는 "button" 요소를 클릭하면 1부터 45까지의 숫자 중 랜덤한 6개의 숫자를 추출하고, 이 중에서 중복된 값을 제거하여 출력합니다. 출력된 숫자들은 쉼표(,)로 구분되어 "#result" 요소에 표시됩니다.
완성된 페이지와 코드보기
