alert

• alert가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있는다.
• 메시지가 있는 작은 창은 모달 창(modal window) 이라고 부른다.
  • '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포
    • 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동 불가(확인 버튼을 누르기 전까지)

prompt

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

result = prompt(title, [default]);

• 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워줌
• 인수
  • title > 필수값
    • 사용자에게 보여줄 문자열
  • default > 필수값 x
    • 입력 필드의 초깃값(선택값)
• 사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있음
• 값을 입력하길 원하지 않는 경우는 취소(Cancel) 버튼을 누르거나 Esc를 눌러 대화상자를 빠져나가면 됨
• prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환함. 사용자가 입력을 취소한 경우는 null이 반환됩니다.

confirm

result = confirm(question);

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

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

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

요약

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공

• alert
  • 메시지를 보여줌
• prompt
  • 사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공
  • 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환
• confirm
  • 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여짐
  • 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환

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

지금까지 살펴본 세 함수엔 두 가지 제약사항이 존재

• 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치
• 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 불가

느낀점

• 참고한 블로그를 통해 자주 사용했던 alert와 prompt 창의 차이를 좀 더 쉽게 이해할 수 있었던 것 같다. 또, confirm 창은 잘 안사용했는데, 이번 기회를 통해서 알 수 있게 되어서 유익한 시간을 보낸 것 같다.

참고

https://ko.javascript.info/alert-prompt-confirm