[jQuery] confirm 확인과 취소, div 값 변경

 

 

 

자바스크립트에서 alert를 사용하여 경고창을 띄울 수 있습니다.

하지만 alert는 사용자에게 메시지를 전달하는 기능일 뿐 사용자가 true와 false를 선택할 수 없습니다.

이 글에서는 true와 false를 선택할 수 있는 confirm 함수에 대해서 살펴보도록 하겠습니다.

 

반응형

 

---

 

confirm 이란?

 

 

confirm 함수는 alert 함수와 비슷하게 경고창을 띄워주는 함수입니다.

 

예를 들어,

로그인할 때 "비밀번호가 틀렸습니다!" 같은 메시지는 alert로 보내주면 됩니다.

 

하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우,

예, 아니요를 선택 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다.

 

 

 

alert

 

confirm

 

 

 

위의 이미지를 통해 alert와 confirm의 차이점을 쉽게 볼 수 있습니다.

정보를 알려줄 때는 alert를 사용하고, 사용자의 의도를 질문할 때는 confirm을 사용하면 되겠습니다.

 

728x90

 

 

예제

 

간단한 예제코드를 통해 confirm 함수를 사용해 보도록  하겠습니다.

 

function confirm_test()  {
  if(confirm("삭제하시겠습니까?")) {
    $("#confirm_box").html("확인누름.");
  } else {
    $("#confirm_box").html("취소누름.");
  }
}

 

 

확인 눌렀을 때 화면

 

 

취소 눌렀을때 화면

 

 

confirm("삭제하시겠습니까?"); 를 사용하여 확인과 취소를 가능하게 할 수 있습니다.

 

 

• 확인 클릭 -> true 반환
• 취소 클릭 -> false 반환

 

confirm의 속성을 이용하여 if문으로 조건을 주었습니다.

 

$("#confirm_box"). html("확인누름.");

confirm_box라는 id를 찾아서 html값을 변경해 줍니다.

div안의 값이 기존 "클릭"이라는 값에서 "확인누름."이라는 값으로 변경됩니다.

 

위의 예제를 통해 confirm 함수를 사용하면 확인과 취소의 이벤트 발생을 개발자가 임의로 할 수 있어,

매우 편리하게 사용자에게 개발자의 의도를 전달할 수 있습니다.

 

---

 

결론

 

이 글에서는 confirm에 대해서 알아보았습니다.

 

어려운 내용이 아니지만, confirm에 대해서 알고 있다면 사용자에게 더욱 친화적인 페이지를 만들 수 있고, 개발자에게도 더 편하게 값을 처리할 수 있어서 필수적으로 알아두면 좋은 함수입니다.

 

이러한 confirm의 속성을 이용하여 중요한 처리를 하기 전 사용자의 의도를 한번 더 묻는 것은 중요합니다.

예를 들어 회원 탈퇴 같은 경우, 회원탈퇴 버튼을 실수로 클릭했는데 바로 탈퇴가 진행된다면,

사용자 입장에서도 당황스러울 것입니다.

 

실수로 클릭했을 때 confirm 함수를 통해 "회원탈퇴 하시겠습니까?"라는 질문을 던지고,

그 질문에 한번 더 YES라고 답을 준다면 확실하게 회원탈퇴하겠다는 의지를 가지고 있는 것이기 때문에,

회원 탈퇴 처리를 해주면 당황스럽지 않을 것입니다.

 

이 글을 통해서 confirm에 대해 알아가고 활용해 볼 수 있으면 좋겠습니다.