웹 개발 강의 13편 - 입력 칸 읽기

페이지가 대답은 하는데, 미리 정해둔 말만 합니다. 오늘부터는 다른 사람이 그 말을
정할 수 있게 됩니다.

지금까지 페이지 위의 모든 것은 코드를 쓸 때 정해진 것이었습니다. 입력 칸은
정보가 반대 방향으로 들어오는 첫 자리입니다. 여기서부터는 받은 것을 어떻게
다룰지에 대한 이야기입니다.

입력 칸과 두 번째 버튼

index.html 의 숫자 문단 아래에 넣습니다.

<input id="note" type="text" placeholder="Write one line">
  <button id="add" type="button">Add</button>

input 은 글을 적을 수 있는 칸입니다. type="text" 면 평범한 글이고, 다른
종류도 많습니다.

placeholder 는 글을 적기 시작하면 사라지는 회색 힌트입니다.

input 은 meta 나 img 처럼 닫는 태그가 없습니다.

value 와 textContent 는 다릅니다

input 은 닫는 태그가 없으니 사이에 아무것도 없습니다. 그래서 칸에서
textContent 를 읽으면 항상 빈 글자가 나옵니다.

오류도 없고 콘솔에도 안 나옵니다. 그래서 20분을 날리게 됩니다. 오래도록
헷갈리는 구분입니다.

읽고, 비우기

script.js 의 let presses = 0; 아래에 넣습니다.

const field = document.querySelector("#note");
const addButton = document.querySelector("#add");

addButton.addEventListener("click", function () {
  output.textContent = "You wrote: " + field.value;
  field.value = "";
});

먼저 칸과 새 버튼을 찾습니다. 그다음 다른 요소에 두 번째 리스너를 답니다.

버튼 둘에 함수 둘이고, 서로를 모릅니다. 버튼이 스무 개인 페이지도 이렇게
해서 감당이 됩니다.

등호 오른쪽에서는 읽는 것입니다. 더하기는 고정된 말에 바뀌는 말을 이어붙입니다.
12강에서 숫자로 했던 것과 같습니다.

왼쪽에 빈 글자를 넣으면 칸이 비워집니다. 그래야 다음 줄을 지우지 않고 바로
적을 수 있습니다.

칸을 버튼과 어울리게

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

#note {
  font: inherit;
  border: 1px solid #C9CCD2;
  border-radius: 8px;
  padding: 10px 12px;
  width: 220px;
}

여기서도 font: inherit 을 씁니다. 칸도 버튼과 같은 문제를 가지고 있습니다.

테두리는 없애지 않습니다. 적을 수 있는 자리로 보여야 합니다.

확인하기

python -m http.server 5500

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

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

칸이 있고 옆에 Add 버튼이 있습니다. 한 줄 적고 Add 를 누르면, 적은 내용이
페이지에 글로 다시 나옵니다. 칸은 다시 비어서 다음 줄을 적을 준비가 됩니다.

You wrote 뒤에 아무것도 없으면 value 대신 textContent 를 쓴 경우입니다.

마지막 줄만 남는데, 그것은 14강에서 해결합니다.

자주 발생하는 오류

첫째, 칸에서 textContent 를 읽는 경우입니다. 빈 글자가 나오고 오류는 전혀
없습니다.

둘째, 끝나고 칸을 비우지 않는 경우입니다. 옛 글이 남아서 다음 사람이 그 뒤에
적게 됩니다.

셋째, form 안에서 type 을 submit 으로 쓰는 경우입니다. 페이지가 새로
열리면서 적은 것이 전부 사라집니다. submit 이 왜 필요한지 알게 되기 전까지는
button 으로 두세요.

연습 문제

1. type 을 number 로 바꿔보고 칸이 어떻게 달라지는지 보세요.
2. input 사건으로 글자를 칠 때마다 출력이 바뀌게 해보세요.
3. 칸이 비어 있을 때는 아무 일도 안 일어나게 조건을 넣어보세요.

다음 편

14강에서는 적은 줄을 전부 간직해서 목록으로 보여줍니다.

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