반응형

javascript 18

JavaScript 실습: Todo List 만들기 - 초보자도 30분이면 완성!

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

JavaScript 마우스 이벤트와 키보드 이벤트 - 핵심 가이드

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

JavaScript 이벤트 처리 - onclick vs addEventListener 완전 가이드

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

JavaScript 실습: 버튼 클릭 시 배경 색 바꾸기 - 단계별 가이드

실습 목표목표: 버튼을 클릭할 때마다 웹페이지의 배경색이 변경되는 인터랙티브 기능을 만들어봅시다.🎯 학습 포인트이벤트 리스너 활용DOM 스타일 조작배열과 랜덤 함수 사용사용자 인터페이스 개선기본 버전 만들기가장 간단한 형태부터 시작해보겠습니다.1단계: HTML 구조 배경색 변경하기 배경색 바꾸기 2단계: CSS 스타일링3단계: JavaScript 기본 기능실행 결과:첫 번째 클릭: 배경색이 연한 파란색으로 변경두 번째 클릭: 배경색이 연한 산호색으로 변경세 번째 클릭: 다시 연한 파란색으로 변경여러 색상으로 업그레이드이제 더 많은 색상을 사용해봅시다.개선된 JavaScript실행 결과:클릭할 때마다 7가지 색상이 순환하며 변경됩니다.버튼 텍스트도 다음 색상 이름으로..

JavaScript DOM 조작 - 내용 변경, 스타일 변경, 클래스 조작 가이드

DOM 조작이란?DOM 조작은 JavaScript로 HTML 요소의 내용, 스타일, 속성을 동적으로 변경하는 것입니다. 정적인 웹페이지를 사용자와 상호작용하는 동적인 웹 애플리케이션으로 만드는 핵심 기술입니다.🔍 기본 HTML 예제 원래 제목 원래 내용입니다. 클릭하세요내용 변경하기HTML 요소의 텍스트나 HTML 내용을 JavaScript로 변경할 수 있습니다.textContent vs innerHTMLlet title = document.getElementById('title');let description = document.querySelector('.description');// textContent: 순수 텍스트만 변경title.textContent = '새로운 제목';// innerH..

JavaScript DOM 요소 선택 - getElementById, querySelector 완전 가이드

DOM 요소 선택이란?DOM 요소 선택은 HTML 문서에서 특정 요소를 JavaScript로 가져오는 과정입니다. 요소를 선택해야 내용을 변경하거나 이벤트를 추가할 수 있습니다.🔍 기본 HTML 예제 제목 홈 소개 설명문이 HTML에서 다양한 방법으로 요소를 선택할 수 있습니다.getElementById - ID로 선택getElementById()는 ID 속성으로 하나의 요소를 선택하는 가장 기본적이고 빠른 방법입니다.기본 문법// 문법document.getElementById('아이디명')// 사용 예제let header = document.getElementById('header');console.log(header); // ...특징과 활용// ID는 문서에..

DOM이란? 기본 개념 - JavaScript로 웹페이지 조작하기

DOM이란?DOM(Document Object Model)은 HTML 문서를 JavaScript로 조작할 수 있게 해주는 인터페이스입니다. 브라우저가 HTML을 읽어서 만든 객체 모델로, 웹페이지의 모든 요소를 객체로 표현합니다.🔍 DOM의 역할 안녕하세요! DOM을 배워봅시다. // JavaScript로 DOM 조작document.getElementById('title').textContent = '제목 변경!';document.querySelector('.content').style.color = 'red';DOM을 통해 HTML 요소의 내용, 스타일, 속성을 자유롭게 변경할 수 있습니다.DOM 트리 구조DOM은 HTML 문서를 트리 구조로 표현합니다. 각 HTML 요소는 노드(No..

JavaScript 콜백 함수 개념 이해 - 간단 가이드

콜백 함수란?콜백 함수(Callback Function)는 다른 함수의 매개변수로 전달되어, 특정 시점에 호출되는 함수입니다. "나중에 다시 호출(call back)한다"는 의미에서 콜백이라고 부릅니다.🔍 콜백 함수의 핵심 개념// 콜백 함수를 받는 함수function greetUser(name, callback) { console.log("안녕하세요, " + name + "님!"); callback(); // 콜백 함수 실행}// 콜백 함수 정의function showWelcome() { console.log("환영합니다!");}// 사용greetUser("김철수", showWelcome);실행 결과:안녕하세요, 김철수님!환영합니다!기본 사용법1단계: 간단한 콜백 함수// 계산 후 결..

JavaScript 화살표 함수 (Arrow Function) 완전 가이드

화살표 함수란?화살표 함수(Arrow Function)는 ES6(ES2015)에서 도입된 함수 표현식의 간결한 문법입니다. => 기호를 사용하여 함수를 정의하며, 기존 함수 표현식보다 짧고 읽기 쉬운 코드를 작성할 수 있습니다. 특히 콜백 함수나 간단한 함수를 작성할 때 매우 유용합니다.🔍 왜 화살표 함수가 필요할까?// ES5 이전 방식 (길고 복잡)let numbers = [1, 2, 3, 4, 5];let doubled = numbers.map(function(num) { return num * 2;});// ES6 화살표 함수 (간결)let doubledArrow = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8..

JavaScript 함수의 매개변수와 반환값 완전 가이드

매개변수와 반환값이란?매개변수(Parameter)는 함수가 작업을 수행하기 위해 필요한 입력값이고, 반환값(Return Value)은 함수가 작업을 완료한 후 돌려주는 결과값입니다. 이 둘은 함수를 재사용 가능하고 유연하게 만드는 핵심 요소입니다.🔍 기본 개념// 매개변수: name (입력)// 반환값: 인사말 문자열 (출력)function greet(name) { return "안녕하세요, " + name + "님!";}let message = greet("김철수"); // "안녕하세요, 김철수님!"console.log(message);매개변수 (Parameters)매개변수는 함수가 외부로부터 받는 입력값으로, 함수의 유연성과 재사용성을 높여줍니다. JavaScript에서는 다양한 방식으로 매개..

반응형