버튼 클릭 시 메시지 띄우기 – JavaScript 기본 이벤트 배우기
웹사이트에 버튼을 눌렀을 때 “클릭되었습니다!” 같은 알림창이 뜨는 걸 본 적 있나요?
이런 기능은 JavaScript 이벤트로 간단하게 구현할 수 있습니다.
지금부터 가장 쉬운 JavaScript 이벤트 처리 방법을 알려드릴게요.
✔ HTML 버튼 기본 코드
<button onclick="alert('클릭되었습니다!')">눌러보세요</button>
위 코드를 브라우저에서 실행해보면, 버튼을 클릭했을 때 팝업(alert)이 뜹니다!
✔ JavaScript로 이벤트 분리해서 작성하기
JavaScript 코드를 따로 작성하면 더 깔끔한 구조가 됩니다.
<button id="myBtn">누르기</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
설명:
getElementById: 버튼을 찾아냅니다.addEventListener: 클릭했을 때 실행할 코드를 추가합니다.
✔ 여러 버튼에 각각 다른 기능 넣기
<button id="helloBtn">인사하기</button>
<button id="byeBtn">작별 인사</button>
<script>
document.getElementById("helloBtn").addEventListener("click", function() {
alert("안녕하세요!");
});
document.getElementById("byeBtn").addEventListener("click", function() {
alert("안녕히 가세요!");
});
</script>
📚 JavaScript 기초 문법 함께 보기
- 함수(function): 어떤 행동을 묶어둔 코드 블록
- 이벤트(event): 사용자의 행동(클릭, 키 입력 등)
- alert(): 간단한 팝업 메시지 띄우기
이벤트 처리를 배우면, 버튼 클릭 외에도
입력값 확인, 폼 제출 등 다양한 기능을 구현할 수 있어요!
🎯 마무리
JavaScript의 클릭 이벤트는 웹페이지에 동적인 기능을 추가하는 첫걸음이에요.
처음엔 alert로 시작하지만, 나중엔 모달창, 슬라이드 메뉴 등도 만들 수 있습니다.
이번 글로 웹페이지에 반응형 기능 추가하는 법을 익혀보세요!
✔ 요약
onclick속성으로 간단한 알림을 띄울 수 있어요.addEventListener()를 쓰면 코드가 더 깔끔해집니다.- JavaScript 이벤트는 동적인 웹페이지의 핵심입니다.
👉 다음 글에서는 클릭 시 내용을 바꾸는 방법을 배워볼 거예요!