본문 바로가기
Project

자바스크립트로 구구단 출력 프로그램 만들기

by 보라코끼리 2021. 10. 18.
728x90
  • 자바스크립트와 html 만을 사용하여 첫 단, 마지막 단, 마지막 곱할 수를 입력받은 후 결과 테이블을 출력하는 프로그램을 만들어볼 것이다.

메인 화면

  • 메인 화면의 경우 첫 단, 마지막 단, 마지막 곱할 수를 입력받게 된다.

결과 화면

  • 결과 화면의 경우 각 단의 이름을 테이블 제목으로 표시하고 그 밑으로 각 단의 결괏값을 x*y=z 형식으로 넣어줄 것이다.

1단계 : html 형식으로 표현

  • 우선 메인 화면의 모양을 html 태그들을 이용하여 꾸며준다.
<form>
    <fieldset>
        <label for="start">첫 단 : </label>
        <input id="start" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/><br/>
        <label for="end">마지막 단 : </label>
        <input id="end" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/><br/>
        <label for="last">마지막 곱할 수 : </label>
        <input id="last" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/><br/>
        <input type="button" value="계산하기" onclick="gugudan()"/>
    </fieldset>
</form>
  • 사용한 태그
    • <form> 태그
      • <fieldset> 태그를 이용하여 <input> 태그의 요소들을 묶어주기 위하여 <fieldset> 태그를 이용하였다.
    • <fieldset> 태그
      • <input> 태그 요소들을 하나의 상자 안에 묶어두는 것이 깔끔할 것으로 생각되어 이용하였다.
    • <label> 태그
      • <label> 태그의 for 속성에 <input> 태그의 id 속성과 같은 값을 주면 <label> 태그 사이의 문자를 클릭할 경우 <input> 태그를 활용할 수 있다.
      • 예를 들어 첫 단 이라는 문자를 클릭하면 id="start"의 <input> 태그를 이용할 수 있다.
    • <input> 태그
      • 값을 입력받고 이를 활용하기 위한 태그이다.
  • 첫 단 ~ 마지막 곱할 수
    • 첫 단 이라는 문자에도 활용될 수 있도록 <label for="start"> 를 추가하였다.
    • 만약 <label>태그를 사용하지 않는다면  
      • 첫 단 : <input id="start" onKeyup = "this.value = this.value.replace(/[^0-9]/g,'');"/><br/>
        형식으로 작성될 수 있을 것이다.
    • 숫자만 입력될 수 있게 하기 위해 onKeyup 속성을 활용하였다.
      • 속성에 적힌 방식은 정규표현식으로 0~9 가 아닌 다른 문자가 입력될 경우 빈칸으로 대체되는 방식이다. 

     

  • 계산하기
    • <input> 태그의 속성 중 type을 "button"으로 주었다.
      • button 의 경우 클릭되는 방식만 있을 뿐 기능이 없는 상태이기 때문에 클릭할 경우 javascript의 함수를 호출하는 방식으로 구현하기 위해 onclick 속성에 javascript 함수 "gugudan()"을 표현해두었다.
      • "gugudan()" 함수는 javascript 단에서 구현할 것이다.
    • <input> 태그들에 값을 입력하고 "계산하기"를 누르면 자바스크립트 형식으로 구현한 "gugudan()"이 호출된다.

2단계 : javascript로 gugudan() 함수 구현

  • 위의 html 태그에서 onclick 속성을 통해 gugudan() 함수에 연결되도록 하였다.
function gugudan() {
    var start = Number(document.getElementById("start").value);
    var end = Number(document.getElementById("end").value);
    var last_multiply_number = Number(document.getElementById("last").value);
    var result;
    if (start > end) {
        document.write("첫 번째 단이 마지막 단보다 더 작아야 합니다.");
    } else {
        document.write('<table border="1">');
        document.write('<tr>');
        for (i = start; i <= end; i++) {
            document.write('<th>' + i + '단 </th>');
        }
        document.write('</tr>');
        
        for (j = 1; j <= last_multiply_number; j++) {
            document.write('<tr>');
            for (i = start; i <= end; i++) {
                result = i * j;
                document.write('<td>' + i + '*' + j + '=' + result + '</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');
    }
}
  • id 값이 start 인 값을 숫자 형식으로 변수 start에, end 값을 변수 end에, last 값을 변수 last_multiply_number에 담았다. 결과를 저장할 변수 result를 선언해두었다.
  • 마지막 단이 첫 번째 단보다 작을 경우 결과가 나오지 않을 것을 대비해 start 가 end 보다 클 경우 "첫 번째 단이 마지막 단보다 더 작아야 합니다." 를 출력하도록 하였다.
  • 테이블을 <tr></tr> 태그를 이용하여 두 부분으로 나누어주고 윗부분에는 제목, 밑 부분에는 각 단의 결과가 출력되도록 하였다.
    • 우선 start ~ end 까지의 수와 단 이라는 문자가 합해져 테이블의 첫 줄을 채우도록 하였다.
    • 그 후 각 줄에 start * 1 = start ~ end * last_multiply_number = x 가 출력될 수 있도록 반복문을 설계하였고 이를 각각 <td></td> 태그를 이용하여 묶어주었다.

 

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구구단 만들기_1</title>
</head>
<body>
    <form>
        <fieldset>
            <label for="start">첫 단 : </label> 
            <input id="start" onKeyup = "this.value = this.value.replace(/[^0-9]/g,'');"/><br/>
            <label for="end">마지막 단 : </label>
            <input id="end" onKeyup = "this.value = this.value.replace(/[^0-9]/g,'');"/><br/>
            <label for="last">마지막 곱할 수 : </label>
            <input id="last" onKeyup = "this.value = this.value.replace(/[^0-9]/g,'');"/><br/>
            <input type = "button" value = "계산하기" onclick="gugudan()"/>
        </fieldset>
    </form>

    <script>
        function gugudan() {
            var start = Number(document.getElementById("start").value);
            var end = Number(document.getElementById("end").value);
            var last_multiply_number = Number(document.getElementById("last").value);
            var result;
            if (start > end) {
            document.write("첫 번째 단이 마지막 단보다 더 작아야 합니다.");
            } else {
                document.write('<table border="1">');
                document.write("<tr>");
                for(i = start; i <= end; i++) {
                    document.write("<th>" + i + "단 </th>");
                }
                document.write("</tr>");   
                    
                for(j = 1; j <= last_multiply_number; j++) {
                    document.write("<tr>");
                    for(i = start; i <= end; i++) {
                        result = i * j;
                        document.write("<td>" + i + "*" + j + "=" + result + "</td>");
                    }
                    document.write("</tr>");
                }
                document.write("</table>");
            }
        }

    </script>
</body>
</html>
728x90
저작자표시 (새창열림)

'Project' 카테고리의 다른 글

자바스크립트로 입력값 모음 개수 카운터 프로그램 만들기  (0) 2021.10.20
자바스크립트로 문자의 개수를 카운트해주는 프로그램 만들기  (0) 2021.10.19
구구단 출력 프로젝트 04 - 뷰(View) 출력방식 수정  (0) 2021.10.11
구구단 출력 프로젝트 03 - 컨트롤러(Controller) 만들기  (0) 2021.10.10
구구단 출력 프로젝트 02 - 뷰(View) 만들기  (0) 2021.10.09

관련글

티스토리툴바