[Codeit;] 인터랙티브 자바스크립트

1. 인터랙티브 자바스크립트 시작하기 

const tag = document.getElemetById('id');

const tags = document.getElementsByClassName('class');

//유사 배열: 인덱스, 길이, for...of 문 사용 가능 
tags[1]
tags.length
for (let tag of tags) {
 console.log(tag);
 }

const btns = document.getElementsByTagName('button');

const tag = document.querySelector("#id");

const tag = document.querySelector(".class");
//class 요소 중 첫번째 요소 선택

const tags = document.querySelectorAll(".class");
//class 요소 전체 선택

tag.onclick = function () {
	console.log("hello");
}

 

2. 브라우저와 자바스크립트

DOM(Document Object Model): 문서 객체 모델

HTML 문서 전체 ➡️ 객체로 표현

const myTag = document.querySelector('#id');

//자식 노드
myTag.children

//인덱싱
myTag.children[1]

//첫번째 자식 노드
myTag.firstElementChild
//마지막 자식 노드
myTag.lastElementChiled


//부모 노드
myTag.parentElement

//형제 노드
myTag.previousElementSibling
myTag.nextElementSibling

 

const myTag = document.querySelector('#id');

//요소 안에 있는 HTML 리턴 -> HTML 수정
myTag.innerHTML

//요소 포함 전체 HTML 리턴
myTag.outerHTML

//HTML 태그 제외 값 리턴
myTag.textContent

//1. 요소 노드 만들기: document.createElement('태그 이름');
const first = document.createElement('li');

//2. 요소 노드 꾸리기: textContent, innerHTML, ...
first.textContent = '처음';

//3. 요소 노드 추가하기: NODE.prepend, append, after, before
tomorrow.prepend(first);

//노드 삭제하기: Node.remove();
tomorrow.remove();

//노드 이동하기: prepend, append, before, after
today.append(tomorrow.children[1]);
tomorrow.children[1].after(today.children[1]);

//비표준 속성 접근: elem.getAttribute('속성')
tomorrow.getAttribute('href');

//속성 추가: elem.setAttribute('속성', '값');
tomorrow.setAttribute('class', 'list');

//속성 삭제: elem.removeAttribute('속성')
tomorrow.removeAttribute('href');

//style 프로퍼티
today.children[0].style.textDecoration = 'line-through';
//주의점: 카멜 표기법 사용하기 

//elem.className
today.children[1].className = 'done';

//elem.classList: add, remove, togle 사용 가능
today.classList

 

3. 이벤트 살펴보기

//이벤트 핸들러 등록하기: elem.addEventListener(event, handler);
btn.addEventListener('click', event1);

//이벤트 핸들러 제거하기: elem.removeEventListener(event, handler);
btn.removeEventListener('click', event2);

//이벤트 객체
function eventName(e) {
	event.target.style.color = 'red';
    event.type //이벤트 이름(click, mouseup, keydown)
}

//이벤트 버블링: 부모 요소의 핸들러까지 동작 

e.stopPropagation();

//event.preventDefault
link.addEventListener('click', function(e) {
	e.preventDefault();
});

 

4. 다양한 이벤트 알아보기

MouseEvent.button
//0 : 마우스 왼쪽 버튼
//1 : 마우스 휠
//2 : 마우스 오른쪽 버튼
//3 : X1 (일반적으로 브라우저 뒤로 가기 버튼)
//4 : X2 (일반적으로 브라우저 앞으로 가기 버튼)

MouseEvent.type.click
//마우스 왼쪽 버튼을 눌렀을 때
MouseEvent.type.contextmenu 
//마우스 오른쪽 버튼을 눌렀을 때
MouseEvent.type.dblclick : 
//동일한 위치에서 빠르게 두 번 click할 때
MouseEvent.type.mousedown
//마우스 버튼을 누른 순간
MouseEvent.type.mouseup
//마우스 버튼을 눌렀다 뗀 순간

MouseEvent.type = mousemove
//마우스 포인터가 이동할 때
MouseEvent.type = mouseover
//마우스 포인터 요소 밖 -> 안
MouseEvent.type = mouseout 
//마우스 포인터 요소 안 -> 밖

//마우스 포인터 위치
MouseEvent.clientX, clientY
//기준: 화면에 표시되는 창
MouseEvent.pageX, pageY
//기준: 웹 문서 전체
MouseEvent.offsetX, offsetY
//기준: 이벤트가 발생한 요소 
MouseEvent.screenX, screenY
//기준: 마우스 포인터의 모니터 화면

MouseEvent.target
//이벤트가 발생한 요소
MouseEvent.relatedTarget
//이벤트가 발생하기 직전 || 직후 마우스가 위치해있던 요소

MouseEvent.type = mouseenter
MouseEvent.type = mouseleave
//버블링 발생 X
//자식 요소 계산 X

keyboardEvent.type
//keydown : 키보드 버튼을 누른 순간 ( 하나의 키만 연속적으로 누르거나, shift, 등에도 동작 )
//keypress : 키보드 버튼을 누른 순간 ( 출력값이 변하는 값에만 동작, 웹표준에서는 권장하지 않음 )
//keyup : 키보드 버튼을 눌렀다 뗀 순간

keyboardEvent.key
//이벤트가 발생한 버튼의 값

keyboardEvent.code
//이벤트가 발생한 버튼의 키보드에서 물리적인 위치

//포커스 이벤트
focusin : 요소에 포커스가 되었을 때
focusout : 요소에 포커스가 빠져나갈 때
focus : 요소에 포커스가 되었을 때 (버블링 x)
blur : 요소에 포커스가 빠져나갈 때 (버블링 x)

//입력 이벤트
input : 사용자가 입력을 할 때 (esc, shift 같은 입력이 안 되는 키보드 값은 적용이 안 되는 것 ! 키보드 이벤트와의 차이점)
change : 요소의 값이 변했을 때 (입력이 되기 전의 값과 입력이 완료되었을 때의 값과 차이가 있을 때만)
select : 입력 양식의 하나가 선택되는 순간
submit : 폼을 전송하는 순간

window.addEventListener('scroll', 함수);

window.scrollY 
//스크롤이 몇 px인지 파악