[JavaScript] alert, prompt, confirm을 이용한 상호작용

parkheeddong·2023년 4월 30일

JavaScript

목록 보기
20/26
post-thumbnail

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보자!

✅ alert 메시지 보여주기

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

alert("Hello");

메시지가 있는 작은 창은 모달 창(modal window) 이라고 부른다.

✅ prompt 텍스트를 입력받기

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

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

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

✔ prompt 함수
result = prompt(title, [default]);

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

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

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

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

✅ confirm 확인 또는 취소 버튼

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

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

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

-> 위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다!

0개의 댓글