JAVASCRIPT ON THE BROWSER _ 노마드코더 _ 바닐라JS크롬앱만들기

노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 듣고 정리한 기록입니다. 아래 내용은 3.0 - 3.8 에 해당합니다.

3.0 The Document Object

javascript 는 html 과 상호작용합니다. html 요소들을 javascript 로 읽고 추가하고 수정할 수 있습니다. document (브라우저에 저장된 객체)를 사용하면 html 요소들을 선택하고 변경할 수 있습니다.

document.title = "Hi"
// title 을 선택하고 Hi 라는 문자열 삽입

3.1 HTML in Javascript

document.getElementById() 메소드를 사용하면 id 값이 지정된 html 태그를 선택할 수 있습니다.

//html
<h1 id="title">Grab me!</h1>

//js
document.getElementById("title") 

console.dir() 을 콘솔에 찍어보면 해당 element 의 속성값을 확인할 수 있습니다.

// innerText 속성을 찾아서 적용해보면, 
const title = document.getElementById("title")
title.innerText = "Got yo!";

3.2 Searching For Elements

class 이름으로 선택할 때는 document.getElementsByClassName() 을 사용하고, tag 요소로 선택할 때는 document.getElementsByTagName() 를 사용할 수 있습니다.

//html
<h1 class="hello">Grab me!</h1>

//js
document.getElementsByClassName("hello"); 
document.getElementsByTagName("h1")
// 해당 요소가 여러개면 배열로 가져옴

추천하는 방법은 querySelector() 와 querySelectorAll() 으로 조금 더 구체적으로 선택할 수 있습니다.

document.querySelctor(".hello h1")
// class 가 hello 인 h1 태그를 선택
// 못 찾으면 null 값 반환

document.querySelector("#hello");
// id 값을 호출할 때는 # 을 붙여서 구분합니다.

3.3 Events

app.js 라는 별도의 js 파일을 만들고 html 파일에 import (연결)해서 씁니다.

<script src="app.js"></script>

js 의 style 속성을 사용해 css 값에 변화를 줄 수 있습니다.

const Link = document.querySelector("a")
Link.style.color = "blue"

Event 는 마우스를 클릭하거나, 커서를 올리거나, 입력하거나, 엔터를 누르는 행동들을 의미합니다. 이런 모든 Event 들을 js 는 listen 할 수 있습니다. 우선 click event 부터 살펴보면,

const title = document.querySelector("div h1") // 태그 선택
function handleTitleClick () { // 클릭 시 실행할 함수
	console.log("title was clicked!")
}
title.addEventListener("click", handleTitleClick); // 클릭 이벤트 확인하고 실행할 함수 지정

click 으로 css 속성을 바꾸는 함수를 작성해보면,

const title = document.querySelector("div h1")
function handleTitleClick () {
	title.style.color = 'blue';
}
title.addEventListener("click", handleTitleClick);

3.4 Events part Two

listen 하고 싶은 event 를 찾고 싶다면 h1 html element mdn 을 검색하거나 console.dir() 로 확인할 수 있습니다. 프로퍼티 앞에 on 이 붙어 이으면 event listener 입니다.

const title = document.querySelector("div h1")
function handleTitleClick(){
	title.style.color = 'blue';
}
function handleMouseEnter(){
	title.innerText = "Mouse is here!";
}
function handleMouseLeave(){
	title.innerText = "Mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
// 이렇게 표기할 경우 on 을 붙이진 않습니다.

3.5 More Events

이벤트를 확인하는 코드는 아래와 같이 변경해서 쓸 수 있습니다.

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
// 위 두줄과 아래 두줄은 같은 동작이지만, 위 코드처럼 표기하는 것 선호
title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;

window 의 event 를 listen 할 수도 있습니다. 화면의 크기가 바뀌면 배경 색이 바뀌는 코드를 작성해보면,

function handleWindowResize(){
	document.body.style.backgroundColor = 'tomato';
}
window.addEventListener("resize", handleWindowResize)

유저가 copy 하는 행위를 확인할 때는,

window.addEventListener("copy", handleWindowCopy);

와이파이가 연결되어 있는지 확인하고 싶다면,

window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

3.6 CSS in Javascript

한 번 클릭하면 블루, 또 클릭하면 레드.. 이런식으로 번갈아 가며 적용하려면 조건문을 써야 합니다.

const h1 = document.querySelector("div h1");

function handleTitleClick(){
	if(h1.style.color === "blue"){
		h1.style.color = "tomato";
	} else {
		h1.style.color = "blue";
	}
}

h1.addEventListener("click", handleTitleClick);

위 함수식을 조금 더 정리해보면,

function handleTitleClick(){
	const currentColor = h1.style.color; 변수로 묶어주고
	let newColor; // 선언만
	if(currentColor === "blue"){
		newColor = "tomato";
	} else {
		newColor = "blue";
	}
	h1.style.color = newColor; // 이걸 왜 뒤에 넣어주는지.. 
}

3.7 CSS in Javascript part Two

element 의 style 을 js 에서 바로 변경하는 것은 좋지 않습니다. css 에 특정 클래스 이름으로 속성 변화값을 만들고, js 에서 해당 html 요소에 그 클래스 값을 지정하는 것이 좋습니다.

.active {
	color: blue; 
}

이렇게 css 를 작성하고, js 에서 h1 에 active 라는 class 를 달아줍니다.

const h1 = document.querySelector("div h1");

function handleTitleClick(){
	h1.className = "active"
}

h1.addEventListener("click", handleTitleClick);

h1.className 은 현재의 이름을 가져오기도 하고 변경하기도 합니다. 위 함수를 조건문으로 수정해보면,

function handleTitleClick(){
	if(h1.className === "active"){
		h1.className = "";
	} else {
		h1.className = "active";
	}
}

이렇게 설정이 되면 css 에서만 추가적인 변화를 주면 됩니다.

.active {
	color: blue; 
	transition: color .5s ease-in-out;
}

클래스 이름을 실수로 잘못 적으면 동장을 안하니 중복되는 클래스 이름도 변수로 지정하는 것이 좋습니다. 변수의 경우 잘못 적게 되면 콘솔창에서 확인이 가능합니다.

// active 를 clicked 로 교체한 상태

function handleTitleClick(){
	const clickedClass = "clicked";
	if(h1.className === "clickedClass"){
		h1.className = "";
	} else {
		h1.clasName = "clickedClass";
	}
}

3.8 CSS in Javascript part Three

classList 를 활용하면 특정 class 만 선택해서 조정할 수 있습니다.

// 위 코드를 수정해보면,
function handleTitleClick(){
	const clickedClass = "clicked";
	if(h1.classList.contains(clickedClass)){
		h1.classList.remove(clickedClass);
	} else {
		h1.classList.add(clickedClass);
	}
}

// 비교나 대입 연산자를 쓰지 않고 사용할 수 있습니다.
classList.containts // 포함여부 확인
classList.remove // 해당 클래스 없애기
classList.add  // 해당 클래스 넣기

이런 작업은 toggle 을 활용하면 더 쉽게 만들 수 있습니다. toggle 은 있다면 없애주고, 없다면 추가해줍니다.

function handleTitleClick(){
	h1.classList.toggle("clicked");
}