#3 JavaScript 연결하고 버튼 클릭 감지

 

HTML과 CSS로 정적인 메모장 화면을 만든 뒤, 이제 JavaScript를 연결하기 시작했다.

이번 단계에서는 아직 메모를 실제로 추가하지는 않았다.
먼저 브라우저에서 사용자가 입력한 값을 JavaScript로 가져올 수 있는지, 그리고 버튼 클릭을 감지할 수 있는지를 확인했다.

 

바로 메모 추가 기능을 만들기보다, 먼저 JavaScript가 HTML 요소를 제대로 다룰 수 있는지 확인하는 것을 목표로 했다.

현재 파일 구조

현재 프로젝트 구조는 다음과 같다.

Memo Evolution/
  index.html
  style.css
  script.js
  .gitignore

이번 단계에서 script.js 파일을 새로 추가했다.

 

JavaScript에서 사용할 요소 정하기

JavaScript로 기능을 만들려면 먼저 어떤 HTML 요소를 다룰지 정해야 한다.

이번 메모장에서는 다음 요소들이 필요했다.

• 제목 입력창
• 내용 입력창
• 메모 추가 버튼
• 메모가 들어갈 영역
• 빈 목록 안내 메시지

그래서 HTML 요소에 id를 추가했다.

<input id="memo-title" type="text" placeholder="제목을 입력하세요">

<textarea id="memo-content" placeholder="내용을 입력하세요"></textarea>

<button id="add-memo-button" type="button">메모 추가</button>

<p id="empty-message" class="empty-message">아직 작성된 메모가 없습니다.</p>

<div id="memo-container"></div>

CSS에서는 주로 class를 사용해서 여러 요소에 같은 스타일을 적용했다.
반면 JavaScript에서는 특정 요소 하나를 정확히 가져와야 할 때 id를 사용하면 이해하기 쉽다.

예를 들어 제목 입력창은 다음처럼 가져올 수 있다.

const titleInput = document.getElementById('memo-title');

이 코드는 문서에서 id가 memo-title인 요소를 찾아서 titleInput이라는 변수에 담는다는 뜻이다.

 

JavaScript 파일 연결하기

script.js 파일을 만든 뒤, index.html에 연결했다.

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

script 태그는 body가 끝나기 직전에 작성했다.

HTML 요소들이 먼저 만들어진 뒤 JavaScript가 실행되도록 하기 위해서다.
만약 JavaScript가 너무 먼저 실행되면, 아직 만들어지지 않은 HTML 요소를 찾으려고 해서 문제가 생길 수 있다.

 

HTML 요소 가져오기

script.js에서는 먼저 JavaScript에서 사용할 요소들을 가져왔다.

const titleInput = document.getElementById('memo-title');
const contentInput = document.getElementById('memo-content');
const addMemoButton = document.getElementById('add-memo-button');
const memoContainer = document.getElementById('memo-container');
const emptyMessage = document.getElementById('empty-message');

여기서 모든 HTML 요소를 다 가져올 필요는 없다.

JavaScript에서 실제로 사용할 요소만 가져오면 된다.
이번에는 값을 읽거나, 클릭 이벤트를 붙이거나, 나중에 화면 내용을 바꿀 요소만 변수에 담았다.

 

버튼 클릭 감지하기

버튼을 가져온 뒤에는 클릭 이벤트를 등록했다.

addMemoButton.addEventListener('click', function () {
    console.log('메모 추가 버튼 클릭');
    console.log(titleInput.value);
    console.log(contentInput.value);
});

addEventListener()는 특정 요소에서 이벤트가 발생했을 때 실행할 함수를 등록하는 메서드다.

이번 코드는 다음처럼 해석할 수 있다.

메모 추가 버튼을 클릭하면
콘솔에 "메모 추가 버튼 클릭"을 출력하고
제목 입력창의 현재 값과
내용 입력창의 현재 값을 출력한다.

첫 번째 인자인 'click'은 브라우저가 정해둔 이벤트 이름이다.
두 번째 인자로 전달한 함수는 클릭이 발생했을 때 실행된다.

이런 함수를 콜백 함수라고 부른다.

 

입력값 가져오기

입력창에 적힌 값은 .value로 가져올 수 있다.

console.log(titleInput.value);
console.log(contentInput.value);

titleInput은 제목 입력창 요소이고, contentInput은 내용 입력창 요소다.

사용자가 입력한 값은 각각 다음 위치에 들어 있다.

titleInput.value
contentInput.value

즉, input이나 textarea의 현재 입력값은 .value로 읽을 수 있다.

 

브라우저에서 index.html을 열고 개발자 도구의 Console을 확인했다.

제목과 내용을 입력한 뒤 메모 추가 버튼을 누르면 다음 내용이 출력된다.

메모 추가 버튼 클릭
입력한 제목
입력한 내용

이를 통해 다음을 확인했다.

• script.js가 HTML에 정상적으로 연결됐다.
• 버튼 클릭 이벤트가 정상적으로 동작한다.
• JavaScript에서 input 값을 읽을 수 있다.
• JavaScript에서 textarea 값을 읽을 수 있다.

아직 화면에 메모가 추가되지는 않는다.
하지만 메모 추가 기능을 만들기 위한 기본 연결은 완료했다.