김방울

웹 문서에 있는 요소는 단순히 태그만 있는 것이 아니라, 태그 속성과 내용을 함께 사용합니다. 그래서 이나 태그를 추가하고 싶다면 단순히 이나 태그에 해당하는 요소 노드뿐만 아니라 태그 안에 있는 텍스트 내용과 속성도 노드로 추가해야 합니다. 예를 들어, 주문이 완료되었습니다. 라는 소스를 DOM 트리에 추가하려면 p 요소 노드와 "accent" 속성 값을 넣을 class 속성 노드, '주문이 완료되었습니다. 라는 텍스트를 넣을 텍스트 노드가 필요합니다. 그리고 이렇게 만든 노드를 부모 노드에 연결해서 웹 문서에 추가합니다. 새로운 노드를 만들거나 부모 노드에 연결할 때는 다음 함수를 사용합니다. createElement() : 새 요소 노드를 만듭니다. createTextNode(): 텍스트 내용이 있..

DOM의 정의 Document Object Model 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. DOM 트리는 웹 문서 요소를 다음과 같이 표현합니다. 웹 문서의 태그는 요소(Element) 노드로 표현합니다. 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드(#text:)로 표현합니다. 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다. 주석은 주석(Comment) 노드로 표현합니다. DOM 트리가 만들어지는 것을 실시간으로 확인할 수 있는 사이트 https://software.hixie.ch/utilities/js/live-dom-viewer/ DOM 요소..

리터럴 객체로 배열을 만드는 법 var numbers = ["one", "two", "three", "four"] Array 객체로 배열 만들기 var myArray = new Array(); // Array 객체의 인스턴스를 만듭니다. var numbers = new Array("one","two","three","four") .length 속성은 Array 객체의 속성! concat() 함수 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수. 예를 들어 다음과 같은 nums 배열과 chars 배열이 있을 때 다음과 같이 concat() 함수를 사용해 두 개의 배열을 연결해서 새로운 배열을 만들 수 있다. concat() 함수를 사용할 때 nums 배열과 chars 배열 순서를 바..

현재 날짜 정보를 가지는 date 객체 만들기 간단히 new 예약어 다음 Date 객체를 사용하면 됩니다. 이렇게 만든 인스턴스에는 현재 날짜와 시간이 담깁니다. var now = new Date(); 특정 날짜나 시간 정보를 가지는 Date 객체 만들기 특정 날짜를 저장한 Date 객체를 만들고 싶다면 Date 다음의 괄호 안에 날짜 정보를 입력합니다. 예를 들어 '2018년 2월 25일' 날짜 정보를 객체에 저장한 후 프로그램에 사용하고 싶다면 new Date("2018-02-25"); 다음과 같이 입력합니다. 이렇게 만든 객체에는 지정한 날짜의 오전 9시 정보가 담깁니다. 연도의 월까지만 지정했다면, 해당 월의 1일, 오전 9시로 설정됩니다. 시간 정보까지 함께 지정하려면 날짜 다음에 대문자 T를 ..

이벤트(Event) 란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 로드하는 것이 이에 속합니다. 마우스 이벤트 속성 설명 click 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생합니다. dbclick 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생합니다. mousedown 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생합니다. mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다. mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다. mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다. mouseup 사용자가 누르고..