window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
브라우저 객체 모델 중에서 window 객체는 웹 개발에서 다양한 작업을 수행하는 데 사용됩니다. 이번 글에서는 window 객체의 알림, 확인, 프롬프트 다이얼로그를 활용하는 방법에 대한 예제를 소개합니다. 이를 통해 사용자와 웹 페이지 간의 상호작용을 효과적으로 구현할 수 있습니다.
▼ window 객체의 주요 속성과 메서드
| 속성/메서드 | 설명 |
|---|---|
| window.innerHeight | 브라우저 |
| window.innerWidth | 브라우저 창의 내부 너비를 반환합니다. |
| window.outerHeight | 브라우저 창의 외부 높이를 반환합니다. |
| window.outerWidth | 브라우저 창의 외부 너비를 반환합니다. |
| window.pageXOffset | 문서가 가로로 스크롤된 픽셀 수를 반환합니다. |
| window.pageYOffset | 문서가 세로로 스크롤된 픽셀 수를 반환합니다. |
| window.alert() | 알림 다이얼로그를 표시합니다. |
| window.confirm() | 확인 다이얼로그를 표시하고, 사용자의 선택에 따라 true 또는 false를 반환합니다. |
| window.prompt() | 프롬프트 다이얼로그를 표시하고, 사용자의 입력값을 반환합니다. |
| window.setTimeout() | 지정된 시간이 경과한 후 함수를 실행하도록 예약합니다. |
| window.setInterval() | 지정된 시간 간격으로 함수를 반복 실행하도록 예약합니다. |
| window.clearTimeout() | setTimeout()으로 예약된 함수 실행을 취소합니다. |
| window.clearInterval() | setInterval()로 예약된 함수 실행을 취소합니다. |
| window.open() | 새 창이나 탭을 여는 데 사용됩니다. |
| window.close() | 현재 창이나 탭을 닫습니다. |
| window.moveTo() | 브라우저 창의 위치를 변경합니다. |
| window.resizeTo() | 브라우저 창의 크기를 변경합니다. |
1. 알림 다이얼로그: window.alert()
window.alert() 메서드를 사용하면 사용자에게 간단한 메시지를 알릴 수 있습니다. 이 메서드는 하나의 문자열 인수를 받아 알림 다이얼로그에 표시합니다.
1. 사용 예제 코드
window.alert("안녕하세요. 이것은 알림 다이얼로그입니다.");2. 사용 예제 실행 결과 화면
2. 확인 다이얼로그: window.confirm()
window.confirm() 메서드를 사용하면 사용자에게 확인을 요청할 수 있는 다이얼로그를 띄울 수 있습니다. 이 메서드는 하나의 문자열 인수를 받아 확인 다이얼로그에 표시하고 사용자가 확인 또는 취소 버튼을 누르면 각각 true 또는 false를 반환합니다.
1. 사용 예제 코드
const isConfirmed = window.confirm("이 작업을 수행 하시겠습니까?");
if (isConfirmed) {
console.log("사용자가 확인을 선택했습니다.");
} else {
console.log("사용자가 취소를 선택했습니다.");
}2. 사용 예제 실행 결과 화면
3. 프롬프트 다이얼로그: window.prompt()
window.prompt() 메서드는 사용자에게 입력을 요청하는 다이얼로그를 띄웁니다. 이 메서드는 두 개의 문자열 인수를 받아 프롬프트 다이얼로그에 표시하고 사용자가 입력한 값을 반환합니다. 첫 번째 인수는 프롬프트 문구이며 두 번째 인수는 선택적으로 사용할 수 있는 기본값입니다.
1. 사용 예제 코드
const userName = window.prompt("이름을 입력해 주세요.", "홍길동");
if (userName) {
console.log(`사용자의 이름은 ${userName}입니다.`);
} else {
console.log("사용자가 입력을 취소하거나 값을 입력하지 않았습니다.");
}2. 사용 예제 실행 결과 화면
☞ 알림, 확인, 프롬프트 다이얼로그를 사용하는 방법에 대해 알아보았습니다. 이를 통해 사용자와 상호작용하는 웹 페이지를 만들 수 있습니다. 다음 글에서는 window 객체의 다른 속성과 메서드에 대해 알아보겠습니다.
자바스크립트 기초 이전 게시물
- 자바스크립트 객체: 객체 생성, 접근, 변경, 추가, 삭제 방법
- 자바스크립트 문자열 및 숫자 처리: String과 Number 내장 객체
- 자바스크립트 날짜 및 시간 처리: Date 내장 객체 사용법
- 자바스크립트 수학 연산 처리: Math 내장 객체 사용법
- 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
