유혁스쿨

인라인 이벤트 모델이나 고전 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있다. 이러한 DOM Level 0 이벤트 모델들의 단점을 보완하려고 만들어진 이벤트 모델이 DOM Level 2 이벤트 모델이다. DOM Level 2 이벤트 모델에는 인터넷 익스플로러 이벤트모델과 표준 이벤트 모델이 있다. DOM Level 2 ˙인터넷 익스플로러 이벤트 모델 ˙attachEvent(eventProperty, eventListener) : 이벤트 연결 ˙detachEvent(eventProperty, eventListener) : 이벤트 연결 제거 ˙표준 이벤트 모델 표준 이벤트 모델은 웹 표준을 만드는 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델이다. 한번에 여러 가지의 이벤트 리..

인라인 이벤트 모델은 HTML페이지의 가장 기본적인 이벤트 연결 방법이다. Click 위 코드와 같이 인라인 이벤트 모델은 HTML태그 요소노드에 이벤트 속성을 추가하여 구현한다. 이벤트 속성에는 다음과 같이 자바스크립트 코드를 작성하여 실행할 수 있다. Click 이벤트 속성에 여러 줄의 자바스크립트 코드도 입력이 가능하다. Click 하지만 이벤트 속성에 여러줄의 코드를 사용하면 지저분해져 가독성이 떨어진다. 이 경우 스크립트 코드로 함수를 구현한 뒤 함수를 호출하는 방식을 많이 사용한다. Click 위 코드와 같이 이벤트를 호출할 때 매개변수를 넣었다. 이벤트 객체를 전달하는 방법이다. 이러한 이벤트 객체를 PointerEvent 라고 한다. 클릭하여 이벤트가 호출되면 콘솔창에 이벤트 객체에 대한 ..

이벤트 이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른것에 영향을 미치는 것을 의미한다. 자바스크립트에는 다음과 같은 이벤트가 있다. ˙ 마우스 이벤트 ˙ 키보드 이벤트 ˙ HTML 프레임 이벤트 ˙ HTML 입력 양식 이벤트 ˙ 유저 인터페이스 이벤트 ˙ 구조 변화 이벤트 ˙ 터치 이벤트 이벤트는 애플리케이션 사용자가 발생시킬 수도 있고 애플리케이션이 스스로 발생시킬 수도 있다. 이전 포스팅들 에서 DOM객체를 관리하고 컨트롤할 때 다음과같은 코드를 사용해왔다. window.onload = function () { }; window객체의 onload속성에 함수자료형을 할당하는 것을 "이벤트를 연결한다" 라고 한다. 이때 load를 이벤트 이름 또는 이벤트 타입 (EventType) ..

문서객체의 Style속성을 사용하면 해당 문서객체의 스타일을 변경할 수 있다. Header 코드에서 보는바와 같이 header 문서객체에 .마침표를 통해style속성에 접근 후 다시 .마침표를 통해 변경할 css속성을 입력하여 변경할 값을 입력한다. 이때 주의할 점은 스타일시트에서 사용하던 스타일 속성 이름을 그대로 입력하면 안된다. background-color 의 형태와 같이 특수기호 " - " 는 자바스크립트에서 식별자로 사용할 수 없으므로 다음과같이 입력하면 에러를 출력한다 header.style.background-color = 'red'; 따라서 " - " 로 연결된 속성은 다음과같이 특수기호에 의해 끊겨진 단어를 기준으로 이어오는 단어의 첫글자를 대문자로 작성한다. header.style.b..

웹 페이지에서 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법에는 다음과 같은 메서드를 통해 가져온다. getElementById(id) : 태그의 id속성이 id와 일치하는 문서 객체를 가져온다. getElementsByName(name) : 태그의 name속성이 name과 일치하는 문서의 객체를 배열로 가져온다. getElementsByTagName(tagName) : tagName과 일치하는 문서 객체를 배열로 가져온다. getElementById(id) Header Header 위와 같이 구성된 body태그에서 id속성을 갖는 태그만 가져온다. window.onload = function() { var header1 = document.getElementById('header-1'); ..

createElement , createTextNode , appendChild, setAttribute , getAttribute 문서 객체는 가장 기본적으로 텍스트 노드를갖는 문서 객체와 텍스트 노드를 갖지 않는 문서 객체로 구분할 수 있다. 다음은 텍스트 노드를 갖는 h1태그를 생성하면서 문서 객체를 생성하는 방법을 보여준다. body 태그에는 내용이 없기때문에 아무것도 출력하지 않는다. 텍스트 노드를 갖는 문서 객체를 생성하기 위해서는 요소 노드와 텍스트노드를 생성하고, 텍스트 노드를 요소 노드에 붙여준다. 노드를 생성하는 메서드이다. createElement(tagName) : 요소 노드를 생성한다. createTextNode(text) : 텍스트 노드를 생성한다. window.onload = ..

문서객체 DOM (Document Object Model) 문서 객체 모델은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. 자주 사용되는 용어로는 문서객체, 태그, 노드가 있다. 태그 HEADER 위와같이 HTML페이지에 존재하는 이나 를 태그 라고 부른다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서객체' 가 된다. 문서객체 window.onload = function () { // 함수 호출시 실행할 내용 } 우선 문서객체를 다루기 위해서는 이전 포스팅에서 다뤘던 window객체의 onload 이벤트 핸들러를 사..

브라우저 객체 모델 BOM, Browser Object Model은 웹 브라우저와 관련된 객체의 집합을 의미한다. 대표적인 브라우저 객체 모델로는 Window, Location, Navigator, history, screen, document 객체가 있다. window 객체 ┌────────┬────────┼────────┬────────┐ location 객체 navigator 객체 history 객체 screen 객체 document 객체 └────────────┬────────────┘ │ 브라우저 객체 문서 객체 BOM(Browser Object Model) DOM(Document Object Model) 간단하게 문서 객체 모델 DOM, Document Object Model 이라 통합해서 부..