JavaScript 실습예제 - Lotto JavaScript 코드 효율화

안녕하세요.

Hynn 입니다.

 

이전 포스팅에서 코드의 효율성을 위해 JavaScript 를 효율적으로 작성하기 위한 예제를 게시한 바 있습니다.

이번 포스팅에서는 효율적으로 작성한 JavaScript 코드를 작성하는 방식에 대해서 해설이 있다면, 저도 기억하기가 좋고, 다른 분들께서도 좋은 참고자료가 되었으면 합니다.

 

그럼 시작해보겠습니다.

 

==============

1. JavaScript 작성

2. 해설본 

==============

1. JavaScript 작성

const btn = document.querySelector('#submit')
const LottoDisplay = document.querySelector('#lottonum')
const LottoBox = document.querySelectorAll('#backarea>#lottonum > li')
const Payinfo = document.querySelector('#payinfo')
const Info = document.querySelector('#info')

function lottoHandler(e){
    const randomLotto = []            
    for ( let i = 0; i < 6; i++){
        let num = Math.floor(Math.random() * 45 +1)
        for (let j in randomLotto){
            while(num == randomLotto[j]){
                num = Math.floor(Math.random() * 45+1)
            }
        }
        randomLotto.push(num)
    }
    
    randomLotto.sort(function(a,b){
        return a - b
    })

    
    const numClassName = []
    for(let i = 0; i < randomLotto.length; i++){
        let j = getClassName(randomLotto[i])
        numClassName.push(j)
    }
    
    for(let i= 0; i <LottoBox.length; i++){
        LottoBox[i].innerHTML = randomLotto[i]
        LottoBox[i].className = numClassName[i]
    }

    LottoDisplay.style = 'Display:flex;'
    Info.style = 'display:block;'
    Payinfo.style = 'Display:block;'


function between(num, min, max){
    if(num > min && num < max){
        return true
    }
    return false
}

function getClassName(num){
    if(between(num,0,11)){
        return 'a'
    }
    if(between(num,10,21)){
        return 'b'
    }
    if(between(num,20,31)){
        return 'c'
    }

    if(between(num,30,41)){
        return 'd'
    }

    if(between(num,40,46)){
        return 'e'
    }
    }
}
btn.addEventListener ('click',lottoHandler)

2. 해설본 

작성의 흐름도는 아래와 같습니다.

 

1. 먼저 필요한 구성요소를 지정하는 변수를 선언합니다. (btn, LottoDisplay, LottoBox, Payinfo, Info)

2. addEventListner 를 이용해서 버튼을 클릭하면 함수를 작동하도록 이벤트를 생성합니다.

3. 이벤트에 호출될 함수를 선언합니다.

4. 함수 내에서 아래와 같은 순서로 작동을 구현합니다.

• 4-1. 먼저 랜덤숫자를 6개를 추출하도록 합니다.
• 4-2. 랜덤숫자에서 중복을 검사하여 중복이 나타날시, 다시금 새로운 숫자를 출력하도록 합니다.
• 4-3. 중복이 없다면 반복문을 종료합니다. 
• 4-4. 숫자를 1~45 배열로 정렬합니다. 

5. 각 숫자의 범위에 맞는 배경색을 지정하기 위해 between 함수를 이용하여 조건을 지정합니다.

6. 지정된 조건을 이용하여 If 문을 사용해서 각 범위에 결과값으로 a~e 까지의 분류를 지정합니다.

7. 지정된 분류를 랜덤으로 추출된 번호에 맞는 범위로 지정하는 반복문을 생성합니다.

8. 반복문을 이용한 결과를 사용해, 이미 선언한 Array 배열의 index 를 이용해 HTML 값, ClassName을 부여합니다.

9. 마지막으로 버튼을 눌렀을때, CSS 에서 Display에 None 으로 부여한 속성들을 각각 Block, Flex 를 부여합니다.

 

 

 

 

각 함수사용에 대한 질문이나, 궁금하신 점은 댓글로 문의주시면 감사하겠습니다.

 

감사합니다.