[Javascript] 버튼에 이벤트 발생시키기, 동기식 Callback, script 외부연결, onload

목차

 

- DOM vs BOM

- querySelector(), document.getElememtById()

- 버튼에 이벤트 넣기

- 함수 콜백

- 스크립트 외부연결

- onload

- 동기 vs 비동기

 

DOM : document

객체를 나타내고,
대부분 document. 으로 시작한다

BOM : browser
자바스크립트로 브라우저를 조작하기 위해서

 

DOM의 메서드
1. querySelector() 나이가 많지않다. 그렇게 오래되지 않음

얘 사용하는 것 추천.

더 많이 쓰는 이유? jQuery 때문

2. document.getElememtById()

 

쿼리셀렉터와 같은 기능. 사용법만 좀다르다

 

        let btn = document.querySelector("#btn")
        //인자값이 중요 인자값이 무엇? #btn /document.querySelector("#btn")도 가능
        console.log(btn)
        console.log(typeof btn)
        //Object 출력

let btn = document.querySelector("#btn")의
데이터 타입은?

HTMLButtonElement << 어렵게 생각x
그냥 객체라고 생각해라

1.document.querySelector("#btn") 에서 먼저 elememt을 가져온다.
2. 가져온 elememt의 데이터 타입이 object

 

버튼에 이벤트 넣기

 

btn.addEventListener('click',clickBtn)
        function clickBtn(){
            console.log('hello world')
        }

 

버튼을 클릭할 때마다 "clickBtn"이라는 함수를 실행하겠다는 의미

 

btn 안의 내용이 html 관련 객체일때만 addEverntListener 사용가능하다.

 

함수 콜백하기

 

콜백? 프로그래밍에서 콜백(callback) 또는 콜애프터 함수(call-after function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

 

 

함수에 소괄호를 써주지 않는다면??

 

        //callback
        btn.addEventListener('click',clickBtn)
        function clickBtn(){
            console.log('hello world')
        }
        function aa(num1, num2){
            return num1 +num2
        }
        let obj = {
            sum : aa,
        }
        //왜 aa()가 아니냐!!! console.log(aa) 찍어봐. 그럼 코드만 나올것임. (실행되지않고)
        //함수를 정의하고 함수를 호출할 때 뒤에()를 쓰지않으면 함수를 정의한 코드만 나온다.

 

그렇다면 ()의 의미는 무엇일까요?
=> 함수를 실행시키라는 의미

 

 

다음으로,

 

인자값은 총 2개로 설정하고, 첫번째 인자값은 String으로, 두번째 인자값은 콜백(callback) 넣어보겠다.

 

        function 함수(type,param){
            if (type === "click") {
                param()
            } else {
                console.log("type을 console로 입력해주세요.")
            }
            
        }

        function 테스트(){
            console.log(`hello world!`)
        }

        함수("click",테스트)

        let elementObj = {
            addEventListener:함수,
        }

        elementObj.addEventListener("click",테스트)


        elementObj.addEventListener("click",function(){ console.log(`익명함수`)})
        elementObj.addEventListener("click",function(){ console.log(`두번째.`)})

        elementObj.addEventListener("click",()=>{console.log('세번째.')})
        elementObj.addEventListener("click",()=>console.log('네번째.'))

        elementObj.addEventListener("click",$=>console.log('다섯번째.'))

출력 결과

함수코드를 넣는 방법

1. 함수를 정의한다음에 함수명만 작성해서 보내기. 
2. 익명함수를 바로 작성해서 보내는 방법
3. 익명함수를 Arrow 함수로 바꿔서 가능

콜백은 인자값에 함수를 넣어서 함수안에서 다른 함수를 실행시키고싶을 때 사용하는게 콜백이다.

 

Script 외부연결

 

 

<script type="text/javascript" src="./index.js"></script>

//scr에 js 외부 주소 적기
//head에서 해야함
//css 외부링크 거는 것과 비슷함

 

그리고 확장자가 js 파일에 스크립트를 작성한다.

 

onload

 

// 옛날문법 13년전에 사용했어요
window.onload = function(){
    // code block 안에서만 실행
    const btnElement = document.querySelector('#btn')
    console.log('index.js :', btnElement)
} //모든 페이지가 로드되면 실행

// 요즘에 좀 쓰는 것

document.addEventListener('DOMContentLoaded', ()=>{
    const btnElement = document.querySelector('#btn')
    console.log('index.js DOM Content Loaded:', btnElement)
})

//html 로드가 끝나면 실행해줘 얘가 더 빨라요

아래코드가 먼저 출력된 걸 확인할 수 있다.

 

https://itworldyo.tistory.com/101

[javascript] 자바스크립트 window.onload() 란 무엇인가요?

 

DOMContentLoaded 이벤트 : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.

 

https://mygumi.tistory.com/281

DOMContentLoaded, load, unload :: 마이구미

동기 vs 비동기

 

https://www.youtube.com/watch?v=m0icCqHY39U