programming study/JavaScript (186) 썸네일형 리스트형 43장. Ajax(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 43.3 XMLHttpRequest 자바스크립트를 사용하여 HTTP 요청을 전송할 수 있는 객체 Web API HTTP 요청 전송, HTTP 응답 수신을 위한 메세드 제공 43.3.1 XMLHttpRequest 객체 생성 XMLHttpRequest 생성자 함수를 호출하여 생성 Web API이므로 브라우저 환경에서만 정상 실행 const xhr = new XMLHttpRequest(); 43.3.2 HTTP 요청 전송 XMLHttpRequest.prototype.open 메서드로 HTTP 요청을 초기화 XMLHttpRequest.prototype.setRequestHeader 메서드로 HTTP .. 43장. Ajax(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 43.1 Ajax란? Asynchronous JavaScript and XML 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 동적으로 갱신하는 프로그래밍 방식 XMLHttpRequest 객체를 기반으로 동작 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 이전의 웹 페이지는 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 렌더링 불필요한 데이터 통신 발생 처음부터 다시 렌더링하여, 화면이 순간적으로 깜빡거리는 현상 발생 동기 방식으로 동작하여 다음 처리는 블로킹 Ajax는 전통적인 패러다임을 획기적으로 전환 웹 페이지 변.. 42장. 비동기 프로그래밍 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 42.1 동기 처리와 비동기 처리 함수의 실행 순서는 실행 컨텍스트 스택으로 관리 함수가 실행되면 함수 실행 컨텍스트가 생성 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시 함수 실행의 시작 함수 코드가 실행 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에 팝되어 제거 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 함수를 실행할 수 있는 창구가 단 하나 동시에 2개 이상의 함수를 실행 불가 싱글 스레드 한 번에 하나의 태스크만 실행 가능 블로킹 작업 중단 처리에 시간이 걸리는 태스크를 실행하는 경우 동기 처리 실행 중인 태스크가 종료할 때까지 실행될 태.. 41장. 타이머 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 41.1 호출 스케줄링 호출 스케줄링 : 함수를 일정 시간이 경과된 이후에 호출되도록 하려면, 타이머 함수를 사용 setTimeout : 일정 시간이 경과된 이후 콜백 함수가 호출되도록 함 clearTimout : 등록된 타이머를 제거 setInterval : 일정 시간 마다 콜백 함수가 호출되도록 함 clearInterval : 등록된 인터벌을 제거 JavaScript는 하나의 실행 컨텍스트 스택을 가지므로 두 가지 이상의 태스크를 동시에 실행할 수 없음 싱글 스레드로 동작 때문에, 타이머 함수들은 비동기 처리 방식으로 동작 41.2 타이머 함수 41.2.1 setTImeout / clear.. 40장. 이벤트(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.8 DOM 요소의 기본 동작 조작 40.8.1 DOM 요소의 기본 동작 중단 DOM 요소는 기본 동작이 있음 preventDefault 메서드는 이 기본 동작을 중단 시킴 40.8.2 이벤트 전파 방직 stopPropagation 메서드는 이벤트 전파를 중지시킴 40.9 이벤트 핸들러 내부의 this 이벤트 핸들러 어트리뷰트 방식의 이벤트 핸들러의 this는 전역 객체 window를 가리킴 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킴 이벤트 객체의 currentTarget 프로퍼티와 같음.. 40장. 이벤트(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.5 이벤트 객체 이벤트 발생 시 이벤트 객체가 동적으로 생성 생생된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달 이벤트 핸들러에 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 함 이벤트 핸들러 어트리뷰트 방식의 경우, 반드시 매개변수 이름이 event이어야 함 40.5.1 이벤트 객체의 공통 프로퍼티 Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티임 target : 이벤트를 발생시킨 객체 currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소를 가리킴 40.6 이벤트 전파 Event propagation 생성된 이벤트 객체.. 40장. 이벤트(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 40.1 이벤트 드리븐 프로그래밍 브라우저는 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킴 클릭, 키보드 입력, 마우스 이동, 드래그 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임 이벤트 핸들러 : 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 이벤트 핸들러의 호출을 위임 Window, Document, HTMLElement 타입의 객체는 다양한 이벤트 핸들러 프로퍼티를 가지고 있음 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 40.2 이벤트 타입 이벤트의 종류를 나타내는 문자열 약 200여 가지가 있음 MDN .. 39장. DOM(5) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 39.7 어트리뷰트 39.7.1 어트리뷰트 노드와 attributes 프로퍼티 HTML 요소는 여러 개의 어트리뷰트(속성)를 가질 수 있음 특정 HTML 요소에만 한정적으로 사용 가능한 어트리뷰트도 있음 input 요소에만 사용 가능한 type, value, checked 어트리뷰트 HTML 문서가 파싱될 때 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결 어트리뷰트 노드의 참조는 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장 Element.prototype.attribues 프로퍼티로 취득 가능 getter만 존재하는 읽기 전용 접근자 프로퍼티.. 이전 1 2 3 4 5 6 7 ··· 24 다음