나디아 성장 일기

이벤트 버블링( Event  Bubbling): 이벤트가 가장 안쪽의 요소(이벤트가 발생한 요소)에서 시작하여 상위 요소들로 전파되는 과정요소에 이벤트가 발생하면 해당 요소의 핸들러가 동작 ➡ 이어서 부모 요소의 핸들러가 동작 ➡ 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복 자식 요소 → 부모 요소 → 조부모 요소 ... 최상위 요소 순서addEventListener의 3번 째 인자인 capture 옵션을 false로 설정❗elem.addEventListener(..., {capture: false})  /* form 선택 시 -> formdiv 선택 시 -> div, formp 선택 시 -> p, div, form */    event.target: 이벤트가 정확히 어디서 발생했는지에 대한..

이벤트 핸들링(Event Handling) 핸들러(handler): 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것    이벤트 핸들링 3가지 방법 HTML 속성: HTML 태그 안에 속성으로 할당 (ex. onclick="handler()")- 잘 사용하지 않음❌DOM 프로퍼티 : 이벤트를 함수로 DOM 프로퍼티에 할당(ex. element.onclick = handler)- 복수 할당이 불가능❌메서드 : `addEventListener`, `remoceEventListener`(ex. element.addEventListener(event, handler[, phase]))  이벤트 추가/제거  addEventListener : 특정 이벤트가 발생했을 때 실행될 함수를 등록 elem..

요소 생성 메서드   document.createElement(tagName) : 태그 이름을 사용해 새로운 요소 생성 let div = document.createElement('div')   document.createTextNode(value) : 새로운 텍스트 노드 생성 let textNode = document.createTextNode('안녕하세요.');   element.cloneNode(deep)  : 요소 복제deep==true일 경우, 모든 자손 요소도 복제 삽입 메서드임의의 노드 목록이나 문자열을 넘겨줄 수 있다. 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어진다.  node.append(노드나 문자열): node 끝에 삽입  node.prepend(노드나 문자열): node 맨 앞..

속성(Attribute): HTML 요소에 정의된 초기값값은 항상 문자열요소가 처음 로드될 때 정적으로 설정된다.getAttribute(name) 메서드를 사용하여 속성 값을 읽을 수 있다. 프로퍼티(Property): DOM 객체에서 동적으로 제공되는 값JavaScript에서 요소에 접근할 때 이 값은 객체의 프로퍼티로 제공JavaScript 객체로 요소를 조작할 수 있으며, 프로퍼티는 보통 실제 값과 일치DOM 프로퍼티와 메서드는 일반 JavaScript 객체처럼 행동한다. - 어떤 값이든 가질 수 있다. - 대·소문자를 구분한다 ('elem.nodeType'이 아닌, 'elem.NoDeTyPe'는 동작하지 않는다.) - DOM 프로퍼티는 값이 항상 문자열은 아니다. ✨ 브라우저는 웹페이지를 만나면 ..

DOM 노드모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다. 계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받는다.   instanceof 객체 instanceof 생성자함수: 상속 여부 확인어떤 객체가 특정 타입인지 확인하는 방법alert( document.body instanceof HTMLBodyElement ); // truealert( document.body instanceof HTMLElement ); // truealert( document.body instanceof Element ); // truealert( docum..

DOM (문서 객체 모델, Document Object Model) : 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.  document.documentElement =   document.head =   document.body= 브라우저가 아직 document.body를 읽지 않았다면 null이 나올 수도 있다.✨ DOM에서 null 값은 '존재하지 않음'을 의미   노드(Node) : DOM 트리 구조를 이루는 기본 단위 요소 노드 (Element Node): HTML 요소를 나타내는 노드. (ex. , , )텍스트 노드 (Text Node): 요소 노드 안에 들어있는 실제 텍스트를 나타내는 노드. (ex. Hello, World!의 "Hello, World!")주석 노드 (Comment Nod..

BOM (Browser Object Model, 브라우저 객체 모델) : 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체 웹 브라우저를 조작하고 제어할 수 있게 해주는 객체들이 모여 있는 집합체   📌 Window 객체 브라우저 창 alert, confirm, prompt, setTimeout, setInterval    📌 Location 객체 현재 페이지의 URL href, protocol, host, port, search, hash, replace, reload // http://localhost:5500/index.html?type=listing&page=2#titleconst { href, protocol, host, port, search, hash, ..

API (Application Programming Interface): 프로그램 간의 상호작용을 돕는 도구들의 집합 웹 페이지에서 다양한 작업을 수행할 수 있도록 제공하는 도구와 기능들의 모음 자바스크립트의 API를 사용하면 웹 페이지의 동작을 제어하거나, 사용자와 상호작용하거나, 서버와 데이터를 주고받을 수 있다.    📌 브라우저 API: 웹 브라우저가 제공하는 기본 기능을 이용할 수 있게 해주는 API BOM(Browser Object Model) API: 브라우저 창과 관련된 정보를 다루는 API - window 객체를 사용하여 브라우저 창의 크기를 조절하거나, navigator 객체를 통해 사용자의 브라우저 정보를 가져온다.DOM(Document Object Model) API: 웹 페이지..

JSON (Javascript Object Notation) : 데이터를 구조화하여 저장하거나 전송할 때 사용하는 경량 데이터 교환 형식 사람과 기계 모두 읽기 쉽고 작성하기 쉬운 텍스트 형식 웹에서 서버와 클라이언트 간에 데이터를 주고받을 때 사용❗   JSON.stringify(): 서버에 보낼 때,  자바스크립트 객체를 JSON 문자열로 변환 코드 내용 👉 문자 형태로 바꿔줌 객체, 배열 등 가능 const user = { nickname: 'tiger', age: 44}JSON.stringfy(user);// '{"nikname":"tiger","age":44}'    JSON.parse(); : 서버에서 받을 때, JSON 문자열을 자바스크립트 객체로 변환 서버로부터 받은 데이터(문자..

전개 구문 (spread syntax)...obj : 반복 가능한 배열(array)이나 객체(object)의 요소들을 개별적으로 펼치는 데 사용 함수 호출, 배열 리터럴 등에 사용배열, 객체 등을 합칠 때도 사용let first = [1, 2, 3];let second = [4, 5, 6];console.log([...first, ...second]); // [1, 2, 3, 4, 5, 6]    ✨ Rest 매개변수 : 함수에 전달된 나머지 인수를 배열로 수집하는 기능 함수 정의에서 사용 function sum(a, b, ...numbers) { return a + b + numbers.reduce((acc, num) => acc + num, 0);}console.log(sum(1, 2)); // 3..