웹 개발에서 사용자와 상호작용하는 가장 간단한 방법 중 하나가 바로 prompt() 메서드입니다. 이 메서드는 텍스트 입력창이 포함된 팝업 대화상자를 화면에 띄워 사용자로부터 직접 값을 입력받을 수 있게 해줍니다.
사용자는 대화상자의 입력 필드에 원하는 내용을 작성한 후 '확인' 버튼을 클릭하며, 만약 '취소'를 누르면 null 값이 반환됩니다. 이러한 특성 덕분에 간단한 확인 절차나 데이터 입력이 필요할 때 매우 유용하게 활용됩니다.
자바스크립트 prompt() 기본 문법
prompt(message, defaultValue);
- message: 대화상자에 표시할 안내 텍스트
- defaultValue(선택 사항): 입력 필드에 미리 채워질 기본값
예제 코드
다음은 자바스크립트에서 prompt() 대화상자를 구현하는 전체 HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<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;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Prompt() method</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 프롬프트 대화상자가 나타납니다</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let res = prompt("Are you sure");
if (res === null) {
resultEle.innerHTML = "You pressed cancel";
} else {
resultEle.innerHTML = "You entered " + res + " in the prompt box";
}
});
</script>
</body>
</html>코드 동작 방식 설명
- 버튼('.Btn')에 클릭 이벤트 리스너가 등록됩니다.
- 버튼을 클릭하면
prompt("Are you sure")가 실행되어 입력창이 있는 대화상자가 나타납니다. - 사용자가 '취소'를 누르면
null이 반환되어 "You pressed cancel"이라는 메시지가 표시됩니다. - 사용자가 텍스트를 입력하고 '확인'을 누르면 입력값과 함께 결과가 화면에 출력됩니다.
실행 결과
'CLICK HERE' 버튼을 클릭하고 프롬프트 입력창에 텍스트를 입력하는 모습입니다.
입력 후 확인(OK) 버튼을 클릭하면 아래와 같이 결과가 화면에 출력됩니다.
대화상자에서 OK 버튼을 클릭했을 때의 최종 결과입니다.
마무리
prompt() 메서드는 별도의 폼 요소 없이 즉석에서 사용자 입력을 받아야 할 때 손쉽게 사용할 수 있는 도구입니다. 다만 모달 대화상자 특성상 페이지 흐름이 일시적으로 차단되므로, 실제 서비스에서는 커스텀 모달이나 폼 UI를 활용하는 것이 더 나은 사용자 경험을 제공한다는 점도 함께 기억해 두세요.