JavaScript
클릭에 반응해 화면 바꾸기
요소를 찾고 이벤트 함수를 연결해 사용자 행동에 반응합니다.
이럴 때 필요해요
버튼을 누르면 안내 문구가 바뀌는 작은 상호작용을 만듭니다.
어떻게 동작하나요?
document.querySelector는 CSS 선택자와 맞는 첫 요소를 찾습니다. 찾지 못하면 null이므로 요소가 있는지 확인해야 합니다.
addEventListener에 클릭 때 실행할 함수를 전달합니다. 코드를 연결하는 시점에 함수를 즉시 호출하는 것이 아니라 클릭이 발생할 때 실행하도록 맡기는 것입니다.
아래 전체 예제를 HTML 파일로 저장해 열어 보세요. script가 요소 뒤에 있으므로 해당 요소를 찾을 수 있습니다. textContent는 문자열을 텍스트로 표시합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<button id="reserve">좌석 확인</button>
<p id="message">선택 전</p>
<script>
const button = document.querySelector("#reserve");
const message = document.querySelector("#message");
if (button && message) {
button.addEventListener("click", () => { message.textContent = "좌석을 선택해 주세요"; });
}
</script>좌석 확인 버튼을 누르면 문단이 좌석을 선택해 주세요로 바뀝니다.
자주 헷갈리는 포인트
- 요소가 만들어지기 전에 찾거나 선택자를 틀리면 null일 수 있습니다.
- 이벤트를 등록할 때 실행 결과가 아니라 함수를 전달합니다.
내 말로 설명해 보기
페이지를 열기만 해도 문단이 바뀔까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 요소를 찾고 이벤트 함수를 연결해 사용자 행동에 반응합니다.
- 좌석 확인 버튼을 누르면 문단이 좌석을 선택해 주세요로 바뀝니다.
예시 답변
아닙니다. 클릭 함수를 등록했으므로 사용자가 버튼을 누를 때 문단의 텍스트가 바뀝니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.