브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능
1. alert
- 함수가 실행되면 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 떠있다.
alert('Hello')
모달 창(modal window) - 메시지가 있는 작은 창
모달이란 단어에 페이지의 나머지 부분과 상호 작용이 불가능 하다는 의미가 내포되어 있다.
- 사용자는 모달 창 바깥의 버튼을 누른다던가 하는 행동을 할 수 없다. 확인 버튼을 누르기 전까진
2. prompt
브라우저에서 제공하는 함수인 promp는 두 개의 인수를 받는다.
prompt(title, [default])
실행되면 텍스트 메시지와 입력 필드(input field),
확인 및 취소 버튼이 있는 모달 창을 띄워준다.
title
사용자에게 보여줄 문자열
default
입력 필드의 초기값(선택)
*인수를 감싸는 대괄호[...]의 의미
default를 감싸는 대괄호는 해당 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.
사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있다.
값을 입력하지 않는 경우 취소를 누르거나 Esc를 눌러 빠져나가면 된다.
prompt 함수는 사용자가 입력한 문자열을 반환한다
사용자가 입력을 취소한 경우 null이 반환된다.
let age = prompt('나이를 입력해주세요.', 0)
alert(`당신의 나이는 ${age}살 입니다.`) // 당신의 나이는 0살 입니다.
*익스플로러(Explorer)에서는 항상 기본값을 넣어준다.
프롬프트의 두 번째 매개변수는 선택사항이지만
이 매개변수가 없는 경우 IE는 'undefined'를 입력 필드에 명시한다.
IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면
아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장한다.
let test = prompt("Test", ''); // <-- IE 사용자를 위한 매개변수 처리
3. 컴펌 대화상자
confirm(question)
confirm 함수는 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 모달 창을 보여준다.
사용자가 확인을 누르면 true 그 외의 경우는 false를 반환한다.
let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력된다.
요약
- 브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공한다.
1. alert - 메시지를 보여준다.
2. prompt - 사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에 입력 필드를 함께 제공,
확인을 누르면 사용자가 입력한 문자열을 반환하고 취소나 Esc를 누르면 null을 반환한다.
3. confirm
- 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여진다.
사용자가 확인을 누르면 true, 아니면 false를 반환한다.
세 가지 함수들은 모두 모달 창을 띄워주는데,
모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다.
사용자가 창을 닫기 전까진 나머지 페이지와 상호작용이 불가능하다.
세 함수의 두 가지 제약사항
1. 모달 창의 위치는 브라우저가 결정, 대개 브라우저 중앙에 위치한다.
2. 모달 창의 모양은 브라우저마다 다르다. 개발자가 창의 모양을 수정할 수 없다.
이런 제약은 간결성을 위해 치러야 할 대가다.
창을 더 멋지게 꾸미고 복잡한 상호작용을 가능하게 하는 다른 방법도 있지만
부가 기능이 필요하지 않다면 기본 메서드 만으로 충분하다.
