JavaScript - DOM 이벤트 / 타이머 / 화살표 함수
1. 형변환 함수
| 함수 | 설명 | 예시 |
|---|---|---|
parseInt() | 문자열 → 정수 | parseInt("42") → 42 |
parseFloat() | 문자열 → 실수 | parseFloat("3.14") → 3.14 |
parseInt(Math.random() * 17) + 1 // 1~17 사이 랜덤 정수 생성2. BOM vs DOM
| 구분 | 설명 | 대표 객체 |
|---|---|---|
| BOM (Browser Object Model) | 브라우저 자체를 제어 | window, navigator, location |
| DOM (Document Object Model) | HTML 문서 구조를 제어 | document, 각 HTML 태그 노드 |
3. 이벤트 등록 방법
방법 1 - HTML 속성 방식 (인라인)
<button id="btn1" onclick="fun1()">버튼1</button>
<script>
function fun1() {
console.log("버튼 1이 클릭됨");
}
</script>- HTML과 JS가 섞여 유지보수가 어려움
- 간단한 테스트엔 편리
방법 2 - addEventListener() 방식 (권장)
// exam03.js
const btn2 = document.querySelector("#btn2");
btn2.addEventListener("click", function() {
console.log("버튼 2가 클릭됨");
});- HTML과 JS를 분리할 수 있어 유지보수 용이
- 동일 요소에 여러 이벤트 등록 가능
⚠️
id는 페이지 내에서 유일해야 한다.코드에서
btn2id가 두 개 선언된 것은 잘못된 예시!
4. DOMContentLoaded vs load
// DOM 트리 생성 완료 시 (이미지/CSS 다운로드 기다리지 않음)
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM 생성이 완료됨");
const aniImage = document.querySelector("#aniImage");
startAni();
});
// 모든 리소스(CSS, JS, 이미지 등) 다운로드 완료 시
window.addEventListener("load", () => {
console.log("모든 리소스가 다운로드 완료됨");
});| 이벤트 | 발생 시점 | 용도 |
|---|---|---|
DOMContentLoaded | HTML 파싱 완료 직후 | DOM 요소 접근 시작 |
load | 이미지 포함 모든 리소스 로드 완료 | 이미지 크기 측정 등 |
💡
<script>를<head>에 두면 DOM이 아직 생성되지 않아 요소를 못 찾는다.→
DOMContentLoaded안에서 DOM 접근하거나,<script>를</body>직전에 배치!
5. setInterval / setTimeout
// setInterval: 일정 간격으로 반복 실행
let timerId = setInterval(() => {
// 1초마다 실행
}, 1000);
// 중지할 때
clearInterval(timerId);
// setTimeout: 일정 시간 후 1회 실행
setTimeout(() => {
// 3초 후 1번만 실행
}, 3000);| 함수 | 반복 여부 | 중지 함수 |
|---|---|---|
setInterval(fn, ms) | 반복 실행 | clearInterval(id) |
setTimeout(fn, ms) | 1회 실행 | clearTimeout(id) |
6. 화살표 함수 (Arrow Function)
왜 사용하나?
- 코드가 짧고 간결해짐
- 콜백 함수(이벤트 핸들러, 타이머 등)에서 자주 사용
문법 비교
// 기존 function 표현식
setInterval(function() {
console.log("반복 실행");
}, 1000);
// 화살표 함수로 동일한 코드
setInterval(() => {
console.log("반복 실행");
}, 1000);축약 규칙
// 매개변수가 1개일 때 소괄호 생략 가능
const double = x => x * 2;
// 매개변수가 없거나 2개 이상은 소괄호 필수
const greet = () => "Hello!";
const add = (a, b) => a + b;
// 본문이 여러 줄이면 중괄호 + return 필요
const calc = (a, b) => {
const result = a + b;
return result;
};자바 람다식과 비교
// Java 람다식
() -> System.out.println("실행");
x -> x * 2
// JavaScript 화살표 함수
() => console.log("실행");
x => x * 2Java 람다식과 개념이 같다! 익명 함수를 간결하게 표현한 것.
7. 전체 코드 흐름 분석 (이미지 슬라이드쇼)
<script>
document.addEventListener("DOMContentLoaded", () => {
// 1. DOM 생성 완료되면 실행
const aniImage = document.querySelector("#aniImage");
startAni(); // 2. 애니메이션 시작
});
function startAni(){
timerId = setInterval(
() => {
// 3. 1초마다 1~17 사이 랜덤 숫자로 이미지 교체
var num = parseInt(Math.random() * 17) + 1;
aniImage.src = "../../images/photos/photo" + num + ".jpg";
},
1000
);
}
</script>
<body>
<img id="aniImage" src="../../images/photos/photo18.jpg" width="200" height="150"/>
</body>실행 흐름 요약:
- HTML 파싱 완료 →
DOMContentLoaded발동 #aniImage요소 참조 획득startAni()호출 →setInterval시작- 1초마다
Math.random()으로 1~17 랜덤 숫자 생성 img src교체 → 이미지 슬라이드쇼 완성
8. 핵심 정리
parseInt() → 문자열을 정수로 변환
addEventListener() → 이벤트 등록 (HTML 분리, 권장 방식)
DOMContentLoaded → DOM 준비 완료 시점에 JS 실행
setInterval() → 반복 타이머
setTimeout() → 지연 타이머
화살표 함수 => → 익명 함수를 짧게 쓰는 문법 (Java 람다식과 유사)
안녕하세요