자바스크립트 입력시 prompt() 함수의 간단한 사용법


자바스크립트 입력에서 prompt() 함수는 문자 데이터를 입력받을 수 있습니다. prompt("A", "B")"A", "B"에 입력 안내 메시지를 삽입할 수 있습니다.

자바스크립트 입력 prompt()

prompt() 함수는 사용자에게 윈도우 창을 띄워 데이터를 입력받을 수 있는 함수입니다.


변수 a를 생성해서 메모리의 빈 공간을 확보합니다. prompt() 함수에서 사용자로부터 입력받는 데이터를 변수 a에 삽입합니다. 변수 a를 출력해보면 입력한 데이터가 출력됩니다.

<script>
  var a = prompt();

  document.write(a);
</script>

prompt()에 안내 메시지 추가

prompt() 함수에는 입력창의 제목 부분에 메시지를 삽입할 수 있고, 창 입력 공간에 메시지를 삽입할 수 있습니다. 각각 괄호안의 쉼표 앞과 뒤를 차지합니다.

prompt("윈도우창", "입력창");

아래 예제의 경우 “빨강”이라는 단어가 입력창에 미리 삽입됩니다.

<script>
  var a = prompt("좋아하는 색깔은?", "빨강");

  document.write(a);
</script>

입력창을 공백으로 유지하고 싶은 경우 괄호안의 쉼표 뒤쪽의 ""사이를 비워두면 됩니다.


<script>
  var a = prompt("좋아하는 색깔은?", "");

  document.write(a);
</script>

prompt()의 문자 입력을 정수로 변환

prompt() 입력 함수의 단점은 모든 입력 데이터를 문자 정보로 인식한다는 점입니다. 따라서 입력받은 숫자 데이터도 모두 문자형 숫자로 인식됩니다.

아래 예제의 경우 예를 들어 23을 입력하면 결과가 5가 아니라 23이 나옵니다. 문자 자료형으로 인식되기 때문입니다.

<script>
  var str1 = prompt("한 자리수 정수를 입력하세요.", "");
  var str2 = prompt("한 자리수 정수를 입력하세요.", "");


  document.write(str1 + str2);
</script>

Number() 함수는 문자 자료형을 숫자 자료형으로 변환시켜줍니다. prompt()로 입력받은 값을 Number()에 한 번 돌려주면 데이터가 정수로 변환되어서 연산할 수 있습니다.

<script>
  var str1 = prompt("한 자리수 정수를 입력하세요.", "");
  var str2 = prompt("한 자리수 정수를 입력하세요.", "");

  var num1;
  var num2;

  num1 = Number(str1);
  num2 = Number(str2);

  document.write(num1 + num2);
</script>

Number()는 대문자 N임을 유의합니다.