[JS] 대화 상자

 

 

목차

1. alert
2. prompt
3. confirm

---

1. alert

 

• 이 함수가 실행되면 사용자가 '확인(OK)' 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있는다.
• 메시지가 있는 작은 창은 모달 창(modal window)라고 부른다.
• '모달'이란 다어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포

alert("Hello");

 

---

2. prompt

 

• 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다.

result = prompt(title, [default]);

title = 사용자에게 보여줄 문자열, default = 초깃값(선택값)

 

• 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창의 띄워준다.
• prompt 함수는 사용자가 입력 필드에 기재한 '문자열'을 반환.
• 사용자가 입력을 취소한 경우 null이 반환

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

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

 

※ 참고 - 인수를 감싸는 대괄호 [...]의 의미

• 이 매개변수가 필수가 아닌 선택 값이라는 것을 의미

 

---

3. confirm

 

result = confirm(question);

• confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줍니다.
• 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

---

단점

1. 스크립트 일시 정지
   • 창을 닫기 전에는 이후 동작에 영향을 받는다.
2. 스타일링이 불가능하다.