JavaScript 시작: 변수·함수·이벤트로 화면에 반응 만들기
9강. JavaScript 시작: 변수·함수·이벤트로 화면에 반응 만들기
1. 이번 강의에서 해결할 문제
버튼을 눌러도 화면이 바뀌지 않습니다. DOM 요소를 한 번 찾고 상태 변경을 이름 있는 함수로 분리해 첫 상호작용을 만듭니다.
2. 학습 목표
3. 핵심 개념
이벤트 리스너는 클릭이 일어났을 때 실행할 함수를 등록합니다. 상태를 DOM 문구에서 추측하기보다 aria-expanded 같은 명시적 값으로 읽고 갱신합니다. 같은 요소를 함수마다 다시 검색하지 않고 초기화 시 참조를 저장합니다.
용어 정리
| 용어 | 뜻 | 이 강의의 예 |
|---|---|---|
| 변수 | 다시 사용할 값에 붙인 이름 | aboutToggle, expanded |
| DOM 요소 참조 | JavaScript가 현재 HTML 요소에 접근하는 값 | document.querySelector(...) 결과 |
| 함수 | 여러 동작을 이름으로 묶은 코드 | setAboutExpanded |
| 이벤트 | 사용자의 클릭·입력처럼 브라우저에서 일어난 일 | click |
| 이벤트 리스너 | 이벤트가 생길 때 호출할 함수를 등록하는 장치 | addEventListener |
| 불리언 | 참 또는 거짓을 나타내는 값 | 펼침 true, 닫힘 false |
| ARIA 상태 | 보조 기술에 현재 UI 상태를 전달하는 속성 | aria-expanded |
가장 작은 이벤트부터 확인하기
const button = document.querySelector('#aboutToggle');
button.addEventListener('click', () => {
console.log('소개 버튼을 눌렀습니다.');
});
첫 줄은 HTML에서 해당 ID의 요소를 찾아 참조를 저장합니다. 둘째 부분은 클릭이 일어날 때 실행할 함수를 등록합니다. 페이지 로드 순간에는 로그가 나오지 않고 실제 클릭마다 한 줄씩 추가됩니다. 선택자가 틀리면 button은 null이므로 리스너를 등록할 수 없습니다.
4. 단계별 실습
HTML · 소개 섹션 내부
적용 전에는 추가 소개 문장이 항상 보이거나 버튼과 상태가 연결되지 않습니다. 아래 HTML은 초기 상태를 닫힘으로 명시하고, JavaScript가 버튼 문구·ARIA 상태·문단 표시를 한 함수에서 함께 바꿉니다.
<button id="aboutToggle" type="button" aria-expanded="false" aria-controls="aboutMore">
소개 더 보기
</button>
<p id="aboutMore" hidden>게임플레이 시스템과 접근 가능한 UI를 공부합니다.</p>
JavaScript · 파일 경로: js/app.js
const aboutToggle = document.querySelector('#aboutToggle');
const aboutMore = document.querySelector('#aboutMore');
function setAboutExpanded(expanded) {
aboutToggle.setAttribute('aria-expanded', String(expanded));
aboutToggle.textContent = expanded ? '소개 접기' : '소개 더 보기';
aboutMore.hidden = !expanded;
}
aboutToggle.addEventListener('click', () => {
const expanded = aboutToggle.getAttribute('aria-expanded') === 'true';
setAboutExpanded(!expanded);
});
코드 한 줄씩 이해하기
- 두
querySelector는 스크립트 시작 시 버튼과 문단을 한 번씩 찾습니다. setAboutExpanded(expanded)의 매개변수는 펼칠지 닫을지를 나타내는 불리언입니다.String(expanded)는 불리언을 HTML 속성에 넣을"true"또는"false"문자열로 바꿉니다.- 삼항 연산자가 상태에 맞는 버튼 문구 하나를 선택합니다.
hidden은 참일 때 요소를 숨기므로 펼침 상태의 반대인!expanded를 대입합니다.- 클릭 함수는 현재 속성 문자열이
"true"인지 비교해 불리언으로 읽습니다. setAboutExpanded(!expanded)가 현재 상태를 반대로 바꾸며 세 가지 화면 정보를 함께 갱신합니다.
클릭 전후 실행 결과
| 시점 | aria-expanded | 버튼 문구 | 문단의 hidden | 화면 |
|---|---|---|---|---|
| 처음 | "false" | 소개 더 보기 | true | 추가 문장 숨김 |
| 첫 클릭 | "true" | 소개 접기 | false | 추가 문장 표시 |
| 둘째 클릭 | "false" | 소개 더 보기 | true | 다시 숨김 |
Elements 패널에서 속성이 위 표와 같이 바뀌는지 확인합니다. 화면 문장만 보이고 aria-expanded가 그대로라면 시각 상태와 접근성 상태가 어긋난 것입니다.
개발자 도구 확인: Console에서 aboutToggle이 null이 아닌지 확인합니다. Elements에서 클릭 전후 aria-expanded와 hidden 변화를 비교합니다.
5. 코드가 동작하는 이유
defer 덕분에 DOM 생성 후 요소를 찾습니다. 클릭하면 현재 문자열 상태를 Boolean으로 바꾸고, 한 함수가 접근성 속성·버튼 문구·콘텐츠 표시를 일관되게 갱신합니다.
6. 자주 하는 실수와 해결법
7. 직접 실습
8. 이해 점검 질문 3개
9. 핵심 요약
다음 강의 연결
한 요소의 펼침 상태를 변경했습니다. 10강. DOM으로 프로젝트 카드 만들기에서는 배열 데이터를 읽어 여러 카드 요소를 생성하고 목록에 반영합니다.
JavaScript 시작: 변수·함수·이벤트로 화면에 반응 만들기 미니 퀴즈
선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.
학습을 마쳤나요?
직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.