티스토리 뷰

HTML,CSS,JAVASCRIPT

구구단 출력

up_one 2025. 1. 2. 17:39

HTML과 JAVASCRIPT의 기초를 쌓고자 구구단을 출력하는 코드를 작성했습니다. 사용자로부터 숫자를 입력 받으면 구구단 출력 함수를 통해 결과를 보여주고 단이 바뀔 때마다 이전의 결과 내용을 초기화한 후 다시 새로운 단의 결과를 한번에 화면에 출력시킬 수 있게 하였습니다.

 

1. 사용자로부터 구구단의 단을 입력

 

웹 사이트 상에서 사용자가 구구단을 위한 숫자를 입력하는 코드

 <h1>구구단 출력</h1>

    <!--사용자로부터 입력 받음-->
    <label for = "numberInput">단을 입력하세요 : </label>
    <input type="number" id="numberInput" placeholder="1부터 9까지" oninput="Multiplication()">
   
    <h2> 결과 : </h2>
    <div id = "result"></div>

 

1) label 태그를 사용하여 숫자를 입력하는 레이블 지정

2) input 태그의 placeholder을 사용자가 입력 필드에 적절한 값을 입력할 수 있도록 짧은 도움말 명시

3) oninput을 통해 input 태그 안의 값들이 변경될 때마다 이벤트를 발생시킬 수 있도록 설정

 

cf) oninput과 더불어 onchange는 input 태그의 입력이 끝났을 때 이벤트를 발생시킬 수 있도록 설정

 

2. JavaScript을 이용한 구구단 출력 함수

 

구구단 출력 함수

<script>
        function Multiplication() {
            const number = parseInt(document.getElementById("numberInput").value, 10);
            const resultDiv = document.getElementById("result");
            resultDiv.innerHTML = "";    //결과 초기화(이전의 출력한 내용 없애기)

            if(isNaN(number) || number<1 || number>9) {
                resultDiv.innerHTML = "잘못 입력된 숫자입니다";
                return;
            }

            //구구단 출력
            let resultText = "";
            for(let i = 1 ; i<=10; i++) {
                resultText += `${number} X ${i} = ${number * i}<br>`;
            }
            resultDiv.innerHTML = resultText;
        }
    </script>

 

1) parseInt()은 입력받은 문자열을 숫자로 지정

2) 입력받은 number와 결과를 저장할 resultDiv을 태그에 있는 id 속성을 사용하여 해당 태그에 접근할 수 있는 getElementById로 선언

3) 입력받은 number가 적절한 형식인지, 1에서 9 사이의 숫자인지 검사

 

3. 결과물

 

TAG more
글 보관함
최근에 올라온 글