3.대화상자(alert,prompt,confirm)

오늘은 대화상자의 역할을 하는 alert, prompt, confirm에 대해 알아보도록 하자.
우선 간단하게 각 기능을 이해해보자.

✔️ alert

alert는 저번 시간에 배웠었지만 대화상자의 기능을 하기에 다시 짚고 넘어가려한다!

alert는 함수가 실행되면 메세지창을 띄우고 사용자가 확인버튼을 누르기 전까지는 계속 떠있게 된다!

사용자와 상호작용을 하기보다는 일방적으로 알리는 용도이다.
ex) 1.비밀번호가 틀렸습니다. 2.이름은 필수값 입니다.

✔️ prompt

prompt: 사용자에게 어떤 값을 입력받을 때 사용한다.

⌨︎ 입력

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

💻 실행결과

prompt를 이용하여 이렇게 입력받을 수 있는 박스를 띄웠다.

여기서 이름을 입력하고 확인을 하면

다음과 같이 alert알림창이 뜬다!

name에 방금 입력했던 이름이 들어가게 된다!

🔖 주석

주석: 슬러시 두개 //

주석 뒷 부분은 코드를 실행할 때 무시되고, 개발할 때 참고할 점이나 기억해야할 내용이 있을때 유용하게 사용된다!

⌨︎ 입력

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

📌 이번에는 ``(백틱)으로 작성해보자

⌨︎ 입력

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

💻 실행결과

``(백틱)으로 작성하여도 다음과 같이 똑같이 실행되는 것을 알 수 있다!

📌 만약 확인 버튼이 아니라 취소 버튼을 누르면 어떻게 될까?

⌨︎ 입력

const name = prompt("이름을 입력하세요.");
console.log(name)

💻 실행결과

null

null값이 들어가는 것을 알 수 있다! (null은 아무내용도 없다는 뜻)

📌 prompt는 default 값도 입력할 수 있다.

⌨︎ 입력

const name = prompt("예약일을 입력해주세요.", "2020-10-");

prompt는 이렇게 두개의 인수를 받을 수 있다.

함수를 실행하는 괄호 안에서 들어가는 값들을 인수라고 한다.

지금 prompt는 두개의 인수를 받고 있다.
첫번째 값은 메세지가 되고, 두번째 값은 입력받을 defalt값이 된다.
defalt 값이 미리 들어있으면 뭔가를 안내하거나 힌트를 줄 때 유용할 것이다.

💻 실행결과

✔️ confirm

confirm: 뭔가를 확인받을 때 사용할 수 있다.
⌨︎ 입력

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

console.log(isAdult)

💻 실행결과

이렇게 confirm을 통해 실행할 수 있다.

alert과 다른점:
alert은 확인 버튼만 있는 반면 confirm은 확인과 취소가 버튼이 함께 있다.

(변수를 확인해 보면)확인을 눌렀을때 true가 뜨고
취소를 눌렀을 때 false가 뜬다.

이 결과값을 활용해서 이후 작업을 진행할 수 있다.

ex) 결제 하시겠습니까? 정말 삭제 하시겠습니까?
와 같이 사용자의 액션을 한번 더 확인해줄 때 자주 사용된다!

⭐ 정리

alert:메세지를 보여줌. 확인 버튼을 누르면 닫힘.

prompt: 사용자에게 메세지를 보여주고, 어떤 값을 입력받을수있는 filed를 제공함.
취소를 누르면 null을 반환함.
2번째 인수를 넣어주면 default 값을 제공해줄 수 있다.

confirm:사용자에게 확인을 받기위한 용도로 사용된다.
확인버튼은 true, 취소버튼은 false를 반환한다.

😈 단점

1. 스크립트 일시정지: 창이 떠있는 동안 스크립트가 일시정지됨. 창을 닫기 전에는
이후 동작에 제한을 받음.
만약 유투브에서 알림버튼을 눌렀을때 텍스트로 알려주는 것이 아니라 alert창으로 알려주게 된다면 누를 때마다 일일히 확인버튼을 눌러 꺼주어야한다.

2. 스타일링이 불가능하다:
   위치,모양을 정할 수 없다. 브라우저마다 모양도 조금씩 다르다.

그래서 html이나 css를 이용하여 만드는 모듈창들도 굉장히 많이 사용되고 있다.

하지만 이런 단점을 생각하더라도 기본 메소드는 빠르고,
간단하게 적용가능한 장점 때문에 굉장히 많이 사용한다.