[자바스크립트]alert, prompt, confirm

 

alert, prompt, confirm

• 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능을 알아보자

 

 

alert

• 메시지가 있는 작은 창은 모달 창(modal window)이다.
• '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다.

 

 

prompt

result = prompt(title, [default]);

• 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다.
• 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워준다.
• title : 사용자에게 보여줄 문자열
• default : 입력 필드의 초깃값(선택 값)
• 인수를 감싸는 대괄호([])는 이 매개변수는 필수가 아닌 선택 값이라는 것을 의미한다.
• 사용자가 입력한 값을 문자열로 반환
• 입력을 취소하면 null이 반환된다.

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

 

 

confirm

result = confirm(question);

• confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다.
• 확인을 누르면 true 반환
• 취소를 누르면 false 반환

 

 

정리

• 위 3개 함수는 모달 창이 떠 있는 동안 스크립트의 실행이 일시 중단된다.
• 사용자가 창을 닫기 전 까진 나머지 페이지와 상호 작용이 불가능하다.
• 모달 창의 위치는 브라우저가 결정, 개발자는 창의 모양을 수정할 수 없다.

 

📌 참고

• 모던 JavaScript 튜토리얼