본문 바로가기

Study/JavaScript

[JS]자바스크립트 기초 | alert, prompt, confirm

728x90
  1. alert

알려주는 역할

메세지를 띄우며, 확인을 누르기 전까지 닫히지 않는다.

사용자와 상호작용을 하기보단 일방적으로 알려주는 용도로 사용한다.

alert(); 
  1. prompt

입력 받는 역할

사용자에게 메세지를 보여주고, 입력 받을 수 있는 값을 제공한다.

const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님");

const name = prompt("이름을 입력하세요.");
alert(`환영합니다, ${name}님. 환영합니다.`);

위의 코드와 같이 사용하면 이름을 입력하는 창이 먼저 뜨며, 이름을 입력하면 alert창이 뜬다.

백틱으로 해도 동일하게 작용하는 것을 확인할 수 있다.

prompt창을 취소하면, null값을 받는다.

const name = prompt("예약일을 입력해주세요.", "2020-10-");

또한, 위의 코드와 같이 prompt는 default값을 입력할 수 있다.

prompt는 두개의 인수를 가지고 있는데 첫번째 값은 질문하는 값이며,

두번째 값은 입력 받을 default값이며 default값이 미리 들어가 있으면 안내를 하거나 힌트를 줄 때 유용하다.

  1. confirm

확인 받는 역할

const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult);

// 결제 하시겠습니까?
// 정말 삭제하시겠습니까?

alert과 다른 점은 취소버튼과 확인버튼이 함께 있다.

확인을 눌렀을 때에는 "true", 취소를 누르면 "false" 가 뜬다.

사용자의 액션을 확인 할 때 자주 사용된다.

기본적으로 제공되는 간단하지만 단점도 있다.

  1. 스크립트 일시정지 (창을 닫기 전까지 제한적)
  2. 스타일링이 불가능하다. (위치와 스타일을 지정할 수 없다.)