[javascript] Interactive개발에 필요한 DOM script

2021-01-05

Interactive개발에 필요한 DOM script

ECMAscript 2015

var // 구형 변수 정의

const // 상수
let // 변할 수 있는.

// var과 const,let의 큰 차이점은 변수의 scope (유효범위) 에서 차이가 있음
// var는 함수단위로 유효범위를 가지게되고, ( function(){}안 )
// const와 let은 블록단위로 유효범위를 가지게 됨 ( {}안 )

// example
if(true){
	var a = 100;
}

console.log(a); // 100

if(true){
	let a = 100;
}

console.log(a); // error

data- 속성과 setAttribute, getAttribute

//html5 표준 커스텀 속성인 data-
// data-index, data-id, data-role 등 data-의 형식으로 시작해서 필요에 따라 임의로 추가

const char = document.querySeletor('.selector');
char.setAttribute('date-id', 123); // html dom에 date-id 속성 추가됨
char.getAttribute('date-id'); // 123

createElement, innerHTML, appendChild, removeChild

const pElem = document.createElement('p'); // <p></p>
pElem.innerHTML = '<a href="#">안녕</a>'; // <p><a href="#">안녕</a></p>

const characterElem = document.querySelect('.character');
characterElem.appendChild(pElem); // <div class="character"><p><a href="#">안녕</a></p></div>
// 맨 끝에 있는 차일드 제거
characterElem.removeChild(document.querySeletor('p')); // <div class="character"></div>
// 안에 있는 차일드 제거

classList.add, classList.remove, classList.toggle

const ilbuni = document.querySelector('.ilbuni');

ilbuni.classList.add('active');
ilbuni.classList = 'active'; // ilbuni에 클래스들이 다 empty 되고 active로 되는거임.

ilbuni.classList.remove('active');

ilbuni.classList.toggle('active'); // 액티브 있으면 없애고, 액티브 없으면 있게

window.addEventListener(‘load’);

  • window가 load 끝나야지 실행되는 function들… 비효율적이다.
  • 문서에 있는 resources들 (이미지들) 까지 다 불러와야지 함수가 실행되는 구조

window.addEventListener(‘DOMContentLoaded’);

dom 구조만 다 불러오면 함수가 실행됨

자바스크립트 코드 작성은 전역변수를 최소화하자. (충돌방지)

ㄴ> 익명함수로 호출하면 됌.

const element = document.querySelector('selector');

function clickHandler() {
	console.log(this); // 이벤트리스너 안에서 this는 클릭된 애를 가르침.
	console.log(e.currentTarget);

	// this나 e.currentTarget이나 이벤트리스너가 실행되는 객체
}

element.addEventListener('click', clickHandler);

// 함수가 이벤트 핸들러로 실행이 되면 첫번째 매개변수 자리에 e가 있음.
function clickHandler(e){
	console.log(e);
}

//이벤트 객체는 지금 발생하는 이벤트에 대한 정보를 담고있는 객체
//활용해서 이벤트에 대한 조작을 할 때

function clickHandler(e){
	console.log(e.target); // 내가 정말 클릭한 부분에 대한 타겟.
}