07. 버튼과 입력창을 코드에 연결하기

01. 웹 화면의 세 역할을 구별합니다

HTML은 제목·입력창·버튼 같은 화면의 구조, CSS는 크기·색·배치, JavaScript는 입력을 읽고 계산하고 결과를 바꾸는 동작을 담당합니다. HTML의 <button>확인</button>에서 꺾쇠 안의 이름을 태그라고 합니다. id="result"는 요소를 찾을 수 있도록 붙이는 고유 이름입니다.

브라우저는 HTML을 요소들의 연결 구조로 읽어 둡니다. JavaScript가 이 구조를 찾아 바꿀 수 있게 제공하는 방식을 DOM이라고 합니다. ‘문서 객체 모델’이라는 이름을 외우기보다, 지금은 “화면의 입력창과 결과 영역을 코드에서 찾는 통로”로 이해합니다. DOM은 브라우저가 제공하는 기능이며 JavaScript 문법 자체와 구별됩니다.

<label for="name">이름</label>
<input id="name" type="text">
<button id="hello" type="button">인사하기</button>
<p id="result" aria-live="polite"></p>

02. 찾기 → 읽기 → 실행 등록 → 쓰기

1. document.querySelector("#name"): id가 name인 요소를 찾습니다. #은 id를 찾는 표기입니다.
2. input.value: 입력창에 적힌 원문을 읽습니다. 숫자처럼 보여도 문자열입니다.
3. button.addEventListener("click", 함수): 클릭했을 때 할 일을 등록합니다. 지금 바로 실행하는 것은 아닙니다.
4. result.textContent = 문장;: 결과 요소의 텍스트를 바꿉니다.

const input = document.querySelector("#name");
const button = document.querySelector("#hello");
const result = document.querySelector("#result");

function sayHello() {
  const name = input.value.trim();
  if (name === "") {
    result.textContent = "이름을 입력해 주세요";
    return;
  }
  result.textContent = name + "님, 반갑습니다.";
}
button.addEventListener("click", sayHello);

sayHello는 함수를 전달하는 이름이고 sayHello()는 그 함수를 지금 호출하는 표현입니다. 이벤트에는 나중에 호출할 함수 자체를 전달합니다. 위 코드가 요소를 찾으려면 입력창과 버튼이 먼저 만들어져 있어야 합니다. 한 HTML 파일로 만들 때는 본문 요소 뒤, </body> 앞에 스크립트를 놓으면 이해하기 쉽습니다.

03. 실제 화면에서 눌러 봅니다

이 작은 화면은 위 코드와 같은 순서로 작동합니다. ‘전략팀’을 넣은 뒤 버튼을 누르고, 내용을 지운 뒤 다시 눌러 보세요. 입력할 때 결과가 즉시 바뀌지 않는 이유는 click 이벤트에만 함수를 연결했기 때문입니다.

const raw = "80"; // 실제 입력창에서도 문자열을 읽습니다.
const amount = Number(raw);
const message = "지출은 " + amount + "만원입니다.";
console.log(message);

지출은 80만원입니다.

04. 못 찾은 요소와 안전한 텍스트 출력

id 철자가 다르거나 요소가 생기기 전에 찾으면 querySelector 결과가 null입니다. 이어서 value나 textContent를 사용하면 오류가 납니다. HTML의 id와 코드의 #이 붙은 이름을 나란히 비교합니다. 사용자가 입력한 글자는 textContent로 표시합니다. innerHTML은 글자를 HTML로 해석하므로 이 수업의 단순 결과 출력에는 사용하지 않습니다.

const showMessage = function () {
  console.log("버튼을 누르면 실행할 일");
};
showMessage();

버튼을 누르면 실행할 일