자바스크립트에서 값을 입력하고 그 값을 바탕으로 계산하고 결과를 화면에 낸다는 프로그램은 곱셈, 나눗셈, 뺄셈에서는 잘 작동합니다. 하지만 더하기로는 잘 작동하지 않습니다. 이번시간에는 그 이유와 해결방법을 설명하도록하겠습니다.
num1 = prompt("값을 입력하십시오","");
num2 = prompt("값을 입력하십시오","");
alert( num1 + num2 );
이 프로그램에서, 예를 들면 최초의 입력으로 3을, 다음에 5를 입력했을때, 답은 8이 아니고, 35가 되어 버립니다. 이것은 왜 그럴까요?
그것은 prompt에서 반환되는 데이터가 숫자가 아닌 문자열이기 때문입니다. 문자열인 데이터를 수식에 사용하고 있는 것입니다.
그러나 그래도 곱셈이나 나눗셈 때는 잘 됩니다. 그런데 그것은, 「문자열의 곱셈」 이라고 하는 것은 없기 때문에, 컴퓨터가 「아, 이것은 문자열을 수치로 변환해 곱셈을 해라고 하는 것이다」 라고 알아서 해석해 주기 때문입니다.
나눗셈이나 뺄셈의 경우도 마찬가지입니다.
그런데 더하기 때만 사정이 다릅니다. 왜냐하면 문자열에는 더하기가 있기 때문입니다. 자바스크립트에서는 문자열끼리를 더하면 문자열 연결로 간주합니다. 그러니까, 「3」과 「5」라고 하는 문자를 연결해 「35」가 되는 것입니다.
그렇다면 어떻게 해야 할까요? 올바르게 더하기 위해서는 문자열로 입력된 값을 숫자 데이터로 변환해야 합니다. 이것은 parseInt 함수를 사용합니다. parse는 구문 분석한다는 의미이고 Int는 정수(Integer)의 의미입니다. 문자열을 정수로 해석하고 값을 반환합니다.
str1 = prompt("값을 입력하십시오","");
str2 = prompt("값을 입력하십시오","");
num1 = parseInt(str1)
num2 = parseInt(str2)
alert( num1 + num2 );
str1과 str2에 입력 된 문자열을 parseInt 함수를 사용하여 숫자로 변환하고 num1과 num2에 넣습니다. 이렇게 하면 num1과 num2가 수치가 되기 때문에 바르게 답이 나옵니다.
또한 parseInt를 사용하는 행과 prompt를 사용하는 행을 정리할 수도 있습니다. parseInt 함수에 prompt 함수를 씁니다.
num1 = parseInt(prompt("값을 입력하십시오",""));
num2 = parseInt(prompt("값을 입력하십시오",""));
alert( num1 + num2 );
parseInt의 괄호 안에 prompt를 쓰고 있습니다. 이와 같이 작성하면, 우선 괄호안의 prompt로부터 처리의 실행이 행해집니다. 즉, 「값을 입력해 주세요」라는 화면이 나오고, 값을 입력하는 처리가 행해집니다. 그리고, prompt가 돌려주는 데이터(문자열)를 이번에는 parseInt 함수가 처리를 해, 수치 데이터로서 num1에 돌려주는 것입니다.
이와 같이 prompt로 입력한 변수는 항상 「문자열」이 되기 때문에, 수치를 입력할 경우에는 주의할 필요가 있습니다.