
브라우저의 기본 제공 기능인 **대화 상자(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을 반환합니다.
'Studying > JavaScript' 카테고리의 다른 글
자바스크립트 공부하기 - 연산자 (산술, 비교, 논리), 형변환 (0) | 2025.03.14 |
---|---|
자바스크립트 공부하기 - 제어 흐름 (비교연산, 조건문, 반복문) (0) | 2025.03.12 |
자바스크립트 공부하기 - 디버깅 (1) | 2025.03.11 |
자바스크립트 공부하기 - DOM, 메서드 (0) | 2025.03.11 |
자바스크립트 완전 기초 .. 차근 차공부 하기 📝💭 (0) | 2025.03.10 |