221114 실전예제 - 로또 번호 생성기

오늘 내가 배운 것

1. 버블 정렬을 이용한 배열 요소 정렬  

2. 로또 만들기

 

1. 버블 정렬

버블 정렬 
- 오름차순으로 정렬하기(내림차순도 가능함)
1. 서로 인접한 두 값을 검사하여 정렬하는 알고리즘
    - 인접한 2개의 값을 비교하여 크기가 순서대로 되어 있지 않으면 서로 교환한다.
2. 1회 반복을 하고 나면 제일 큰 수가 맨 뒤로 이동한다, 두 번째 반복에서는 맨 끝에 있는 수는 제외하고 실행된다. 이렇게 1회 반복할 때마다 반복에서 제외되는 데이터가 하나씩 늘어나서 마지막 반복 시에 오름차순으로 정렬이 되어있다.
3. 단점:정렬이 끝나도 설정된 횟수만큼 계속 반복문이 돌기 때문에 비효율적이다.

 

타원에 묶인 숫자끼리 비교하면서 반복한다.  전체 다 돌면 1사이클이 된다.

 

 

//1차 목표 : 콘솔에 아래 모양대로 찍기
// 0,1
// 1,2
// 2,3
// 3,4
// 4,5
// 5,6
// 6,7

for (let i = 0 ;i<7 ; i++){
    console.log(i, i+1)
}

 

//2차 목표 : 콘솔에 아래 모양대로 찍기
// 0,1
// 1,2
// 2,3
// 3,4
// 4,5
// 5,6
// 6,7

// 0,1
// 1,2
// 2,3
// 3,4
// 4,5
// 5,6

//첫 사이클엔 0~6까지 반복하지만 두번째 싸이클엔 0~5까지 반복하는 규칙이 있다.
// 그래서 반복하는 구간에 사이클을 뺀 값이 종료조건이면 원하는 값을 출력할 수 있다.

for(j=0 ; j < 2 ; j++){
    for(i=0 ; i < 7-j; i++){
        console.log(i, i+1)
    }
}

 

 

//배열의 순서바꾸기 (정렬)

const arr2 = [5,3,4]
let temp = arr2[0]  //5
console.log(arr2)
arr2[0] = arr2[1] // 334
arr2[1] = arr2[2] // 344
arr2[2] = temp

console.log(arr2)

변수(temp)에 옮기고 싶은 요소를 할당해서 빼놨다가 원하는 위치에 재할당을 하여 배열의 순서를 바꿀 수 있다.

 

 

 

---

버블 정렬 예시

const sortArr = [5,3,1,6,7,8,2,4]
for(let i=0; i<sortArr.length-1; i++){
    //console.log(i, i+1)
    console.log(sortArr[i], sortArr[i+1])
}


for(let i=0; i<sortArr.length - 1 ; i++){
    let temp
    for(let j=0 ; j<sortArr.length -1 - i ; j++){
            //console.log(j,j+1)
            //j가 하는 역할, j+1 하는 역할.... 첫번째 인덱스와 2번째 인덱스 
        if(sortArr[j] > sortArr[j+1]){
            temp = sortArr[j]
            sortArr[j] = sortArr[j+1] //3 ,
            sortArr[j+1] = temp
        }
    }    
    console.log(i, sortArr) //J가 한 사이클이 돌고난 뒤에 확인 하기 원하기 때문에 j-for문 마지막에 console.log를 찍어준다.
}
console.log(sortArr)

 

2. 로또 번호 생성기

 

최근에 여러 가지 방법으로 제일 많이 해보고 있는 예제인 로또 번호 생성하기인데, 이번에는 그전에 있었던 이슈 중에 해결한 방법이다.

 

HTML/CSS

HTML

<div id="part2">
    <h1>로또 번호 생성기</h1>
    <ul id="lotto" class="none">
        <li class="a">1</li>
        <li class="b">2</li>
        <li class="c">3</li>
        <li class="d">4</li>
        <li class="e">5</li>
        <li class="e">6</li>
    </ul>
    <button id="btn"> 번호 생성</button>
</div>

 

CSS

#part2 {
    margin: 50px 0 0 0 ;
}
#part2 > .none {
    display: none;
}
#lotto > li {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    font-size: 40px;
    text-align: center;
    line-height:  80px;
    margin: 30px 0 0 30px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.7);
}

/*1~10*/
#lotto > li.a{
    background: yellow;
}
/*11~20*/
#lotto > li.b{
    background: blue;
}
/*21~30*/
#lotto > li.c {
    background: red;
}
/*31~40*/
#lotto > li.d {
    background: gray;
}
/*41~45*/
#lotto > li.e {
    background: green;
}
button {
    margin: 30px 80px 30px 800px ;
    width:  100px;
    height: 40px;
    font-size: 20px;
}

 

코드를 짤 때 순서

1. 이벤트 등록(버튼 클릭 시 실행하는 함수)

2. 배열에 중복되지 않는 6개 숫자를 중복되지 않게 뽑기

3. 버블 정렬을 이용한 배열 정렬

4. 숫자 범위에 따른 색깔 지정

5. 함수 호출

 

1.  이벤트 등록 : 버튼 클릭 시 함수 실행

버튼 click시 실행되는 함수들
이번 로또 만들기는 번호 생성 버튼을 누른 후에 모든 것이 실행되므로 대체로 init 함수 안에서 실행된다.

const btn = document.querySelector("#btn")

function init(){




}
btn.addEventListener("click", init)

 

 

2. 배열에다가 6개 숫자를 중복되지 않게 뽑기

내가 랜덤을 뽑은 숫자가 기존에 뽑았던 숫자와 같은 게 있는지 체크하는 것이 어려웠다.
만약에 내가 뽑은 숫자가 무조건 중복되지 않는 거라면 쉽다.

/*번호 생성 */
    let lottoArr = []
    let lotto=[]
    
    for(let i = 0; i < 45; i++){
        lottoArr.push(i+1)
    }
    
    // console.log(lottoArr)
    let index
    for(let i=0; i<6 ; i++){
        index = Math.floor(Math.random() * lottoArr.length)
        console.log(index)
        lotto.push(lottoArr[index])
        lottoArr.splice(index,1)
    }
    console.log(lottoArr)  // 출력 후 남은 배열 
    console.log(lotto)  //출력한 배열

 

3. 버블 정렬을 이용한 배열 정렬

for(let i=0 ; i < lotto.length-1 ; i++){
    let temp
    for(let j=0 ; j<lotto.length-1-i ; j ++){
        if(lotto[j] > lotto[j+1]){
            temp = lotto[j+1]
            lotto[j+1] = lotto[j]
            lotto[j] = temp
        }
    }
}

for(let i=0 ; i < lotto.length ; i++){
    lottoBox[i].innerHTML = lotto[i]
    lottoBox[i].className = getClassName(lotto[i])
}

 

 

버튼을 누른 후 번호를 뽑고 그에 대한 배열을 정리하여야 하기 때문에 init함수 안에 코드를 작성해야 한다. 

 

4. 숫자 범위에 따른 공 색깔 지정하기

1. 색을 지정할 class생성 (html에 class a~e까지 설정)
2. 범위에 따른 색 생각하기 (CSS)
    - 1~10 : 노랑
    - 11~20 : 파랑
    - 21~30 : 빨강
    - 31~40 : 회색
    - 41~45 : 초록
3. 숫자에 따른 색 지정, 함수로 지정
    - 범위를 판단할 between 함수
    - between 함수를 이용해서 class 이름에 범위를 지정함

function between (num, min, max){
    if(num >= min && max >= num){
        return true
    }
    return false
}
function getClassName(num){
    if(between(num, 41, 45)){
        return "e"   
    }
    if(between(num, 31, 40)){
        return "d"   
    }
    if(between(num, 21, 30)){
        return "c"   
    }
    if(between(num, 11, 20)){
        return "b"   
    }
    if(between(num, 1 , 10)){
        return "a"
    }
}

이 부분은 함수 선언이기 때문에 init 함수 밖에서 작성하여도 상관없다. (함수 실행 역할을 하지 않음)

 

5. 함수 호출하기

const lottoBox = document.querySelectorAll("#lotto > li")
const lottoDisplay = document.querySelector("#part2 > .none")



for(let i=0 ; i < lotto.length ; i++){
    lottoBox[i].innerHTML = lotto[i]
    lottoBox[i].className = getClassName(lotto[i])
}
lottoDisplay.classList.remove("none")

위에서 만든 조건들을 이용해서 함수를 호출한다.

5번 과정은 번호 생성 버튼 의 'click' 이벤트 이후에 실행하여야 하기 때문에, init함수 안에 넣어준다.

위에 변수 같은 경우는 1번 과정의 변수와 같이 몰아서 적어 두는 것이 좋다.( 그래야 가독성이 좋다.)

 

lottoDisplay 같은 경우 처음 HTML을 불러올 때는 렌더 영역에 보이지 않다가 버튼 클릭 후 remove 메서드를 만나 display : none class가 지워지면서 출력한 번호들이 렌더 영역에 보인다.

 

 

 

 

완성 코드 확인하기

HTML/CSS는 위에 코드를 확인하면 된다.

 

---

const btn = document.querySelector("#btn")
const lottoBox = document.querySelectorAll("#lotto > li")
const lottoDisplay = document.querySelector("#part2 > .none")

function between (num, min, max){
    if(num >= min && max >= num){
        return true
    }
    return false
}
function getClassName(num){
    if(between(num, 41, 45)){
        return "e"   
    }
    if(between(num, 31, 40)){
        return "d"   
    }
    if(between(num, 21, 30)){
        return "c"   
    }
    if(between(num, 11, 20)){
        return "b"   
    }
    if(between(num, 1 , 10)){
        return "a"
    }
}

function init(){

    /*번호 생성 */
    let lottoArr = []
    let lotto=[]
    
    for(let i = 0; i < 45; i++){
        lottoArr.push(i+1)
    }
    
    // console.log(lottoArr)
    let index
    for(let i=0; i<6 ; i++){
        index = Math.floor(Math.random() * lottoArr.length)
        console.log(index)
        lotto.push(lottoArr[index])
        lottoArr.splice(index,1)
    }
    console.log(lottoArr)  // 출력 후 남은 배열 
    console.log(lotto)  //출력한 배열 
    
    
    /* 번호 정렬 */
    for(let i=0 ; i < lotto.length-1 ; i++){
        let temp
        for(let j=0 ; j<lotto.length-1-i ; j ++){
            if(lotto[j] > lotto[j+1]){
                temp = lotto[j+1]
                lotto[j+1] = lotto[j]
                lotto[j] = temp
            }
        }
    }

    for(let i=0 ; i < lotto.length ; i++){
        lottoBox[i].innerHTML = lotto[i]
        lottoBox[i].className = getClassName(lotto[i])
    }
    lottoDisplay.classList.remove("none")

}

btn.addEventListener("click", init)