자바스크립트 confirm 함수 예 아니오 선택하기

confirm 함수는 자바스크립트에서 사용자에게 예 아니오를 선택하도록 한다. 사용자가 입력한 정보를 다시 확인하도록 하거나 저장 및 삭제 진행 전에 사용자에 다시 질의함으로써 데이터의 손실과 정확성을 높이는데 있다. confirm 함수는 리턴값으로 참, 거짓을 돌려주며 개발자는 이것을 보고 코드의 진행여부를 개발하면 된다.

자바스크립트 confirm 함수
예 아니오 선택하기

웹페이지에서 사용자가 어떤 동작으로 하려고 할 때 예 아니오 를 선택하도록 할 필요가 있다.

보통 저장이나 삭제 등의 동작이 그렇기도 하고 검색조건을 다시 확인하도록 유도하는 경우도 그렇다.

보편적으로 정보를 입력하는 항목에서 사용자에 입력한 내용을 다시 확인하도록 할 필요가 있을 경우 이런 기능을 사용한다.

자바스크립트에서 이런 선택적인 동작을 사용자에게 요구할 필요할 필요가 있을 때 confirm 함수를 사용한다.

confirm 함수는 메세지창 형식으로 예, 아니오 를 표시하여 사용자가 작업을 진행할지를 선택하도록 유도한다.

사용자에 작업 진행과 정보 확인을 유도

자바스크립트의 confirm 함수는 사용자에게 예 아니오를 묻는다.

사용자에게 이런 선택을 하도록 하는 것은 중요하다.

사용자가 입력한 정보가 올바른지 확인하도록 유도하거나 원하는 작업을 계속 진행할지 여부를 묻기 위함이다.

업무용 웹프로그램에서 삭제 버튼이나 수정 버튼에 자주 사용되는데 실수를 사용자의 실수로 데이터를 보호하기 위함이기도 하다.

그럼에도 실수를 예방하려면 백업 테이블을 하나 만들어 두는 것이 좋다.

confirm 함수 사용

confirm 함수를 사용할 때는 문자열을 넣어준다.

문자열은 옵션으로 생략해도 상관없지만, 사용자가 어떤 작업을 하도록 할지 정확하게 인지시킬 필요가 있다면 문자열을 넣어주도록 한다.

confirm 함수의 리턴값은 boolean 으로 참 ( true ) , 거짓 ( false ) 를 리턴한다.

이후 작업은 조건문을 사용하여 프로그램을 진행여부를 코드로 작성하면 된다.

var vResult = confirm( 문자열 );

전체 코드 및 결과

아래의 코드는 confirm 함수를 사용한 예제이다.

함수가 실행될 때 예, 아니오를 선택하도록 한다.

확인 버튼을 클릭하면 코드의 나머지 부분이 실행되는 것을 확인할 수 있지만, 취소 버튼을 클릭하면 코드가 중단되는 것을 확인할 수 있다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- jquery cdn -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<input type="button" id="qYN" value="클릭">
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { 
			/* Load Comp. with resources */ 
			$("#qYN").click( function () {
				fnConfirm();
			});
		});
	</script>
	<script>
    
		var fnConfirm = function() {
			
			var vResult = confirm("선택하세요");
			console.log(vResult);

			if( vResult ) {
				console.log("확인 클릭");
			} else {
				console.log("취소 클릭");
				return false;
			}
            
			console.log("코드 진행");
		}
	</script>
</html>

confirm 함수를 클릭했을 때의 결과이다.

개발자 모드에서 로그를 확인하여 자바스크립트의 흐름을 확인할 수 있다.

취소버튼을 클릭하면 진행은 취소되며, 확인 버튼을 클릭하면 진행은 계속된다.

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바스립트 알림창 제목 표시하기 타이틀 문자열 지정 jquery ui 사용 (0)	2022.12.24
자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line (0)	2022.12.22
자바스크립트 fetch 함수 사용법 api 파일 이미지 등 데이터 요청하기 (0)	2022.12.17
자바스크립트 에러 발생 시키기 강제로 에러 만들고 테스트하기 (0)	2022.12.16
jquery ajax 순차적 동기 처리 async false 메서드의 실행이 완료될 때까지 기다린다. (0)	2022.12.13

자바스크립트 confirm 함수 예 아니오 선택하기