코딩하는 패션이과생

Todo List 프로젝트 소개Todo List(할 일 목록)는 JavaScript 학습에 완벽한 첫 번째 프로젝트입니다. DOM 조작, 이벤트 처리, 배열 다루기, 로컬 저장소 활용 등 실무에서 자주 사용하는 핵심 기능들을 모두 경험할 수 있습니다.🎯 학습 목표DOM 조작: 요소 생성, 수정, 삭제이벤트 처리: 클릭, 키보드 입력배열 메서드: push, filter, map 활용localStorage: 데이터 영구 저장실무 패턴: 코드 구조화와 함수 분리필요한 기능 정리우리가 만들 Todo List의 핵심 기능들:✅ 기본 기능할 일 추가하기할 일 완료 표시하기할 일 삭제하기할 일 목록 표시하기🚀 고급 기능브라우저 새로고침 후에도 데이터 유지전체 삭제 기능완료된 항목 숨기기/보기남은 할 일 개수 표시..

이벤트 객체란?이벤트 객체(Event Object)는 이벤트가 발생했을 때 자동으로 생성되는 객체로, 이벤트에 대한 상세한 정보를 담고 있습니다. 이벤트 핸들러 함수의 첫 번째 매개변수로 전달됩니다.🔍 기본 사용법// 이벤트 객체 받기button.addEventListener('click', function(event) { console.log('이벤트 객체:', event); console.log('클릭된 요소:', event.target); console.log('이벤트 타입:', event.type);});// 화살표 함수에서도 동일button.addEventListener('click', (e) => { console.log('이벤트:', e);});이벤트 객체 주요 속성이..

이벤트 개요마우스 이벤트와 키보드 이벤트는 사용자의 입력을 감지하여 웹페이지가 반응하도록 만드는 핵심 기능입니다. 이 두 이벤트를 활용하면 클릭, 호버, 키 입력 등 다양한 상호작용을 구현할 수 있습니다.🔍 기본 HTML 예제 마우스 영역이벤트 결과마우스 이벤트마우스로 수행할 수 있는 다양한 동작에 대응하는 이벤트들입니다.주요 마우스 이벤트 종류let mouseArea = document.getElementById('mouseArea');let output = document.getElementById('output');// 클릭 이벤트mouseArea.addEventListener('click', function(event) { output.textContent = '클릭됨!'; co..

이벤트 처리란?이벤트 처리는 사용자의 행동(클릭, 키 입력, 마우스 움직임 등)에 반응하여 JavaScript 코드를 실행하는 것입니다. JavaScript에서 이벤트를 처리하는 주요 방법은 onclick과 addEventListener입니다.🔍 기본 HTML 예제클릭하세요결과가 여기에 표시됩니다onclick 속성 사용법onclick은 가장 간단한 이벤트 처리 방법입니다. HTML 속성 또는 JavaScript 속성으로 사용할 수 있습니다.HTML에서 onclick 사용HTML onclick간단한 알림색상 변경JavaScript에서 onclick 사용// JavaScript 속성으로 설정let button = document.getElementById('myButton');button.onclick =..