웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각되었다. Ajax는 웹 브라우저와 웹 서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹 페이지에 프로그래밍적으로 반영함으로써 웹 페이지의 로딩 없이 서비스를 사용할 수 있게 한다. Ajax는 Ansynchronous Javascript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML로 직역이 된다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식을 의미한다. 이때 사용하는 API가 XMLHTTPRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 ..
기본 동작의 취소 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍 수프 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작들을 취소할 수 있다. prvent evnet on naver.com 인라인 방식 프로퍼티 방식 addEvnetListener 방식 폼 submit - 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name change - 폼 컨트롤의 값이 변경되었을 때 발생하는 이벤트. blur, focus 문서 로..
이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 때, 스크롤을 움직였을 때, 필드의 내용을 바꾸었을 때와 같은 것을 의미한다. event target - 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타깃은 버튼 태그에 대한 객체가 된다. event type - 이벤트의 종류를 의미한다. 위의 예제에서는 click과 change이 이벤트 타입이다. 그 외에도 스크롤은 사용자가 스크롤을 움직였다는 이벤트이고 mousemove는 마우스가 움직였을 때 발생하는 이벤트이다. event hadler - 이벤트가 발생했을 때 동작하는 코드를 의미한다. 위의 예제에서는 alert(window.location)이 해당한다. inline 인라인 방식은 이벤트를 이벤트 대상의 태..
Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주요 기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류 Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성..
Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. 다른 객체들과의 관계 DOM의 계층구조에서 Element 객체의 위치는 아래와 같다. 주요기능 식별자 문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API..
HTML tag의 종류 - 태그는 그 의미에 맞게 사용해야 한다. 링크 네이버 이미지 제목, 목록 과일의 목록 사과 포도 과일의 목록 사과 포도 ui = Unordered List : 순서가 없는 리스트 ol = Ordered List : 순서가 있는 리스트 iframe - 페이지 안에 페이즈를 삽입하는 방법. CSS를 통해서 제어하는 것이 권장. frame - 하나의 화면에서 여러 개의 페이지를 분할해서 보여줌. form - 사용자의 데이터를 서버에 전송하는 방법이다. - 로그인을 위해서 아이디/비밀번호를 입력할 때 - 회원가입을 하기 위해서 개인정보를 입력할 때 - 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때 GET과 POST의 차이점 GET - URL에 정보가 담겨서 전송된다. - 전송할 ..