JavaScript는 웹 페이지에서 사용자와 소통할 수 있도록 세 가지 중요한 대화 상자(dialog box)를 지원합니다. 이러한 대화 상자는 사용자에게 알림 메시지를 표시하거나, 특정 작업에 대한 확인을 받거나, 사용자로부터 직접 입력을 받아야 할 때 유용하게 활용됩니다. 지금부터 각 대화 상자의 특징과 사용 방법을 하나씩 살펴보겠습니다.
JavaScript의 세 가지 대화 상자
1. alert() – 경고 대화 상자
alert()는 사용자에게 간단한 메시지를 전달하는 가장 기본적인 대화 상자입니다. '확인' 버튼 하나만 제공되며, 사용자가 버튼을 누를 때까지 스크립트 실행이 일시 중단됩니다. 주로 오류 안내나 중요한 정보를 전달할 때 사용합니다.
2. confirm() – 확인 대화 상자
confirm()은 '확인'과 '취소' 두 개의 버튼을 제공하여 사용자의 의사를 확인하는 용도로 사용됩니다. 사용자가 '확인'을 누르면 true, '취소'를 누르면 false가 반환되므로, 삭제 작업 등 되돌릴 수 없는 동작 전에 확인 절차를 거치기에 적합합니다.
3. prompt() – 입력 대화 상자
prompt()는 사용자에게 텍스트 입력을 요청하는 대화 상자입니다. 첫 번째 인수로 표시할 메시지를, 두 번째 인수로 기본 입력값을 지정할 수 있습니다. 사용자가 값을 입력하고 '확인'을 누르면 해당 문자열이 반환되며, '취소'를 누르면 null이 반환됩니다.
대화 상자 구현 예제
다음은 세 가지 대화 상자를 모두 구현한 JavaScript 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Dialogue boxes</h1>
<div class="sample"></div>
<button class="alert">ALERT BOX</button>
<button class="confirm">CONFIRM BOX</button>
<button class="prompt">PROMPT BOX</button>
<h3>
Click on the above button to see their dialogue box
</h3>
<script>
let fillEle = document.querySelector(".sample");
document.querySelector('.alert').addEventListener('click',()=>{
alert('Hello World');
});
document.querySelector('.confirm').addEventListener('click',()=>{
confirm('Are you sure?');
});
document.querySelector('.prompt').addEventListener('click',()=>{
prompt('Enter your name');
})
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 세 개의 버튼이 화면에 나타납니다. 각 버튼을 클릭했을 때의 결과는 다음과 같습니다.
'ALERT BOX' 버튼 클릭 시 −
'Hello World'라는 메시지가 담긴 경고 대화 상자가 화면에 표시됩니다.
'CONFIRM BOX' 버튼 클릭 시 −
'Are you sure?'라는 질문과 함께 '확인'과 '취소' 버튼이 있는 확인 대화 상자가 나타납니다.
'PROMPT BOX' 버튼 클릭 시 −
'Enter your name'이라는 메시지와 함께 텍스트를 입력할 수 있는 입력 대화 상자가 표시됩니다.
마무리
이처럼 alert(), confirm(), prompt()는 별도의 라이브러리 없이 브라우저에서 바로 사용할 수 있는 강력한 내장 함수입니다. 다만 최신 웹 개발에서는 디자인 커스터마이징이 불가능하고 UX를 저해할 수 있다는 이유로, 커스텀 모달(modal)을 대체재로 사용하는 경우도 많습니다. 그럼에도 간단한 데모나 학습용 프로젝트에서는 여전히 널리 활용되고 있으니, 기본 개념을 확실히 익혀두는 것이 좋습니다.