[모던JS] 010. [기본] alert, prompt, confirm을 이용한 상호작용

원문

브라우저에서 사용자와 상호작용 할 수 있는 내장 함수가 있다.

단순히 확인 버튼만 누르는 alert와 입력까지 해야 하는 prompt, 입력은 필요 없고 확인 취소가 있는 confirm dialog가 있다.

alert 함수

alert 함수는 메시지를 띄워주고 사용자가 OK를 누를 때까지 확인창이 계속 떠있게 하는 기능이다.

alert("Hello");

누르게 되면 뜨는 확인창을 모달 창(modal window)라고 부른다.

모달의 의미는 해당 창과 페이지 밖의 웹 브라우저의 내용과는 상호작용이 불가능하다는 의미이다.

따라서 사용자가 OK를 눌러서 모달창을 빠져 나오지 않으면 웹 페이지를 조작할 수 없다.

prompt 함수

역시 모달창을 띄워주는 함수인데, alert처럼 OK만 누를 수 있는 것이 아니라 입력 필드(input field), 확인(OK), 취소(Cancel) 세 개가 있다.

인수(arguments)로는 두 개를 받는다.

용어 정리

용어	의미
매개 변수(parameter)	함수에서 인수를 받아들일 값
인수(arguments)	매개 변수에 전달해줄 값

function add(x, y) {
    return x + y;
} // x, y는 매개 변수

const result = add(3, 5);
console.log(result); // 8
// 3, 5는 인수

인수	의미
title	사용자에게 보여 줄 문자열
default	입력 필드의 초기값(선택)

만약 취소를 누르면 null이라는 메시지가 출력(반환)된다.

prompt 함수 기본형

result = prompt(title, [default]);

인수를 대괄호로 감싸는 것은 필수가 아닌 선택값이라는 의미이다.
함수를 사용 할 때 []안에 값을 넣으라는 의미도 아니고 [defualt]를 그대로 쓰라는 의미도 아니다. 저 두번째 매개변수는 넣어도 그만, 넣지 않아도 그만이라는 이야기이다.

result = prompt(title, 100);
result = prompt(title);
// 둘 다 정상 작동함

let age = prompt('나이를 입력해주세요.', 30)
alert(`당신의 나이는 ${age}살 입니다.`);

호환성 이슈
[default]를 비우게 되면 IE 사용자에게는 빈 입력창에 undefined라고 입력되어 있다. 따라서 깔끔하게 보이기 위해서는 기본값을 지정해주는 것이 좋고, 빈 칸으로 두고 싶다면 따옴표 두개만 넣어두면 된다.

let test = prompt("test", "");

컨펌 대화상자 (Confirm dialog)

prompt와 같이 확인, 취소 버튼이 있지만 prompt에 있는 입력버튼이 없다.

보통 질문을 작성한다. 확인을 누르면 true가 출력되고, 취소를 누르면 false가 출력된다.

컨펌 대화상자 기본형

result = confirm(question);
// question이라는 매개 변수는 질문 내용

정리

헷갈리는 내용이 있다.

prompt 함수와 confirm 함수를 alert처럼 단독으로 사용하지 않고 변수에 값을 할당하는 이유가 헷갈렸다.

confirm("당신이 주인입니까");

let isBoss = confirm("당신이 주인입니까");
alert(isBoss);

위 두 코드는 둘다 확인, 취소가 있는 모달창이 뜨는 것은 동일하나 실행해보면 위의 코드는 확인을 눌렀을 떄 true, 취소를 눌렀을 때 false가 반환되지 않는다. 그리고 아래 코드는 반환된다.

실행에 있어 큰 의미는 없어 보이나, prompt 함수는 사용자에게 직접 값을 입력받는 함수이고 confirm 함수는 true, false의 값을 받는 함수이다.

따라서 사용자에게 받은 이 값을 변수에 저장하기 위해 변수와 함께 사용한다.

즉 변수의 값으로 할당하지 않으면 확인, 취소 버튼을 누른 것 외에는 아무런 의미가 없는 코드이고, 값을 받았으니 변수에 저장한다는 개념에서 변수와 함께 사용하는 것이다.