Javascript // 8일차 [DOM-2(Event)] // 로또

목차

1. Event

  1.1 Event 등록

  1.2 Event 삭제

  1.3 Event 객체

2. 로또

---

 

Event 란

 

Event

 

브라우저에서 랜더되는 영역에서 일어나는 것

버튼을 클릭하거나, 마우스오버, 마우스 아웃 등에 효과를 주는것을 말한다

           ' Click '     ' Mouseover ' 'Mouseout '

이러한 일들이 일어났을 때

 

**특정함수를 호출한다

 

브라우저가 이미 어느정도 구현을 해놓은 기능이기에 우리는 규칙에 맞게 사용하기만 하면 된다.

 

 

 Event 등록

 

** 문법

 

1. html에서 직접넣기

 

예전에 많이 쓰던 방식이다.

html
<button onClick='alert('hello world)'></button>

onClick 이라는 속성을 사용해서 만든다.

 

**속성에 on이 붙어 있는 것은 거의 다 Event 라고 보면 된다.

onClick     // 지정하지 않으면 null 값이 들어가 있다.

onMouseover

onMouseout

 

2. DOM 속성으로 넣기

 

DOM 속성으로 넣기 위해서는

1. JS 해당 Element 를 선택 할 줄 알아야한다 (8일차)

2. 선택한 Element에 onClick 함수 선언을 대입한다.

3. addEventListener 을 사용한다. 

 

**문법

function 함수이름(){}

element.addEventListener(이벤트명,함수이름,옵션)
 //  인자값. click mouseover mouseout

 

※ 함수를 선언하는 것이 좋은 이유 ?

## 이벤트 삭제를 하기 편해진다.

addEventListener 을 사용하게 되면 가독성이 좋게된다.

:: 가독성 상 뎁스(들여쓰기?) 는 줄이는게 좋다.

   들여쓰기를 안한다기 보다 들여쓰기를 써야하는 코드를 안짜는것이 좋다는 것이다.

 

 

 Event 삭제

btn.onclick = function(){
    console.log("hello world")
    alert("hello world")
}

이러한 방식을 선택했다면

btn.onClick 변수에 null을 주면 삭제가 된다.

 

하지만 addEventListener 을 사용했다면

Element.removeEventListener(이벤트명:String, 함수값:function)

을 사용해주면 원하는 함수값만 선택해서 삭제할 수 있다.

 

Event 객체

 

event 함수에 인자값을 아무거나 넣어줘도됨

target = 이벤트를 발동시킨 엘리먼트 누구에 의해서 실행됐는지 알 수 있게됨. (지금은 모르겠지만 나중에 많이 사용된다)
type = 어떤 타입으로 발동을 한건지 알수 있다.

---

 

로또

 

쉬운것부터 하나하나씩 해야한다//
1. 번호생성 버튼을 누르면 #lotto 엘리먼트 보이게 하기 class none 제거 이벤트 넣기
 1-1. 번호생성에다가 이벤트 넣기 (click)
   1-1.1 번호생성 엘리먼트를 선택해서 가져와야함 querySelector
   1-1.2 #lotto 가져오기

2. 랜덤숫자를 뽑아서 부여하는것
 2-1 랜덤숫자를 뽑는거
 2-2 랜덤숫자를 부여하기
     2-2.1 클릭할 때 랜덤값 생성해보기
     2-2.2 랜덤값 6개 만들기
     2-2.3 엘리먼트 선택...? querySelectorAll("")
     2-2.4 각각 순서에 맞게 내용을 넣어주기

문제 확인
1. 색갈이 안바뀜
     뽑은 숫자들의 범위가 어디에 해당되는지 알아야함.
     // input 1~45
     // 문제 1~10 a, 11~20 b, 21 ~30 c
     // output : a /b /c /d /e

2. 로또는 중복값이 없어야함 (...)

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

function randomLotto(){
    const random = Math.floor((Math.random() *45) + 1)
    return random
}

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

function getClassName(num){
    if (between(num, 41, 45)) {
        return 'e'
    }
    // if (num > 30 && num <= 40) {
    //     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'
    }
}

const lottoRandom = []
const className = []


function lottoHandler(e) {
    for (let i=0; i < 6; i++){
        lottoRandom[i] = randomLotto()
    }

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

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

    lottoDisplay.classList.remove("none")
}

btn.addEventListener('click', lottoHandler )

//코드
    // const num1 = randomLotto()
    // const num2 = randomLotto()
    // const num3 = randomLotto()
    // const num4 = randomLotto()
    // const num5 = randomLotto()
    // const num6 = randomLotto()
    

    // const num1ClassName = getClassName(num1)
    // const num2ClassName = getClassName(num2)
    // const num3ClassName = getClassName(num3)
    // const num4ClassName = getClassName(num4)
    // const num5ClassName = getClassName(num5)
    // const num6ClassName = getClassName(num6)
    

    // lottoBox[0].innerHTML = num1
    // lottoBox[0].className = num1ClassName
    // lottoBox[1].innerHTML = num2
    // lottoBox[1].className = num2ClassName
    // lottoBox[2].innerHTML = num3
    // lottoBox[2].className = num3ClassName
    // lottoBox[3].innerHTML = num4
    // lottoBox[3].className = num4ClassName
    // lottoBox[4].innerHTML = num5
    // lottoBox[4].className = num5ClassName
    // lottoBox[5].innerHTML = num6
    // lottoBox[5].className = num6ClassName
    
// function between(num){
//     if (1 <= num & num <= 10){
//         return true
//     } else {
//         return false
//     }
// } 만든거

// input 1~45
// 문제 1~10 a, 11~20 b, 21 ~30 c
// output : a /b /c /d /e