JS 자바스크립트 기초 - 03. 대화상자

 

 

 

 

---

 

 

페이지 접속 후 뜨는 창은 아래의 prompt창 예시임!!

새로고침 후 팝업창을 다시 뜨게 할 수 있음

 

 

 

 

먼저 간략히 말하자면,

alert             알려줌

prompt       입력 받음

confirm       확인 받음

 

 

 

 

alert( )

: 알림창

 

const welcome = "환영합니다.";
const message = alert(welcome);

 

 

 

 

 

 

 

 

 

 

prompt( )

: 사용자에게 어떠한 값을 입력받기 위한 창

 

이 페이지에 접속하게 되면, 창이 뜰텐데

그 팝업창이 prompt 창이다.

 

See the Pen Untitled by sehui (@birdhui) on CodePen.

 

 

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

 

 

 

 

 

 

 

 

 

이러한 팝업이 뜨게 되면서

이름을 입력하게 되면,

 

 

 

 

 

 

 

 

이렇게 팝업이 다시 뜨면서  alert창이 열리게 된다.

 

만약, 이름을 입력하지 않고 취소를 누르게 된다면,

"환엽합니다, null님"이라고 출력되게 된다.

그냥 확인 버튼만 누르게 된다면,

"환영합니다, 님"이라고만 출력이 된다.

 

 

 

앞에서 배운 백틱으로 표현한다면

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

 

 

 

 

프롬프트는 default값을 가질 수 있다.

- 2개의 인수를 가질 수 있음

- 첫 번째 값은 메세지, 두 번째 값은 입력받을 default값이 됨

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

 

 

 

 

 

confirm( )

const isAdult = confirm("당신은 성인 입니까?")
console.log(isAdult);
// 확인 버튼 클릭시 true
// 취소 버튼 클릭시 false

 

 

alert( ) 와 confirm( )의 차이점

• alert는 확인 버튼만 존재
• confirm은 확인, 취소 버튼 존재

 

 

 

 

confirm은

• 결제 하시겠습니까?
• 정말 삭제 하시겠습니까?

와 같은 질문에 대단히 자주 사용된다. 

 

 

 

정리

alert() : 메세지창을 띄워줌 / 확인 버튼을 누르면 닫힘

 

prompt() : 사용자에게 메세지를 보여주고 어떠한 값을 입력받을 수 있는 field 제공

• 취소 클릭시 null 반환, 두 번째 인수를 넣어주면 default 값을 제공할 수 있음

 

confirm() : 사용자에게 확인을 받기 위한 용도로 사용

• 취소 클릭시 false 반환
• 확인 클릭시 true 반환

 

 

단점

• 스크립트 일시 정지

만약, 유튜브 알림 버튼을 눌렀는데 텍스트로 알려주는 게 아니라

alert로 알려준다면 일일이 확인 버튼을 눌러야 한다면 굉장히 귀찮고 피곤해짐

 

• 스타일링이 불가함

그럼에도, 기본 메소드가 빠르고 적용가능하기 때문에 많이 사용함

 

 

 

 

 

 

 

 

 

정리되어있는 내용은 코딩앙마 자바스크립트기초강좌를 듣고

정리한 내용입니다.