Javascript

● 요소 노드의 텍스트 조작 ⚬ nodeValue Node.prototype.nodeValue 프로퍼티는 setter,getter 둘 다 존재하는 접근자 프로퍼티이다. 즉, 참조와 할당 모두 가능하다는 의미이다. 노드 객체의 값이란 텍스트 노드의 텍스트이다. 따라서 텍스트 노드가 아닌 노드, 즉 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다. banana apple grape 즉, 텍스트 노드의 nodeValue를 참조할 때만 텍스트 노드의 값 즉, 텍스트를 반환한다. 텍스트 노드가 아닌 노드 객체의 nodeValue를 참조하면 null을 반환한다. => 쓰기도 번거롭고, 복잡하다.. ⚬ textContent Node.prototype.textContent 프로퍼티도 ..

● 자식노드의 존재 확인 자식(child) 노드 탐색 childNodes : 자식 노드 목록을 NodeList 형태로 리턴합니다. firstChild : 자식 노드 중, 첫번째 자식 노드를 리턴합니다. lastChild : 자식 노드 중, 마지막 자식 노드를 리턴합니다. 자식(child) 요소(element)탐색 children : 자식 요소(element) 목록을, 'HTMLCollection' 형태로 리턴합니다. firstElementChild : 자식 요소(element) 중, 첫번째 요소를 리턴합니다. lastElementChild : 자식 요소(element) 중, 마지막 요소를 리턴합니다. 1 2 3 text를 반환하는 이유는 텍스트 노드도 반환하기 때문이다. 따라서 outer 뒤에 있는 개행..

● DOM - DOM(Document Object Model)로 HTML을 Object요소처럼 조작할 수 있는 Model이다. 즉, DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. 위의 예제를 보면, 요소 노드 안에는 텍스트 노드도 있고 어트리뷰트 노드도 있다. 이처럼 노드는 중첩 관계를 갖는다. 이런 중첩 관계에 의해 계층적인 부자 관계(parent-child)가 형성된다. 트리 자료구조는 노드들의 계층구조로 이루어진다...

● 클로저 - 클로저란 '함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.' 사실 정의만보면 이해하기에 난해한 개념이라고 한다.. ^^ 사실 맞는 것 같다. 하지만 여기서 중요한 건 함수가 선언된 렉시컬 환경이다. const x = 1; function outerFunc(){ const x = 10; function innerFunc(){ console.log(x) } innerFunc(); } outerFunc(); 위의 예시를 보면, 중첩함수인 innerFunc의 상위스코프가 outerFunc이므로, innerFunc가 호출되었을 때, 외부함수인 outerFunc의 변수에 접근할 수 있다. 만약 innerFunc가 outerFunc의 내부에서 정의된 중첩함수가 아니라 innerFunc를 outerF..

● 실행 컨텍스트의 생성과 식별자 검색 과정 자 일단 이론은 공부했다. 건설업자로 실전에 투입되어보자. // 전역 변수 선언 const x = 1; const y = 2; // 함수 정의 function foo(a) { const x = 10; const y = 20; console.log(a + x + y); // 130 } // 함수 호출 foo(100); // 메서드 호출 console.log(x + y); //3 ● 전역 객체 생성 전역객체는 전역 코드가 평가되기 이전에 생성된다. 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수 표준 빌트인 객체가 추가되고 동작환경(클라이언트 사이드 또는 서버 사이드)에 따라 클라이언트 사이드 Web API 또는특정 환경을 위한 호스트 객체를 포함한다. 그..

● 실행컨텍스트(execution context) - 실행컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면, 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다 ● 소스코드의 타입(ECMAScript code) - 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(func..