DOCTYPE html> JavaScript - Event Model // 이벤트 모델 // - 이벤트가 발생 가능한 객체와 이벤트가 발생했을 때 수행될 함수(핸들러)를 // 연결하기 위한 방식을 의미 // - 이벤트 모델의 종류 // - 고전 이벤트 모델 // : 객체의 이벤트 속성(property)에 이벤트 핸들러를 대입하는 방식 // : 이벤트 속성은 하나이기 때문에 하나의 핸들러만 대입된다. // - 인라인 이벤트 모델 // : HTML 요소에 이벤트 속성(attribute)에 이벤트 핸들러를 호출하는 방식 // - 표준 이벤트 모델 // : 웹 표준을 만드는 W3C 에서 공식적으로 지정한 이벤트 모델 // : 객체의 메서드를 통해 이벤트 리스너를 연결하는 방식 // : 이벤트 갭처링(captur..

DOCTYPE html> JavaScript - Event Object #box1 { width: 300px; height: 300px; margin: 0 auto; padding: 20px; background-color: yellowgreen; color:navy; } #box2 { width: 200px; height: 200px; margin: 0 auto; padding: 20px; background-color: blueviolet; } #box3 { width: 100px; height: 100px; margin: 0 auto; padding: 20px; background-color: orange; } // 일반적으로 JavaScript 코드에서 요소를 탐색할 때 // 해당 요소가 이미 D..

DOCTYPE html> JavaScript - Event Hello World! Hello JavaScript! // 이벤트(Event) // - 어떤 종류의 상호작용이나 사건이 발생하는 것 // - JavaScript 에서의 이벤트 // 사용자에 의한 이벤트 발생 : 요소 클릭, 키보드 입력 ... // 브라우저에 의한 이벤트 발생 : 웹 페이지 로드, 오류, ... // - 이벤트가 발생했을 때 수행할 기능들을 설정할 수 있다. // - JavaScript 에서는 특정 객체에 이벤트가 발생하면 이를 감지할 수 있으며 // 이때 설정된 기능이 있다면 그 기능을 수행한다. // - 이벤트는 element 객체 뿐만 아니라 document 객체와 // window 객체에서도 이벤트가 발생한다. // - ..

DOCTYPE html> JavaScript - element #list1 > li { width: 100px; height: 100px; margin: 10px auto; background-color: yellowgreen; color: navy; font-size: 2em; text-align: center; line-height: 100px; } 1 2 3 // HTML 요소의 이동 // - 화면에 보여지는 요소(DOM 에 연결된 요소)를 // 특정 요소의 마지막 자식 요소로 이동 // - 이동시킬 요소를 탐색하여 // 특정 요소의 마지막 자식 요소로 추가 // → 추가될 때 탐색된 요소가 새롭게 생성되는 것이 아니라 // 마지막 자식 요소로 이동하게 된다. // ex) 강의실의 맨 앞에 있는 의..

DOCTYPE html> JavaScript - element // HTML 요소의 생성과 연결(추가) // 노드를 생성하기 위한 메서드 // - document.createElement(tagName) : 요소 노드를 생성 // - document.createTextNode(text) : 텍스트 노드를 생성 // → 노드를 JavaScript 상에서만 생성할 뿐 화면에 바로 보여지지 않는다. // 화면에 보여지려면 DOM(document object model)에 연결 되어야한다. // 요소를 연결(추가)하기 위한 메서드 // - element.appendChild(node) : element 객체의 마지막 자식 노드를 추가 // 요소를 추가하기 위한 다른 방법 // document.writeln() ..

DOCTYPE html> JavaScript - element Hello World! // HTML 요소 = HTML element // HTML 속성 = HTML attribute // CSS 속성 = CSS property // 객체의 속성 = property of object // HTML 요소의 속성 조작 // - HTML 요소의 속성을 반환하거나 설정 // - 종류 // element.getAttribute(attrName) // : HTML 속성 값을 반환하는 메서드 // element.setAttribute(attrName, value) // : HTML 속성 값을 설정하는 메서드 // #hello 요소 탐색 var hello = document.getElementById("hello"); ..