confirm() 함수는 JavaScript에서 사용자로부터 확인 또는 취소를 선택받는 모달 대화 상자를 표시합니다. 함수는 사용자의 의사결정을 요구하고 해당 의사결정에 따른 조치를 취하는 데 사용합니다. 이는 사용자에게 어떤 작업을 수행할 것인지 확인하고, 실수로 잘못된 작업을 수행하는 것을 방지할 수 있습니다. 예를 들어, 사용자가 웹 페이지에서 중요한 작업을 수행하기 전에 재확인이 필요한 경우입니다.
대화상자는 두 가지 종류를 가지고 있습니다. 모달 대화상자와 모달리스 대화상자는 웹 개발에서 사용되는 두 가지 대화 상자 스타일입니다. 이 두 스타일의 주요 차이점은 대화상자가 표시되는 방식과 대화상자가 화면에 표시될 때 다른 요소와 상호작용하는 방식에 있습니다.
l 모달 대화상자 (Modal Dialog): 모달 대화상자는 사용자가 대화상자가 닫힐 때까지 다른 부분에 대한 상호작용을 막는다는 점에서 "모달"이라는 이름을 가집니다. 사용자가 대화상자 외부의 요소를 클릭하거나 키보드 입력을 받아들이지 않습니다.
l 모달리스 대화상자 (Modeless Dialog): 모달리스 대화상자는 다른 요소와의 상호작용을 허용하는 대화상자 스타일입니다. 사용자가 모달리스 대화상자와 다른 부분 사이를 이동하거나 다른 요소를 클릭할 수 있습니다.
| ◎ 1. confirm() 함수구문 |
confirm() 함수는 사용자에게 message로 지정된 메시지와 함께 "확인" 및 "취소" 버튼이 있는 모달 대화 상자를 표시합니다. 사용자는 이 중 하나를 선택할 수 있으며, "확인"을 선택하면 true가 반환되고, "취소"를 선택하면 false가 반환됩니다.
| confirm(message) l message (문자열, 필수): 사용자에게 표시할 메시지 또는 질문 |
| ◎ 2. 사용 예제 |
(1) 간단한 사용자 확인 받기
confirm() 함수는 사용자에게 "계속하시겠습니까?"라는 메시지와 함께 "확인" 및 "취소" 버튼이 있는 모달 대화 상자를 표시합니다. 사용자가 "확인"을 선택하면 userConfirmed 변수에 true 를 저장하고, "취소"를 선택하면 false가 저장합니다.
| const userConfirmed = confirm("계속하시겠습니까?"); |
(2) 사용자의 선택에 따라 처리
confirm() 함수를 사용하여 사용자로부터 작업 실행 여부를 확인하고, 사용자의 선택에 따라 다른 메시지를 alert() 함수를 통해 표시합니다.
| const userConfirmed = confirm("이 작업을 실행하시겠습니까?"); if (userConfirmed) { alert("작업이 실행됩니다."); } else { alert("작업이 취소되었습니다."); } |
(3) 사용자 응답에 따른 동작 변경
사용자가 "확인"을 선택하면 선택한 항목을 삭제하는 작업을 수행하고, "취소"를 선택하면 삭제 작업을 취소합니다. 사용자의 선택에 따라 원하는 로직을 수행합니다.
| const userConfirmed = confirm("선택한 항목을 삭제하시겠습니까?"); if (userConfirmed) { // 삭제 작업 수행 } else { // 삭제 작업 취소 } |
confirm() 함수는 사용자의 의사결정을 수집하고 해당 의사결정에 따른 조치를 취하는 데 많이 사용합니다. 모달 대화 상자를 통해 사용자에게 간단한 "예" 또는 "아니오" 선택하면서 웹 애플리케이션과의 상호작용을 향상시키는 데 도움을 줄 수 있습니다.
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 parseInt 함수 이용 문자열을 정수로 변환하기 (0) | 2023.10.25 |
|---|---|
| 자바스크립트 스크롤 최상단, 최하단 이동하는 방법 (0) | 2023.10.25 |
| 자바스크립트 현재 날짜, 시간 구해서 활용하기 (0) | 2023.10.25 |
| 자바스크립트 setTimeout() 함수 사용하기 (0) | 2023.10.24 |
| 자바스크립트 random, floor 함수로 배열에서 무작위로 값 추출하기 (0) | 2023.10.23 |
| 자바스크립트 Math.floor() 함수 사용하는 방법 (0) | 2023.10.22 |
| 자바스크립트 Math.random() 함수 사용하는 방법 (1) | 2023.10.22 |
| 자바스크립트 Javascript 배열에 사용하는 여러 함수들 모음 (0) | 2023.10.22 |
