JavaScript의 대화 상자
이번 포스팅은 JavaScript에서 제공하는 세 가지 대화 상자인 alert(), prompt(), confirm() 메서드 사용 방법을 설명합니다.
alert()
alert() 메서드는 웹 브라우저에서 경고 창을 사용자에게 표시하며, "확인" 버튼 또는 "ESC" 키를 누를 때까지 스크립트 실행이 일시 중지됩니다.
alert() 메서드는 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다.
// window 객체를 통해 호출하는 경우
window.alert('경고 창입니다.');
// 직접 호출하는 경우
alert('경고 창입니다.');
아래는 간단한 HTML 마크업 문서이며 "alert()" 버튼을 클릭하면 경고 창이 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>테스트</title>
<meta charset="UTF-8" />
</head>
<body>
<button id="alertBtn">alert()</button>
<script>
const alertBtn = document.getElementById("alertBtn");
alertBtn.addEventListener("click", function () {
alert("경고 창입니다.");
});
</script>
</body>
</html>
경고 창에 줄 바꿈을 표시하려면 개행 문자(\n)를 추가합니다.
alert("경고\n창\n입니다.");[실행 결과]
prompt()
prompt() 메서드는 사용자에게 입력을 요청하는 대화 상자를 표시하며, "확인" 또는 "취소" 버튼을 누를 때까지 스크립트 실행이 일시 중지됩니다.
prompt() 메서드도 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다.
// window 객체를 통해 호출하는 경우
const result1 = window.prompt('값을 입력하세요.', 'Hello');
// 직접 호출하는 경우
const result2 = prompt();prompt() 메서드는 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 대화 상자에 표시할 문자열이며 생략하면 아무것도 표시되지 않습니다. 두 번째 매개변수는 입력 필드에 설정하려는 기본 값입니다.
그리고 "확인" 버튼을 클릭하면 입력 필드에 입력한 값을 반환하며, "취소" 버튼을 클릭하면 null을 반환합니다.
아래는 간단한 HTML 마크업 문서이며 "prompt()" 버튼을 클릭하면 입력을 요청하는 대화 상자가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>테스트</title>
<meta charset="UTF-8" />
</head>
<body>
<button id="promptBtn">prompt()</button>
<script>
const promptBtn = document.getElementById("promptBtn");
promptBtn.addEventListener("click", function () {
const result = prompt("값을 입력하세요.", "hello");
console.log(result);
});
</script>
</body>
</html>[실행 결과]
["확인"을 클릭했을 경우]
["취소"를 클릭했을 경우]
confirm()
confirm() 메서드는 사용자에게 질문을 표시하는 대화 상자로 "확인" 또는 "취소" 버튼을 누를 때까지 스크립트 실행이 일시 중지됩니다.
confirm() 메서드도 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다.
const result = confirm('확인? 취소?');confirm() 메서드는 질문을 표시하는 매개변수를 가집니다. "확인" 버튼을 클릭하며 true를 반환하고 "취소" 버튼을 클릭하면 false를 반환합니다.
아래는 간단한 HTML 마크업 문서이며 "confirm()" 버튼을 클릭하면 질문을 표시하는 대화 상자가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>테스트</title>
<meta charset="UTF-8" />
</head>
<body>
<button id="confirmBtn">confirm()</button>
<script>
const confirmBtn = document.getElementById("confirmBtn");
confirmBtn.addEventListener("click", function () {
const result = confirm("확인? 취소?");
console.log(result);
});
</script>
</body>
</html>[실행 결과]
정리
- JavaScript는 세 가지 대화 상자인 alert(), prompt(), confirm() 메서드를 제공합니다.
- alert() 메서드는 경고창을 표시합니다.
- prompt() 메서드는 사용자가 텍스트를 입력할 수 있는 대화 상자를 표시합니다.
- confirm() 메서드는 질문과 "확인", "취소" 버튼으로 구성된 대화 상자를 표시합니다.
'JavaScript > Tip' 카테고리의 다른 글
| [JavaScript]현재 페이지 새로고침하는 방법 (0) | 2022.12.08 |
|---|---|
| [JavaScript]location 객체 사용 방법 (0) | 2022.12.07 |
| [JavaScript]Target과 CurrentTarget 차이점 (0) | 2022.11.08 |
| [JavaScript]div 태그에서 텍스트 입력하는 방법 (0) | 2022.11.08 |
| [JavaScript]콘솔 로그 스타일 적용하는 방법 (0) | 2022.10.13 |
댓글