JavaScript (98) 썸네일형 리스트형 [Deep dive] 41장 타이머 41.1 호출 스케줄링 호출 스케줄링 (scheduling a call) - 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용 - 타이머 함수는 호스트 객체 - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 떄문에 두 가지 이상의 태스크를 동시에 실행 불가 => 자바스크립트 엔진은 싱글 스레드(single thread)로 동작 - 타이머 함수 setTimeout과 setInterval은 비동기(asynchoronous) 처리 방식으로 동작 41.2 타이머 함수 41.2.1 setTimeout / clearTimeout - setTimeout 함수는 두 번째 인수로 전달받은 시간(ms,1/1000초)로 단 한번 동작하는 타이머를 생성.. [Deep dive] 40장 이벤트(2) 40.6 이벤트 전파 이벤트 전파(event propagation) - DOM 트리 상에 존재하는 DOM 요소 노드에서 발생하는 이벤트는 DOM 트리를 통해 전파 - 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소의 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해 전파 - 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 가능 - DOM 트리를 통해 전파되는 이벤트는 이벤트 패스에 위치한 모든 DOM 요소에서 캐치 가능 캡처링 단계 (capturing phase) - 이벤트가 상위 요소에서 하위 요소 방향으로 전파 타깃 단계 (target phase) - 이벤트가 이벤트 타깃에 도달 버블링 단계(bubbling phase) - 이벤트가 하위 요소에서 상위 .. [Deep dive] 40장 이벤트(1) 40.1 이벤트 드리븐 프로그래밍 이벤트 드리븐 프로그래밍 (event-driven programing) - 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용(interaction)할 수 있음 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 - 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트(event)를 발생(trigger)시킴 - 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임 이벤트 핸들러(event handler) - 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수 이벤트 핸들러 등록 - 이벤트가 발생했을 때 브라우.. [Deep dive] 39장 DOM (3) 39.7 어트리뷰트 39.7.1 어트리뷰트 노드와 attributes 프로퍼티 - HTML 요소는 여러 개의 어트리뷰트(attribute)를 가질 수 있음 - HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름 = "어트리뷰트 값" 형식으로 정의 - HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결 - HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성 - 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NameNodeMap 객체에 담겨서 요소 노드의 atrributes 프로퍼티에 저장 - 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득 가능 - attributes 프로퍼티는 getter.. [Deep dive] 39장 DOM (2) 39.4 노드 정보 취득 - 노드 정보 프로퍼티 프로퍼티 설명 Node.prototype.nodeType 노드 타입을 나타내는 상수를 반환 - Node.ELEMENT_NODE : 요소 노드 타입을 나타내는 상수 1 - Node.TEXT_NODE : 텍스트 노드 타입을 나타내는 상수 3 - Node.DOCUMENT_NODE : 문서 노드 타입을 나타내는 상수 9 Node.prototytpe.nodeName 노드 이름을 문자열로 반환 - 요소 노드 : 대문자 문자열로 태그이름을 반환 - 텍스트 노드 : 문자열 #text 반환 - 문서 노드 : 문자열 #document 반환 Hello 39.5 요소 노드의 텍스트 조작 39.5.1 nodeValue - Node.prototype.nodeValue 프로퍼티는 s.. [Deep dive] 39장 DOM (1) DOM - Document Object Mode - HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API , 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소 - HTML 문서를 구성하는 개별적인 요소 - HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 - HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가짐 - HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성 트리 자료구조 - 부모 노드(parent node)와 자식 노드 (child node)로 구성되어 노드 .. [Deep dive] 38장 브라우저의 렌더링 과정 파싱(parshing) - 구문 분석(syntax analysis) - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스트리(parse tree)를 생성하는 일련의 과정 렌더링(rendering) - HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력 38.1 요청과 응답 - 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청(request)하고 서버로부터 응답(response)받아 브라우저에 시각적으로 렌더링하는 것 - 서버에 요청을 전송하기 위해 브라우저는 주소창을 제공 - 브라우저의 주소창에 URL을 입력하고 엔터키를 누르.. [Deep dive] 37장 Set과 Map 37.1 Set - Set 객체는 중복되지 않는 유일한 값들의 집합 - 배열과의 차이점 구분 배열 set 객체 동일한 값을 중복하여 포함할 수 있다 O X 요소 순서에 의미가 있다 O X 인덱스로 요소에 접근할 수 있다. O X - 수학적 집합을 구현하기 위한 자료구조 - Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장 가능 37.1.1 Set 객체의 생성 - Set 객체는 Set 생성자 함수로 생성 - Set 생성자 함수에 인수를 전달하지 않으면 빈 객체 생성 const set = new Set(); console.log(set); //Set(0) {} - Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성 - 중복된 값은 Set 객체에 요소로 저장되지 않음 co.. 이전 1 2 3 4 5 ··· 13 다음
