[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기
"클릭하면 반응하는 진짜 웹사이트! 지금까지 배운 모든 기술을 하나로 합쳐봅시다."
안녕하세요! 드디어 자바스크립트 기초 시리즈의 마지막 시간입니다. 지난 4강에서 HTML 요소를 선택하고 바꾸는 법을 배웠다면, 오늘은 사용자가 클릭하거나 글을 입력할 때 그 동작을 감지하는 이벤트 리스너(Event Listener)를 배우고, 직접 작동하는 미니 계산기를 만들어보겠습니다.
1. 사용자의 동작을 감시하라: 이벤트 리스너
웹사이트에서 일어나는 모든 동작(클릭, 스크롤, 키보드 입력 등)을 '이벤트'라고 합니다. 자바스크립트는 이 이벤트를 기다리고 있다가 발생하면 특정 함수를 실행합니다.
✅ click: 요소를 클릭했을 때
✅ submit: 폼(Form) 데이터를 전송할 때
✅ keyup: 키보드에서 손을 뗐을 때
2. 이벤트 리스너 사용법 (addEventListener)
HTML 태그에 직접 onclick을 쓰는 것보다 자바스크립트 파일에서 연결하는 방식이 훨씬 깔끔하고 강력합니다.
const btn = document.querySelector('#myBtn'); // 버튼을 클릭했을 때 실행할 동작 등록 btn.addEventListener('click', function() { alert("버튼이 클릭되었습니다!"); });
3. [실습] 미니 더하기 계산기 만들기
두 개의 숫자를 입력받아 더한 결과를 보여주는 프로그램을 완성해봅시다.
<!-- HTML 구조 --> <input type="number" id="num1" placeholder="숫자 1"> <span> + </span> <input type="number" id="num2" placeholder="숫자 2"> <button id="calcBtn">계산하기</button> <p>결과: <span id="result">0</span></p> <script> const button = document.querySelector('#calcBtn'); button.addEventListener('click', () => { // 1. 입력창의 값 가져오기 const v1 = document.querySelector('#num1').value; const v2 = document.querySelector('#num2').value; // 2. 숫자로 변환하여 더하기 (입력값은 기본적으로 문자열임) const sum = Number(v1) + Number(v2); // 3. 결과 화면에 뿌려주기 document.querySelector('#result').innerText = sum; }); </script>
🎉 자바스크립트 기초 연재 완강!
HTML로 뼈대를 세우고, CSS로 옷을 입히고, JS로 생동감을 불어넣는 법까지 모두 배우셨습니다.
'Frontend > JAVASCRIPT' 카테고리의 다른 글
| [JS 4강] HTML을 내 마음대로! DOM 조작 기초 (0) | 2026.02.10 |
|---|---|
| [JS 3강] 코드를 재사용하자! 함수(Function)의 마법 (0) | 2026.02.10 |
| [JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기 (0) | 2026.02.10 |
| [JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기 (0) | 2026.02.10 |