04/16 Javascript 이벤트 바인딩(addEventListener, querySelector)

저번시간까지...

자바스크립트 
- 언어
    - 데이터/형식
        - 기본형식(Boolean/Number/String)
    - 연산자
    - 제어구조
    - 함수
    - 데이터 가시영역/생명주기/클로저

- 플랫폼
    - 브라우저
        - API : window Object
               window.alert() / confirm() / prompt()
    - 문서
        - API : window.document
               document.write()
        - 노드 선택
            document.getElementById()
            document.getElementsByClassName()

코드 블록
    - <script></script>
    - onXXX="" : 사용하지 말자
기본 코드 블록
    window.onload = function() {
        var container = document.getElementById("c1");
        var item = container.getElementsByClassName("it1");
    }

계산기 예제 - 숙제

 

 

숙제로 했던 계산기 코드이다

 

html 코드

js 코드

 

 

 

js코드에서 

  ex1 부분을 주석처리하지 않으면 실행되지 않는다

 

window.onload가 덮어쓰기 되어버림 (제일 마지막 함수만 실행된다)

 

 

-> 그렇다면 어떤 방법으로 해야되는가?

 

 

window.onload가 덮어쓰기 되어버림 (제일 마지막 함수만 실행된다)

 

 

모두 실행할 수 있게끔 이벤트 함수를 추가할 수 있는 것으로 써야겠다

 

 

load 이벤트에 함수 추가하는 것

 

 

 

 

주석처리 없애고 이벤트에 함수 누적할 수 있도록 해주었다 

동그라미 친 닫는 부분 주의해서 잘 써주어야 한다

 

 

 

 

 

 

 

 

 

 

 

 

규칙적인 무언가를 수행할 때 사용되는 함수들 알아보자 (타이머)

 

 

 

타이머 만들어보자!

 

 

 

스타일태그도 원래 바디안에 주면 안된다

 

스타일만 적용했당

 

 

-> 

클릭을 하면 카운트다운이 실행되게끔 js코드 만들어보기

 

 

 

버튼을 누르면 콘솔창에 test출력하는 코드 작성했다

 

 

 

 

그런데,,,

 

getElementsByClassName을 다 쓰기 너무 번거롭지않아?

 

그래서 그걸 도와주는 새로운 게 나타났다 -> selector

 

 

 

css의 선택자와 같은 기능을 한다

 

-> 배열을 얻는 것이 아니고 

 

querySelector를 쓰면 하나만 얻어올수 있고

querySelectorAlll 을 쓰면 여러개가 발견되는 것에서 여러개를 얻어올 수 있음

 

( ) 안에 아이디인지 클래스명인지 태그명인지 분명히 써줘야 함(css 선택자를 이용)

 

 

앞으로는 이렇게만 쓸 것임!!!

훨씬 좋다!

 

 

 

 

다시 돌아가서....

 

클릭할때마다 카운트 다운되게 코드 작성해보기

 

 

 

 

 

 

 

 

set - clear 가 짝꿍임 / 실행-종료

 

 

 

 

클릭하면 3초 후에 저 함수로직을 실행시켜주는 코드 완성 (3초 후에 하나가 카운트다운 된다)

 

 

알아서 카운트다운되게 해줘야지 않나?

 

 

인터벌로 바꿔주면 1초에 한번씩 카운트다운되게 시켜줄 수 있다

 

계속놔뒀더니 음수까지 내려감 ㅋㅋ

클릭버튼 한번 더 눌렀더니 0.5초에 한번씩 카운트다운됨ㅋㅋ

 

 

 

 

 

 

 

 

 

 

innerText 보충설명

 

 

세 가지의 속성을 사용할 수 있다

 

textContent보다 innerText가 호환성이 좋아서 더 많이 사용한다

 

 

 

 

 

 

 

 

 

 

 

 

 

ex4 네번째 예제

 

회색의 큰 박스 안에 두가지 박스가 있다

 

포지션 지정해주었더니 1과 2가 겹쳐졌다  2아래에 1이 있는 것

 

 

그리고 회색박스 위에 클릭버튼 만들어주기

 

클릭버튼 누르면 콘솔창에 click 출력해주는 js코드이다

 

주의 : 여기서 SelectorAll 사용했다 (박스 두개니까! ->사용할때 [몇번째]써주면 됨) 

input태그안의 속성으로 지정해주는 것도 css선택자랑 같은 원리라는 거 기억하기

 

 

 

 

 

 

 

 

그러면 겹쳐져있던 1번 박스를 클릭했을 때 100px만큼 오른쪽으로 옮겨지도록 해보자

 

왼쪽으로부터 100px 떨어지도록 

 

이때 100px에 " " 써준 것 주의하도록 하자  -> "" 안써줘도 돌아가긴하는데 다 문자열로 읽힌다는 것 기억

 

우오ㅑㅏ

 

 

 

 

 

 

 

 

 

숙제:

 

그럼 저게 자동으로 이동할 수 있도록 해보자

left값을 인터벌 줘서 반복적으로 17ms단위로 1px값을 키워나가게 하기

 

 

 

 

멈추는 거 까지