웹 개발 강의 11편 - 버튼과 사건

10강에서 스크립트는 한 번 돌고 콘솔에 출력했습니다. 오늘은 여러분을 기다렸다가
페이지에 글을 씁니다.

생각이 한 번 바뀝니다. 코드가 페이지를 움직이는 것이 아니라, 페이지를
기다립니다. 브라우저에 함수를 하나 건네면서 누가 클릭하면 이걸 실행하라고
말합니다. 그다음 코드는 멈추고 브라우저가 이어받습니다.

여러분이 써본 모든 화면이 그렇게 동작합니다.

버튼과 빈 자리

index.html 의 회색 메모 줄 아래에 넣습니다.

<button id="greet" type="button">Say hello</button>
  <p id="output"></p>

버튼에는 스크립트가 찾을 수 있도록 id 를 붙입니다. type="button" 은 없는
양식을 보내려 하지 않게 합니다.

문단은 태그 사이에 아무것도 없습니다. 일부러 비워둔 것입니다. 코드가 채울
자리입니다.

지금 저장하면 버튼은 있지만 아무 일도 하지 않습니다. 듣는 코드가 없는 버튼은
그냥 모양일 뿐입니다.

클릭을 듣기

script.js 의 마지막 줄 아래에 넣습니다.

const button = document.querySelector("#greet");
const output = document.querySelector("#output");

button.addEventListener("click", function () {
  output.textContent = "Hello from JavaScript";
});

먼저 두 개를 찾습니다. 둘 다 샵을 씁니다. 둘 다 id 이기 때문입니다.

addEventListener 는 요소에게 무언가를 지켜보라고 말합니다. 첫 번째 인자는
무엇을 지켜볼지이고 문자열로 적습니다. 두 번째는 그 일이 일어났을 때 실행할
함수입니다.

textContent 가 등호 왼쪽에 옵니다. 10강에서는 오른쪽에 있었고, 그때는 읽는
것이었습니다. 같은 속성이 오른쪽에서 읽고 왼쪽에서 씁니다.

닫는 줄을 보셔야 합니다. 중괄호, 괄호, 그다음 세미콜론입니다. 함수를 닫고
그다음 호출을 닫는 것입니다.

사건 네 가지

사건은 수십 가지인데 모양은 전부 똑같습니다. 요소, 사건 이름, 그리고 함수입니다.

버튼답게 만들기

style.css 의 /* buttons */ 주석 아래에 넣습니다.

#greet {
  font: inherit;
  background: #1E222A;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
}

#output {
  min-height: 24px;
  color: #C98B1B;
}

font: inherit 은 시스템 글꼴 대신 페이지 글꼴을 쓰게 합니다. 버튼은 기본적으로
운영체제 글꼴을 쓰기 때문에, 이걸 안 하면 혼자 튑니다.

border: none 으로 브라우저가 그리는 회색 테두리를 없앱니다.

cursor: pointer 는 화살표를 손 모양으로 바꿉니다. 사람들이 그것을 기대하기
때문에, 없으면 고장난 느낌이 듭니다.

min-height 는 글이 생기기 전에도 자리를 잡아둡니다. 없으면 누르는 순간 페이지가
아래로 움찔합니다.

확인하기

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

어둡고 둥근 버튼이 있습니다. 아래 줄은 누르기 전까지 비어 있습니다.

누르면 금색 줄이 나타납니다. 페이지를 새로 받지도 않고 서버에 요청하지도
않습니다. 브라우저가 필요한 것을 이미 다 가지고 있었습니다.

아무 일도 없으면 콘솔을 열고 빨간 줄을 찾아보세요. 자바스크립트가 무엇이
틀렸는지 알려주는데, 보통 id 오타입니다.

자주 발생하는 오류

첫째, 사건 이름에 따옴표를 안 쓰는 경우입니다. 따옴표가 없으면 click 이라는
변수를 찾으러 갑니다.

둘째, 함수를 넘기지 않고 호출해버리는 경우입니다. 끝에 괄호가 더 붙으면 로드할
때 한 번 돌고 다시는 안 돕니다.

셋째, textContent 를 함수처럼 쓰는 경우입니다. 값입니다. 등호로 넣어주시면
됩니다.

세 가지 모두 콘솔에 빨간 줄로 나타납니다.

연습 문제

1. 두 번째 버튼을 만들어 다른 문구가 나오게 해보세요.
2. click 대신 mouseover 로 바꿔보세요.
3. button 태그 대신 <a> 로도 같은 일이 되는지 시험해보세요.

다음 편

12강에서는 클릭 사이에 무언가를 기억하는 법을 다룹니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.