JS : 대화상자를 나타내는 메서드 : alert, prompt, confirm

JS : 대화상자를 나타내는 메서드 : alert, prompt, confirm 

---

 

alert() : 경고 대화 상자를 띄우는 메서드

alert("Hello World!");

window.alert("Hello World!");
alert("Hello World!");

• alert()을 사용하면 알림 창을 띄우며, 사용자가 확인 버튼을 누를 때까지 계속 창이 띄어져 있다.
• 상호작용을 한다기보다는 일방적인 안내 창이다.
• ex ;) 비밀번호가 틀렸습니다. , 이름을 입력해주세요. 등

 

참고사항

• alert()은 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메시지를 전달할 때 쓰이며 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없다. 그러므로 alert()을 남용하면 안 된다.

 

---

prompt : 텍스트를 입력할 수 있는 대화 상자를 띄우는 메서드

prompt();

window.prompt();
prompt();

• 사용자에게 어떠한 값을 입력받을 때 사용한다.
• 입력창에 정보를 입력하면 입력한 정보와 합쳐져서 보인다. ( 예제 1-1번 참고 )
• 백틱(``)을 이용해도 작성할 수 있다. ( 예제 1-2번 참고 )
• 입력값을 넣지 않고 취소할 경우 null(값없음)을 반환한다. ( 예제 2번 참고 )
• default(기본값) 값을 입력할 수 있다. ( 예제 3번 참고 )
• prompt()는 두 개의 인수를 받을 수 있다. ( 함수를 실행하는 괄호 안에서 들어가는 값을 인수라고 한다. 예제 3번 참고 )
  • 첫 번째 인수는 메시지
  • 두 번째 인수는 default(기본값) 값
• 사용자는 대화 상자가 닫힐 때까지 나머지 모든 인터페이스에 접근할 수 없으므로 prompt()를 남용해서는 안된다.
• 이 함수가 반환하는 값은 문자열이기 때문에 사용자가 입력한 값을 다른 자료형으로 바꿔야 할 때가 있을 경우반환 값을 직접 변환해야 한다. ( 예제 4번 참고 )

 

예제 1-1번 : 입력창에 정보를 입력하면 입력한 정보와 합쳐져서 보인다.

const name = prompt("이름을 알려주세요!");
alert("안녕하세요 " + name + " 님!");

• prompt()와 alert()를 조합하여 환영 메시지를 만들 수 있다.
• 글자와 글자 사이의 여백은 문자열 작성할 때 원하는 부분에 여백을 주면 된다.

 

예제 1-2번 : 백틱(``)을 이용해도 작성할 수 있다. 

const name = prompt("이름을 알려주세요!");
alert(`안녕하세요 ${name} 님!`);

• 1-1번과 동일하나 차이점은 ${}를 이용하여 정보를 불러왔으며, 1-1은 + 를 사용하여 붙였지만 1-2는 한 번에 작성할 수 있다는 장점이 있다. 
  백틱 (`` - 숫자키 1번의 왼쪽 맥기준 ₩가 입력될 경우 option키와 함께 누르면 입력할 수 있다.)를 사용해야 작동한다.

 

---

예제 2번 : 입력값을 넣지 않고 취소할 경우 null(값없음)을 반환한다. 

 

const name2 = prompt("이름을 알려주세요!");
console.log(name2);

 

---

 

예제 3번 : default(기본값) 값을 입력할 수 있다.

const name3 = prompt("예약일을 알려주세요","2022-05-");
console.log(name3);

prompt("질문", "default값");

 

---

예제 4번

: 이 함수가 반환하는 값은 문자열이기 때문에 사용자가 입력한 값을 다른 자료형으로 바꿔야 할 때가 있을 경우 반환 값을 직접 변환해야 한다.

const favoriteNumber = prompt("좋아하는 숫자를 입력해주세요");
console.log(typeof(favoriteNumber));

const aNumber = Number(prompt("좋아하는 숫자를 입력해주세요"));
console.log(typeof(aNumber));

 

• 첫 글자를 대문자로 쓴다.  
• Number() → 숫자형으로 변환
• 자세한 변환 방법은 형 변환 게시글을 참고 바랍니다.

 

2022.05.12 - [TIL/JavaScript] - JS : 형 변환(Type Casting)

JS : 형 변환(Type Casting)

 

---

confirm : 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 대화 상자를 띄우는 메서드

• 무언가를 확인할 때 사용한다.
• alert()과 차이는 alert() 은 확인만 뜨지만, confirm은 확인(true)과 취소(false)가 있다 (typeof로 확인 시 boolean)
• 사용자가 어떠한 액션을 할 때 한 번 더 확인을 하기 위해 자주 사용한다. (ex :) 정말 삭제하시겠습니까?)

 

---

정리

alert('삭제되었습니다') //알림메세지

promt('예약일을 입력하세요.', '2020-10-'); 
// 사용자에게 메세지를 보여주고 어떤값을 입력받을 수있는 필드를 제공한다.
//취소를 누르면 null을 반환하며 두번째 인수를 기재하면 default 값을 지정할 수 있다.

confirm('구독을 취소 하시겠습니까?');
//사용자에게 확인을 받기위한 용도로 사용한다.
// 확인 -> true 취소 ->false

 

alert(), prompt(), confirm()의 단점

1. 스크립트가 일시 정지된다.

• 창이 떠있는 동안 스크립트가 일시 정지되며 창을 닫기 전까지 이후 동작에 제한을 받는다. (누를 때마다 일일이 확인 버튼을 눌러 꺼야 함)

2. 스타일링이 불가하다.

• 위치와 모양을 정할 수 없고, 브라우저마다 모양이 다르다.

html과 CSS로 만들 수 있지만, 기본 메서드로 빠르고 간단하게 사용 가능하기 때문에 단점이 있음에도 많이 사용한다.

 

---

코딩앙마 님의 동영상을 공부하며 작성했습니다.