[자바스크립트/Jquery] confirm 확인과 취소, div 값 변경

서문

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

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

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

 

 

본문

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

 

하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우 예, 아니오 선택을 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다.

 

 

 

alert

 

confirm

 

 

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

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

 

728x90

 

예제

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에 대해 알아가고 활용해 볼 수 있으면 좋겠습니다.