자바스크립트

21. jquery

일반적인 javascript를 사용해 코딩한것과 jquery를 쓰는것에 대해 간단히 확인해본다. # body 태그 위와 같이 코드를 작성했다. pure는 순수한 자바스크립트를 이용해서 엘리먼트 객체에 대한 작업을 한 코드이고, jquery는 단어 그대로 jquery를 이용한 코드이다. pure 부분은 브라우저 버전에 따라 addEventListener가 지원되지 않으면 attachEvent 메소드를 사용하도록 분기시켰다. jquery 부분에서 on은 브라우저 버전에 따라 적당한 이벤트 핸들러를 사용하도록 한다. 간단한 코드로만 보아도 jquery를 이용하는게 코드가 간편해짐을 알 수 있다. 1. on API on 은 이벤트를 처리하는 메소드다. click, onclick 등으로 사용해도 되지만 셀럭터를 ..

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이라는..