2.6 상호작용 : alert, prompt, confirm

alert

메시지가 있는 작은 창을 modal window라고 부른다. "modal"이란 단어는 방문자가 "OK"를 누를때까지 나머지 페이지와 인터렉션을 할 수 없고, 버튼을 못 누르는 등의 의미를 말한다.

alert("Hello");

 

prompt

prompt 함수는 두 개의 인수를 받는다.

result = prompt(title, [default]);

텍스트 메세지와 입력할 수 있는 input 필드 그리고 OK/Cancel버튼이 modal 창에 보여진다.

title

방문자가 보는 텍스트이다.

default

두번째 파라미터로 옵션사항이고 input 필드의 초기 값을 나타낸다.

위에서 예시의 []대괄호(square brackets)는 필수 값이 아님을 나타낸다.(denote)

 

사용자는 prompt 인풋에 타이핑을 하고 OK키를 누를 수 있다. 그러면 우리는 그 텍스트를 결과로 얻게된다. 또는 Cancel버튼을 누르거나 Esc키를 눌러서 취소할 수 있다. 이 경우 결과는 null로 되어진다. 

prompt는 사용자가 입력한 텍스트를 리턴하고 취소한 경우 null을 리턴한다.

 

예시 : 

let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!

두번째 인자값은 필수 값이 아니지만, IE 에서 셋팅하지 않으면 IE는 "undefined"로 셋팅하게 된다.

그래서 IE에서 보기 좋게 prompt를 만드려면 아래 예시와 같이 두번째 인자를 넣는 걸 추천한다.

let test = prompt("Test", ''); // <-- for IE

confirm

confirm 함수는 OK와 Cancel 두 버튼과 질문을 modal창에 보여준다. OK를 클릭하면 결과는 true 로 아니면 false를 리턴한다.

let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true if OK is pressed

 

위의 세 메소드들은 스크립트의 실행을 멈추게 하고 창이 닫혀질 때까지는 나머지 페이지들과 상호작용를 못하게 된다.

1. modal 창의 위치는 브라우저에 따라 다른데 대개 중앙에 위치한다.
2. modal창의 모양도 브라우저에 따라 다르고 수정이 불가능하다.

simplicity를 위한 것이다. 사용자와 더 풍부한 상호작용과 더 좋은 창을 보여줄 방법은 있으나 만약 부수적인 기능이 그렇게 중요하지 않다면 이 메소드들로 충분히 괜찮다.

 

참고자료 : alert, prompt, confirm을 이용한 상호작용