이벤트 타입 아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 사용자 정보가 유효한지 여부를 확인하기 위해 이벤트를 많이 사용한다.웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다. 1. 폼폼과 관련된 이벤트 타입을 알아보자. (1) submit- submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.- form 태그에 적용된다.아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다. name (2) change- change는 폼 컨트롤(value의 값)의 `값이 변경 되었을 때 발생하는 이..

이벤트 등록방법 1. inline인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.(해당 태그안에 이벤트가 속성으로 직접 들어간 경우) 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.자바스크립트에서 this는 어떤 함수에서 this를 사용한다는 것은 그 함수가 속해있는 객체를 의미(자기 자신을 의미) this는 이벤트가 동작하고 있는 엘리먼트(input)을 가리킨다. --> 짧고 편리하게 코드를 작성할 수 있다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 ..

Text 객체 1. 소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다.노드없음Hello world줄바꿈 노드가 숨겨있음 Hello world -->DOM에서는 공백조차도 분명히 존재하는 객체에 매핑되어 있다.실행결과)Hello worldTypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}Hello world 2. 주요 기능 (1) 값텍스트 노드의 값을 가져오는 API- data- nodeValue (2) 조작- appendData()- deleteData()- insertData..

Document 객체 1. 소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 2. 노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.- createElement()- createTextNode() 3. 문서 정보 API- title- URL- referrer- lastModified 출처: https://devbox.tistory.com/entry/JavaScript?category=574556 [장인개발자를 꿈꾸는 :: 기록하..

Node 객체 1. 소개Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 모든 엘리먼트, 텍스트, 주석등 HTML코드의 모든 문서의 구성요소들의 객체는 공통적으로 Node라는 객체를 상속받는다.Node객체는 firstChild, lastChild, nextSibling등의 프로퍼티를 가지고 있어서 이를 이용해서 각각의 Node들을 기준으로해서 자식이 누구인지, 형제가 누구인지 알 수 있다. 2. 주요기능Node 객체의 주요한 임무는 아래와 같다. (1) 관계엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 AP..

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

HTMLCollection 객체 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript실행결과) 출처: https://devbox.tistory.com/entry/JavaScript-HTMLCollection?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]

HTMLElement 객체 1. HTMLElementgetElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.아래 코드는 getElement*의 리턴 값을 보여준다. HTML CSS JavaScript실행결과)HTMLLIElement (li 엘리먼트 태그)HTMLCollection (여러개의 엘리먼트를 담고 있다.)이것을 통해서 알 수 있는 것은 아래와 같다.- document.getElementById : 리턴 데이터 타입은 HTMLLIELement- document.getElementsByTagName : 리턴 데이터 타입은 HTMLColle..

제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 1. document.getElementsByTagName문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. HTML CSS JavaScript 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된..

전역객체 window 1. Window 객체Window 객체는 모든 객체가 소속된 객체(DOM, BOM, JavaScriptCore)이고, 전역객체이면서, 창이나 프레임을 의미한다. `window.Array(JavaScriptCore)window.navigator(BOM)window.document(DOM) 2, 전역객체Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다. 아래는 전역변수 a에 접근하는 방법이다. 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다. 예제를 통해서 알 수 있는 것은 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모..