Jade_o.o

요소.addEventListener(이벤트, 명령) • 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드 let boxEl = document.querySelector(".box"); console.log(boxEl); boxEl.addEventListener("click", function() { alert("click!"); }) document.querySelector(".box").addEventListener("click", function() { alert("click"); }) addEventListener 이벤트의 종류 • Click : 클릭 • Mouse 계열 1) Mouseover : 요소에 커서를 올렸을 때 2) Mouseout : 마우스가 요소를 벗어날 때 ..

JavaScript 요소 • 1) 요소 선택자 => 1.1 querySelector => 1.2 querySelectorAll => 1.3 getElementById • 2) 요소 다루기 => 2.1 .textContent .innerText .innerHTML => 2.2 classList.~ => 2.3 setAttribute => 2.4 다른 노드에 접근하기 => 2.5 createElement • 3) 요소 추가 => 3.1 .append() / .appendChild() => 3.2 prepend() => 3.3 before() => 3.4 after() • 4) 요소 삭제 => 4.1 remove() => 4.2 removeChild() 1.1 querySelector ("요소 선택자") • ..

DOM(Document Object Model) • HTML 문서 요소의 집합 • HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현 • 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document • 웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 DOM • 1. 새로운 HTML 요소나 속성 추가 • 2. 존재하는 HTML 요소나 속성 제거 • 3. HTML 문서의 모든 HTML 요소 변경 • 4. HTML 문서의 모든 HTML 속성 변경 • 5. HTML 문서의 모든 CSS 스타일 변경 • 6. HTML 문서에 새로운 HTML 이벤트 추가 • 7. HTML 문서의 모든 HTM..

JavaScript 표준객체 • 자바스크립트가 기본적으로 가지고 있는 객체들 • 프로그래밍을 하는데 기본적으로 필요한 도구들 • String, Number, Array, Date, Math .......... • 1) Date 객체 => Date 객체 - 함수 • 2) Math 객체 => Math 객체 - 함수 1) Date 객체 • Javascript 에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체 // Date 객체 초기화 new Date() new Date(밀리초) -> new Date(800000); // 1970년 1월 1일 0시부터 밀리초만크므 지난 날짜 new Date(년, 월, 일, 시, 분, 초, 밀리초) -> new Date(16, 5, 25); // 1916년..