모던 JavaScript 튜토리얼 - alert, prompt, confirm을 이용한 상호작용

crewd·2021년 1월 5일
0
post-thumbnail

모던 자바스크립트 튜토리얼

ko.javascript.info

alert, prompt, confirm을 이용한 상호작용

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보자.

alert

alert 함수가 실행되면 확인(OK) 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.

alert("Hello");

메시지가 있는 작은 창은 모달 창(modal window)이라고 부른다.
모달이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다.
따라서 사용자는 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 상호작용을 할 수 없다.

prompt

브라우저에서 제공하는 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를 반환한다.

위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되며,
사용자가 창을 닫기 전까진 나머지 페이지와 상호작용이 불가능하다.

세가지 함수에는 두가지 제약사항이 있다.

  1. 모달창의 위치는 브라우저가 결정하는데, 대개 브라우저는 중앙에 위치한다.
  2. 모달 창의 모양은 브라우저마다 다르며, 개발자는 창의 모양을 수정할 수 없다.

과제


간단한 페이지 만들기

중요도 : 4

사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어보세요.

해답

JavaScript

let name = prompt("당신의 이름은?", "");

alert(name);

HTML

<!Doctype>
<html>
<body>
  <script>
    'use strict`

    let name = prompt("당신의 이름은?", "");
    alert(name);
  </script>
</body>
</html>
profile
공부

0개의 댓글