Javascript에서 사용자에게 메시지를 보여주는 알림창의 종류에는 alert, confirm, prompt가 있습니다.

각각 어떤 용도로 사용되는지 예제와 함께 알아보겠습니다.

1. alert

alert은 사용자에게 메시지를 보여주는데 사용되며, 확인 버튼을 누르면 메시지가 사라집니다.

HTML

<button id="myButton">Alert</button>

Javascript

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  alert("알림 메시지입니다.");
});

2. confirm

confirm은 사용자에게 메시지를 보여주고, 확인/취소 중에 하나를 누르도록 하고 결과를 받습니다. 확인을 누르면 true가 리턴되며, 취소를 누르면 false가 리턴됩니다.

HTML

버튼을 누르면 confirm 메시지를 보여주고, 결과를 div에 보여줍니다.

<button id="myButton">Confirm</button>
<div id='res' />

Javascript

버튼에 리스너를 추가하여 클릭 시 함수가 실행됩니다.

  • confirm(message)는 confirm 메시지를 띄우고, 결과를 리턴 받음
  • 결과에 따라서 div에 text로 결과를 보여줌
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  const result = confirm("계속하시겠습니까?");
  let res = document.getElementById('res');
  if (result) {
    res.innerText = '계속';
  } else {
    res.innerText = '중단';
  }
});

3. prompt

confirm은 사용자에게 메시지를 보여주고, 사용자가 입력한 값을 받을 수 있습니다.

HTML

버튼을 누르면 prompt 메시지를 보여주고, 사용자가 입력한 결과를 div에 보여줍니다.

<button id="myButton">Prompt</button>
<div id='res' />

Javascript

아래와 같이 prompt 메시지를 띄울 수 있습니다.

  • prompt("이름을 입력하세요:", "기본값") 처럼, 첫번째 인자에 메시지를, 두번째 인자에 기본 값을 입력
  • prompt(msg) 처럼 두번째 인자를 입력하지 않으면, 기본 값이 입력되지 않음
  • 사용자가 데이터 입력 후 OK를 누르면 입력된 값이 리턴되며, Cancel을 누르면 null이 리턴
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  let res = document.getElementById('res');
  const inputValue = prompt("이름을 입력하세요:", "기본값");
  if (inputValue !== null) {
    res.innerText = inputValue;
  } else {
    res.innerText = '취소';
  }
});