<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">클릭</button>
<script>
//Callback 함수
// 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때
// "시스템"에서 호출해주는 함수
// == 함수 안에 파라미터로 들어가는 함수
// 1. 이벤트 핸들러 & 리스너
// 어떤 이벤트가 발생했을 때
// : addEventListner(어떤 이벤트, 이벤트가 있을 때 실행하는 로직)
document.querySelector('.btn').addEventListener('click', function(){
console.log('click!')
})
// 2. 타임 핸들러
// 의도적으로 시간 지연을 사용하는 기능
// : setTimeout(시간 지연 후 실행될 로직, 지연할 시간)
console.log('가')
setTimeout(function(){
console.log('나')
}, 2000) // 2000은 단위상 2초
console.log('다')
</script>
</body>
</html>
CallBack 함수 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- button#btn -->
<button id="btn">Click!😊</button>
<div id="timer"></div>
<script>
// 1. timer라는 공간 가져오기
let timer =document.getElementById('timer')
// 2. 1초부터 5초까지 계산해주는 타이머 만들기
// => setTimeout
for(let i = 1; i<=5; i++){
setTimeout(function(){
timer.innerHTML += i + '초<br>'
}, i*1000)
}
// 3. 버튼을 클릭했을 때, Click! 이라고 나타내주기
// => addEventListner
document.getElementById('btn').addEventListener('click', function(){
timer.innerHTML += 'Click✨'+'<br>'
})
// 단, jQuery 문법을 사용하지 않고, 순수 자바스크립트 문법만 사용
</script>
</body>
</html>728x90
반응형
'언어 > JavaScript' 카테고리의 다른 글
| JS_jQuery 실습 (0) | 2022.07.13 |
|---|---|
| JS_jQuery(라이브러리) (0) | 2022.07.12 |
| JS_DOM_이미지 변경 (0) | 2022.07.11 |
| JS_element 스타일 변경 (0) | 2022.07.11 |
| JS_DOM (0) | 2022.07.11 |