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

사용자 인터페이스 기능인 alert, prompt, confirm

alert

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

alert("Hello");

메시지가 있는 작은 창은 모달 창(modal window)

사용자는 "확인 버튼을 누르기 전까지" 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다.

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

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

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

result = prompt(title, [default]);

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

사용자는 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있다.

값을 입력하길 원하지 않는 경우: 취소(Cancel) 버튼/ Esc 누르기.

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

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

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

Internet Explorer(IE): 두 번째 매개변수가 없는 경우 IE는 "undefined"를 입력 필드에 명시합니다.

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

let test = prompt("Test", '');

result = confirm(question);

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

<반환> 사용자가 확인 버튼을 누르면: true, 그 외: false

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

<복습 질문> prompt 함수가 실행되면 무엇이 나타나나요??