반응형 Frontend/Javascript7 [Javascript] Javascript 웹 개발 필수 개념 JavaScript로 프론트엔드 개발을 하려고 할 때 중요한 개념들을 잘 이해하고 있어야 웹 애플리케이션을 효율적이고 효과적으로 개발할 수 있습니다. 1. DOM(Document Object Model) 조작1.1 DOM 선택자HTML 문서의 요소를 선택하고 조작할 수 있습니다.getElementById: 특정 ID를 가진 요소를 선택합니다.getElementsByClassName: 특정 클래스를 가진 요소를 모두 선택합니다.getElementsByTagName: 특정 태그 이름을 가진 요소를 모두 선택합니다.querySelector: CSS 선택자를 사용하여 첫 번째 요소를 선택합니다.querySelectorAll: CSS 선택자를 사용하여 모든 요소를 선택합니다.예시:let element = docu.. 2024. 6. 8. [Javascript] Javascript 규칙 JavaScript 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성, 유지보수성, 일관성이 크게 향상됩니다. 아래에 JavaScript를 작성할 때 지켜야 할 주요 컨벤션과 규칙을 정리했습니다.JavaScript 코딩 컨벤션1. 들여쓰기와 공백들여쓰기: 일반적으로 2칸 또는 4칸의 공백을 사용합니다. 일관된 들여쓰기를 유지합니다.공백: 연산자 주변, 코드 블록 사이, 함수 인수 목록 등에 적절한 공백을 사용하여 가독성을 높입니다.// 2칸 들여쓰기 예시function add(a, b) { return a + b;}// 공백 사용 예시let sum = add(2, 3);if (sum > 5) { console.log('Sum is greater than 5');}2. 중괄호와 줄바꿈중.. 2024. 6. 8. [Javascript] Javascript 예제(심화) - 수정 UI 디자인을 개선하고, 코드에서 수정된 부분에 대한 메시지를 추가하겠습니다.개선된 UI 디자인HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; ali.. 2024. 6. 8. [Javascript] Javascript 예제(심화) JavaScript의 고급 기능을 사용하여 할 일 목록(To-Do List) 애플리케이션을 구현해 보겠습니다. 이 예제에서는 할 일 추가, 삭제, 편집, 필터 기능을 포함하며, LocalStorage를 사용하여 데이터를 저장합니다.프로젝트: 고급 To-Do List 애플리케이션HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: fl.. 2024. 6. 8. [Javascript] Javascript 심화 1단계: ES6+ 기능1.1 let과 constlet과 const는 블록 스코프를 가지는 변수 선언 키워드입니다.let: 재할당이 가능한 변수 선언.const: 재할당이 불가능한 상수 선언.예시:let message = 'Hello, JavaScript!';message = 'Hello, ES6!';console.log(message); // 'Hello, ES6!'const pi = 3.14;console.log(pi); // 3.14// pi = 3.14159; // 오류 발생: 상수 재할당 불가1.2 화살표 함수화살표 함수는 더 간결한 함수 표현식을 제공합니다.예시:// 전통적인 함수 선언function add(a, b) { return a + b;}// 화살표 함수const add = (a,.. 2024. 6. 8. [Javascript] Javascript 실습 JavaScript를 사용하여 할 일 목록(To-Do List) 애플리케이션을 만들어 보겠습니다. 여기서는 항목을 추가하고 삭제할 수 있는 기능을 구현하겠습니다.HTML 코드 To-Do List Add CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.todo-container { background-color: #fff; .. 2024. 6. 8. [Javascript] Javascript 기본 1단계: JavaScript 기초 이해하기1.1 JavaScript 소개JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용되는 프로그래밍 언어입니다.JavaScript는 HTML과 CSS와 함께 웹 개발의 핵심 요소입니다.1.2 JavaScript 포함 방법인라인 스크립트: HTML 요소에 직접 JavaScript 코드를 작성합니다.내부 스크립트: 2단계: 기본 문법과 자료형2.1 변수와 상수변수 선언: var, let, const상수 선언: const예시:let message = 'Hello, JavaScript!';const pi = 3.14;2.2 자료형기본 자료형: 문자열(String), 숫자(Number), 불리언(Boolean), null, undefined참조 자료형: 객.. 2024. 6. 8. 이전 1 다음 반응형