Javascript와 html을 연결해보자 / 콜백함수

1. document.querySelector()

2. elementobj.addEventListener(event,function)

3. 콜백함수 

 

 

 

HTML상의 button을 사용자가 눌렀을 때, 콘솔창에 클릭횟수와 메시지가 뜨도록 JS로 연결해보자

 

1. document.querySelector( )

 

 

간단하다, 형태가 어디서 많이 봤다했더니 객체의 메소드를 불러올 때 썼던 syntax다! 객체.method( )

즉, document라는 객체의 메서드 중에 querySelector를 쓰겠다는 뜻

 

이 객체메서드를 이해하기 위해서 하나하나 해석해본다.

 

document : 문서 즉, 브라우저 상에서 HTML을 뜻한다! 

DOM / 즉 HTML문서를 파싱하여 객체화 시키고 HTML과 JS가 소통하게끔 인터페이스가 된 것 

query : 웹브라우저한테 질의하다, 문의하다 => 데이터베이스에 정보를 요청하는 것 

selector : 선택자

parameter : ( ) 안에는 html상에서 가져올 객체. id, class 등.. 이 때, string의 형태로 가져와야한다. 

 

document.querySelector( ) => 객체화된 html에서 선택자를 이용해 특정 element 객체를 불러와보겠다. 란 뜻! 

 

뜻을 알았으니 적용해보자

 

btn 이라는 변수를 하나 선언하고 JS가 이해할 수 있게 document.querySelector("#btn") 을 담아준다. 

다만, querySeletor("선택자명") 는 첫번째 element 객체만을 가져온다. 

궁금해서 문법에 어긋나긴하지만 <button id="btn">버튼2</button>를 만들고 확인해봤는데 먹히지 않음 ㅋ   

 

  <button id="btn">버튼</button>

  <script type = "text/javascript">
    let btn = document.querySelector("#btn")
	...

 

2. elementobj.addEventListener(event,function) 

 

인자는 총 2개를 넣는다!

#1. event = element 객체에 주어진 이벤트 (클릭한다던지, 키를 누른다던지..)  

#2. function = 일명 listener 이벤트가 발생했을 때 나타나는 기능 (어렵게 말하면 이벤트를 받아주는 객체)

 

이벤트 기능들은 아래와 같은 게 있다고 하니 참고하자

 

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=qbxlvnf11&logNo=220877806711

 

 

본론으로 돌아가서, 우린 버튼을 클릭하면 콘솔창에 메시지와 클릭횟수가 나타나게끔 해야한다!

따라서, click이라는 이벤트가 필요하고 / 눌렀을 때 콘솔창에 메시지가 출력되게끔 함수를 만들어주자

 

1- clickbtn이라는 함수를 만들어주고

2- 객체화된 btn을 가져오고 btn.addEventListener('click', clickbtn) 끝

   이 때, event를 넣을땐 string형태로 넣는다. 

 

  <button id="btn">버튼</button>

  <script type = "text/javascript">
  
    let btn = document.querySelector("#btn")
	
    function clickbtn(){
		console.log(`let's click!`)
	}
    
	btn.addEventListener('click', clickbtn)
    
  </script>

 

결과물! 

클릭할 때마다 콘솔창에 클릭횟수와 함께 메시지가 출력된다.

 

 

아! 그리고 중요한 사실 

addEventListener의 인자 function/listener 자리에는 콜백함수가 들어간다.

 

3. 콜백함수 (CALL BACK)

 

뜻 : 함수 안에 파라미터로 들어가는 함수

용도 : 뭔가 순차적으로 실행하고 싶을 때 쓴다.

 

단어 그대로 call (부를 때) back (가겠다, 나타나겠다~) 라는 뜻 

btn.addEventListener('click', clickbtn) => 버튼 클릭하면 나갈게, 기다리다가 그때 실행할게!!! 

 

- 콜백함수는 이렇게 다양한 방식으로 다른 함수의 인자로서 들어갈 수 있다.

 

1 -함수를 따로 정의한 다음에 그 함수명만 인자로 넣거나

2- 인자안에서 함수명을 지어서 만들수도 있고

3- 함수명이 없는 익명함수를 쓸 수도 있다. 따라서, arrow함수로도 표현이 가능하다.

대표적인 callback 함수 이용법

setTimeout

# 콜백함수를 익명함수이자 arrow함수로 만들어서 인자로 넣어본 케이스

console.log(1);
setTimeout(()=>{console.log(2)},1000)
console.log(3);​

시간순차적으로 일어나는 게 기본인 JS에서 단순하게 생각하면,
콘솔창엔 1 -> after 1sec -> 2 -> 3 이럴거 같지만, 절대 아니다.

저번에 학습한대로, 비동기적 구조가 나타난다. 
콜스택에선 1 -> 3 먼저 내보내고 -> 1초 뒤 큐에서 기다리고 있던 2가 콜스택으로 올라가 출력된다.

# 콜백함수를 따로 정의해서 그 함수명을 인자로 넣어본 케이스

function afterSettime(){
  console.log('hi there')
}
setTimeout(afterSettime,1000)

 

콜백함수 좀 더 연습해보자 

함수의 인자에 콜백함수 함수명 넣기
함수 first의 para라는 인자가 콜백함수 second를 받아온 격

function first(para){
  console.log(1)
  para()
}

function second(){
  console.log(2)
}

first(second)
// first() 실행해줘 파라미터로 second 넣어서
// 1 출력 되고 second 함수 실행되서 2 출력됨​

다른 인자랑 같이 있을 때, 

function haveCallback(type,para){
  if (type === "click"){
    para()
  }else{
    console.log('type을 console로 입력해주세요')
  }
}

function test(){
  console.log(`this is callback`)
}

haveCallback("click",test)

// 출력 : this is callback

 

addEventListener도 이런식으로 바꿔서 쓸 수가 있겠다.

btn.addEventListener('click',()=>console.log(`it's me, call back!`))