자바스크립트 메시지 박스: alert, confirm, prompt 사용법 및 예제
프로그램을 개발하다 보면 사용자에게 적절한 메시지를 표시해야 할 때가 많이 있습니다. 자바스크립트에서는 메시지를 표시할 때 세 가지 내장 함수를 제공하고 있습니다. 그럼 자바스크립트에서 제공하는 세 가지 메시지 함수인 alert(), confirm(), prompt()에 대해서 알아보겠습니다.
alert(), confirm(), prompt() 함수들은 모두 브라우저에서 제공하는 기본 대화상자입니다. 기본 대화상자를 사용하면 간단하게 사용자와 상호작용할 수 있습니다. 하지만 이러한 기본 대화상자의 디자인은 브라우저마다 다를 수 있고 디자인을 변경할 수 없습니다.
1. alert 함수
alert 함수는 메시지를 표시하는 가장 간단한 방법입니다. 사용자에게 알림을 주는 용도로 사용합니다.
1. 사용법
alert(message);
2. 사용 예제
<script>
// 1. alert함수
alert("BlueShare 블로그 입니다.");
</script>
3. 결과 화면
▼ OK 버튼을 클릭하면 메시지가 사라집니다.

2. confirm 함수
confirm 함수는 사용자에게 질문을 포함한 확인 대화상자를 표시합니다. 사용자는 “확인” 또는 “취소” 버튼을 클릭할 수 있습니다.
1. 사용법
confirm(message);
☞ “message”는 표시할 문자열입니다. 사용자가 “확인” 버튼을 클릭하면 true를 “취소” 버튼을 클릭하면 false를 반환합니다.
2. 사용 예제
<script>
let message = "선택한 건을 정말 삭제하시겠습니까?"
if (confirm(message)) {
// true인 경우인 경우 작업 수행
document.write("정상적으로 삭제했습니다.");
} else {
// false인 경우인 경우 작업 수행
document.write("삭제를 취소했습니다.");
}
</script>
3. 결과 화면

3. prompt 함수
prompt 함수는 사용자로부터 값을 입력받는 대화상자를 표시합니다. 사용자는 “확인” 또는 “취소” 버튼을 클릭할 수 있습니다.
1. 사용법
prompt(message, default);
☞ 첫 번째 매개변수는 표시할 메시지이고 두 번째 매개변수는 표시될 기본값입니다. 두 번째 매개변수는 생략할 수 있으며 생략하면 기본값으로 빈 문자열이 사용됩니다. 사용자가 “확인” 버튼을 클릭하면 입력한 값을 반환하고 “취소” 버튼을 클릭하면 null을 반환합니다.
2. 사용 예제
<script>
let name = prompt("당신의 이름을 입력하세요.", "영어로 입력하세요.");
if (name) {
document.write("안녕하세요! " + name + "님!");
} else {
document.write("이름을 입력하지 않으셨습니다.");
}
</script>
3. 결과 화면

자바스크립트 기초 이전 게시물
- 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
- 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
- 자바스크립트 자료형 종류 및 사용 예시
- 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
- 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
- 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
- 자바스크립트 반복문: for, while, do-while등 사용법과 예제
- 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
- 자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제
- 자바스크립트 URI 인코딩 처리: encodeURI(), encodeURIComponent() 함수
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!