귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

Studying/JavaScript

자바스크립트 공부하기 - 브라우저의 기본 기능 (Alert, Confirm, Prompt)

creamymood 2025. 3. 11. 15:25


브라우저의 기본 제공 기능인 **대화 상자(Dialog box)**을 알아보자

자바스크립트에서는 사용자와 상호작용을 위해 여러 가지 대화 상자를 사용할 수 있다.

이들은 Window 객체의 메서드로 분류

 

Q. 그러니까 이런 대화 상자 안에 document.querySelector의 변수 같은 걸 넣을 수 있다는거지 ?
A. 네. document.querySelector를 사용해서 웹 페이지에서 특정 요소를 선택한 후,
그 값을 alert, prompt, confirm 등의 대화 상자에 넣을 수 있습니다.

1. Alert 대화 상자 alert()

  • 사용자에게 정보를 알리는 창을 띄우는 메서드.
  • 사용자에게 하나의 버튼(확인)을 제공
alert("이것은 알림 창입니다!");
 
 

 

2. Confirm 대화 상자 (confirm())

  • 사용자에게 확인 또는 취소를 요청하는 창을 띄우는 메서드.
  • 사용자가 "확인" 또는 "취소"를 클릭할 수 있다
  • 사용자가 선택한 값(true 또는 false)을 반환한다
let result = confirm("이 작업을 정말 실행하시겠습니까?");
if (result) {
alert("사용자가 확인을 눌렀습니다.");
}
else { alert("사용자가 취소를 눌렀습니다.");
}

설명:

  • confirm() 함수는 메시지를 표시하고, 사용자가 "확인"을 클릭하면 true를, "취소"를 클릭하면 false를 반환
  • 즉, true일 때 if가 실행되고, false일 때 else가 실행되는 구조 !!

 

3. Prompt 대화 상자 (prompt())

  • 사용자로부터 입력을 받는 창을 띄우는 메서드.
  • 사용자가 값을 입력하고 "확인"을 클릭하거나 "취소"를 클릭할 수 있다.
  • 입력한 값이나 null을 반환합니다.