본문 바로가기

분류 전체보기

(29)
JavaScript 요소 텍스트 값 속성 요소 텍스트 제어 속성el.innerHTMLel.innerTextel.textContent# 요소 텍스트 제어 속성속성HTML 태그 포함숨겨진 텍스트 포함줄바꿈 처리속도innerHTML포함포함 태그 사용보통innerText제외제외적용느림textContent제외포함미적용빠름# el.innerHTMLHTML 태그 내용을 가져오거나 설정함숨겨진 텍스트를 가져올 수 있으며 태그를 가져오기 때문에 줄 바꿈이 적용 된다HTML 태그를 가져오기 "때문에 XSS(스크립트 삽입 공격)에 취약 할 수 있음값 가져오기 (div) 보이는현재 텍스트1 보이지 않는 현재 텍스트값 세팅하기 (p)콘솔 화면출력 화면# el.innerText사용자에게 보이는 텍스트만 가져오거나 설정함CSS에 따라 숨겨진 텍스트는 무시..
JavaScript - DOM 선택자 2 부묘 요소 접근el.closest()요소 간 상하좌우 관계 접근el.parentElement, el.children, el.firstElementChild, el.lastElementChild, el.nextElementSibling, el.previousElementSibling문서 내 주요 DOM 요소 접근document.documentElement, document.body, document.head문서 내 특정 태그 목록 접근document.forms, document.images, document.links, document.scripts일반 / Shadow DOM 루트 접근generalEl.getRootNode(), shadowEl.getRootNode()Shadow DOM 이란?목표다양한 D..
JavaScript - DOM 선택자 1 DOM 이란?DOM 주요 선택자 getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAllHTML Collection vs NodeList 차이점예제코드목표웹 페이지에서 JavaScript를 통해 HTML 요소를 선택하는 방법은 다양하며, 상황에 따라 적절한 선택자를 사용하는 것이 중요하다. 자주 사용되는 DOM 선택자들을 살펴보자키워드getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAll HTML Collection,..
Flatpickr [5] : 플러그인 (주, 월 선택) - 날짜&시간 선택 JS 라이브러리 Flatpickr.js 소개주 선택 플러그인 (weekSelect)월 선택 플러그인 (monthSelect)예제 코드# Flatpickr.js 소개 flatpickrPlugins Plugins are essentially a set of hooks, that receive an optional config object and a flatpickr instance. Functionality requested by users that doesn’t make it to core usually ends up in a plugin. The flatpickr repo comes with a few plugins. confiflatpickr.js.org날짜 및 시간 선택 JS 기반 라이브러리 와는 반대로 CSS 커스..
JavaScript 객체의 프로퍼티와 메서드 JS 객체객체 프로퍼티 (property)객체 프로퍼티 선언객체의 프로퍼티 접근 방법객체의 메서드 선언1. 기본 함수 메서드2. 화살표 함수 메서드3. 간략화 메서드예제 코드객체 프로퍼티 동적 할당 및 삭제# JS 객체키(속성 이름, property 프로퍼티)와 값(속성 값, value)으로 구성된 데이터를 묶는 자료형다양한 데이터를 하나의 단위로 묶어서 관리할 수 있는 자료형# 객체 프로퍼티 (property)속성, 키 라고도 불리며 객체에 포함된 데이터를 나타내고, 각 값을 가질 수 있다 (HTML 요소의 속성은 Attribute, 객체의 속성은 Propety 라고 불린다. 보통 HTML 속성은 "속성", 객체의 속성은 "프로퍼티"라고 부른다)문자열, 숫자, 배열, 다른 객체 등 다양한 형태일 수도 ..
JavaScript 배열 메서드 JavaScript 배열 메서드배열 추가/삭제 메서드unshift(), shift(), push(), pop(), splice(), slice()배열 검색 메서드indexOf(), includes(), find(), findIndex()배열 변형/변환 메서드concat(), join(), reverse(), sort()배열 반복 메서드forEach(), map(), filter(), reduce()배열 조건 검사 메서드some(), every()NEW 키워드배열 메서드, 콜백함수# JavaScript 배열 메서드배열을 다루는 여러 가지 기능을 제공하는 JS 내장 함수사용 범위데이터 처리 : API 로부터 받은 데이터 배열 가공UI 렌더링 : 리스트를 렌더링할 때 데이터를 변형하거나 필터링하여 화면에 표시..
JavaScript 함수 JavaScript 함수선언적 함수 (Function Declaration)익명 함수 (Anonymous Function))함수 표현식 / 대입 함수 (Function Expression)화살표 함수 (Arrow Function)즉시 실행 함수 표현식 (IIFE)NEW 키워드선언적 함수, 호이스팅, 익명 함수, 함수 표현식, 대입 함수, 화살표 함수, this, 상위 스코프, argument 객체# JavaScript 함수입력값(매개변수)을 받아서 특정 작업을 수행하고, 결과를 반환(return)하는 코드 블록자주 사용하거나 기능 단위로 함수를 만든다함수를 사용하면 코드의 재사용성이 높아지고 모듈화와 유지보수가 쉬워진다함수는 선언 → 호출 → 실행 순으로 진행된다# 선언적 함수 (Function Decl..
JavaScript 반복문과 제어 JavaScript 반복문while 문do...while 문for 문forEach 문 (배열 전용)for...in 문 (객체 전용)for...of 문 (Iteralbe 객체)for await...of 문 (비동기)반복문 제어문continuebreakNEW 키워드배열 전용 반복, 객체 전용 반복, Iterable 객체, Set 객체, Map 객체, 비동기, Promise 객체# JavaScript 반복문특정 조건이 만족될 때까지 코드를 반복 실행하는 문법반복문사용 대상특징while모든 반복조건이 만족하는 동안 반복 실행do...while모든 반복최소 한 번 실행 후 조건 검사후 반복 실행for모든 반복반복 횟수가 정해져 있을 때 사용forEach배열 전용배열의 모든 요소를 순회하며 반복 실행for...in..