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

2020. 12. 31.

개발

[Javascript] 이벤트 - 2 기본 동작의 취소 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍 수프 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.폼에서 submit 버튼을 누르면 데이터가 전송된다.a 태그를 클릭하면 href 속성의 URL로 이동한다.이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작들을 취소할 수 있다. prvent evnet on naver.com 인라인 방식 프로퍼티 방식 addEvnetListener 방식폼submit - 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된..

2020. 12. 31.

개발

[Javascript] 이벤트 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 때, 스크롤을 움직였을 때, 필드의 내용을 바꾸었을 때와 같은 것을 의미한다.  event target - 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타깃은 버튼 태그에 대한 객체가 된다.event type - 이벤트의 종류를 의미한다. 위의 예제에서는 click과 change이 이벤트 타입이다. 그 외에도 스크롤은 사용자가 스크롤을 움직였다는 이벤트이고 mousemove는 마우스가 움직였을 때 발생하는 이벤트이다.event hadler - 이벤트가 발생했을 때 동작하는 코드를 의미한다. 위의 예제에서는 alert(window.location)이 해당한다...

2020. 12. 30.

개발

[Javascript] 문서의 기하학적 특성 엘리먼트의 위치와 크기 Coding 엘리먼트의 테두리와 body태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. Coding 엘리먼트의 위치를 의미하는 top, right값을 통해서 기준이 그 부모가 아니라 body 태그라는 것을 알 수 있다. 그리고 이를 명시적으로 확인할 수 있는 방법은 offsetParent 속성을 호출하는 것이다. 만약 부모 가운데 CSS position의 값이 static인 td, th, table 엘리먼트가 있다면 이 엘리먼트가 ..

2020. 12. 23.

개발

[Javascript] Node 객체 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주요 기능Node 객체의 주요한 임무는 아래와 같다. 관계엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.Node.childNodesNode.firstChildNode.lastChildNode.nextSiblingNode.previousSiblingNode.contains()Node.hasChildNodes() 노드의 종류Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고..

2020. 12. 22.

개발

[Javascript] Element Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. 다른 객체들과의 관계DOM의 계층구조에서 Element 객체의 위치는 아래와 같다.주요기능식별자문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 APIleme..

2020. 12. 21.

개발