과거 프로그래밍 자료들/Javascript&typescript
Let's Get IT 자바스크립트 프로그래밍 - 로또 번호 맞추기
평부
2022. 7. 22. 18:02
* 출처 : https://thebook.io/080270/part02/ch06/
Let's Get IT 자바스크립트 프로그래밍: 6장 타이머 사용하기_로또 추첨기
thebook.io
* for문 대신 while문을 쓸 때
- 조건이 간단하면 while문, 복잡하면 for문
* 45개의 숫자를 랜덤하게 섞어서 배열에 넣기
- array.splice() : splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
const plane = ['F/A-18 슈퍼 호넷', 'F-14A 톰캣', 'P-51 머스탱', 'F-35C 라이트닝 Ⅱ'];
plane.splice(1, 0, 'Darkstar');
console.log(plane); //['F/A-18 슈퍼 호넷', 'Darkstar', 'F-14A 톰캣', 'P-51 머스탱', 'F-35C 라이트닝 Ⅱ']//while문
const candidate = Array(45).fill().map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length);
const spliceArray = candidate.splice(random, 1);
const value = spliceArray[0];
shuffle.push(value);
}
console.log(shuffle);
//for문
const candidate = Array(45).fill().map((v, i) => i + 1);
const shuffle = [];
for(let i = candidate.length; i> 0; i--) {
const random = Math.floor(Math.random() * i);
const spliceArray = candidate.splice(random, 1);
const value = spliceArray[0];
shuffle.push(value);
}
console.log(shuffle);
* sort((a, b) => a-b) → 오름차순이 됨
* sort((a, b) => b -a) → 내림차순이 됨
const numbers = [1, 35, 13, 44, 39, 33, 8, 30, 3, 22, 17, 20, 41, 10, 23, 25, 5, 28, 6, 18, 43, 12, 15, 16, 7, 40, 11, 31, 29, 2, 26, 34, 27, 37, 21, 38, 14, 45, 4, 42, 9, 24, 19, 36, 32];
numbers.sort((a,b) => a -b);
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]
numbers.sort((a, b) => b - a);
//[45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
* setTimeout
- setTimeout 안에 넣는 함수는 특정 작업(지정한 시간까지 기다리기) 이후에 추가로 실행되는 함수 = 콜백 함수
// name 3명이 1초 1.1초 1.2초에 한 번씩 나옴
//name 3명이 다 나오고 마지막에 North Isaland가 나오게 함(5초 뒤)
//매개변수 사용(setTimeout을 동일하게 사용함)
<body>
<div id="name"></div>
<br />
<div id="state"></div>
<script>
const $name = document.querySelector('#name');
const $state = document.querySelector('#state');
const dataName = ['Maverick', 'Cyclone', 'Hondo'];
const dataState = ['North Island'];
function changeThings(blah, $parent) {
const $data = document.createElement('div');
$data.className = 'data';
$data.textContent = blah;
$parent.append($data);
}
for (let i = 0; i < dataName.length; i++) {
setTimeout(() => {
changeThings(dataName[i], $name);
}, 1000 * (i + 1));
}
setTimeout(() => {
changeThings(dataState[0], $state);
}, 5000)
</script>
</body>
* var과 let의 차이
- var = 함수 스코프 / let = 블록 스코프 라서 함수, if 문, for 문에서 접근 범위의 차이를 보임
- 또한, let을 사용할 때는 for 문 안에서 let 변수의 값이 고정되므로 var와는 실행결과가 달라짐
* 로또 번호 맞추기 (색상 추가)
더보기
<!DOCTYPE html>
<html lang="en">
<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>
<style>
.ball {
display: inline-block;
border: 1px solid black;
border-radius: 20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="result">추첨 결과는? </div>
<div id="bonus">보너스 숫자 : </div>
<script>
const $result = document.querySelector('#result');
const $bonus = document.querySelector('#bonus');
const candidate = Array(45).fill().map((v, i) => i + 1);
const shuffle = [];
while (candidate.length > 0) {
const random = Math.floor(Math.random() * candidate.length);
const spliceArray = candidate.splice(random, 1);
const value = spliceArray[0];
shuffle.push(value);
}
console.log(shuffle);
const winBalls = shuffle.splice(0, 6).sort((a, b) => a - b);
const bonus = shuffle[6];
console.log("winBall", winBalls);
console.log("bonus", bonus);
function colorize(number, $tag) {
if (number < 10) {
$tag.style.backgroundColor = 'red';
$tag.style.color = 'white';
} else if (number < 20) {
$tag.style.backgroundColor = 'orange';
$tag.style.color = 'black';
} else if (number < 30) {
$tag.style.backgroundColor = 'yellow';
$tag.style.color = 'black';
} else if (number < 40) {
$tag.style.backgroundColor = 'blue';
$tag.style.color = 'white';
} else {
$tag.style.backgroundColor = 'green';
$tag.style.color = 'black';
}
}
function drawBall(number, $parent) {
const $ball = document.createElement('div');
$ball.className = 'ball';
$ball.textContent = number;
$parent.append($ball);
colorize(number, $ball);
}
for (let i = 0; i < winBalls.length; i++) {
setTimeout(() => {
// const $ball = document.createElement('div');
// $ball.className = 'ball';
// $ball.textContent = winBalls[i];
// $result.append($ball);
drawBall(winBalls[i], $result)
}, 1000 * (i + 1));
}
setTimeout(() => {
// const $ball = document.createElement('div');
// $ball.className = 'ball';
// $ball.textContent = bonus;
// $bonus.append($ball);
drawBall(bonus, $bonus);
}, 7000);
</script>
</body>
</html>