목차 마우스 이벤트 1-1. 마우스 이벤트 종류 1-2. 마우스 이벤트 관련 속성 1-3. 마우스 이벤트 예시 키보드 이벤트 2-1. 키보드 이벤트 종류 2-2. 키보드 이벤트 관련 속성 2-3. 키보드 이벤트 예시 스크롤 이벤트 3-1. 스크롤 이벤트 종류 3-2. 스크롤 이벤트 관련 속성 3-3. 스크롤 이벤트 예시 폼 이벤트 4-1. 폼 이벤트 종류 4-2. 폼 이벤트 관련 속성 4-3. 폼 이벤트 예시 1. 마우스 이벤트 1-1. 마우스 이벤트 종류 mousedown 요소 위에서 마우스 버튼을 누를 때 mouseup 요소 위에서 마우스 버튼을 누르고 있다가 뗄 때 mouseover 마우스 커서가 요소 바깥으로부터 안으로 움직일 때 mouseout 마우스 커서가 요소 위에 있다가 요소 밖으로 움직일..
목차 이벤트 이벤트 핸들러 2-1. HTML 속성 핸들러 1개 할당 가능 2-2. DOM 프로퍼티 핸들러 1개 할당 가능 2-3. addEventListener 표준 이벤트 모델, 핸들러 n개 할당 가능 이벤트 객체 버블링과 캡쳐링 이벤트 전달/차단 4-1. 버블링 4-2. 버블링 차단 event.stopPropagation() 4-3. 캡쳐링 true 기본 이벤트 제거 5-1. event.preventDefault() 5-2. return false; 1. 이벤트 DOM 이벤트(Document Object Model event)는 마우스 이벤트(click, mouseover, mouseout, mousemove), 폼 요소 이벤트(submit, focus), 키보드 이벤트(keydown, keyup),..
목차 window 객체 1-1. window.open('주소', '이름 또는 open 방식', '형태'); 1-2. window 객체 타이머 메소드 1-3. window 객체 메소드 1-4. window.onload 속성 BOM 2-1. location 객체 2-2. navigator 객체 2-3. history 객체 2-4. screen 객체 1. window 객체 ❗ alert, prompt 등 현재까지 자바스크립트에서 사용해온 메소드들은 사실 window 객체에 속한 것들이다. 이들을 사용할 때 window.메소드명처럼 접근하진 않았지만, 그 최상위에는 window 객체가 있음을 짚어보자. window 객체는 자바스크립트(JavaScript)의 최상위 객체이며, BOM(Browser Object M..
목차 노드 생성/복제 메소드 1-1. document.createElement(tag) 1-2. document.createTextNode(value) 1-3. element.cloneNode(deep) 1-4. 텍스트가 있는 노드 생성 예시 1-5. 텍스트가 없는 노드 생성 예시 1-6. 노드 복제 예시 cloneNode(deep) 노드 삽입 메소드 append/prepend, before/after 2-1. 요소 위치 바꾸기 잘라내기 → 붙여넣기와 같은 효과 노드 대체/삭제 메소드 3-1. 노드 대체 예시 replaceWith(노드 또는 텍스트 문자열) *인자에 HTML 문자열 취급X 3-2. 노드 삭제 예시 remove() 추가 HTML 삽입 메소드 4-1. 노드 대체 수정 insertAdjacen..
목차 주요 노드 프로퍼티 1-1. innerHTML 읽기 가능, 변경 가능 1-2. outerHTML 읽기 가능 1-3. textContent 태그 제외 텍스트만 추출, 일반 텍스트 취급 1-4. hidden 숨김 처리 1-5. value input, select, textarea 값 저장 DOM 프로퍼티와 HTML 속성 2-1. 비표준 속성 메소드 2-2. 사용 예시 1. 주요 노드 프로퍼티 innerHTML 요소 안 HTML을 문자열 형태로 반환 또는 요소 안 HTML을 수정 outerHTML 요소 전체 HTML을 문자열 형태로 반환 ※ innerHTML에 요소 자체를 더한 것 textContent 요소 안 태그 제외 텍스트만 추출하여 반환 또는 요소 안 텍스트만 추출하여 설정 hidden 요소를 보..
목차 요소 검색 메소드 1-1. document.getElementById(id) 1-2. getElementById(id) 사용 예시 버튼 클릭 시마다 색상 변경 1-3. document.getElementsByTagName(태그명) querySelector(선택자)로 대체 1-4. document.getElementsByClassName(클래스명) querySelector(선택자)로 대체 1-5. document.getElementsByName(name) querySelector(선택자)로 대체 요소 검색 메소드 2-1. document.querySelector(선택자)/querySelectorAll(선택자) 2-2. element.querySelector(선택자)/querySelectorAll(선택..
목차 DOM 1-1. 문서 객체 1-2. 노드 요소 노드, 텍스트 노드 DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색 2-1. DOM 컬렉션 NodeList 2-1. DOM 탐색 프로퍼티 , , 2-2. 자식 노드 탐색 2-3. 형제 노드 탐색 2-4. 부모 노드 탐색 DOM 요소 탐색 요소 노드만 탐색 3-1. 자식 요소 탐색 HTMLCollection(숫자) 3-2. 형제 요소 탐색 3-3. 부모 요소 탐색 1. DOM 1-1. 문서 객체 DOM(Document Object Model)은 문서 객체 모델을 의미한다. HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있도록 만든다. 모든 노드 객체에 접근할 수 있는 요소 및 메소드를 제공한다. 1-2. 노드 요소 노드, 텍스트 노드 ❗..
목차 객체 1-1. 객체 선언 및 호출 1-2. key 식별자 ① 객체명.속성명, ② 객체명['속성명'], ③ 객체명[변수명] 1-3. 상수 객체 속성 변경 1-4. 객체 속성 추가 및 제거 함수 활용 객체 생성 in 키워드 true/false for in 반복문 객체의 메소드 속성 생성자 함수 객체 배열 7-1. push() 객체 배열 추가 7-2. find/findIndex 배열 내 객체 검색, 첫 true에 대해서만 반환 7-3. filter true 요소 전체 반환 1. 객체 다른 자료형은 오직 하나의 데이터만 담을 수 있는 원시형(primitive type)인 반면, 객체의 경우는 다양한 데이터를 취급한다는 특징이 있다. 1-1. 객체 선언 및 호출 객체는 프로퍼티(property, key-va..
목차 배열 1-1. 배열 1-2. 배열 선언 1-3. 배열 초기화 [] 1-4. 배열 순회 for문, for of문 Array 객체 메소드 - 요소 추가/제거 2-1. push(값) 맨 뒤 요소 추가 2-2. pop() 맨 뒤 요소 제거 2-3. unshift(값) 맨 앞 요소 추가 2-4. shift() 맨 앞 요소 제거 후 반환 2-5. slice(시작 index, 끝 index) 선택 요소 잘라내기, 원본 배열에 영향X 2-6. splice(index, 제거수, 추가값1, 추가값2, ...) index 위치 요소 제거 및 추가, 원본 배열에 영향O 2-7. concat(배열명1, 배열명2, ...) 두 개 이상의 배열 결합, 원본 배열에 영향X Array 객체 메소드 - forEach() 메소드 A..
