JavaScript [alert, prompt, confirm]

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보도록 하겠습니다.

 

alert

alert 함수는 실행되면 사용자가 '확인'버튼을 누를 때까지 메세지를 보여주는 창이 계속 떠있게 됩니다.

 

 

prompt

브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받습니다.

result = prompt(title, [default]);

함수가 실행되면 텍스트 메시지와 입력 필드, 확인, 취소 버튼이 있는 창이 띄워집니다.

title: 사용자에게 보여줄 문자열

default: 입력 필드의 초깃값

사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다. 값을 입력하는 것을 원치 않는다며녀 esc, 취소 버튼을 눌러 빠져나올 수 있습니다.

prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. 사용자가 입력하지 않은 경우 null을 반환합니다.

예제

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`);

 

 

컨펌(confirm) 대화상자

문법

result = confirm(question);

confirm함수는 매개변수로 받은 question과 확인 및 취소 버튼이 있는 창을 보여줍니다.

사용자가 확인을 누르면 True를 그 외의 경우는 false를 반환합닌다.

사진의 오른쪽 콘솔창에 보이는 코드처럼 입력하였더니 이와 같이 창이 떠서 입력한 질문이 출력되는 것을 확인할 수 있다. 여기서 확인을 누르면 true가 뜨고 취소를 누르면 false가 뜬다.

 

 

 

* 요약 *

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다.

1. alert

alert는 메세지를 보여줍니다.

2. prompt

사용자에게 텍스트를 입력하라는 메세지를 띄우고 입력 필드도 함께 제공합니다. 입력 후 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고 취소, esc를 누르면 null을 반환합니다.

3. confirm

사용자가 확인 버튼을 누르면 true, 취소나 esc를 누르면 false를 반환합니다.

 

위 3개의 함수는 모두 창을 띄우는데 창이 띄어진 동안 스크립트의 실행이 일시 중단되며 창을 닫기 전가진 나머지 페이지와 상호작용이 불가능합니다.

또한 띄워지는 창의 위치와 모양은 수정할 수 없습니다.

 

 

실습

내 이름을 묻고 알게 된 이름을 출력하는 코드를 작성해보자

let name = prompt('What is your name?', 'my name is...');
alert(`My name is ${name}`);