모던 자바스크립트 튜토리얼
ko.javascript.info
브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert
, prompt
, confirm
에 대해 알아보자.
alert
함수가 실행되면 확인(OK)
버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.
alert("Hello");
메시지가 있는 작은 창은 모달 창(modal window)이라고 부른다.
모달
이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다.
따라서 사용자는 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 상호작용을 할 수 없다.
브라우저에서 제공하는 prompt
함수는 두개의 인수를 받는다.
result = prompt(title, [default]);
함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cacel) 버튼이 있는 모달 창을 띄워준다.
title
사용자에게 보여줄 문자열
default
입력 필드의 초깃값(선택값)
✔ 인수를 감싸는 대괄호
[...]
의 의미
default
를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.
사용자는 prompt
대화 상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있다.
값을 입력하길 원하지 않는 경우는 취소버튼을 누르거나 ESC
를 눌러 대화상자를 빠져나가면 된다.
prompt
함수는 사용자가 입력 필드에 기재한 문자열을 반환 한다.
사용자가 입력을 취소한 경우는 null
이 반환 된다.
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); //당신의 나이는 100살입니다.
❗ Internet Explorer(IE)에서는 항상 '기본값'을 넣어주자.
프롬프트 함수의 두 번째 매개변수는 선택사항이지만, 이 매개변수가 없는 경우 IE는
"undefined"
를 입력 필드에 명시한다.IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장한다.
let test = prompt("test", '');
result = confirm(question);
confirm
함수는 매개변수로 받은 question(질문)
과 확인 및 취소 버튼이 있는 모달 창을 보여준다.
사용자가 확인 버튼을 누르면 true
, 그 외에는 fasle
를 반환한다.
let isBoss = confirm("당신이 주인인가요?");
alert(isBoss); // 확인 버튼을 눌렀다면 true가 출력
브라우저는 사용자와 상호 작용 할 수 있는 세 가지 함수를 제공한다.
alert
메시지를 보여준다.
prompt
사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공한다.
확인을 누르면 prompt
함수는 사용자가 입력한 문자열을 반환하고 취소 또는 ESC
를 누르면
null
을 반환한다.
confirm
사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여진다..
사용자가 확인 버튼을 누르면 true
를, 취소 버튼이나 ESC
를 누르면 false
를 반환한다.
위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되며,
사용자가 창을 닫기 전까진 나머지 페이지와 상호작용이 불가능하다.
세가지 함수에는 두가지 제약사항이 있다.
중요도 : 4
사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어보세요.
해답
JavaScript
let name = prompt("당신의 이름은?", ""); alert(name);
HTML
<!Doctype> <html> <body> <script> 'use strict` let name = prompt("당신의 이름은?", ""); alert(name); </script> </body> </html>