Javascript Alert 이벤트와 예제

Alert란?

JavaScript의 alert는 웹 페이지에서 간단한 대화 상자를 통해 메시지를 표시하는 데 사용됩니다. alert 함수를 호출하면 다이얼로그 박스가 뜨고 메시지를 확인할 수 있게 됩니다. 이를 통해 사용자에게 정보를 전달하거나 경고를 줄 수 있습니다.

Alert 사용법

 

alert 함수를 사용하여 다이얼로그 박스를 표시할 수 있습니다. 함수 호출 시 간단한 메시지를 전달하며, 메시지는 인용부호로 묶여야 합니다. 예를 들어, alert('Hello!');와 같이 호출하여 "Hello!"라는 메시지를 표시할 수 있습니다.

또한, 변수의 값을 표시하고 싶은 경우에는 변수를 문자열로 변환하여 메시지에 포함시킬 수 있습니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다.

alert('현재 시간은 ' + new Date());

이렇게 하면 현재 시간이 다이얼로그 박스에 표시됩니다.

Alert 이벤트 처리하기

alert 함수를 호출하면 대화 상자가 모달로 표시되고, 사용자는 확인 버튼을 클릭해야만 다른 작업을 계속할 수 있습니다. 이를 활용하여 특정 이벤트를 처리할 수 있습니다. 예를 들어, 사용자가 확인 버튼을 클릭했을 때 어떤 작업을 수행하도록 할 수 있습니다.

다음은 alert 함수와 클릭 이벤트를 함께 사용하는 예제입니다.

// 알림 버튼 클릭 이벤트
document.querySelector('#alertButton').addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

이 예제에서는 id가 "alertButton"인 요소가 클릭되었을 때, "버튼이 클릭되었습니다!"라는 메시지가 표시됩니다.

실제 예제

 

앞서 설명한 것을 바탕으로 간단한 실제 예제를 살펴보겠습니다. 해야할 일 목록을 입력받아서 다이얼로그 박스를 통해 목록을 확인하는 예제입니다.

// 해야할 일 목록 입력
var toDoList = prompt('해야할 일 목록을 입력하세요.');

// 확인 버튼 클릭 이벤트
document.querySelector('#confirmButton').addEventListener('click', function() {
  alert('해야할 일 목록: ' + toDoList);
});

이 예제에서는 prompt 함수를 사용하여 사용자에게 해야할 일 목록을 입력받습니다. 그리고 "확인" 버튼이 클릭되었을 때, 입력받은 목록이 다이얼로그 박스에 출력됩니다.

정리

이렇게 JavaScript의 alert를 사용하여 다이얼로그 박스를 통해 메시지를 표시할 수 있습니다. 사용자에게 정보를 전달하거나 경고를 줄 때 유용하게 사용할 수 있습니다. 또한, alert 함수와 이벤트를 함께 사용하여 사용자의 동작에 따라 다른 작업을 수행할 수도 있습니다. 다양한 예제를 통해 기능을 익히고, 활용해 보세요!