[코어 자바스크립트] 2.6 alert, prompt, confirm을 이용한 상호작용
출처 : 모던 JavaScript 튜토리얼
1. alert
- alert가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있다.
alert("Hello");
- 메세지가 있는 작은 창을 모달 창(modal window)라 부른다. ‘모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 따라서 사용자는 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다.
2. prompt
- 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다. prompt 함수가 실행되면 텍스트 메세지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워준다.
- 사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있다. 값을 입력하길 원하지 않는 경우는 취소(Cancel) 버튼을 누르거나
Esc를 눌러 대화상자를 빠져나가면 된다. - prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환한다. 사용자가 입력을 취소한 경우에는 null을 반환한다.
- 사용자에게 깔끔한 프롬프트를 보여주려면 두 번째 매개변수를 전달해주는 것이 좋다.
result = prompt(title, [default]);
title: 사용자에게 보여줄 문자열default: 입력 필드의 초깃값(선택값)- 인수를 감싸는 대괄호
[...]는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다. - 실행 예
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.
3. 컨펌 대화상자
confirm함수는 매개변수로 받은question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다.- 사용자가 확인버튼을 누르면
true, 그 외의 경우는false를 반환한다.
result = confirm(question);
- 예
let isOwner = confirm("당신이 주인인가요?");
alert( isOwner ); // 확인 버튼을 눌렀다면 true가 출력된다.
4. 요약
alert: 메세지를 보여준다.prompt: 사용자에게 텍스트를 입력하라는 메세지를 띄워줌과 동시에, 입력 필드를 함께 제공한다. 확인을 누르면prompt함수는 사용자가 입력한 문자열을 반환하고, 취소 또는Esc를 누르면null을 반환한다.confirm: 사용자가 확인 또는 취소 버튼을 누를 때까지 메세지가 창에 메세지가 창에 보여진다. 사용자가 확인 버튼을 누르면true를, 취소 버튼이나Esc를 누르면false를 반환한다.- 위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.
- 세 함수엔 두 가지 제약사항이 있다.
- 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
- 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.
5. 과제
간단한 페이지 만들기
- 사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보세요.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<script>
let name = prompt('이름이 무엇입니까?', '');
alert(`당신의 이름은 ${name} 입니다.`);
</script>
</body>
</html>