-

요소 생성createElement('태그')지정한 태그 이름을 가진 새로운 HTML 요소를 생성동작 방식:DOM에 바로 추가되지 않고, 메모리 상에 존재이 메소드로 생성한 노드는 appendChild, append 등을 통해 DOM에 삽입해야 화면에 표시됨사용 시기:자바스크립트로 동적으로 요소를 만들고 싶을 때이벤트 리스너나 속성 등을 설정하고 DOM에 넣고 싶을 때// [문법]document.createElement('태그명')document.createElement('div');div.textContent = 'new div';createTextNode('텍스트')순수 텍스트 노드를 생성동작 방식:안녕 중에서 "안녕" 같은 텍스트만 따로 만들 때 사용사용 시기:HTML 태그 없이 텍스트만 삽입하고 싶..

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..

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

요소의 텍스트 추출 및 수정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 (프레임워크)어플리케이션을 만들 때 기본 구조와 흐름을 정해놓고 개발을 하도록 도와주는 도구프레임워크는 기본적으로 전체적인 뼈대, 아키텍처, 규칙을 제공하고 개발자는 그 위에 기능을 구현하는 형태보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 '제어의 역전(Inversion of Control)'을 가짐. 즉, 개발자가 호출하는 게 아니라 프레임워크가 개발자의 코드를 호출하는 방식으로 동작종류구분예CSSBootstrap, Tailwind CSS, Bulma, FoundationJSAngular, React, Vue.js, Svelte, Express, Next.js, Nuxt.js✓ "틀(frame)" + "작업(work)" = 작업을..

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..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..