[레츠기릿JS] 로또 추첨기

 

순서도 그리기

 

 

<조건>

전체 공 개수를 45개로 하고 이 중에서 보너스 공까지 총 7개를 뽑는다 (마지막 공이 보너스 공)

단, 공 45개를 전부 다 섞은 뒤에 7개의 공을 뽑는다

 

const candidate = Array(45).fill().map((v, i) => i+1);
//Array(45) 빈배열 45개 만들고, fill() : undefined로 채운다
//map()으로 리턴값 i + 1인 새 배열을 반환
// 1~45까지의 숫자가 담긴 배열이 생성 된다

자바스크립트 배열 만드는 방법

배열 리터럴 [] 대괄호로 배열 생성 var arr = [];

Array() 생성자 함수로 배열 생성 var arr = new Array();

 

---

피셔 예이츠 셔플

유한 수열의 무작위 순열을 생성하기 위한 알고리즘 (값을 랜덤하게 섞을 때 사용)

Math.floor(Math.random()) 

Math.floor() : 정수 리턴. 소수점 1번째 자리를 버림

Math.random() : 0~0.99999...숫자 반환

Math.floor(Math.random()) : 0을 반환 

 

0<= random <= n 범위의 정수 난수를 생성하기 위해서는

Math.floor(Math.random() * n+1);

 

 

Array​.prototype​.splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경. 원본 배열이 수정 됨

splice(변경을 시작할 인덱스, 배열에서 제거할 요소의 수)

 

 

const candidate = Array(45).fill().map((v, i) => i+1); //0~44
const shuffle = [];
//조건이 간단하면 while 문
while (candidate.length > 0) {
    const random = Math.floor(Math.random() * candidate.length); // 1<=random<=45 까지 무작위 인덱스 뽑기
    const spliceArray = candidate.splice(random, 1); // 뽑은 값은 배열에 들어 있음
    const value = spliceArray[0]; // 배열에 들어 있는 값을 꺼내어
    shuffle.push(value); // shuffle 배열에 넣기
}

 

 

Array​.prototype​.slice()

어떤 배열의 begin 부터 end(end 미포함) 까지에 대한 얕은 복사본을 새 배열로 반환. 원본 배열은 바뀌지 않음

splice(begin, end)

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

 

 

---

 

 

.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;
}

 

const $result = document.querySelector('#result');
setTimeout(()=>{
    const $ball = document.createElement('div'); 
    $ball.className = 'ball';
    $ball.textContent = winBalls[0];
    $result.appendChild($ball);
}, 1000);

ball 태그는 기존 HTML에 없던 태그이므로 document.createElement 메서드로 새로 생성

태그의 클래스를 'ball'로 지정해 style 태그 안에 들어 있는 CSS를 적용

className (html에서는 class 로 사용하지만, js에서는 예약어이므로 className으로 사용해야 함)

 

 

 

 

const $result = document.querySelector('#result');
const $bonus = document.querySelector('#bonus');

function addBall(ballNum ,$parent){
    const $ball = document.createElement('div');
    $ball.className = 'ball';
    $ball.textContent = ballNum;
    $parent.appendChild($ball);
};

//1~6번째 공
for(let i =0; i<winBalls.length; i++){
    setTimeout(()=>{
        addBall(winBalls[i] ,$result);
    }, (i+1)*1000);
}

//보너스 공
setTimeout(()=>{
    addBall(bonus ,$bonus);
}, 7000);

중복되는 것은 함수로 뽑아내고, 중복되지 않는 것은 매개변수로 만들어서 정리한다

setTimeout을 7번 복붙하는 짓은 xxx

 

---

 

 

 

1분퀴즈

3.5초 뒤에 다음 func 함수를 실행되게 해 보세요.

function func() { 
  console.log('hello'); 
}

 

setTimeout(() => {
  func();
}, 3500);


//내부 함수가 하나이고 인수가 없는 경우에는 줄여 쓸 수 있다
setTimeout(func, 3500);

 

setTimeout(func(), 3500); 이렇게 쓰면 안됨!!!

이렇게 사용하면 처음에 func()가 실행된다. 이 때 들어가 있는 func()는 함수가 아니라 func()의 리턴값임

 

 

 

 

 

---