javascript
-
[javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:40
JavaScript HTML DOM EventListener 1. The addEventListener() method 사용자가 버튼을 클릭 했을 때 이벤트 리스너를 추가하는 예제입니다. 12345678910111213141516171819202122 This example uses the addEventListener() method to attach a click event to a button. Try it document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() {document.getElementById("demo").innerHTML = Date();} Colored by Colo..
-
[javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:39
JavaScript HTML DOM Events HTML DOM은 HTML 이벤트의 반응을 자바스크립트에게 허용합니다. 1. Reacting to Events 자바스크립트는 이벤트가 발생할 때 실행되어 질 수 있습니다, 마치 사용자가 HTML 요소를 클릭 했을 때 처럼 말이죠. 사용자가 요소를 클릭 했을 때 코드를 실행시키기 위해, HTML 이벤트 속성에 자바스크립트 코드를 추가해주시면 됩니다. onclick=JavaScript HTML 이벤트의 예제: - 사용자가 마우스로 클릭 했을 때 - 웹 페이지가 로드 되었을 때 - 이미지가 로드 되었을 때 - 마우스가 요소의 위에 올라갔을 때 - 입력 필드가 변경 되었을 때 - HTML 서식이 제출 되었을 때 아래 예제의 텍스트를 클릭하면 텍스트가 바뀝니다: C..
-
[javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:38
JavaScript HTML DOM - Changing CSS 1. Changing HTML Style HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다: document.getElementById(id).style.property=new style 아래 예제는 요소의 스타일을 변경하는 예제입니다: 123456789101112131415161718 Hello World! Hello World! document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger"; The..
-
[javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:37
JavaScript HTML DOM - Changing HTML HTML DOM은 HTML 요소의 내용을 변경 할 수 있게 자바스크립트에게 허용합니다. 1. Changing the HTML Output Stream 자바스크립트는 동적인 HTML 내용을 만들 수 있습니다. document.write()는 HTML 출력 스트림을 직접 작성하는 것 입니다. 1234567891011 document.write(Date()); cs * 문서가 로드가 된 후, document.write()를 사용하지 마세요. 문서에 덮어쓰게 됩니다. 2. Changing HTML Content HTML 요소의 내용을 바꿀때, 아래 문법을 사용합니다. document.getElementById(id).innerHTML = new H..
-
[javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:37
JavaScript HTML DOM Elements 1. Finding HTML Elements 종종 자바스크립트에서, HTML 요소를 조작하기를 원합니다. 이러한 일을 하기 위해, 요소를 찾는 일을 먼저 해야합니다. 이러한 일을 하는 여러 가지 방법이 있습니다: - id를 통하여 HTML 요소 찾기 - tag 이름을 통하여 HTML 요소 찾기 - class 이름을 통하여 HTML 요소 찾기 - HTML 객체 집합을 통해서 HTML 요소 찾기 2. Finding HTML Elements by Id DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 아이디를 이용하는 것 입니다. 1var x = document.getElementById("intro");cs 요소를 찾았다면, 메소드는 요소를 객체로서 ..
-
[javascript] 55. DOM 문서(DOM document) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:36
JavaScript HTML DOM Document HTML DOM에서, 문서 객체(document object)는 웹 페이지 입니다. 1. The HTML DOM Document HTML DOM 객체 모델에서, 문서 객체는 웹 페이지를 나타냅니다. 문서 객체는 웹 페이지의 모든 다른 객체의 주인 입니다. HTML 페이지 내의 객체를 접근 하고 싶을 때, 문서 객체를 접근 하는 것으로 시작 합니다. 2. Finding HTML Elements MethodDescriptiondocument.getElementById()Find an element by element iddocument.getElementsByTagName()Find elements by tag namedocument.getElementsB..
-
[javascript] 54. DOM 메소드(DOM method) - 자바스크립트 강좌Web/JavaScript 2015. 6. 13. 15:36
JavaScript - HTML DOM Methods HTML DOM 메소드는 HTML 요소로 수행 할 수 있는 행위 입니다. HTML DOM 속성은 설정할 수 있고, 변경 가능한 HTML 요소의 값 입니다. 1. The DOM Programming Interface HTML DOM은 자바스크립트에서 접근 할 수 있습니다. DOM 에서, 모든 HTML 요소는 객체로서 정의되어 있습니다. 프로그래밍 인터페이스는 각 객체의 속성과 메소드입니다. 속성(property)는 얻거나 설정 할 수 있는 값 입니다. 메소드(method)는 해야 할 일의 행위 입니다. 2. Example 아래 예제는 아이디가 demo인 요소의 내용을 바꾸는 예제 입니다. 1234567891011 document.getElementByI..
-
[javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:36
JavaScript HTML DOM HTML DOM에서, 자바스크립트는 모든 HTML 문서를 접근하고 변경 할 수 있습니다. 1. The HTML DOM (Document Object Model) 웹페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(Document Object Model)을 생성합니다. HTML DOM은 객체의 트리 형태 구조로 되어 있습니다: 객체 모델에서, 자바스크립트는 동적인 HTML을 만들어서 모든 걸 가져올 수 있습니다: - 페이지 내의 모든 HTML 요소를 변경 할 수 있습니다. - 페이지 내의 모든 HTML 속성을 변경 할 수 있습니다. - 페이지 내의 모든 CSS 스타일을 변경 할 수 있습니다. - 존재하는 HTML 요소와 속성을 제거 할 수 있습니다. - 새로운 H..