이번 글에서는 사용자가 직접 숫자를 입력하고 버튼을 클릭하면, 그 값에 맞는 숫자 패턴을 화면에 출력해 주는 JavaScript + HTML 프로그램을 만들어 보겠습니다.
요구 사항
프로그램은 다음 조건을 만족해야 합니다.
- 사용자가 숫자를 입력할 수 있는 텍스트 입력창(input) 제공
- 클릭하면 패턴을 출력하는 버튼 제공
- 입력값 n만큼의 행으로 구성된 숫자 패턴을 화면에 표시
예를 들어 사용자가 5를 입력하고 버튼을 클릭하면 아래와 같은 패턴이 출력됩니다.
01 01 02 01 02 03 01 02 03 04 01 02 03 04 05
구현 코드
전체 코드는 다음과 같습니다.
<html>
<head>
<title>JavaScript Number Patterns</title>
<script type="text/javascript">
const printPattern = () => {
const num = document.getElementById("rows").value;
for(let m=1; m <= num; m++){
for(let n=1; n <= m; n++){
document.write("0"+n+" ");
}
document.write("<br />");
}
}
</script>
</head>
<body>
<p>행(row)의 개수를 입력한 뒤 Print 버튼을 누르세요</p>
<input type="number" placeholder="Number of Rows" id="rows">
<button type="button" onclick="printPattern()">Print</button>
</body>
</html>코드 동작 원리
핵심 로직은 printPattern() 함수 안에 있습니다.
- 입력값 가져오기:
document.getElementById("rows").value로 사용자가 입력한 행 개수를 읽어옵니다. - 바깥 반복문(m): 전체 행의 개수를 결정합니다. 1부터 입력값까지 한 줄씩 생성합니다.
- 안쪽 반복문(n): 각 행마다 1부터 현재 행 번호(m)까지의 숫자를 출력합니다. 이 덕분에 첫째 줄에는 1개, 둘째 줄에는 2개처럼 숫자가 점점 늘어나는 삼각형 모양이 만들어집니다.
- 줄 바꿈: 한 행의 출력이 끝날 때마다
<br />태그를 넣어 다음 줄로 넘어갑니다.
실행 결과
값을 입력하기 전 화면 −
5를 입력하고 Print 버튼을 클릭한 최종 결과 −
마무리
이 예제는 중첩 반복문과 DOM 요소 값을 읽어오는 기본기를 동시에 연습할 수 있는 좋은 실습입니다. 여기서 더 나아가 패턴을 역삼각형으로 출력하거나, document.write() 대신 특정 컨테이너 요소에 결과를 렌더링하도록 개선해 보는 것도 좋은 연습이 됩니다.