Javascript 기초 (6) alert, prompt, confirm

🔥오늘의 목표🔥

브라우저에서 사용되는 아주 간단한 사용자 인터페이스 기능인 alert, prompt, confirm에 대해서 알아보자.
사실 앞에서도 alert를 다루긴 했는데 모른채로 다뤘긴했다.ㅎ

➕ 모달창

사용자는 확인 버튼을 누르기 전까지는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다.
모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.

📖 alet함수

메시지를 보여주는 모달 창을 띄워주는 함수이다.

alert("Hello");

📖 prompt

프롬포트 대화상자를 이용해서 사용자의 입력값을 문자열로 반환하는 함수이다.
함수가 실행되면 텍스트메시지와 입력필드, 확인버튼과 취소버튼이 있는 모달창을 띄워준다.

prompt(title, [default]);

title

• 사용자에게 보여줄 문자열

default

• 입력필드의 초기값 (선택값)
  IE에서는 초기값이 없을 경우에 undefined를 입력필드에 명시라므로 기본값이라도 넣어야한다.
  let test = prompt("Test", '');

반환값

• 확인을 누르면 사용자가 입력한 문자열을 반환하고 취소를 누르는 경우에는 Null을 반환한다.

✍️ 예시코드

let age = let age = prompt('나이를 입력해주세요.', '');

👉 실행화면

📖 confirm

모달창을 이용해서 사용자의 선택값을 boolean형으로 반환하는 함수이다.
함수가 실행되면 텍스트와 확인버튼, 취소버튼이 있는 모달창을 뛰운다.

confirm(question);

question

• 사용자에게 보여줌

반환값

• 확인버튼을 누르면 true, 그 외의 경우는 false를 반환한다.

✍️ 예제코드

  let userName = prompt("사용자의 이름을 입력하세요.","");
  alert("사용자 이름 : "+userName);

👉 실행화면

😊오늘의 느낀 점😊

간단한 함수 세가지를 배워봤다.