하라는 공부는 안하고 로또 추첨기를 만들고 있는 내가 레전드
먼저, 버튼을 눌러서 번호가 출력되게
html파일에 기본적인 기능만 세팅을 해줍니다.
<body>
<button id="start">START</button>
<div id="result"></div>
<script src="app.js"></script>
</body>그 다음에 app.js파일에
const start = document.querySelector("#start");
const result = document.querySelector("#result");
start.addEventListener("click", startLotto);start와 result를 불러와서 변수로 설정 한 후에
click 이벤트를 수신하고 startLotto 함수를 트리거하는 start에 이벤트 리스너를 추가합니다.
function startLotto() {
const lottoNumbers = [];
};startLotto 함수에 로또 번호가 들어갈 변수 lottoNumbers를 선언하고 빈 배열값을 할당합니다.
function starLotto () {
const lottoNumbers = [];
while(lottoNumbers.length < 6) {
const lottoNumber = Math.floor(Math.random()*45)+1;
};
};while을 사용해서 lottoNumbers의 배열의 길이가 6보다 작은지 확인합니다.
그리고 lottoNumber변수를 선언
Math.random() >> 0보다 크고 1 보다 작은 값을 가져옵니다.
그리고 Math.random()에 45의 값을 곱하고,
Math.floor()를 이용해서 내림을 합니다.
그러면 0~44의 정수가 나오는데
로또 번호가 0~44가 아니라 1~45이므로,
+1을 더 해줬습니다.
function startLotto() {
const lottoNumbers = [];
while(lottoNumbers.length < 6){
const lottoNumber = Math.floor(Math.random()*45)+1;
if(!lottoNumbers.includes(lottoNumber)) {
lottoNumbers.push(lottoNumber);
};
};
};루프가 종료되게 조건을 추가 하지 않으면,
lottoNumbers가 빈 배열이 되버려서 무한 반복의 굴레에 빠지게 됩니다.
그래서 if문으로 조건을 추가해주겠습니다.
우선 lottoNumbers의 배열에 lottoNumber가 포함되어있는지 확인해야하기 때문에
includes()메서드를 사용합니다.
(배열에 값이 있는지 확인)
그리고 우리는 lottoNumbers의 배열에 lottoNumber로 나온 숫자가 없어야
(! not연산자)
lottoNumbers 배열에 lottoNumber로 추출된 번호를 배열에 넣어줍니다.
그걸 위한 push() 메서드
설명이 복잡한데 lottoNumbers에 속해있는 배열의 값 중에
lottoNumber에서 추출한 번호가 포함되어 있는지 includes()메서드로 확인하고,
없으면(! not연산자) push()메서드를 이용해서 lottoNumbers의 배열에 추가 해줍니다.
언제까지? 배열의 길이가 6보다 작을 때까지
(0~5, 갯수는 총 6개)
콘솔 로그를 찍어봤을 때 나오는걸 확인했으니 이제 result에도 나오게 만들어야겠죠.
const start = document.querySelector("#start");
const result = document.querySelector("#result");
function startLotto() {
const lottoNumbers = [];
while (lottoNumbers.length < 6) {
const lottoNumber = Math.floor(Math.random() * 45) + 1;
if (!lottoNumbers.includes(lottoNumber)) {
lottoNumbers.push(lottoNumber);
}
}
result.innerHTML = lottoNumbers;
start.addEventListener("click", startLotto);innerHTML을 이용해서 id가 result인 요소에 lottoNumbers의 배열을 삽입합니다.
킹치만..숫자의 순서가 정렬되지가 않은게 참으로 제 글을 보는거 같습니다.
그래서 sort()메서드를 이용해서 lottoNumbers의 배열의 숫자를 오름차순으로 정리해줍니다.
const start = document.querySelector("#start");
const result = document.querySelector("#result");
function startLotto() {
const lottoNumbers = [];
while (lottoNumbers.length < 6) {
const lottoNumber = Math.floor(Math.random() * 45) + 1;
if (!lottoNumbers.includes(lottoNumber)) {
lottoNumbers.push(lottoNumber);
}
}
lottoNumbers.sort(function (a, b) {
return a - b;
});
result.innerHTML = lottoNumbers;
}
start.addEventListener("click", startLotto);sort()메서드는 이곳을 참고해주세요.
*참고자료 : MDN Web Docs - Array.prototype.srot()
이렇게 하면 모든게 끝났습니다.
짜잔, while문 공부를 해서 올린다 해놓고 로또 추첨기 만들고 있는..
여기는 추가 version입니다.
이름하여 ver. for
while로 썼으니 for로도 만들어보자 해서 만들었다는
const start = document.querySelector("#start");
const result = document.querySelector("#result");
function startLotto() {
const lottoNumbers = [];
for (i=0; i<6; i++) {
const lottoNumber = Math.floor(Math.random() * 45) + 1;
i = lottoNumbers.length;
if (!lottoNumbers.includes(lottoNumber)) {
lottoNumbers.push(lottoNumber);
}
}
lottoNumbers.sort(function (a, b) {
return a - b;
});
result.innerHTML = lottoNumbers;
}
start.addEventListener("click", startLotto);기본적인 틀은 똑같습니다.
다만, while을 없애고 for를 써주면서 초기문, 조건문, 증감문을 넣어줬습니다.
그리고 본문 내부에 lottoNumbers의 배열의 길이가 i라고 할당을 해줬구요.
이게 끝..생각보다 간단하게 수정되서 놀랐다는
댓글