JavaScript
20. 문서로드
HELLO body 태그의 코드는 위와 같다. head 태그 안에 위와 같이 자바스크립트 코드를 작성 후 웹페이지를 확인해보면, null 값이 나온다. 이유는, head 태그안의 script에서 test라는 id의 엘리먼트를 찾는 시점에서는 해당 엘리먼트가 만들어져있지 않은 상태로 인지되기 때문에 null 값이 나오는 것이다. 위와 같은 문제가 원인이라고 한다면, 제어하고자 하는 엘리먼트들이 다 만들어진 후 맨 마지막에 script 코드를 작성하면 되지만 다른 방법을 이용해서 head 태그 내에 자바스크립트를 사용하는 방법도 있다. 웹 페이지 전체를 대표하는 전역객체인 window 객체의 onload 메소드를 이용하는 것이다. onload는, 모든 웹 페이지의 구성요소들의 렌더링이 끝난 후 제일 마지막에..
19. 이벤트 기본동작 취소
지금까지 이벤트를 만들어 설치하는 작업들을 해봤다. 이벤트는 사용자가 정의한 것 뿐만아니라 기본적으로 갖고있는 것들이 있다. 예를들어, 텍스트필드에서 입력했을 "때" 텍스트가 입력되거나 form에서 submit을 클릭했을 "때" 데이터가 전송되거나 a 태그를 클릭했을 "때" href 속성에 정의된 URL로 이동되는 것과 같은 것이다. 즉, 사용자가 정의한 이벤트가 아닌 브라우저가 갖고있는 이벤트 기본동작이다. 몇 가지 방식 별로 살펴보자. 1. 인라인 방식 간단한 코드를 작성해본다. event 동작 방지 localhost 위 소스코드의 문서는 다음과 같다. HTML의 태그는 문단(paragraph)을 정의할 때 사용된다. 3개의 문단을 만들었다. 1번째 문단은 "event 동작 방지" 라는 label을 ..
18. 이벤트 전파(버블링/캡처링)
HTML은 부모와 자식관계의 구조를 갖는다. 위와 같은 HTML 코드가 있다면, input 태그는 fieldset 태그에 감싸져 있고, fieldset 태그는 body 태그에 감싸져 있고, body 태그는 html 태그에 감싸져 있다. 여기에 자바스크립트를 이용하여 input, fieldset, body, html 각각 이벤트 핸들러를 설정했다고 가정해본다. input 태그의 버튼을 클릭했을 때, html 이벤트핸들러 => body 이벤트핸들러 => fieldset 이벤트핸들러 => input 이벤트핸들러 순 으로 실행이 되는 것이 캡처링이다. 반대로, 가장 내부에 있고 안쪽에 있는 구체적인 엘리먼트에 대한 이벤트부터 발생하여 상위 태그들로 나아가면서 실행되는 것이 버블링이다. 1. 캡처링 위에서 간략하..
17. 이벤트
이벤트란 ? 어떠한 사건을 의미한다. 브라우저에서 사건이란 클릭, 스크롤을 올리거나 내리는 행위, 필드의 내용을 바꾸는 등의 행위 같은 것들을 의미한다. 정확히 말해서 클릭한 "순간", 스크롤 한 "순간", 필드의 내용을 바꾼 "순간" 등 행위를 한 순간순간이라고 보면 된다. 이러한 이벤트가 발생했을 때 어떠한 작업을 할 지 코드를 작성하는 것을 "이벤트 프로그래밍" 이라고 한다. 위와 같은 단순한 HTML 코드가 있다. CLICK 이라고 써져있는 버튼을 클릭하면 숫자 1을 표시하는 경고창이 뜬다. 이 때 CLICK 이라고 써져있는 버튼, 위 HTML 코드로 되어있는 button 타입의 input 태그를 이벤트 타겟(Event Target) 이라고 한다. 이벤트타겟은 이벤트가 발생하는 대상이다. 그리고 ..
16. Node 종류 API
말 그대로 Node가 어떤 종류의 Node인가를 확인할 수 있는 기능을 말한다. Node 라는 객체에 있는 여러 프로퍼티들을 출력한다. 대문자로 되어있는 것은 상수라고 한다. 정해져있는 값이라는 의미이다. 이 결과가 의미하는 것은, 어떠한 노드가 엘리먼트 객체에 해당하는 노드라면 ELEMENT_NODE 로 접근할 수 있으며 숫자값은 1이 되고 어떠한 노드가 텍스트에 해당하는 노드라면 TEXT_NODE 로 접근할 수 있고 숫자값이 3이 된다 라는것을 의미한다. Chelsea Liverpool Tottenham Son Kane Alli 위와 같은 코드가 있다고 한다면, start 라는 id값을 가진 body 엘리먼트에 대한 객체를 변수 A에 담았다. 이 body 노드의 nodeType을 확인해보면, 1이라는..
15. Node 관계 API
Node 객체는 DOM에서 시조와 같은 역할을 하며 모든 DOM 객체는 Node 객체를 상속받는다. *시조 : 어떠한 사상을 처음 개척한 사람 각각의 엘리먼트들은 서로 부모, 자식, 형제/자매 관계로 연결되어있다. 각 엘리먼트들이 어떠한 관계로 연결되어있는지를 Node API를 통해 프로그래밍적으로 확인할 수 있다. Node 관계 API 앞서 설명했다시피 HTML 코드에 있는 문서의 모든 구성요소의 객체는 공통적으로 Node 객체를 상속받는다. 예제코드를 통해 프로그래밍적으로 어떠한 관계로 연결되어있는지 확인해본다. Chelsea Liverpool Tottenham Son Kane Alli body 태그의 id를 start 로 주고 자바스크립트부분에서 해당 엘리먼트의 객체를 변수 A에 담았다. 그럼 A라..