03. Javascript 기초 (대화상자)

JinNaBi·2021년 9월 8일

Javascript

목록 보기

3/14

1. alert (알려줌)

alert 함수가 실행이 되면 하단 그림과 같은 메세지를 띄우고 사용자가 확인 버튼을 누르기 전까지 계속 떠있게 된다.
사용자와 상호작용 한다기보다 일방적으로 알리는 용도로 사용.
ex)비밀번호가 틀렸습니다. 이름을 입력해주세요. 같은 형태로 자주 볼 수 있음.

2. prompt (입력 받음)

사용자에게 어떤 값을 입력 받을 때 사용됨.
하단코드를 돌리면 결과로 그림과 같은 입력받을 수 있는 박스를 띄울 수 있음.
입력창에서 그냥 취소를 누르면 null값이 들어감.

const name = prompt("이름을 입력하세요.");
alert("환영합니다," + name + "님");

해당 입력박스에 이름 등을 입력하면 출력이 이름이 입력되어 나옴.
``을 사용하여 같은 결과를 도출할 수 있음.

const name = prompt("이름을 입력하시오.");
alert(`안녕하세요,` ${name}님. 환영합니다.);

prompt는 디폴트 값도 받을 수 있음.

const name = prompt("예약일을 입력해주세요.", "2020-10-");
//prompt는 2개의 인수를 받을 수 있으며 함수를 실행하는 괄호 안에서 들어가는 값을 인수라고 함.
//지금 prompt는 예약일을 입력해주세요.라는 문자와, 예약일 2개의 인수를 받고 있음.
//첫번쨰 값은 메세지가 되고, 두번째 값은 입력받을 값이됨.
//이는 무언가를 안내하거나 힌트를 줄 때 유용하게 작용함.

3. confirm (확인 받음)

이름과 같이 무엇을 확인 받을 때 사용할 수 있음.

const isAdult = confirm("당신은 성인입니까?");

console.log(isAdult)

결과

alert은 확인버튼만 있지만 comfirm은 확인과 취소 버튼이 있음.
위 그림에서 확인을 누르면 true, 취소를 누르면 false값이 발생함.
ex)결제 하시겠습니까?, 정말 삭제 하시겠습니까?와 같은 사용자 액션을 한번 더 확인할 때 자주 사용 됨.

4. 정리

alert은 메세지를 보여주고 확인버튼을 눌러주면 닫힘.
prompt는 사용자에게 메세지를 보여주고 어떤 값을 입력할 수 있는 필드를 제공함. 취소를 누르면 null을 반환하고, 두번째 인수를 넣어주면 디폴트 값을 제공할 수 있음.
confirm은 사용자에게 확인을 받기 위한 용도로 사용됨. 확인 버튼은 ture를 취소 버튼은 false를 반환함.