자바스크립트에서 사용하는 시스템 대화상자 3가지 알아보기. alert(), confirm(), prompt()

Last Modified : 2018-07-04 / Created : 2017-03-27

3,308
View Count

주소 복사하기

브라우저에서 자바스크립트를 사용하여 출력 가능한 대화상자는 아래와 같이 세 가지가 있습니다.

i. alert()
ii. confirm()
iii. prompt()

# alert() 대화상자
가장 많이 사용되며 간단한 메시지 출력에 적합합니다. '확인' 버튼을 제공하고 클릭 이 외의 다른 기능은 없습니다.
일반적으로 대부분의 웹사이트에서는 아무런 UI가 없는 alert()보다는 심플한 UI를 가지는 모달 및 기타다이얼로그 형태 컴포넌트가 사용됩니다. 하지만 UI가 특별히 중요하지 않는 관리자 페이지, cms 그리고 디버깅에서 매우 많이 사용됩니다. alert()에 변수를 전달해 어떤 값인지 확인하는 용도로도 console.log()와 함께 자주 사용되죠.

var msg = "Hello, Webisfree!";

alert(msg);

# confirm() 대화상자
이 방식 역시 매우 자주 사용되는데 '확인'과 '취소' 버튼 두 가지가 제공됩니다. 이 버튼을 사용하여 방문자가 어떤 결과를 버튼을 눌렀느냐의 결과를 불리언으로 반환하여 줍니다. 아래의 경우에 자주 사용됩니다.

i. 파일 삭제 등을 재확인
ii. 입력한 내용이 동일한지 확인하는 용도

confirm()은 아래와 같이 사용됩니다.

var confirm = confirm('Yes or No?');

if (confirm) {
  alert('Yes!');
}
else {
  alert('No!');
}

확인과 취소에 따라 Yes 또는 No를 경고창으로 보여줍니다.

# prompt() 대화상자
다른 대화상자와 달리 버튼 이외에 간단한 입력값을 받는 것이 가장 큰 특징입니다. 간단한 메시지 입력을 전달 가능합니다.

var promptMsg = "닉네임을 입력하세요";

alert(promptMsg);

위와같이 간단하게 입력값을 받을 수 있죠.

아래의 글도 찾고 계시지 않나요?

쿼리스트링 파라미터를 배열로 전달하는 방법은 어떤게 있을까요?

[자바스크립트] resize 이벤트 연속해서 발생하지 않도록 하는 방법은?