Prompt 구구단 활용

 

Prompt 를 이용하여 구구단의 원하는 단을 출력하는 예제입니다.

순서대로 확인해봅시다.

{
            let num, result;

            document.querySelector(".btn03").addEventListener("click", ()=>{
                num = prompt("출력할 구구단 숫자를 입력해주세요!", "2");
                // console.log(num);

                for(let i=1; i<=9; i++){
                    result = num + "*" + i + "=" + (num * i) + "<br>";
                    document.querySelector(".result03 > div").innerHTML += result; //1~9가 출력되야 함으로 복합대입 연산자를 사용 "+="
                }
            });
        }

1. 값이 정해지지 않은 num, result 변수 지정을 해줍니다.

 

2. querySelector를 이용하여 Prompt 를 실행시킬 버튼을 지정해줍니다. 

 

3. addEventListener("click", function( ){ });을 이용하여 function 안에 실행 할 prompt를 넣어줍니다. 

 

4. prompt 의 기본 문구는 "출력할 구구단 숫자를 입력해주세요!" , 기본값은 2단 부터 시작할것이기 때문에 2를 넣어줍니다.  물론, 입력 값에 1을 넣어도 1단이 정상적으로 출력됩니다. 

 

5. 이벤트 설정이 끝난 후 for 문을 이용하여 출력시킬 곱셈을 만듭니다.

 

6.   addEventListener 안에 for문 까지 포함이 되어야 합니다.  이벤트 설정의 괄호를 닫고 새로운 for문을 적는게 아닙니다.

 

7. 저의 경우 출력 값을 띄워주는 result 박스를 만들어서 innerHTML 를 사용했지만 console.log 또는 document.write() 를 이용하셔도 됩니다. 

 

8. 출력값의 경우 2*1=2 다음 2*2=4 처럼 다음 단이 출력 되어야 하기 때문에  복합 대입 연산자 += 를 이용하여 출력 해줍니다. 

 

9. 해당 Prompt 에 원하는 값을 입력하면  입력한 숫자의 구구단 ( 1부터 9 까지)가 출력 됩니다. 

 

10. 이렇게 하면 단위가 큰 곱셈도 쉽게 출력 할 수 있겠죠? 

 

 

이런 식으로 출력 됩니다. 

 

저의 경우 자바스크립트는 순서대로 실행되는 언어임을 생각하고 공부한면 좀 더 이해가 쉽게 되더라구요! 

 

다들 화이팅 입니다.