모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
2.6. alert, prompt, confirm을 이용한 상호작용
alert
사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 떠있게 된다.
모달창(modal window): 메시지가 있는 작은 창으로, modal이라는 단어에는 페이지 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다. 확인 버튼을 누르기 전까지는 모달 창 바깥의 행동을 할 수 없다.
prompt
1
result = prompt(title, [default]);
title: 사용자에게 보여줄 문자열default: 입력 필드의 초기값(선택값)IE는 default 매개변수가 없을 때 입력 필드에
"undefined"를 명시한다. 따라서 모든 사용자에게 깔끔한 프롬프트를 보여주려면 두 번째 매개변수가 필요없다 하더라도''로 전달해주어야 한다.대괄호는 선택값을 의미한다.
확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 혹은 Esc를 누르면 null을 반환한다.
confirm
1
result = confirm(question);
매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다. 사용자가 확인버튼을 누르면 true, 그 외의 경우에는 false를 반환한다.
1
2
let isBoss = confirm("당신이 주인인가요?");
alert(isBoss); // 확인이라면 true, 그 외라면 false
세 함수 모두 모달창을 띄운다. 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호작용이 불가능하다. 모달창의 위치는 브라우저가 결정하는데, 대개 브라우저의 중앙에 위치한다. 모달창의 모양은 브라우저마다 다르다. 개발자는 창의 모양을 수정할 수 없다.
과제
간단한 페이지 만들기
1
2
let name = prompt("이름을 입력해 주세요.", "");
alert(name);