Javascript

[Javascript] 문자열 입력받기, yes/no 처리 :: prompt(), confirm()

워누 2022. 1. 2. 02:38

안녕하세요 워누입니다😀 

 

오늘은 자바스크립트 함수를 이용해 alert 창에서 문자열 입력받는 방법과

boolean 자료형 처리하는 방법을 가지고 포스팅해보고자 합니다! 

 

기초적인 내용이지만 종종 써먹을 때가 있으니 한 번씩 봐두시면 좋을 듯 합니다😁

 

1. prompt()

 

문자열 자료형을 입력할 때 사용하는 함수인데요,

기본적으로 아래와 같이 사용합니다!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

 

예시 html 파일을 브라우저에서 실행하면 아래 이미지와 같은 결과를 얻을 수 있어요!

 

저는 여기다가 "자바스크립트"라고 입력해보겠습니다!

alert(input) 함수에 의해 "자바스크립트"라는 문자열을 그대로 출력한 것을 볼수 있네요ㅎㅎ

 

하지만 뭔가 2%가 부족합니다..😐

사용자에게 입력을 요구할 때, 위 예시처럼 빈 페이지에 입력칸만 주면 무엇을 입력해야 하는지 알 수 있을까요?

 

원하는 값을 받기 위해서는 어떤 값을 요구하는지 알려줘야겠죠??

prompt() 함수는 두가지 매개변수를 아래와 같은 형식으로 사용이 가능합니다.

 

prompt('Message', 'Default');

 

형식만 보면 이해가 되지 않으시죠?

Message에는 사용자에게 요구할 메세지를 기입하시면 되고, 

Default에는 입력란에 미리 입력시켜놓을 데이터를 기입하시면 됩니다. 

 

예시를 같이 보시죠~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt('본인의 이름을 입력하세요.', '홍길동');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

위 HTML 파일을 브라우저에서 실행하면 아래와 같이 결과를 얻을 수 있어요!

이번에는 그냥 확인 버튼을 클릭하면...

보시다시피, 입력란에 있는 값을 그대로 전달하기 때문에 '홍길동'이라는 이름을 그대로 출력했습니다!

.

여기서 만약, 확인 버튼이 아니라 취소 버튼을 누르면 어떻게 될까요?

결과는..

이렇게 나온답니다!

아무런 입력값이 없었기 때문에 null을 출력하게 되었습니다.

문자열 입력받아서 처리하는 방법은 생각보다 간단하네요😁😁😁

 

2. confirm()

 

boolean 자료형을 입력받을 때 사용하는 함수입니다!

prompt()와 비슷한 형식으로 사용하시면 되구요, 

우선 아래 예시 소스부터 볼까요?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

prompt() 함수와 비슷하죠?

이렇게 html 코드를 만들고 브라우저에서 실행하면 아래 화면처럼 나올 것입니다. 

 

여기서 확인 버튼을 클릭하면 true를, 취소 버튼을 클릭하면 false를 응답합니다. 

(아래처럼 결과를 얻을 수 있어요!)

 

confirm 함수 또한 질문을 매개변수로 넣을 수 있습니다!

우리가 흔히 보는 메세지로 예시를 한번 보여 드릴게요 ㅎㅎ

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm('약관에 동의하시겠습니까?');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

우리가 흔히 온라인 상에서 결제를 하거나 회원가입할 때 관련된 약관을 읽고 동의하여야만 다음 절차를 진행하는데요, 

가끔씩 alert 창으로 한번 더 확인하는 절차를 거칠 때 간단하게 사용할 수 있습니다 ㅎㅎ 

 

이외에도 '예/아니오' 같은 답을 필요로 하는 모든 요구사항에 대하여 confirm() 함수를 이용해 

간단하게 처리할 수 있습니다😁

 

이번 포스팅 내용도 도움이 되셨길 바라며 이만 마무리하겠습니다!