-

[javascript] 속성 확인 및 수정 (.value, getAttribute, setAttribute..)

property 방식의 요소 속성명 확인요소.속성명 (확인)HTML 요소의 속성을 자바스크립트 객체의 속성처럼 접근함DOM 객체의 속성(property)에 접근HTML과 약간 다르게 동작할 수 있음input.value, img.src, checkbox.checked 등실제 화면에서 바뀐 현재 상태값을 반영함자바스크립트에서 가장 자주 쓰임클래스 속성을 확인하는 경우 className 사용// [문법]요소.속성명const input = document.querySelector('input');console.log(input.value); // input에 입력된 값을 확인요소.속성명 (수정)// [문법]요소.속성명 = "변경할 속성값"const input = document.querySelecto..

[javascript] CSS 스타일 확인 및 수정 (el.style, getCoumputedStyle, SetAttribute, ..)

CSS 스타일 확인 및 수정특정요소의 css 스타일 정보에 접근하고 수정하려면 style을 사용스타일 확인요소.style요소에 직접 설정된 인라인 스타일만 확인 가능// [문법]요소.style.스타일 속성const el = document.querySelector('div');console.log(el.style.color); // 인라인 스타일로 지정된 color만 나옴window.getComputedStyle(요소)해당 요소에 최종적으로 적용된 모든 CSS 스타일을 가져옴외부 CSS, 클래스, 상속 등까지 포함해서 확인 가능.읽기 전용window는 브라우저 전역 객체로 생략가능하여 getComputedStyle(el)로 사용 가능✓ "브라우저가 계산한 결과를 가져오는 느낌 → "브라우저야, 지금 이..

클래스명을 활용한 요소 제어HTML 요소의 클래스(class)를 확인하거나, 추가하거나, 제거하거나, 토글 하는 등의 작업은 주로 Element.classList를 통해 수행classListDOM 요소의 class 속성을 조작할 수 있도록 제공되는 내장 객체 (DOMTokenList)classList 객체를 통해 클래스의 추가, 제거, 확인 등 다양한 메서드를 활용해 조작 가능유새 배열 객체로 실제 Array 메서드는 사용 불가)const box = document.querySelector('.box');console.log(box.classList); // 결과: DOMTokenList ["box", "active"]classList 메서드// [문법]const element = document.que..

요소의 텍스트 추출 및 수정textContent요소 내부의 모든 텍스트를 가져옴 (공백 포함, 숨겨진 요소 포함)HTML 태그는 무시되고 순수한 텍스트만 처리스타일에 상관없이 숨겨진 텍스트도 포함해서 처리됨장점 : 텍스트만 다루고 싶을 때, 보이지 않은 텍스트까지 포함하여 텍스트 추출 가능사용 목적 : 전체 텍스트 가져오기/수정// [문법]// 텍스트 추출요소.textContent;// 텍스트 수정하기요소.textContent = "텍스트값" let el = document.querySelector("div");let txt = el.textContent;console.log(txt);innerText브라우저에서 실제로 화면에 보이는 텍스트만 가져오거나 수정HTML 태그는 무시되고 순수한 텍스트만 처리스..

유사 배열배열처럼 인덱스와 length 프로퍼티를 가지고 있지만 실제 배열(Array)은 아닌 객체를 의미유사 배열의 특징인덱스가 있음 : 마치 배열처럼 0, 1, 2... 숫자 인덱스로 접근 가능 (예: obj [0], obj [1]) length 프로퍼티가 있음 :요소 개수를 나타내는 숫자 프로퍼티가 있음 (예: obj.length) 배열 메서드 없음 : 실제 배열이 아니기 때문에, push(), pop(), forEach(), map() 같은 배열 고유 메서드는 사용할 수 없음유사 배열 예arguments 객체 (함수 내부에서 사용)NodeList (예: document.querySelectorAll()의 반환값)HTMLCollection (예: document.getElementsByTagNam..

DOM(Document Object Model) 웹 페이지의 HTML을 트리 구조로 표현한 자바스크립트 객체 웹 페이지의 구조(HTML)를 자바스크립트에서 객체(트리 구조) 형태로 표현한 모델HTML, CSS로 웹사이트를 만들 때 자바스크립트로 이를 제어하기 위해 DOM이 필요함DOM은 브라우저가 자동으로 만들어줌브라우저가 HTML을 파싱 해서 만든 객체 구조이고, 자바스크립트는 이 DOM에 접근해서 내용을 읽거나 수정할 수 있음DOM의 구조 예HTML은 계층적인 구조를 DOM은 트리 형태(노드 트리)로 바꿔 표현 각 HTML 요소가 노드(Node)로 표현되고, document는 그 모든 것의 최상위 객체[HTML 텍스트] ↓ (파싱)[DOM 트리 구조] 🗺️ └─ [노드1] 🌿 └─ [노..

switch특정 변수나 상수 또는 반환값에 따라 작업을 실행하나의 값이 여러 경우 중 어디에 해당하는 지 찾을 때 유용switch (표현식) { case value1: // value1일 때 실행 break; case value2: // value2일 때 실행 break; default: // 어떤 case와도 일치하지 않을 때 실행} expression의 결과와 case의 값을 **===(엄격 비교)**로 비교함.일치하면 해당 case의 코드를 실행하고 break를 만나면 빠져나감.break가 없으면 다음 case로 계속 넘어감(이걸 "fall-through"라고 부름).어느 case에도 일치하지 않으면 default 실행.표현식 안에 설정 가능한 값값을 도출할 수 있는..

Framework (프레임워크)애플리케이션의 구조와 흐름을 제어하기 위한 기본적인 구조(뼈대)를 제공보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 개발자에게 미리 정의된 규칙과 구조를 제공하여 일관성 있는 개발을 도와주며, 개발자는 프레임워크에서 호출되는 메소드를 구현하는 역할자바스크립트 프레임워크 종류 : Angular, React, Vue.js, Spring ...도구설명Angular전체 구조와 생명주기를 Angular가 제어ReactUI 컴포넌트만 다루지만, Next.js 같은 프레임워크와 함께 쓰면 프레임워크처럼 사용 가능* 프레임워크와 라이브러리 경계가 모호함Vue.js전체 구조와 구성요소를 정의 .. CSS 프레임워크 종류 : Bootsta..

스프레드 연산자(spread operator)0개 이상의 인수 (함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식이나 문자열과 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장 가능ES6이상 사용 가능/* [구문] */[...배열 또는 문자열]// 반환object스프레드 연산자 활용1. 배열의 결합스프레드 문법을 활용하여 배열 결합 가능const list1 = ['a', 'b', 'c'];const list2 = ['e', 'f', 'g'];const total = [...list1, ...list2];console.log(total); // ⇒ [ 'a', 'b', 'c', 'e', 'f', 'g' ]const str..

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..