11강 · 버튼과 사건

한눈에

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

오늘 다룰 내용은 세 가지입니다. 먼저 버튼과, 답이 나타날 빈 자리를 만듭니다. 그다음 클릭을 듣습니다. 마지막으로 코드에서 페이지에 글을 씁니다. 여기서 생각이 한 번 바뀝니다. 보기보다 큰 변화입니다. 코드가 페이지를 움직이는 것이 아니라, 페이지를 기다립니다. 브라우저에 함수를 하나 건네면서 누가 클릭하면 이걸 실행하라고 말합니다. 그다음 코드는 멈추고 브라우저가 이어받습니다. 여러분이 써본 모든 화면이 그렇게 동작합니다. 폴더를 다시 열어보겠습니다. 오늘은 우리 파일 세 개가 전부 바뀝니다. 페이지에 태그 두 개, 스크립트 다섯 줄, 그리고 꾸미기입니다. 셋이 한꺼번에 움직이는 것은 이번이 처음입니다. 추가할 태그 두 개입니다. 버튼에는 스크립트가 찾을 수 있도록 id 를 붙입니다. type 을 button 으로 두면 없는 양식을 보내려 하지 않습니다. 그리고 빈 문단에도 id 를 붙입니다. 일부러 비워둔 것입니다. 코드가 채울 자리입니다.

둘 다 6강에서 넣은 회색 줄 아래에 들어갑니다. 문단은 태그 사이에 아무것도 없습니다. 저장하면 버튼은 있지만 아무 일도 하지 않습니다. 듣는 코드가 없는 버튼은 그냥 모양일 뿐입니다.

index.html

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

이제 동작하게 만드는 부분입니다. addEventListener 는 요소에게 무언가를 지켜보라고 말합니다. 첫 번째 인자는 무엇을 지켜볼지이고, 문자열로 적습니다. 두 번째는 그 일이 일어났을 때 실행할 함수입니다. 그 안에서 textContent 가 등호 왼쪽에 옵니다. 지난번에는 오른쪽에 있었고, 그때는 읽는 것이었습니다.

먼저 두 개를 찾습니다. 버튼 하나와 출력 자리 하나입니다. 둘 다 샵을 씁니다. 둘 다 id 이기 때문입니다. 그다음 리스너를 다는데, 함수가 호출 안에 들어가 있습니다. 닫는 줄을 보셔야 합니다. 중괄호, 괄호, 그다음 세미콜론입니다. 함수를 닫고 그다음 호출을 닫는 것입니다. 저장하면 버튼이 살아납니다.

script.js

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

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

사건은 수십 가지인데, 그중 네 개를 먼저 쓰게 됩니다. click 은 누군가 그 요소를 누르는 것입니다. input 은 칸의 글자가 한 글자씩 바뀔 때마다 일어납니다. submit 은 양식이 보내질 때, keydown 은 키가 눌릴 때입니다. 모양은 전부 똑같습니다. 요소, 사건 이름, 그리고 함수입니다. 그다음 버튼이 기본 모양으로 보이지 않게 만듭니다. font 를 inherit 으로 두면 시스템 글꼴 대신 페이지 글꼴을 씁니다. border 를 none 으로 두면 브라우저가 그리는 회색 테두리가 사라집니다. border-radius 는 아바타를 둥글게 만든 그 속성입니다. cursor 를 pointer 로 두면 화살표가 손 모양이 됩니다. 사람들이 그것을 기대하기 때문에, 없으면 고장난 느낌이 듭니다.

두 규칙 모두 맨 아래 buttons 주석 밑에 들어갑니다. 두 번째는 빈 문단을 위한 것입니다. min-height 는 글이 생기기 전에도 자리를 잡아둡니다. 없으면 누르는 순간 페이지가 아래로 움찔합니다. 다음 시간을 위한 주석을 하나 남기고 저장합니다.

style.css

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

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

/* counter */

서버는 같은 방법으로 띄웁니다. 파일 세 개가 바뀌었는데 명령은 그대로입니다. 폴더에 무엇이 있든 그대로 넘겨줍니다.

터미널

python -m http.server 5500

버튼이 있습니다. 어둡고 둥급니다. 아래 줄은 누르기 전까지 비어 있습니다. 누르면 금색 줄이 나타납니다. 페이지를 새로 받지도 않고 서버에 요청하지도 않습니다. 브라우저가 필요한 것을 이미 다 가지고 있었습니다. 지금 이런 화면이 보이고 계셔야 합니다. 어두운 버튼과, 누른 뒤에 아래에 생기는 금색 줄입니다. 아무 일도 없으면 콘솔을 열고 빨간 줄을 찾아보세요. 자바스크립트가 무엇이 틀렸는지 알려주는데, 보통 id 오타입니다. 잠깐 물러서서 보겠습니다. 이게 전체 모양이기 때문입니다. 요소, 사건, 그리고 함수입니다. 여러분이 써본 모든 화면이 그 모양입니다. 이름만 더 좋게 붙여서 수천 번 반복한 것뿐입니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 사건 이름에 따옴표를 안 쓰는 경우입니다. 따옴표가 없으면 click 이라는 변수를 찾으러 갑니다. 둘째, 함수를 넘기지 않고 호출해버리는 경우입니다. 끝에 괄호가 더 붙으면 로드할 때 한 번 돌고 다시는 안 돕니다. 셋째, textContent 를 함수처럼 쓰는 경우입니다. 값입니다. 등호로 넣어주시면 됩니다. 세 가지 모두 콘솔에 빨간 줄로 나타납니다. 마치기 전에 서버를 멈춰두겠습니다. 스크립트가 12줄이고, 이제 페이지가 대답할 수 있습니다. 보통 첫 주에 가는 것보다 멀리 온 것입니다. 폴더는 그대로 두세요. 다음 시간부터 페이지가 기억하기 시작합니다. 오늘 기억하실 것 세 가지입니다. 요소, 사건, 함수. 전부 이 모양입니다. 우리는 기다립니다. 언제 돌릴지는 브라우저가 정합니다. textContent 는 오른쪽에서 읽고 왼쪽에서 씁니다. 다음 시간에는 클릭 사이에 무언가를 기억하는 법을 다룹니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.