728x90
반응형
자바스크립트 배열과 객체 마무리 문제
책 : 모던 자바스크립트 프로그래밍의 정석 428페이지 참고
마무리 문제 2
- 자바스크립트를 사용해서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안 되므로 셋(Set( ))을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해 보세요.
코드 블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
font-style: "NexonLv1Gothic";
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content:center;
height: 100vh;
background-color: #438ef1;
}
.section h1 {
margin-bottom: 30px;
font-size: 45px;
}
.section button {
padding: 20px 100px;
margin-bottom: 30px;
border: 1px solid #0ed3ff;
border-radius: 5px;
cursor: pointer;
background-color: #0ed3ff;
font-size: 24px;
transition: all 0.3s;
}
.section button:hover {
background-color: #0e36ff;
color: #fff;
border: 1px solid #0e36ff;
}
.section .result{
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<section class="section">
<h1>로또 번호 생성기</h1>
<button>클릭</button>
<div class="result">Lotto Number</div>
</section>
</body>
</html>구성
- body 구역에 각각 태그를 사용해서 구역을 만들어줍니다.
- style 구역으로 가서 각각의 태그에 스타일, 속성을 입력해줍니다.
JAVASCRIPT
<script>
// 선택자
const button = document.querySelector(".section button");
const result = document.querySelector(".result");
const rottoNumber = {
numCounter : 6, // 최대 숫자 갯수
maxNumber : 45 // 최대 숫자
};
button.addEventListener("click", () => {
let {numCounter, maxNumber} = rottoNumber;
let myNumber = new Set(); // 숫자가 중복되지 않게 Set() 생성
while(myNumber.size < numCounter){
myNumber.add(Math.floor(Math.random() * maxNumber) + 1);
}
result.innerText= `${[...myNumber].join(' ')}`; // 배열에 있는 값만 나오게 함
});
</script>자바스크립트 구성
- 버튼 부분과 결과 부분에 선택자를 만들어줍니다.
- 최대 숫자의 갯수와 최대 숫자의 값을 객체로 변수를 저장해줍니다.
- 버튼을 클릭했을 때의 효과를 주기 위해 addEventListener("click") 메서드를 사용해줍니다.
- 최대 숫자의 갯수와 최대 숫자의 값을 객체로 변수의 값을 가져옵니다.
- 나오는 숫자가 중복되지 않게 하기 위해 Set( )을 생성해줍니다.
- while문을 이용해서 최대 숫자의 갯수까지 나오게끔 반복해서 실행시켜줍니다. (while문을 사용하는 이유는, Set 객체에 중복되지 않은 6개의 숫자가 모두 저장될 때까지 랜덤한 숫자를 생성하고 추가하기 위해서입니다. for문을 사용하여 일정 횟수만큼 반복하면서 숫자를 추가하면, 중복되는 숫자가 발생할 가능성이 있습니다. 따라서, while문을 사용하여 Set 객체에 중복되지 않은 숫자가 모두 저장될 때까지 무한히 반복하면서 숫자를 추가합니다.)
- 따라서 while문의 조건식이 myNumber.size < numCount 입니다. 이 조건식은 Set 객체 myNumber에 저장된 숫자의 개수가 numCount 값보다 작은 동안 반복문을 실행합니다. 즉, Set 객체에 중복되지 않은 숫자가 numCount 개가 모두 저장될 때까지 반복하는 것입니다.
- 이제 나온 값을 innerText를 통해서 결과의 데이터를 입력해줍니다. 하지만 Set( )는 배열로 데이터가 저장되기 때문에 배열 펼침연산자(Spread Operator)를 이용해서 값만 출력시켜줍니다. 그리고 join( ) 메서드를 사용한 이유는 배열의 값을 출력시키면 ,(콤마)가 같이 출력되므로 없애주기위해 사용했습니다.
참고
배열 펼침연산자(Spread Operator)
- 펼침 연산자는 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
- https://dongjin6539.github.io/web2023/javascript/javascript02.html#sample12
Set( )
- Set( ) 객체는 중복되지 않는 유일한 값들의 집합이다.
- Set( ) 객체의 특징은 동일한 값을 중복하여 포함할 수 없고, 요소 순서에 의미가 없고, 인덱스로 요소에 접근할 수 없습니다.
- https://velog.io/@dolarge/Java-Script-Set-%EA%B3%BC-Map
innerText
- 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다.
- 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.
728x90
반응형
