바닐라 JS로 크롬 앱 만들기 (3)

수업을 들으며 추가적으로 JS에 관련된 기능들을 더 접근하고 싶어서 유명한 노마드코더의 바닐라 Js로 크롬 앱 만들기 수업을 듣기 시작했다.

앞 내용은 생략하고 DOM요소부터 알고 있는 내용을 복기하면서 찬찬히 듣기 시작한다!

https://nomadcoders.co/javascript-for-beginners/lobby?utm_source=free_course&utm_campaign=javascript-for-beginners&utm_medium=site

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

 

 

console.log()

console.dir() ->>> 요소의 Object 안을 자세히 볼 수 있음

즉, 요소에 .을 찍어서 접근할 수 있는 프로퍼티의 종류를 확인할 수 있다.

---

1. HTML 요소에 JS로 접근하기

document.getElementById('id명')

document.getElementsByClassName('class명')

document.getElementsByTagName('태그명')

 

document.querySelector('선택자') -> 선택자로 찾아지는 가장 처음의 요소 1개만 리턴

document.querySelectorAll('선택자') -> 선택자로 찾아지는 요소를 배열(NodeList)로 리턴

 

*특이하게 document.body 는 직접 접근이 가능하다!

 

2. Events

JS 대부분의 기능은 이벤트를 Listening 하는 것

 

DOM요소명.addEventListener('이벤트종류', function() { });

 

console.dir()로 나오는 프로퍼티 중 on- 으로 시작하는 것은 이벤트명으로,

속성값으로 사용할 땐 on-이벤트명=함수명 으로 사용하거나 함수로 사용하고자 한다면, addEventListener('이벤트명', 콜백함수) 형태로 on을 땐 이벤트명을 문자열로 넣어준다.

on-이벤트명을 사용해주는 것보단 addEventListener()를 사용하는 편이 더 좋은데, 그 이유는 removeEventListener()로 이벤트를 없애줄 수 있기 때문이다.

 

mouseenter : 마우스를 요소 위에 올릴 때

mouseleave : 마우스를 요소 위에서 치울 때

 

 

3. window 이벤트

window.addEventListener('resize', 콜백함수) ? 윈도우의 크기가 변경됏을 때 실행되는 이벤트 리스너

window.addEventListener('copy', 콜백함수) ? 윈도우에서 복사하는 행동을 하면 실행되는 이벤트 리스너

등등 offline, online

 

 

4. 애니메이션을 주는 Common CSS 클래스

지금껏 애니메이션을 주고 싶은 선택자에 하나하나 클래스를 줬지만

공통 애니메이션 클래스를 만들고 추가하는 것이 더 효율적으로 보인다.

.clicked {
	color : tomato;
}

function handleClick() {
	const clickedClass = "clicked";
    if(요소명.className === clickedClass) {
    	요소명.className = "";
    } else {
    	요소명.className = clickedClass;
    }
}

그리고 클래스명을 일일히 하드코딩하는 것은 오타의 위험이 있으므로 사용 전에 변수에 캐싱해두자!

 

 

그리고 className 으로 클래스를 접근하는 것은 className으로 접근하면 그 전의 클래스명이 사라지므로 좋은 방식은 아니므로 classList로 NodeList 형식으로 접근하는 것이 더 좋다.

 

classList.add()

classList.remove()

classList.contains()

function handleClick() {
	const clickedClass = "clicked";
    if(요소명.classList.contains(clickedClass) === true) {
    	요소명.classList.remove(clickedClass);
    } else {
    	요소명.classList.add(clickedClass);
    }
}

이처럼 나타낼 수 있고, 이를 더 간단하게

classList.toggle() 으로 나타낼 수 있는데, 이는 인자에 들어가는 클래스가 있다면 없애주고 없다면 생기게 해주는 역할을 수행해준다.

// contains()를 사용한 결과와 동일함
function handleClick() {
	const clickedClass = 'clicked';
	요소명.classList.toggle(clickedClass);
}