[Javascript] Day 2

이찬형·2020년 2월 12일

momentumCloneCoding

목록 보기

2/5

Day 2

오늘은 HTML의 태그들을 javascript로 받아와 보겠습니다.

javascript는 태그를 받아오면, 걔네들을 모두 Objects로 취급합니다. key: value 형식으로 말이죠.

HTML에 접근해야 하기 때문에 document 객체를 사용할게요!

실습에 사용될 HTML 파일입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="test.css" />
    <title>JS test</title>
  </head>
  <body>
    <h1 id="title">This works!</h1>
    <script src="test.js"></script>
  </body>
</html>

getElementById()

getElementById()는 인자로 주어진 값과 동일한 ID의 태그를 가져옵니다.

const title = document.getElementById("title");

여기선 <h1> 태그를 가져오겠죠.
title 변수는 하나의 객체가 되어, 다음과 같은 여러 값을 갖게 됩니다.

그 중 innerHTML과 style을 사용해봐요!

title.innerHTML = "JS, Hello!"
title.style.color = "aqua";

1번 줄은 HTML의 내용을 바꾸고, 2번 줄은 폰트의 색을 바꿉니다.

This works! 대신 JS, Hello!와 aqua 색이 적용된 것을 확인할 수 있습니다.

querySelector()

querySelector()는 인자로 CSS의 선택자 형식을 받습니다.
그 후 HTML 문서에서 일치하는 첫 번째 태그를 객체로 가져와요.

const title = document.querySelector("#title");

class도 선택이 가능하다는 것이 차이점입니다. 결과는 똑같으니 생략할게요.

addEventListener()

addEventListener()는 이벤트의 발생과 발생 시 실행할 함수를 인자로 받습니다.
이벤트가 발생하는 모든 객체가 대상이 돼요.

브라우저의 크기가 바뀌었을 때 console.log를 찍는 코드를 작성하겠습니다.

function resizeEvent() {
  console.log("Resized!!"); 
}

window.addEventListener("resize", resizeEvent);

주의할 점!! addEventListener()의 인자로 함수를 줄 때 절대 ()을 사용하면 안됩니다!!

()이 있으면 즉시 호출을 하기 때문에, "이벤트 발생 시 저 함수로 넘겨줘!" 란 의미로 사용할 땐 ()이 없어야 해요.

window 객체를 타겟으로 했기 때문에 브라우저의 크기를 바꾸면 콘솔에 위와 같이 찍힙니다.

이번엔 querySelector()을 사용해서 title을 객체로 받아온 후
클릭했을 때 이벤트가 발생하도록 코드를 바꿔볼게요.

const title = document.querySelector("#title");
console.dir(title);

function clickEvent() {
  title.style.color = "aqua";
}

title.addEventListener("click", clickEvent);

타겟이 title 객체이기 때문에 <h1> 태그를 클릭하면
addEventListener()에 의해 clickEvent()가 실행됩니다.

조건문 추가

이번엔 두 가지 색을 놓고, title을 클릭할 때마다 다른 색으로 바뀌는 코드를 작성하겠습니다.

const title = document.querySelector("#title");

const BASIC_COLOR = "blue";
const OTHER_COLOR = "aqua";

function clickEvent() {
  const currentColor = title.style.color;

  if (currentColor === BASIC_COLOR) {
    title.style.color = OTHER_COLOR;
  } else {
    title.style.color = BASIC_COLOR;
  }
}

title.addEventListener("click", clickEvent);

클릭 시마다 blue와 aqua가 바뀌며 나타나는 모습을 확인할 수 있습니다.

classList

태그가 class를 가지고 있다면 classList를 사용합니다.

물론 className도 사용할 수 있지만, 두 개 이상의 클래스를 가지고 있을 때
하나만 바꿔도 전부 날아가는 경우가 있으니 classList 객체의 함수를 쓰는게 좋아요.

HTML을 살짝 바꿔보겠습니다. <h1> 태그에 btn 클래스를 추가할게요.

<h1 id="title" class="btn">This works!</h1>

태그를 클릭 시, clicked 클래스가 없으면 추가해주고, 있다면 없애주는 코드를 작성하겠습니다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (hasClass) {
    title.classList.remove(CLICKED_CLASS);
  } else {
    title.classList.add(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();