[Javascript] 알림창 종류 (alert, confirm, prompt)

 

Javascript에서 사용할 수 있는 메시지 박스 3종류

1. alert
2. confirm
3. prompt

 

1. alert

<input type="button" 
       onclick="handleOnClick()" 
       value="alert"/>

function handleOnClick()  {
  alert('Hello!!');
}

 

alert()은 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 창입니다.

 

 

2. confirm

<input type="button" 
       onclick="handleOnClick()" 
       value="confirm"/>
<div id='result' />

function handleOnClick()  {
  let like = confirm("좋아요 눌러주실거죠?");
  document.getElementById('result').innerText = like;
}

 

confirm()은 사용자에게 메세지를 보여주고, [확인/취소] 중 둘 중 하나를 선택하도록 합니다.

confirm()은 사용자가 [확인]을 선택하면 true를 리턴하고, [취소]를 선택하면 false를 리턴합니다.

 

 

3. prompt

<input type="button" 
       onclick="handleOnClick()" 
       value="prompt"/>
<div id='result' />

function handleOnClick()  {
  let greeting = prompt('인사하세요', '안녕하세요');
  document.getElementById('result').innerText = greeting;
}

 

prompt()는 사용자에게 무언가를 입력하라는 메시지를 전달하고, 입력을 받을 수 있습니다.

prompt() 함수에 전달되는 첫번째 파라미터는 사용자에게 보여줄 메시지이고,

두번째 파라미터는 사용자 입력 필드에 보여질 초기값입니다. 

(두번째 파라미터는 필수 입력값은 아닙니다.)

사용자가 prompt 창에 무언가를 입력하고 [확인] 버튼을 누르면,

prompt()는 사용자가 입력한 값을 리턴합니다.

만약 사용자가 [취소] 버튼을 클릭하면,

prompt()는 null을 리턴합니다.