Click eventListener 등록하기

즉, js파일에 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 이벤트가 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 이벤트 프로그래밍이라고 한다.

0. 자바스크립트 구구단 게임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>구구단 게임</h1>
    </div>
    <div>
        <input type="number" id="first">
        <span>X</span>
        <input type="number" id="second">
        <button id="click">계산</button>
    </div>
    <div>
        <span>=</span>
        <span id="result"></span>
    </div>
    <script src="index.js"></script>
</body>
</html>

사용자에게 2개의 숫자를 입력받아 계산하는 간단한 구구단 html 파일을 만들었다. 자바스크립트는 처음 써보는거라, 세 가지 고민점이 있었다.

HTML 파일에 JavaScript 파일 연결하는 방법
input 태그에 입력받은 값을 JavaScript 파일에서 사용하는 방법
계산 버튼을 클릭했을 때 계산하도록 하는 방법

각 물음들에 대한 해결책을 정리해보았다.

1. JavaScript 파일 HTML에 연결하기

외부 파일로 분리

js를 별도의 파일로 분리할 수 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다.

script는 head 태그 보다 bodt 태그(페이지의 하단)에 위치시키는 것이 더 좋은 방법이다.
HTML에서 JavaScript 로드하기 참고

2. `input` 태그에 입력받은 값을 js파일에서 사용하기

getElementById()

요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용해 접근할 수 있다.

const first = document.querySelector('#first').value;

input 태그는 .value 로 값을 참조하고, span 태그에는 .textContent 를 써서 값(계산 결과)를 넣어준다.

getElement, querySelector로 요소 검색하기 참고

3. '계산' 버튼을 클릭했을 때 계산하는 함수

이벤트(event)를 만들어줘야 한다.

이벤트란?
어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.

즉, js 파일에 어떤 일이 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 이벤트 프로그래밍이라고 한다.

addEventListener()

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. 자세한 내용은 생활코딩 이 페이지 참고.

<button id="click">계산</button>

위 html파일에서, click 버튼을 클릭했을 때 입력받은 두 값을 곱하고싶다.

document.querySelector('#click').addEventListener('click', () => {
    const first = document.querySelector('#first').value;
    const second = document.querySelector('#second').value;

    document.querySelector('#result').textContent = first * second;
});

계산 버튼에 자바스크립트로 click 이라는 이벤트를 등록해줬다. click 이벤트가 발생하면 결과가 나오도록 함수를 만드는 것이다.

PreviousClick, Enter 두 개의 이벤트 동시에 등록하기 NextJavaScript & C 문법 비교

Last updated 3 years ago