본문 바로가기
Programming/JavaScript

alert, prompt, confirm으로 사용자의 행동에 반응하기 - [Javascript 입문 11]

by Muko 2020. 4. 26.

안녕하세요! Muko 입니다.

저번 포스팅 마무리에 이벤트 핸들링에 대해서 다룬다고 적었었는데, 잠시 쉬어가는 느낌으로 다른 내용으로 포스팅을 해보려고 합니다. 이번 시간에서 다루려고 하는 것은 '사용자의 행동에 반응하는 웹페이지'를 만드는 가장 기초인 alert, prompt, confirm에 대해서 이야기 하겠습니다.

포스팅 주제로 원래 다루고자 했던 이벤트 핸들링을 아주 직관적으로 해석하면 어떤 이벤트가 발생했을 때 어떻게 다룰지에 대한 내용이라고 볼 수 있습니다. 여기서 이벤트라는 것은 어떤 사건, 즉 사용자로부터 입력이나 어떤 반응이 들어왔다고 해석할 수 있습니다. 우리는 이 중에서 사용자가 브라우저를 통해서 접근했을 때 우리가 코드 상으로 반응할 수 있는 가장 간단한 방법을 소개하겠습니다.

1. alert

alert(message);

 

alert 창은 메세지를 보여주는 창입니다. 유저가 얼럿 창의 확인 버튼을 누를 때까지 메세지는 브라우저 상단에 계속 보여지고, 모든 스크립트의 실행이 멈춘 상태로 대기하게 됩니다.

alert("Hi, My name is Muko");

 

위와 같이 코드를 입력하면 Hi, My name is Muko 라고 출력되는 것을 확인할 수 있습니다. 이 때, 메세지가 있는 작은 창을 모달 창(modal window) 라고 합니다. 여기서 모달이란 단어가 사용된 이유는 모달이라는 단어가 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 들어가 있기 때문입니다. 따라서 모든 스크립트의 실행이 멈춘다는 이야기는 다르게 해석하면 확인 버튼을 누르기 전까지 사용자가 모달 창 바깥에 있는 버튼을 누르는 등의 행동을 할 수 없음을 의미합니다.



2. prompt

alert, prompt, confirm 모두 브라우저에서 제공하는 함수입니다. 여기서 prompt 함수는 두 개의 인자를 받습니다.

const result = prompt(title, [default]);

 

이 함수는 메세지와 입력 필드 (input field), 확인 및 취소 버튼이 있는 모달 창을 띄웁니다. 여기서 title은 모달 창에 사용자에게 출력하기 위한 문자열을, default는 입력 필드의 초깃값(선택사항, default)를 설정하는 인자입니다.

유저는 프롬프트 모달 창이 뜨게되면 대화상자의 입력 필드에 원하는 값을, 혹은 개발자가 의도하는 값을 입력하고 확인을 누를 수 있습니다. 값을 입력하기를 원하지 않으면 취소 버튼을 누르거나 Esc 로 모달 창을 벗어날 수 있습니다.

이렇게 입력한 값은 문자열로서 최종적으로 prompt가 반환되게 됩니다. 만약 사용자가 입력을 최종적으로 확인 버튼으로 확정 짓지 않고 취소한 경우에는 null이 반환됩니다.

const name = prompt('당신의 닉네임을 입력해주세요', 'Muko');

alert(`당신의 닉네임은 ${name} 입니다.`);

 

만약 크롬이 아니라 Internet Explorer(IE)를 사용하시는 분들이라면, 위에서 default는 선택사항이라는 부분을 무시하셔야 합니다. IE에서는 선택사항이 아니라 필수사항입니다.

const inputText = prompt('input text');
const inputText2 = prompt('input text2', '');


aksdir IE에서 두 번째 매개변수가 없는 경우에는 "undefined"를 입력 필드에 명시하기 때문입니다. 사용자가 어떤 브라우저를 사용하더라도 개발자가 의도한 결과물을 보여주기 위해서는 아래와 같이 두 번째 매개션수를 항상 전달하는 것을 추천합니다.

const inputText = prompt('Test', '');

 

3. confirm

const result = confirm(question);


`confirm` 함수는 인자로 문자열을 받습니다. 여기서 confirm 모달창은 `question`과 확인 및 취소 버튼이 있습니다. 사용자가 확인 버튼을 누르면 `ture`, 그 외의 경우에는 `false`를 반환합니다.

const didDelete = confirm('이미 삭제되었나요?');

alert( didDelete ); // 확인 버튼을 눌렀을 경우에 true

 


요약하자면, 브라우저는 사용자와 상호작용할 수 있는 세 개의 함수를 제공합니다. 단순히 메세지를 보여주는 모달 창을 띄우기 위한 alert는 단어 뜻 대로 알람이나 경고를 위한 기능이라고 보시면 됩니다. 두 번째로 설명드린 prompt는 사용자에게 텍스트를 입력할 수 있는 모달 창과, 메세지를 그 모달창에 띄을 수 있는 기능을 제공합니다. 또한 이 세 가지 함수는 사용자가 입력읋 할 때까지 창이 그대로 떠있기 때문에 스크립트 실행이 잠시 멈추는 특징을 가지고 있습니다. 즉, 사용자가 모달 창을 닫기 전까지 웹 페이지에서 다른 페이지와의 상호 작용이 불가능합니다.

다음 포스팅에서는 이벤트 핸들러에 대해서 진짜 알아보도록 하겠습니다!
오늘도 고생하셨습니다.

댓글2