Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 확인(Confirm) 대화상자를 표시하는 방법

웹 개발을 하다 보면 사용자에게 "정말 삭제하시겠습니까?", "계속 진행하시겠습니까?"와 같이 중요한 작업에 대한 동의를 얻어야 하는 경우가 자주 있습니다. 이럴 때 활용할 수 있는 것이 바로 JavaScript의 confirm() 메서드입니다.

확인 대화상자란 무엇인가요?

확인(confirmation) 대화상자는 사용자의 동의 여부를 묻기 위해 주로 사용되는 팝업 창입니다. 화면에 두 개의 버튼, 즉 확인(OK)과 취소(Cancel)가 함께 표시됩니다.

동작 방식은 매우 간단합니다.

  • 사용자가 확인(OK) 버튼을 클릭하면 confirm() 메서드는 true를 반환합니다.
  • 사용자가 취소(Cancel) 버튼을 클릭하면 false를 반환합니다.

이 반환값을 조건문과 함께 사용하면 사용자의 선택에 따라 서로 다른 동작을 수행하도록 프로그램을 작성할 수 있습니다.

기본 문법

confirm("표시할 메시지");

괄호 안에 사용자에게 보여줄 문자열을 전달하면 되며, 반환값은 항상 불리언(Boolean) 타입인 true 또는 false입니다.

예제 코드

아래 코드를 실행하면 확인 대화상자가 어떻게 동작하는지 직접 확인할 수 있습니다.

<html>
<head>
  <script>
    function getConfirmation(){
      var retVal = confirm("계속 진행하시겠습니까?");
      if(retVal == true){
        document.write("사용자가 계속 진행하기를 원합니다!");
        return true;
      }
      else{
        document.write("사용자가 진행을 원하지 않습니다!");
        return false;
      }
    }
  </script>
</head>
<body>
  <p>아래 버튼을 클릭하면 결과를 확인할 수 있습니다:</p>
  <form>
    <input type="button" value="클릭하세요" onclick="getConfirmation();" />
  </form>
</body>
</html>

코드 설명

  1. getConfirmation() 함수 내부에서 confirm()을 호출하여 사용자에게 질문을 표시합니다.
  2. 반환된 값이 true이면 "사용자가 계속 진행하기를 원합니다!"라는 메시지를 화면에 출력하고 true를 반환합니다.
  3. false이면 "사용자가 진행을 원하지 않습니다!"라는 메시지를 출력하고 false를 반환합니다.
  4. 버튼의 onclick 속성을 통해 버튼 클릭 시 함수가 실행되도록 연결했습니다.

참고 사항

confirm()은 브라우저 기본 제공 대화상자이므로 별도의 라이브러리 없이 즉시 사용할 수 있다는 장점이 있습니다. 다만 디자인을 커스터마이징할 수 없고, 대화상자가 열려 있는 동안 페이지의 다른 동작이 일시적으로 차단된다는 점을 기억해 두세요. 더 세련된 UI가 필요하다면 HTML과 CSS로 직접 만든 모달(Modal) 대화상자를 사용하는 것도 좋은 대안입니다.