alert, prompt, confirm을 이용한 상호작용

alert

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

alert("Hello");

메시지가 있는 작은 창은 모달 창(modal window) 이라고 부릅니다. '모달'이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있습니다. 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없습니다. 확인 버튼을 누르기 전까지 말이죠.

 

prompt

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

result = prompt(title, [default]);

함수가 실행되면 텍스트 메세지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워줍니다.

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

default : 입력 필드의 초깃값(선택값)

 

* 인수를 감싸는 대괄호 [. . .]의 의미

default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.

 

사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다. 값을 입력하길 원하지 않는 경우는 취소(Cancel) 버튼을 누르거나 Esc를 눌러 대화상자를 빠져나가면 됩니다.

 

prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. 사용자가 입력을 취소한 경우는 null이 반환됩니다.

 

예시:

let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

* 프롬프트 함수의 두 번째 매개변수는 선택사항이지만, 이 매개변수가 없는 경우 IE는 "undefined"를 입력 필드에 명시합니다.

IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 두 번째 매개변수를 항상 전달해 줄 것을 권장합니다.

let test = prompt("Test", ''); // IE 사용자를 위한 매개변수 처리

 

컨펌 대화상자

문법:

result = confirm(question);

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

사용자가 확인버튼을 누르면 true, 그 외의 경우는 false를 반환합니다.

예시:

let isBoss = confirm("당신이 주인인가요?");
alert(isBoss); // 확인 버튼을 누르면 true, 취소를 누르면 false 출력

 

이 세가지의 함수는 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단됩니다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능합니다.

 

지금까지 살펴본 세 함수엔 두 가지 제약사항이 있습니다.

1. 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.

2. 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.

 

출처: https://ko.javascript.info/alert-prompt-confirm