[JavaScript] The Modern JavaScript Tutorial - (2-6) Interaction: alert, prompt, confirm

alert

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

alert("Hello");

메시지가 있는 작은 창을 모달 창(modal window)이라고 부른다. 이 '모달'이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 있으며, 따라서 사용자는 확인 버튼을 누르기 전까지는 모달 창 밖에 있는 버튼을 누르는 등의 행동을 할 수 없다.

 

prompt

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

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

default - 입력 필드의 초기값(선택)

result = prompt(title, [default]);

인수를 감싸는 대괄호 [...]는 해당 매개변수가 필수가 아닌, 선택값이라는 것을 의미한다.

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

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

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

 

IE는 프롬프트의 두 번째 매개변수가 없는 경우, "undefined"를 입력 필드에 명시한다. 따라서 모든 사용자에게 깔끔한 프롬프트를 보여 주려면 두 번째 매개변수를 명시해 주도록 하자.

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

 

컨펌 대화상자

confirm 함수는 매개변수로 받은 question과 확인 & 취소 버튼이 있는 모달 창을 보여 준다. 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환한다.

let isBoss = confirm("당신이 주인인가요?");
alert(isBoss);      // 확인을 눌렀다면 true가 출력된다.

 

참고

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

또한, 두 가지 제약사항을 기억해야 한다.

1. 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치한다.
2. 모달 창의 모양은 브라우저마다 다르며, 개발자는 창의 모양을 수정할 수 없다.

 

과제

사용자로부터 이름을 입력받고, 해당 이름을 출력해 주는 페이지 만들기

let result = prompt('What\'s your name?', '');
alert(result);

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial