시작 …
페이지가 대답은 하는데, 미리 정해둔 말만 합니다. 오늘부터는 다른 사람이 그 말을 정할 수 있게 됩니다.
페이지가 대답은 하는데, 미리 정해둔 말만 합니다. 오늘부터는 다른 사람이 그 말을 정할 수 있게 됩니다.
오늘 다룰 내용은 세 가지입니다. 먼저 글을 적을 칸과 두 번째 버튼을 만듭니다. 그다음 그 칸 안에 있는 내용을 읽습니다. 마지막으로 같은 속성으로 칸을 비웁니다. 지금까지 페이지는 말하기만 했습니다. 그 위의 모든 것은 코드를 쓸 때 정해진 것이었습니다. 입력 칸은 정보가 반대 방향으로 들어오는 첫 자리입니다. 여기서부터는 받은 것을 어떻게 다룰지에 대한 이야기입니다. 폴더를 다시 열어보겠습니다. 오늘도 지난번처럼 파일 세 개가 전부 움직입니다. 태그 두 개, 스크립트 일곱 줄, 규칙 하나입니다. 또 작은 양인데 페이지는 꽤 달라집니다. 태그 두 개입니다. input 은 글을 적을 수 있는 칸입니다. type 이 text 면 평범한 글이고, 다른 종류도 많습니다. placeholder 는 글을 적기 시작하면 사라지는 회색 힌트입니다. input 은 meta 나 img 처럼 닫는 태그가 없습니다.
둘 다 지난번 숫자 문단 아래에 들어갑니다. 스크립트가 찾을 수 있도록 각각 id 를 붙입니다. 여기서도 type 은 button 입니다. 양식을 보내려 하지 않게 합니다. 저장하면 칸은 생기지만 아무 일도 하지 않습니다.
index.html
<input id="note" type="text" placeholder="Write one line"> <button id="add" type="button">Add</button>
오래도록 헷갈리는 구분 하나를 말씀드립니다. textContent 는 여는 태그와 닫는 태그 사이의 글자입니다. input 은 닫는 태그가 없으니 사이에 아무것도 없습니다. 적은 내용은 대신 value 에 들어 있습니다. 칸에서 textContent 를 읽으면 항상 빈 글자가 나옵니다. 오류도 없고 콘솔에도 안 나와서 20분을 날리게 됩니다. 이것이 처리 함수이고, value 가 두 번 나옵니다. 등호 오른쪽에서는 읽는 것입니다. 더하기는 고정된 말에 바뀌는 말을 이어붙입니다. 12강에서 숫자로 했던 것과 같습니다. 왼쪽에 빈 글자를 넣으면 칸이 비워집니다.
먼저 칸과 새 버튼을 찾습니다. 그다음 다른 요소에 두 번째 리스너를 답니다. 버튼 둘에 함수 둘이고, 서로를 모릅니다. 버튼이 스무 개인 페이지도 이렇게 해서 감당이 됩니다. 저장하면 칸이 살아납니다.
script.js
const field = document.querySelector("#note");
const addButton = document.querySelector("#add");
addButton.addEventListener("click", function () {
output.textContent = "You wrote: " + field.value;
field.value = "";
});칸이 옆의 버튼과 어울리도록 규칙 하나를 넣습니다. 여기서도 font 를 inherit 으로 둡니다. 칸도 같은 문제를 가지고 있습니다. 테두리는 없애지 않습니다. 적을 수 있는 자리로 보여야 합니다. 그다음 서버를 늘 하던 대로 띄웁니다.
style.css
#note {
font: inherit;
border: 1px solid #C9CCD2;
border-radius: 8px;
padding: 10px 12px;
width: 220px;
}
/* list */터미널
python -m http.server 5500
칸이 있고 옆에 Add 버튼이 있습니다. 한 줄 적고 Add 를 누릅니다. 적은 내용이 페이지에 글로 다시 나옵니다. 칸은 다시 비어서 다음 줄을 적을 준비가 됩니다. 마지막 줄만 남는데, 그것은 14강에서 해결합니다. 지금 이런 화면이 보이고 계셔야 합니다. 칸과 옆의 버튼, 그리고 적은 내용을 되돌려주는 줄입니다. You wrote 뒤에 아무것도 없으면 속성을 확인해주시면 됩니다. 매번 value 대신 textContent 를 쓴 경우입니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 칸에서 textContent 를 읽는 경우입니다. 빈 글자가 나오고 오류는 전혀 없습니다. 둘째, 끝나고 칸을 비우지 않는 경우입니다. 옛 글이 남아서 다음 사람이 그 뒤에 적게 됩니다. 셋째, form 안에서 type 을 submit 으로 쓰는 경우입니다. 페이지가 새로 열리면서 적은 것이 전부 사라집니다. submit 이 왜 필요한지 알게 되기 전까지는 button 으로 두세요. 마치기 전에 서버를 멈춰두겠습니다. 스크립트가 25줄이고, 주는 것을 읽습니다. 다만 다시 누르는 순간 잊어버립니다. 폴더는 그대로 두세요. 다음 시간에는 모든 줄을 간직합니다. 오늘 기억하실 것 세 가지입니다. 칸에는 value 를, 태그 사이의 글자에는 textContent 를 씁니다. 등호 오른쪽은 읽고 왼쪽은 씁니다. 읽고 나서 칸을 비우는 한 줄은 쓸 만한 값어치를 합니다. 다음 시간에는 마지막 줄만이 아니라 모든 줄을 간직합니다.
글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.
로그인하시면 댓글을 쓰실 수 있습니다.
아직 댓글이 없습니다. 첫 댓글을 남겨 주시면 됩니다.