이번 글에서는 사용자로부터 숫자를 입력받아, 그 숫자가 유효한 값인지 확인한 뒤 각 자릿수를 하나씩 화면에 출력하는 JavaScript 프로그램을 만들어 보겠습니다.
요구 사항 정리
프로그램의 동작 흐름은 다음과 같습니다.
- 사용자가 값을 입력하고 버튼을 클릭하면 함수가 실행됩니다.
- 입력값이 유효한 숫자인지 검사합니다.
- 유효한 숫자라면, 해당 숫자의 모든 자릿수를 화면에 하나씩 분리하여 출력합니다.
동작 예시
예를 들어 사용자가 다음과 같이 입력했다고 가정해 보겠습니다.
43354
그렇다면 화면에는 아래와 같이 각 자릿수가 한 줄씩 출력되어야 합니다.
4 3 3 5 4
구현 코드
먼저 HTML 구조부터 살펴보겠습니다.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Digits</title> </head> <body> <div class="column1"> <div class="input"> <button onclick="perform()"> Enter number </button> </div> <strong><div id="output"> </div></strong> </div> </body> </html>
HTML 코드에서는 클릭 시 perform() 함수를 호출하는 버튼과, 결과를 표시할 output 영역을 구성했습니다.
JavaScript
function perform() {
var outputObj = document.getElementById("output");
var a = parseInt(prompt("Please enter a number: ", ""));
var digit = "";
outputObj.innerHTML = ""
while(a > 0){
let num = a%10
a = Math.floor(a/10)
digit += "<p>"+num+"</p>"
}
outputObj.innerHTML = digit;
document.getElementsByTagName("button")[0].setAttribute("disabled","true");
}코드 동작 원리
핵심 로직은 나눗셈과 나머지 연산을 활용한 자릿수 분리 방식입니다.
prompt()로 입력받은 문자열을parseInt()를 통해 정수로 변환합니다.a % 10연산으로 가장 마지막 자릿수(1의 자리)를 추출합니다.Math.floor(a / 10)으로 이미 추출한 자릿수를 제거한 나머지 값을 얻습니다.a가 0보다 큰 동안 위 과정을 반복하며, 추출된 자릿수를<p>태그로 감싸 누적합니다.- 반복이 끝나면 결과를
output요소에 삽입하고, 버튼을 비활성화 처리합니다.
참고로 이 방식은 숫자를 뒤에서부터(1의 자리부터) 추출하기 때문에, 원래 순서대로 출력하고 싶다면 추출한 자릿수를 배열에 저장한 뒤 reverse() 메서드로 뒤집어 주면 됩니다.
실행 결과
코드를 실행하면 먼저 숫자 입력 창이 나타납니다.
숫자를 입력한 뒤 OK 버튼을 클릭하면, 각 자릿수가 한 줄씩 화면에 출력됩니다.
