Amarans

Ajax 웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었다. 그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. Ajax는 Asynchronous JavaScript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLH..

문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다. 아래 코드의 실행결과는 null이다. Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. Hello 이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이다. Hello 헤드 밑이 아닌 바디 밑 p태그 밑 또 다른 방법은 load 이벤트를 이용하는 것이다. Hello 그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다. DOMContentLoaded는 문서에서 스크립트 작업을 할 수 ..

이벤트 전파(버블링과 캡처링) HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록 되어 있다면 어떻게 처리 될까? event propagation 실행결과 INPUT HTML capturing INPUT BODY capturing INPUT FIELDSET capturing INPUT INPUT target 이벤트가 부모에서부터 발생해서 자식으로 전파되고 있다. 이러한 방식을 capturing이라고 한다. 코드를 아래와 같이 변경해보자. 차이점은 addEventListener의 3번째 인자가 false로 변경 되었다. INPUT INPUT target INPUT FIELDSET bubbling..

이벤트 이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. event target target은 이벤트가 일어날 객체를 의미한다. event type 이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 타입이다. 그 외에도 scroll은 사용자가 스크..

문서의 기하학적 특성 요소의 크기와 위치 Coding 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. 이를 콘솔에서 실행한 결과는 아래와 같다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 된다는 것을 알 수 있다. getBoundingClientRect의 width 값을 IE는 제공하지 않는다. 만약 엘리먼트가 중첩되어 있다면 어떻게 될까? 위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBoundingClientRect를 호출해보자. Codin..

Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. Hello world Hello world 결과 Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다. nodeValue data html css JavaScript API 텍스트 데이터가 상속되었습니다. 아래는 옵션과 관련된 API들의 목록이다. appendData () deleteData ()..

jQuery 노드 변경 API http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of api.jquery.com 추가 content1 content2 제거 ..

Node 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다. Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild 첫번째 자식노드 Node.lastChild 마지막 자식노드 Node.nextSibling 다음 형제 노드 Node.previousSibling 이전 형제 노드 아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM 노드 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, node..