본문 바로가기

웹/JavaScript

(17)
[JS] 문서 객체 모델(DOM) 1 - DOM이란? / document 객체와 관련 메소드 더보기 문서 객체 모델(DOM)이란? 1. DOM의 계층 구조 (노드 트리, HTML 문서 트리) 2. Document 객체 1) HTML 요소 선택 메소드 2) HTML 요소 생성 메소드 3) HTML 이벤트 핸들러 추가 메소드 4) HTML 객체 집합 3. DOM 요소의 선택 및 변경 문서 객체 모델(DOM, Doucument Object Model) : HTML 또는 XML 문서에 접근하기 위한 일종의 인터페이스. Document 객체와 관련된 객체들의 집합. ↳ 모든 HTML 요소는 HTML DOM의 표준화된 방법을 통해 접근 가능. ↳ 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. ↳ 웹 문서의 구조화된 표현을 제공하여 ..
[JS] 16. 응용: 비 구조화 할당 / spread 연산자 1) 비 구조화 할당 비 구조화 할당(구조 분해 할당): 배열의 요소들 또는 객체의 프로퍼티 값들을 변수에 할당받아 사용하는 방법. ① 배열의 비 구조화 할당 배열의 비 구조화 할당은 대괄호를 이용하여 배열의 요소들을 인덱스 순서대로 변수에 할당합니다. let arr = [1, 2, 3]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //1,2,3 ⇓ let arr = [1, 2, 3]; let [one, two, three,four] = arr; //배열 arr의 요소를 인덱스 순서대로 각각 변수 one, two, three에 할당 console.log(one, two, three,four); ..
[JS] 15. 응용: 조건문 업그레이드 방법 조건문을 더 간결하고 효율적으로 작성할 수 있는 방법 중 가장 기본적인 두 가지 방법을 알아보겠습니다. ① 배열 내장함수 includes 이용 조건문의 조건식이 여러가지 케이스 중 하나에 해당하는지를 비교하는 경우일 때 배열 내장함수 includes를 이용하는 방법입니다. [예시 코드] /* 태극기에 사용되는 색상인지를 검사 */ function isTaegeukgiColor(color) { if ( color == "white" || color == "black" || color == "red" || color == "blue" ) { return true; } return false; } const color1 = isTaegeukgiColor("red"); const color2 = isTaegeu..
[JS] 14. 응용: Truthy & Falsy / 삼항 연산자 / 단락 회로 평가 1) Truthy & Falsy Truthy는 참은 아니지만 참 값은 값, Falsy는 거짓은 아니지만 거짓 같은 값입니다. 자바스크립트의 조건식에는 boolean형 값 외에도 자바스크립트만의 특정 기준으로 인자를 참이나 거짓으로 분류하는 속성이 있습니다. 여기에서 나오는 개념이 Truthy와 Falsy입니다. Boolean 타입의 true가 아니어도 true로 분류되는 값들을 Truthy, 반대로 false가 아니어도 false로 분류되는 값들을 Falthy라고 부릅니다. [Flathy 값] null undefined 0, -0 NaN "" / '' / `` (빈 문자열) flase falty로 정의된 값들을 제외한 나머지 값들은 모두 truty 값으로 분류됩니다. [활용 예시] const getNam..
[JS] 13. 기초 문법: 배열 내장함수 배열은 배열을 쉽게 다룰 수 있도록 도움을 주는 굉장히 많은 수의 유용한 내장함수들을 가지고 있습니다. 배열 내장함수를 잘 이용하면 훨씬 더 깔끔하고 유연하면서 간결한 코드를 작성할 수 있습니다. 알아볼 내장함수는 forEach, map, includes, indexOf, findIndex, find, filter, slice, concat, sort, join 이렇게 총 11가지 입니다. 이외에도 더 많은 유용한 내장함수들이 있지만 우선 기본적인 내장함수들만 정리해보겠습니다. [ 들어가기 전에] 자바스크립트의 자료형은 모두 객체로 이루어져 있습니다. 그렇기 때문에 내장함수를 사용할 때는 객체의 메서드를 사용하는 것과 동일한 방식을 이용합니다. (객체의 프로퍼티에 접근하는 방식 중 점 표기법 - '객체명..
[JS] 12. 기초 문법: 반복문 (for문) 반복문은 특정 명령을 여러 번 실행하는 것을 도와주는 문법입니다. 반복문을 이용하면 똑같은 코드를 여러 번 중복해서 작성지 않고도 같은 동작을 반복해서 실행할 수 있습니다. for 반복문 [구조] for (초기식; 조건식; 증감 연산) { 반복 수행할 명령 } for (let i = 0; i < 5; i++) { console.log("오늘도 즐거운 하루"); } ↳ '오늘도 즐거운 하루'를 5번 출력합니다. [for문을 이용하여 배열 요소 접근하기] for 반복문은 배열의 요소 또는 객체의 프로퍼티 값에 순차적으로 접근할 때 매우 유용하게 사용할 수 있습니다. 배열 순회 const arr = ["H", "e", "l", "l", "o"]; for (let i = 0; i < arr.length; i++..
[JS] 11. 기초 문법: 배열 배열: 자바스크립트의 비 원시 자료형 중 하나로 순서 있는 요소들의 집합. [생성 방법] ① new 키워드 let 배열명 = new Array(); ② 베열 리터럴 let 배열명 = []; //배열 생성 let 배열명 = [ 배열 요소 ] //배열 생성과 동시에 초기화 let arr = [1, "2", true, null, undefined, {}, [], function(){}]; console.log(arr); 콘솔 출력 화면 [배열 요소 접근] 배열명[인덱스] * 인덱스: 배열이 위치한 순서. (0번째부터 시작) let arr = [1, 2, 3, 4, 5]; console.log(arr[0]); //1 출력 console.log(arr[1]); //2 console.log(arr[2]); //3 ..
[JS] 10. 기초 문법: 객체 자바스크립트에서 객체란 비 원시 자료형 중 하나로 키/이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합을 의미합니다. [생성 방법] ① new 키워드 let 객체명 = new Object(); ② 객체 리터럴 방식 (더 많이 사용) let 객체명 = { (객체)프로퍼티 }; * 객체 프로퍼티(property): 객체 내부의 속성 ↳ 콜론( : )을 이용해 key: value 형식으로 작성합니다. let a = { key1: "value1", //멤버 key2: 123, key3: true, key4: undefined, key5: [1, 2], key6: function () {} //메서드 }; console.log(a); * 멤버와 메서드: 객체를 다루는 방법이라는 뜻에서 객체 안..