Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

Let's Get IT 자바스크립트 프로그래밍 - 로또 번호 맞추기 본문

과거 프로그래밍 자료들/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>

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글

함수와 함수 호출 차이, 고차함수  (0) 2022.09.08
자바스크립트 체크 박스 선택 및 전체 체크박스 선택  (0) 2022.09.01
Let's Get IT 자바스크립트 프로그래밍 - 숫자야구(아웃 추가, 시도 횟수 추가)  (0) 2022.07.22
자바스크립트 개념 5가지 정리 - 추가 중  (0) 2022.07.21
Let's Get IT 자바스크립트 프로그래밍 - 카드 짝 맞추기  (0) 2022.07.20
'과거 프로그래밍 자료들/Javascript&typescript' Related Articles more