동기 처리와 비동기 처리 함수가 실행되려면 함수 코드 평가 과정에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉 2개 이상의 ...
Javascript Ajax
Ajax(Asynchronous Javascript and XML)란 브라우저가 서버에 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP ...
Javascript Timer
호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간 경과 후 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 자바스크립트에서는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. 타이머 함수 setTim...
Javascript Event_02
이벤트 객체 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. <!DOCTYPE html> <html> <body> <p>click</p> ...
Javascript Event_01
이벤트 드리븐 프로그래밍 애플리케이션이 특정 타입의 이벤트에 대한 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들...
Javascript DOM_04
어트리뷰트 HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름=”어트리뷰트 값” 형식으로 정의한다. HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 Nam...
Javascript DOM_03
DOM 조작 DOM 조작은 새로운 노드를 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. DOM이 변하면 리플로우나 리페인트가 발생하므로 성능에 영향을 준다. 따라서 DOM을 조작할 때는 성능 최적화를 고려해야 한다. innerHTML Element.prototype.innerHTML 프로퍼티는 setter와 getter 모두 존재하는 ...
Javascript DOM_02
노드 탐색 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 부모, 형제, 자식 노드 등을 탐색할 수 있다. Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다. 노드 탐색 프로퍼티는 모두 접근자 프로퍼티다. 단, 노드 탐색 프로퍼티는 setter없이 getter만 존재하여 읽기 전용 프로퍼티다. 자식 노드 탐색 ...
Javascript DOM_01
DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 노드 HTML 요소는 HTML문서를 구성하는 개별적인 요소를 말한다. HTML 요소는 렌더링 엔진에 의해 파싱 후 DOM을 구성하는 요소 노드 객체로 변환된다. HTML ...
Javascript 브라우저 렌더링
렌더링(rendering)은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라...
Recently Updated