웹 브라우저는 사용자와 상호작용이 가능한 기능들을 몇 가지 제공합니다. 오늘은 그중 대표적인 alert(), confrim(), prompt()를 알아보려고 합니다. 흔히 사용자에 알림을 표시할 때는 Modal을 사용합니다. alert(), confrim(), prompt()는 바로 그 Modal의 기본 개념을 가지고 있는 기능입니다. 이 3가지 기능은 쓰임새가 좋고 사용하기도 편리하니 한 번 알아두시면 좋습니다.
알림창을 띄우는 alert()
alert() 기능은 사용자에게 메시지를 전달할 수 있는 알림창을 띄웁니다. 다른 행동을 필요로 하지 않고 오로지 사용자에게 메시지를 전달하기 위한 알림 용도로 사용됩니다.
문법
window.alert([message]);매개변수
message(옵션)
: 알림창에 표시할 문자값이나 문자열로 변환해서 사용할 값을 전달합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert()</title>
</head>
<body>
<script>
alert("Hello world");
</script>
</body>
</html>
예, 아니오를 물어보는 confirm()
confirm() 기능은 메시지를 표시해 사용자에게 의사를 물어보며, 선택에 대한 결과로 "예", "아니오"를 가질 수 있습니다.
문법
result = window.confirm(message);매개변수
message(옵션)
: 알림창에 표시할 문자값이나 문자열로 변환해서 사용할 값을 전달합니다.
반환값
: 예(true) 또는 아니오(false) 중 사용자가 선택한 값입니다. 기본값은 아니오(false)이며, confirm() 창을 무시하면 아니오(false)를 반환합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt()</title>
</head>
<body>
<script>
const answer = prompt("글을 저장하시겠습니까?");
if (answer) {
// 글을 저장하는 작업 진행
alert("글을 저장하였습니다.");
}
</script>
</body>
</html>사용자에게 메시지를 입력받는 prompt()
prompt() 기능은 사용자에게 입력값을 전달받을 수 있는 메시지를 가지고 있는 대화창을 띄웁니다.
문법
result = window.prompt(message, default);매개변수
message(옵션)
: 알림창에 표시할 문자값이나 문자열로 변환해서 사용할 값을 전달합니다.
default(옵션)
: 값을 입력받을 수 있는 텍스트 공간에 기본으로 입력되어 있는 문자값을 설정합니다. Internet Explorer 7과 8에서는 값이 지정되지 않은 경우 "undefined"가 표시됩니다.
반환값
: 사용자가 입력한 값을 반환받습니다. 입력된 값이 없다면 "null"을 반환합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt()</title>
</head>
<body>
<script>
const message = prompt("오늘 하루는 어떠셨나요?");
alert(message);
</script>
</body>
</html>
정리하기
alert(), confirm(), prompt()는 사용자와 상호작용을 하기 위해 만들어진 기능입니다. alert()은 사용자에게 알림을 하기 위해서, confirm()은 사용자에게 "예, 아니오"라는 선택지를 주기 위해서, prompt()는 사용자에게 특수한 값을 받기 위해서 만들어졌습니다.
또한 alert(), confirm(), prompt()는 브라우저마다 보이는 형태가 다르며, 이 형태를 정의할 수 없다는 사실을 알아두시는 것이 좋습니다. 가끔 창의 형태를 바꿀 수 있다고 생각하시는 분들이 계시는데, 창의 모습은 브라우저가 관리하는 부분이기 때문에 개발자나 디자이너가 바꿀 수 있는 부분은 아닙니다.
참고로 오늘 이야기 주제로 다룬 alert(), confirm(), prompt()가 사용하기는 편하지만 코드를 작성해 동일한 기능을 만드는 것은 보기보다 어렵습니다. 예를 들어 비동기 상황에 생기는 예외 사항 처리라든지 아니면, 스크롤 문제라던지 말이죠.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 키보드 이벤트를 활용한 움직이는 이미지 만들기 (3) | 2021.05.24 |
|---|---|
| Javascript - 실무에서 활용하는 console.log() 사용 방법 (3) | 2021.05.20 |
| Javascript - 브라우저 창 혹은 탭 닫기 [window.close()] (4) | 2021.05.13 |
| Javascript - typeof 연산자 사용법을 알아보자 (6) | 2021.05.09 |
| Javascript - DocumentFragment를 사용해보자 [성능 최적화] (3) | 2021.05.08 |