분류 전체보기23 [21일차] JavaScript 프로젝트 - 간단한 웹 앱 만들기 (To-Do List) -기본 마지막 편 이번 21일 차에서는 지금까지 배운 내용을 종합적으로 활용해, 간단한 "할 일 목록(To-Do List)" 웹 앱을 만들어보는 시간을 가집니다. 이 프로젝트를 통해 JavaScript의 실용적인 활용을 경험하고, 웹 애플리케이션 개발의 기초를 익힐 수 있습니다.목차프로젝트 소개와 목표HTML 구조 만들기CSS로 스타일링하기JavaScript로 기능 구현하기 할 일 추가 할 일 완료 표시 할 일 삭제추가 기능 Local Storage를 이용한 데이터 저장 (선택 사항) 애니메이션 효과 추가 (선택 사항)정리와 연습문제1. 프로젝트 소개와 목표목표할 일 목록을 추가, 삭제, 완료 표시하는 간단한 웹 앱을 만들어봅니다.사용자는 입력창에 내용을 작성하고 "추가" 버튼을 눌러, 할 일을 목록에 추가할 수.. 2024. 11. 27. [20일차] 기본 애니메이션 효과 주기 목차애니메이션 효과란?자바스크립트를 활용한 애니메이션 기초setInterval과 setTimeout 활용CSS와 자바스크립트 활용실습: 박스 이동 애니메이션추가 예제: 색상 변경 애니메이션연습 문제정리 및 다음 단계1. 애니메이션 효과란?애니메이션은 HTML 요소의 스타일 속성을 시간에 따라 점진적으로 변경하는 것을 의미합니다. 이를 통해 웹 페이지에 시각적 효과를 추가할 수 있습니다.예를 들어:박스가 화면에서 움직이는 효과버튼이 색깔을 천천히 변화시키는 효과이미지가 확대되거나 축소되는 효과2. 자바스크립트를 활용한 애니메이션 기초2.1 setInterval과 setTimeout 활용자바스크립트에서 애니메이션은 주로 setInterval이나 setTimeout을 사용하여 특정 시간 간격으로 스타일을 업데.. 2024. 11. 26. [19일차] JavaScript로 스타일 변경하기 (CSS 조작) 목차JavaScript로 CSS 조작이란?CSS 조작 기본 방법 2.1 style 속성으로 스타일 변경 2.2 CSS 클래스 추가 및 제거다양한 CSS 스타일 조작하기 3.1 여러 스타일 속성 한 번에 적용 3.2 CSS 변수 조작실습: 버튼 클릭으로 배경색 변경연습문제연습문제의 답1. JavaScript로 CSS 조작이란?JavaScript를 사용하여 HTML 요소의 스타일을 동적으로 변경할 수 있습니다.이를 통해 다음과 같은 작업이 가능합니다:버튼 클릭 시 텍스트 색상 변경특정 이벤트 발생 시 레이아웃 업데이트애니메이션 효과 추가2. CSS 조작 기본 방법JavaScript로 CSS를 변경하는 주요 방법은 style 속성과 CSS 클래스 추가/제거입니다.2.1 style 속성으로 스타일 변경e.. 2024. 11. 25. [18일차] 간단한 입력 폼 만들기 (HTML과 JS로) 목차입력 폼이란 무엇인가?HTML로 간단한 입력 폼 만들기입력값 가져오기 (JavaScript로 처리)입력값 검증하기실습: 사용자 이름과 나이 출력연습문제연습문제의 답1. 입력 폼이란 무엇인가?입력 폼은 사용자로부터 데이터를 입력받는 HTML 구성 요소입니다.예를 들어:이름이메일비밀번호입력받은 데이터는 JavaScript를 이용해 즉시 처리하거나 서버로 보낼 수 있습니다.2. HTML로 간단한 입력 폼 만들기HTML에서는 태그를 사용해 입력 폼을 만듭니다.다양한 입력 요소를 추가할 수 있습니다:: 텍스트 입력: 숫자 입력: 여러 줄 텍스트 입력: 버튼예제: 간단한 HTML 입력 폼 이름: 나이: 제출 3. 입력값 가져오기 (JavaScript로 처리)JavaScript를 사용하면 사.. 2024. 11. 24. [17일차] 이벤트 처리와 이벤트 리스너 목차이벤트란 무엇인가?이벤트 리스너란?이벤트 처리 방법 HTML 속성 방식 DOM 프로퍼티 방식 addEventListener 방식다양한 이벤트 유형 마우스 이벤트 키보드 이벤트 폼 이벤트이벤트 전파와 중단실습: 버튼 클릭으로 내용 변경하기연습문제연습문제의 답1. 이벤트란 무엇인가?이벤트는 사용자가 웹페이지에서 발생시키는 동작을 의미합니다. 예를 들면:버튼 클릭키보드 입력마우스를 올리는 동작JavaScript는 이러한 이벤트를 감지하고, 특정 동작을 수행하도록 프로그래밍할 수 있습니다.2. 이벤트 리스너란?이벤트 리스너(Event Listener)는 특정 이벤트가 발생했을 때 실행될 코드를 등록하는 기능입니다.예를 들어, 버튼을 클릭했을 때 실행될 코드를 지정할 수 있습니다.3. 이벤트 처리 .. 2024. 11. 23. [16일차] HTML 요소 선택 및 수정 (document.querySelector 등) 목차HTML 요소 선택하기 document.querySelector와 document.querySelectorAll 기타 DOM 선택자HTML 요소 수정하기 텍스트 수정 (textContent, innerHTML) 속성 수정 (setAttribute, getAttribute) 스타일 수정 (style)실습: HTML 요소 선택 및 수정연습문제연습문제의 답1. HTML 요소 선택하기JavaScript에서 HTML 요소를 선택하는 방법은 매우 다양합니다. document.querySelector는 CSS 선택자를 활용해 요소를 선택할 수 있는 강력한 도구입니다.1.1 document.querySelectorCSS 선택자를 사용해 첫 번째 요소를 선택합니다.사용법:const element =.. 2024. 11. 22. [15일차] DOM(Document Object Model) 이해하기 목차DOM이란 무엇인가?DOM의 구조 이해하기DOM과 JavaScript의 관계DOM 조작의 기본실습: 간단한 DOM 구조 이해연습문제1. DOM이란 무엇인가?DOM은 HTML이나 XML 문서를 프로그래밍적으로 조작할 수 있는 객체 모델입니다.웹 브라우저는 HTML 코드를 읽어 DOM 트리라는 구조를 생성하며, 이를 통해 JavaScript가 문서의 내용, 구조, 스타일을 변경할 수 있습니다.DOM의 주요 특징:트리 구조: DOM은 HTML 요소를 트리 형태로 나타냅니다.동적 조작 가능: JavaScript로 DOM을 변경, 추가, 삭제할 수 있습니다.2. DOM의 구조 이해하기DOM은 계층 구조를 가지며, 각각의 HTML 요소는 DOM 트리의 노드(Node)로 표현됩니다.예제 HTML 코드: .. 2024. 11. 21. [14일차] 자바스크립트에서 오류 처리하기 (try, catch) 목차try...catch 문법기본 예제 : 오류처리하기throw로 사용자 정의 오류 생성finally 블록 사용하기다양한 오류 객체 다루기연습문제1. try...catch 문법try...catch는 다음과 같은 구조로 사용됩니다:try { // 실행할 코드} catch (error) { // 오류를 처리하는 코드} finally { // 선택적으로 항상 실행되는 코드 (선택 사항)}try 블록: 실행하고자 하는 코드를 넣습니다. 이 코드에서 오류가 발생하면 catch 블록으로 넘어갑니다.catch 블록: try에서 발생한 오류를 처리하는 코드를 넣습니다. catch 블록은 error 객체를 사용해 오류 정보를 제공합니다.finally 블록 (선택 사항): 오류 발생 여부와 상관없이 항상 .. 2024. 11. 20. [13일차] JSON 이해와 기초 목차JSON이란?JSON 구조JSON과 JavaScript 객체JSON 다루기JSON 활용 예제JSON 연습 문제1. JSON이란?JSON은 JavaScript Object Notation의 약자로, 데이터를 저장하거나 전송하기 위해 사용하는 텍스트 기반 데이터 형식입니다.다음은 JSON의 주요 특징입니다:경량 데이터 형식: 사람과 기계 모두 쉽게 읽고 쓸 수 있음키-값 쌍으로 구성됨JavaScript 객체와 유사하지만, 엄격한 규칙이 있음JSON의 주요 사용 사례웹 애플리케이션: 서버와 클라이언트 간 데이터 전송API 응답 형식: RESTful API에서 JSON을 사용하여 데이터를 주고받음데이터 저장: 설정 파일, 로그 데이터 등2. JSON 구조JSON은 아래와 같은 기본 데이터 타입을 지원합니다:.. 2024. 11. 19. [12일차] JavaScript 객체(Object) 이해: 기초 개념부터 활용 목차객체란 무엇인가?객체 선언 및 초기화객체 속성 다루기메서드와 객체 활용객체의 반복과 순회JavaScript 객체와 C++ 객체 요약 비교실습: 간단한 객체 프로그램 만들기1. 객체란 무엇인가?객체(Object)는 키(key)와 값(value)의 쌍으로 구성된 데이터를 저장하는 JavaScript의 데이터 구조입니다.배열이 데이터를 순서대로 저장한다면, 객체는 데이터를 의미 있는 이름(키)에 저장합니다.예시:let person = { name: "홍길동", age: 25, job: "개발자"};위 객체는 name, age, job이라는 키를 가지고 있으며, 각각의 키에 "홍길동", 25, "개발자"라는 값이 저장되어 있습니다.2. 객체 선언 및 초기화1) 객체 선언객체는 중괄호 {}를 .. 2024. 11. 18. 이전 1 2 3 다음
