HTML과 JavaScript 연동하기

00. 개요

HTML을 통해서 브라우저에서 사용자에게 보여주고 싶은 UI(유저 인터페이스)를 보여줄 수 있다. 나아가 사용자의 interaction(상호작용)에 따라 동적으로 UI를 업데이트하고 싶다면, JavaScript를 해당 HTML에 연동해야 한다.

보통 interaction(상호작용)이 많은 경우에는 Vanilla JavaScript(별도의 라이브러리/프레임워크를 사용하지 않는 형태의 Javascript)로만 구현하기에는 코드의 양도 많아지고 코드 관리도 어려운 편이라 보통 React, Vue, Angular 등의 도구(라이브러리/프레임워크)를 사용한다.

다만, 이러한 도구(라이브러리/프레임워크) 없이 구현할 수 있는 방법을 알고 있어야 이후에 도움이 되므로, 예제를 통해 카운터, Modal 등을 구현해보자.

01. 카운터

버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 id="number">0</h2>
    <div>
      <button id="increase">+1</button>
      <button id="decrease">-1</button>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

HTML 문서 내부에 h2와 button 태그에 id 값을 설정함으로써 JavaScript에서 쉽게 해당 DOM(각 태그에 대한 정보를 지니고 있는 JavaScript 객체)을 선택 할 수 있다.

`DOM` 선택하기

[DOM 선택하기]

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

console.log(number);
console.log(increase);
console.log(decrease);

<h2 id="number">0</h2>
<button id="increase">+1</button>
<button id="decrease">-1</button>

각 DOM에 내장된 기능들은 정말 다양하다.

[DOM 활용하기]

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

console.log(number.innerText); // 내용
console.log(increase.offsetTop); // top 위치
console.log(decrease.id); // id

0
71
decrease

이벤트 설정하기

DOM은 다양한 이벤트를 가지고 있다. 이번 예제에서는 버튼들이 클릭 됐을 때 console에 텍스트를 출력하는 이벤트를 설정하도록 한다.

[DOM 이벤트 설정하기 #1]

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

increase.onclick = () => {
  console.log("increase 가 클릭됨");
};

decrease.onclick = () => {
  console.log("decrease 가 클릭됨");
};

즉, DOM에 이벤트를 설정 할 때에는 .on이벤트이름 값에 함수를 설정하면 된다.

[DOM 이벤트 설정하기 #2]

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

increase.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current + 1;
};

decrease.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current - 1;
};

parseInt() 함수는 문자열을 숫자로 변환해주는 함수로, 두 번째 매개변수(parameter)에 몇 진수로 숫자를 받아올 지를 입력한다. 즉, .innerText로 받아오는 값은 문자열이기 때문에 덧뺄셈 연산을 위해서는 숫자형으로 변환해주어야 한다.

[참고]

const buttons = document.querySelectorAll('button');
const [increase, decrease] = buttons;

id 값 없이도 충분히 가능하다.

02. Modal 만들기

Modal이란, 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI를 의미한다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button>버튼 열기</button>
    <div class="modal-wrapper">
      <div class="modal">
        <div class="modal-title">안녕하세요</div>
        <p>모달 내용은 어쩌고 저쩌고..</p>
        <div class="close-wrapper">
          <button>닫기</button>
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 4px;
  width: 320px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.modal p {
  font-size: 16px;
}

.close-wrapper {
  text-align: right;
}

display 스타일을 사용하여 Modal 열고 닫기

display를 활용해 Modal을 열고 닫는 기능을 생성할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">버튼 열기</button>
    <div class="modal-wrapper" style="display: none;">
      <div class="modal">
        <div class="modal-title">안녕하세요</div>
        <p>모달 내용은 어쩌고 저쩌고..</p>
        <div class="close-wrapper">
          <button id="close">닫기</button>
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

display: none; 스타일을 사용하게 되면 해당 element는 화면에서 숨겨지게 된다.

[Modal 이벤트 설정하기]

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");

function handleOpenClick() {
  modal.style.display = "flex";
}

function handleCloseClick() {
  modal.style.display = "none";
}

open.addEventListener("click", handleOpenClick);
close.addEventListener("click", handleCloseClick);

만약 id가 아닌 class로 DOM을 선택하려면, document.getElementsByClassName 또는 document.querySelector를 활용해야 한다. 이때, document.querySelector를 사용하여 class 값으로 DOM 을 선택 할 때에는 텍스트 앞에 . 을 붙여야 한다.

Author And Source

이 문제에 관하여([JS 017] Modern Javascript 004. HTML과 Javascript 연동), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyoungqu23/JS017-Modern-Javascript-004-HTML과-JS-연동

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[JS 017] Modern Javascript 004. HTML과 Javascript 연동