반응형 JavaScript 기초 시리즈8 [JavaScript 기초 시리즈] 7일차: JavaScript로 DOM 조작하기 7. DOM 조작 기초DOM이란 무엇인가?DOM(Document Object Model)은 HTML 문서를 트리 구조로 나타낸 것입니다. JavaScript를 사용하면 DOM을 조작하여 웹 페이지의 콘텐츠와 구조를 동적으로 변경할 수 있습니다.DOM 요소 선택JavaScript에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 1. getElementByIdID 속성을 사용하여 요소를 선택합니다.let element = document.getElementById("myElement"); 2. getElementsByClassName클래스 이름을 사용하여 요소를 선택합니다.let elements = document.getElementsByClassName("myClass"); 3. getElemen.. 2024. 8. 7. [JavaScript 기초 시리즈] 6일차: JavaScript 조건문과 반복문에 대해 알아보자 6. 조건문과 반복문조건문이란 무엇인가?조건문은 특정 조건에 따라 다른 코드를 실행할 수 있도록 하는 문법 구조입니다. JavaScript에서는 if, else if, else, switch 조건문을 사용할 수 있습니다.if, else if, else 문1. if 문조건이 참인 경우에만 코드를 실행합니다.let age = 18;if (age >= 18) { console.log("성인입니다.");}2. else 문if 문의 조건이 거짓인 경우에 실행할 코드를 지정합니다.let age = 16;if (age >= 18) { console.log("성인입니다.");} else { console.log("미성년자입니다.");} 3. else if 문여러 조건을 검사할 때 사용합니다.let score = .. 2024. 8. 6. [JavaScript 기초 시리즈] 5일차: JavaScript 객체와 배열에 대해 알아보자 5. 객체와 배열객체란 무엇인가?객체는 키-값 쌍의 컬렉션입니다. 객체를 사용하면 여러 관련 데이터를 하나의 단위로 묶을 수 있습니다.객체 생성1. 객체 리터럴객체 리터럴을 사용하여 객체를 생성할 수 있습니다.let person = { name: "Alice", age: 30, greet: function() { console.log("Hello, " + this.name + "!"); }};console.log(person.name); // 출력: Aliceconsole.log(person.age); // 출력: 30person.greet(); // 출력: Hello, Alice! 2. 프로퍼티 접근객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다.console.. 2024. 8. 5. [JavaScript 기초 시리즈] 4일차: JavaScript 함수와 스코프에 대해 알아보자 4. 함수와 스코프함수란 무엇인가?함수는 특정 작업을 수행하는 코드 블록입니다. 함수를 사용하면 코드의 재사용성을 높이고, 코드를 더 깔끔하고 구조화된 방식으로 작성할 수 있습니다.함수 선언과 호출1. 함수 선언함수를 선언하는 방법은 다음과 같습니다.function sayHello() { console.log("Hello, World!");} 2. 함수 호출함수를 호출하여 실행할 수 있습니다.sayHello(); // 출력: Hello, World! 3. 매개변수와 인수함수는 매개변수를 받을 수 있으며, 호출할 때 인수를 전달할 수 있습니다.function greet(name) { console.log("Hello, " + name + "!");}greet("Alice"); // 출력: Hello.. 2024. 8. 4. [JavaScript 기초 시리즈] 3일차: JavaScript 연산자와 표현식에 대해 알아보자 3. 연산자와 표현식연산자란 무엇인가?연산자는 값을 연산하는 데 사용되는 기호나 키워드입니다. JavaScript에는 다양한 종류의 연산자가 있습니다.기본 연산자1. 산술 연산자산술 연산자는 수학적 계산을 수행합니다.let a = 10;let b = 5;console.log(a + b); // 덧셈: 15console.log(a - b); // 뺄셈: 5console.log(a * b); // 곱셈: 50console.log(a / b); // 나눗셈: 2console.log(a % b); // 나머지: 0 2. 증감 연산자증감 연산자는 변수의 값을 1씩 증가하거나 감소시킵니다.let x = 10;x++;console.log(x); // 출력: 11x--;console.log(x); // 출.. 2024. 8. 3. [JavaScript 기초 시리즈] 2일차: JavaScript 변수와 자료형에 대해 알아보자 2. 변수와 자료형변수란 무엇인가?변수는 데이터를 저장하기 위한 이름이 붙은 저장소입니다. JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다.변수 선언 방식1. varvar는 ES6 이전에 사용되던 변수 선언 방식입니다. 함수 스코프를 가지며, 중복 선언이 가능합니다.var name = 'JavaScript';console.log(name); // 출력: JavaScriptvar name = 'ECMAScript';console.log(name); // 출력: ECMAScript 2. letlet은 블록 스코프를 가지며, 중복 선언이 불가능합니다. ES6에서 도입되었습니다.let age = 25;console.log(age); // 출력: 25// l.. 2024. 8. 2. [JavaScript 기초 시리즈] 1일차: JavaScript의 역사와 기본 개념 1. JavaScript 소개 및 역사JavaScript란 무엇인가?JavaScript는 웹 개발의 핵심 언어 중 하나로, 웹 페이지를 동적으로 만들기 위해 사용됩니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 담당한다면, JavaScript는 웹 페이지의 동작을 담당합니다. JavaScript를 사용하면 사용자의 입력에 반응하고, 데이터를 조작하며, 페이지의 콘텐츠를 동적으로 업데이트할 수 있습니다.JavaScript의 역사JavaScript는 1995년에 넷스케이프(Netscape)에서 브렌던 아이크(Brendan Eich)에 의해 처음 개발되었습니다. 당시 JavaScript는 모카(Mocha)라는 이름으로 시작되었고, 이후 라이브스크립트(LiveScript)를 거쳐 JavaScript로 명.. 2024. 8. 1. [Javascript 기초 시리즈] 목차 1. JavaScript 기초 시리즈1.1 JavaScript 소개 및 역사1.2 변수와 자료형1.3 연산자와 표현식1.4 함수와 스코프1.5 객체와 배열1.6 조건문과 반복문1.7 DOM 조작 기초 2024. 6. 19. 이전 1 다음 반응형