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

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공한다. alert, prompt, confirm은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되고, 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다. 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치한다. 모달 창의 모양은 브라우저마다 다르고, 개발자는 창의 모양을 수정할 수 없다.

alert

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

1

alert("Hello");

prompt

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

1

result = prompt(title, [default]);

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

• title: 사용자에게 보여줄 문자열
• default: 입력 필드의 초깃값(선택값)

인수를 감싸는 대괄호 [...]의 의미: 이 매개변수는 필수가 아닌 선택값이다.

사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환한다.

1
2

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

Internet Explorer(IE)에서는 항상 ‘기본값’을 넣어야 한다

프롬프트 함수의 두 번째 매개변수는 선택사항이지만, 이 매개변수가 없는 경우 IE는 "undefined"를 입력 필드에 명시한다. IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장한다.

1
2

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

confirm

1

result = confirm(question);

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

1
2

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