[javascript] 자바스크립트 팝업 사용 방법 (alert, confirm, prompt)

참고: https://www.w3schools.com/js/js_popup.asp

javascript에서는 alert, confirm, prompt 이렇게 세 종류의 팝업 박스를 제공합니다.

1. Alert Box

alert 박스는 사용자에게 정보를 전달하기 위해 자주 사용됩니다. alert 박스가 뜨면 사용자는 ok를 눌러야만 합니다.

문법:

window.alert("sometext");

window.alert() 메소드는 window 프리픽스 없이 사용할 수 있습니다.

alert("I am an alert box!");

팝업 박스 안에서 개행을 하려면 \n을 사용하면 됩니다.

alert("Hello\nHow are you?");

2. Confirm Box

confirm 박스는 사용자의 활동을 재확인 하거나 어떤 사항을 받아들여야 할 때 사용합니다. confirm 박스가 뜨면 사용자는 ok나 cancel 둘 중 하나를 선택할 수 있습니다. 만일 사용자가 ok를 누르면 true를 리턴하고 cancel을 눌렀다면 false를 리턴합니다.

문법:

window.confirm("sometext");

window.confirm() 메소드 역시 alert() 메소드와 마찬가지로 window를 생략하고 사용할 수 있습니다.

if (confirm("Press a button!")) {
  txt = "You pressed OK!";
} else {
  txt = "You pressed Cancel!";
}

3. Prompt Box

prompt 박스는 사용자가 페이지에 들어가기 전 뭔가를 입력받아야 할 때 사용합니다. prompt 박스가 뜨면 input 값을 입력하고 ok나 cancel을 클릭하여 다음으로 진행할 수 있습니다. 여기서 ok를 누르면 input 값을 리턴하고 cancel을 누르면 null을 리턴합니다.

문법:

window.prompt("sometext", "defaultText");

window.prompt() 메소드 역시 window를 생략하고 사용할 수 있습니다.

const person = prompt("Please enter your name", "Harry Potter");
const text;

if (person == null || person == "") {
  text = "User cancelled the prompt.";
} else {
  text = "Hello " + person + "! How are you today?";
}