강의 내용
1. DOM과 이벤트 기초
DOM(Document Object Model)과 이벤트 처리의 기본 개념을 학습합니다.
DOM 요소 선택하기
// ID로 요소 선택
const title = document.getElementById('title');
const button = document.getElementById('myButton');
// 클래스로 요소 선택
const items = document.getElementsByClassName('item');
const cards = document.querySelectorAll('.card');
// 태그로 요소 선택
const paragraphs = document.getElementsByTagName('p');
const allDivs = document.querySelectorAll('div');
// CSS 선택자로 요소 선택
const firstItem = document.querySelector('.item'); // 첫 번째만
const navLinks = document.querySelectorAll('nav a'); // 모든 nav a 요소이벤트 리스너 추가하기
// 클릭 이벤트
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
// 화살표 함수 사용
button.addEventListener('click', () => {
console.log('버튼 클릭됨');
});
// 여러 이벤트 처리
const input = document.getElementById('textInput');
input.addEventListener('focus', () => {
console.log('입력창에 포커스됨');
});
input.addEventListener('blur', () => {
console.log('입력창에서 포커스 해제됨');
});
input.addEventListener('input', (event) => {
console.log('입력된 내용:', event.target.value);
});2. 주요 이벤트 타입
웹 개발에서 자주 사용되는 이벤트들을 알아봅시다.
// 마우스 이벤트
element.addEventListener('click', handleClick); // 클릭
element.addEventListener('dblclick', handleDoubleClick); // 더블클릭
element.addEventListener('mouseenter', handleMouseEnter); // 마우스 진입
element.addEventListener('mouseleave', handleMouseLeave); // 마우스 떠남
element.addEventListener('mouseover', handleMouseOver); // 마우스 오버
// 키보드 이벤트
document.addEventListener('keydown', (e) => {
console.log('키 눌림:', e.key);
if (e.key === 'Enter') {
console.log('엔터 키 눌림');
}
});
document.addEventListener('keyup', (e) => {
console.log('키 떼어짐:', e.key);
});
// 폼 이벤트
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 기본 제출 동작 방지
console.log('폼 제출됨');
});
// 윈도우 이벤트
window.addEventListener('load', () => {
console.log('페이지 완전 로드됨');
});
window.addEventListener('resize', () => {
console.log('윈도우 크기 변경됨');
});3. DOM 조작하기
JavaScript로 HTML 요소의 내용과 스타일을 동적으로 변경하는 방법을 학습합니다.
요소 내용 변경
const title = document.getElementById('title');
// 텍스트 내용 변경
title.textContent = '새로운 제목';
// HTML 내용 변경
title.innerHTML = '<strong>굵은 제목</strong>';
// 속성 변경
const image = document.getElementById('myImage');
image.src = 'new-image.jpg';
image.alt = '새로운 이미지';
// 클래스 조작
const box = document.getElementById('box');
box.classList.add('highlight'); // 클래스 추가
box.classList.remove('old-style'); // 클래스 제거
box.classList.toggle('active'); // 클래스 토글
box.classList.contains('highlight'); // 클래스 존재 확인스타일 변경
const element = document.getElementById('myElement');
// 직접 스타일 변경
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '20px';
element.style.display = 'none';
// 스타일 객체로 여러 속성 변경
Object.assign(element.style, {
color: 'blue',
fontSize: '18px',
padding: '10px',
border: '2px solid black'
});4. 실용적인 이벤트 예제
실제 웹 개발에서 자주 사용되는 이벤트 처리 패턴들을 살펴봅시다.
버튼 클릭으로 내용 변경
<!-- HTML -->
<button id="changeButton">내용 변경</button>
<p id="content">원래 내용</p>// JavaScript
const button = document.getElementById('changeButton');
const content = document.getElementById('content');
let isChanged = false;
button.addEventListener('click', () => {
if (!isChanged) {
content.textContent = '변경된 내용!';
button.textContent = '원래대로';
isChanged = true;
} else {
content.textContent = '원래 내용';
button.textContent = '내용 변경';
isChanged = false;
}
});입력값에 따른 실시간 반응
<!-- HTML -->
<input type="text" id="nameInput" placeholder="이름을 입력하세요">
<p id="greeting">안녕하세요!</p>// JavaScript
const nameInput = document.getElementById('nameInput');
const greeting = document.getElementById('greeting');
nameInput.addEventListener('input', (e) => {
const name = e.target.value;
if (name.trim() === '') {
greeting.textContent = '안녕하세요!';
} else {
greeting.textContent = `안녕하세요, ${name}님!`;
}
});이미지 갤러리 만들기
<!-- HTML -->
<div class="thumbnails">
<img src="thumb1.jpg" data-full="full1.jpg" class="thumb">
<img src="thumb2.jpg" data-full="full2.jpg" class="thumb">
<img src="thumb3.jpg" data-full="full3.jpg" class="thumb">
</div>
<img id="mainImage" src="full1.jpg">// JavaScript
const thumbnails = document.querySelectorAll('.thumb');
const mainImage = document.getElementById('mainImage');
thumbnails.forEach(thumb => {
thumb.addEventListener('click', (e) => {
const fullImageSrc = e.target.dataset.full;
mainImage.src = fullImageSrc;
// 활성 썸네일 표시
thumbnails.forEach(t => t.classList.remove('active'));
e.target.classList.add('active');
});
});