JavaScript 사용자에게서 값 입력받기

javascript에서 사용하는 입력 함수 alert, prompt, confirm 함수에 대해서 알아보자.

1. alert: 메세지를 보여준다

사용자에게 이름을 입력받고 그대로 출력하는 메세지를 띄우고 싶다.

뒤에서 다룰 prompt 함수를 통해 이름을 Mike로 입력받고 출력한다.

다음과 같이 안내창이 출력된다.

사용자가 '확인'을 누르면

2. prompt: 사용자에게 메세지를 보여주고 값을 입력받음

학생 두 명의 나이를 입력받고 두 학생의 나이 평균을 계산해 주는 코드
다음의 코드를 입력하면

이런 식으로 age1과 age2에 사용자가 값을 입력해 줄 수 있다.
각각 22, 24 라는 값을 넣고 실행해 주겠다.

그러나 결과를 실행해 보면 예상된 23의 값이 아니라

다음과 같이 전혀 엉뚱한 값이 나오는데 그 이유는 prompt 함수는 사용자로부터 "문자열"로 값을 입력받기 때문이다.

따라서 (22+24)/2 = 46/2 = 23 이 아니라 ("22"+"24") = "2224"/2 = 1112로 출력되는 것

여기서 "2224"/2의 계산이 가능한 이유는 자동 형변환 때문이다.

여기서 자동 형변환의 맹점이 잘 드러난다. 자동 형변환은 사용자가 일일이 형변환을 하지 않아도 컴파일러가 자동으로 형변환해 계산을 해 주는 편리한 기능이기도 하지만 원인을 찾기 힘든 에러의 원인이 되기도 한다.

그렇기에 명시적 형변환을 꼭 해 주어야 한다.
prompt 함수를 통해 받은 문자열 값을 Number() 함수를 통해 형변환해 주겠다.

Number() 함수는 string 값을 숫자형으로 변환해 준다.

예상된 값이었던 23이 올바르게 나오는 것을 볼 수 있다.

3. confirm: 사용자에게 확인/취소 값 받음

사용자가 성인인지를 묻는 안내창을 띄우려고 한다. 사용자는 확인/취소로 대답한다.