본문 바로가기
Project

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

by 보라코끼리 2021. 10. 22.
728x90

메인화면
결과화면

  • 첫 단, 마지막 단, 마지막 곱할 수를 입력하는 칸을 만들고 계산하기 버튼을 만든다.
  • 첫 단은 구구단의 시작단이 되고, 마지막 단은 구구단의 마지막 끝나는 단이된다.
  • 첫 단이 2일 때 2 * 1 = 2 부터 시작되게 되고 마지막 곱할 수에 입력된 값까지의 곱을 출력한다.
  • 전체 출력 화면의 경우 2단/2단,3단/2단,3단,4단.. 등의 형태로 직각삼각형 모양으로 출력한다.
  • 짝수단의 경우 주황색, 홀수단의 경우 파란색으로 출력한다.

1단계 : Multiplication.html 파일 만들기

  • 이번 자바스크립트 MVC 형태로 구구단 출력 프로그램 만들기 프로젝트는 M(Model), V(View), C(Controller) 를 분리해서 진행할 것이므로 모든 파일을 나눠두기로 하였다.
  • 그 중 우선 html 파일을 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>구구단 만들기_ver2</title>
    <script src = "MultiplicationController.js"></script>
    <script src = "MultiplicationFactory.js"></script>
    <script src = "MultiplicationUI.js"></script>
</head>
<body>
    <label for="startRowNumber">첫 단 : </label> 
    <input id="startRowNumber" ><br/>
    <label for="endRowNumber">마지막 단 : </label>
    <input id="endRowNumber"><br/>
    <label for="endColumNumber">마지막 곱할 수 : </label>
    <input id="endColumNumber"><br/>
    <input type = "button" value = "계산하기" onclick="MultiplicationController.getTable()">
</body>
</html>
  • 사용한 태그
    • <script>
      • src 속성을 이용하여 외부 자바스크립트 파일을 이용하기 위해 사용하였다.
    • <label>
      • for 속성을 이용하여 <input> 태그의 id 속성을 활용하기 위해 사용하였다.
    • <input>
      • id 속성을 이용하여 클라이언트에게 입력을 받고 이를 자바스크립트를 이용하여 활용하기 위해 사용하였다.
  • 구구단 만들기
    • 컨트롤러로 사용할 MultiplicationController.js 파일과 모델로 사용할 MultiplicationFactory.js, 뷰로 사용할 MultiplicationUI.js 파일을 <script> 의 src속성을 이용하여 주입한다.
    • id="startRowNumber"를 이용하여 첫 단을 입력받고, id="endRowNumber"를 이용하여 마지막 단을 입력받고 id="endColumnNumber"를 이용하여 마지막 곱할 수를 입력받는다.
    • 그 후 <input> 태그의 type="button" 속성을 이용하여 버튼 형태를 만들고 클릭 시 컨트롤러인 MultiplicationController 의 getTable() 메서드와 연결되도록 하였다.

2단계 : M(Model) 역할을 하는 MultiplicationFactory.js 파일 만들기

  • 나의 경우 모델을 먼저 만드는 것이 더 편해서 MultiplicationFactory.js 파일부터 만들기로 하였다.
  • 이 파일에서는 인풋값을 받아서 구구단 테이블 형태를 만들고 이를 리턴하는 형식이 이루어질 것이다.
var MultiplicationFactory = {};
MultiplicationFactory.multiplicationTable = [];

/*
주석 : 
이름 : createMultiplicationTable
역할 : 곱셈 테이블 (예를 들어 구구단 같은 표를 만든다.) 
재료 : 
                                0 (startColumNumber)     1 2 3 4 .............................. n (endColumNumber)
        
0 (startRowNumber)              0 X 0 = 0     0 * 1 = 0   0 * 2 = 0 ........................... 0 * n = 0  
1
2
                3               3 * 1 = 0 .........
                4
.
.
m (endRowNumber)
*/

MultiplicationFactory.createMultiplicationTable = function( startRowNumber , endRowNumber, startColumNumber , endColumNumber) {
    
    while (startRowNumber <= endRowNumber) {
        this.multiplicationTable[startRowNumber] = MultiplicationFactory.createMultiplicationRow(count, startColumNumber, endColumNumber);
        ++startRowNumber;
    }
    return this.multiplicationTable;
}

/*
주석 : 
이름 : createMultiplicationRow
역할 : 곱셈 테이블의 행을 만든다. (구구단에 한단에 해당 된다.)
*/
MultiplicationFactory.createMultiplicationRow = function( rowNumber , startColumNumber , endColumNumber) {

    var multiplicationRow = [];
    while(startColumNumber <= endColumNumber) {
        multiplicationRow[startColumNumber] = MultiplicationFactory.createMultiplicationOperation(rowNumber, startColumNumber);
        ++startColumNumber;
    }
    return multiplicationRow;

}

/*
주석 : 
이름 : createMultiplicationOperation
역할 : 곱셈 연산식을 만든다.
*/
MultiplicationFactory.createMultiplicationOperation = function( rowNumber , columnNumber ) {
    var result = rowNumber * columnNumber;
    var operation = [];
    operation.push(rowNumber + " * " + columnNumber + " = " + result);
    return operation;
}

/*
    이름 : findMultiplicationItem
    역할 : multiplicationTable에서 한 아이템(곱셈식)을 찾는다.
*/
MultiplicationFactory.findMultiplicationItem = function(row, col) {
    return this.multiplicationTable[row][col];
}
  • 처음부터 구구단 테이블을 만든다! 라고 접근을 하니 너무 막막하였다. 그래서 이를 쪼개서 생각해보기로 했고, 순차적으로 진행하였다.
    1. createMultiplicationOperation(rowNumber, columnNumber) - 곱셈 연산식을 만드는 함수
      • 구구단은 곱셈 연산식으로 이루어진 것이기 때문에 우선 rowNumber, columnNumber가 매개변수로 입력되었을 때 이를 rowNumber * columnNumber = result 의 형태로 만들어주었고, 이를 operation 이라는 배열에 담았다.
    2. createMultiplicationRow(rowNumber , startColumNumber , endColumNumber) - 곱셈 테이블의 행을 만드는 함수(한 단을 만드는 함수)
      • 곱한 값을 각 단별로 나눠주기 위해 한 단을 만드는 함수를 생각해내었다.
      • 이는 같은 rowNumber에서 startColumnNumber ~ endColumnNumber까지의 곱으로 나타낼 수 있다.
      • 이를 위해 multiplyRow 배열을 선언하고 startColumnNumber 값의 인덱스에 createMultiplicationOperation() 함수를 호출한 값을 넣어주었다.
    3. createMultiplicationTable(startRowNumber, endRowNumber, startColumnNumber, endColumnNumber) - 곱셈 테이블을 만드는 함수
      • 한 단씩 만들어둔 곱셈 테이블의 행을 열로 배열하여 테이블 형태로 만들기 위해 createMultiplicationTable() 함수를 생각하였다.
      • startRowNumber ~ endRowNumber 까지의 인덱스에 createMultiplicationRow() 함수로 만들어진 한 단의 곱셈 테이블을 넣어 행렬 형태로 이차 배열을 완성하였다.
      • multiplicationTable 변수의 경우 하나의 곱셈식을 찾는 findMultiplicationItem() 함수에서도 사용할 것이므로 MultiplicationFactory.multiplicationTable = []; 의 객체 형태로 선언해주었다.
    4. findMultiplicationItem(row, col) - 만들어진 곱셈 테이블에서 [2][1] 과 같은 형태로 찾을 경우 2 * 1 = 2 를 검색할 수 있도록 하는 함수
      • 모델 설계단계에서는 생각지 못했던 함수인데 뷰에서 테이블 형태를 만들기 위해 반복문을 설계하던 중 필요에 의해 만들게 되었다.
      • 일반적인 테이블을 출력할 경우 createMultiplicationTable() 함수만으로 가능할 것으로 예상되지만 출력의 형태가 2단/2단,3단/2단,3단,4단.. 등의 형태이기 때문에 필요했다.   
728x90

3단계 : V(View) 역할을 하는 MultiplicationUI.js 파일 만들기

  • 두 번째로 출력을 담당하는 MultiplicationUI.js 파일을 만들었다.
var MultiplicationUI = {};
/*
    이름 : printMultiplicationTable
    역할 : 곱셈 테이블을 출력한다.
*/
MultiplicationUI.printMultiplicationTable = function(startRowNumber , endRowNumber, startColumNumber , endColumNumber) {
    document.write("<table border = 1>");
    document.write("<tr>");
    for (k = startRowNumber; k <= endRowNumber; k++) {
        for (i = startRowNumber; i <= k; i++) {
            document.write("<td>");
            for (j = startColumNumber; j <= endColumNumber; j++) {
                var color = (i % 2 == 1) ? "<font color=blue>" : "<font color=orange>";
                var resultText = MultiplicationFactory.findMultiplicationItem(i, j);
                // resultText는 하나의 아이템
                document.write(color + resultText + "<br/>");
            }
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
}
  • 인풋값 (startRowNumber, endRowNumber, startColumnNumber, endColumnNumber)가 매개변수로 들어오면 이를 내가 원하는 형태로 출력하는 printMultiplicationTable(startRowNumber, endRowNumber, startColumnNumber, endColumnNumber) 함수를 만들었다.
  • k-for 문을 통해 startRowNumber ~ endRowNumber 를 반복하고, i-for문에서 각 row를 반복하는 동안 startRiowNumber ~ k 까지 반복하고 j-for 문을 통해 columnNumber를 지정해주었다.
    • MultiplicationFactory.findMultiplicationItem(i, j) 함수를 이용하여 i * j = ij 형태의 곱셈식을 꺼내고 거기에 <font color=blue>, <font color=orange> 의 속성을 추가하여 짝수단의 경우 주황색, 홀수단은 파란색으로 출력되게 하였다.

4단계 : C(Controller) 역할을 하는 MultiplicationController.js 파일 만들기

  • 마지막으로 M(Model)과 V(View)의 중재 역할을 해주는 C(Controller) 역할의 MultiplicationController.js 파일을 만들었다. 
var MultiplicationController = {};

/*
    인풋값을 모델에게 주고 테이블을 얻는다.
*/
MultiplicationController.getTable = function(startRowNumber, endRowNumber, endColumNumber) {
    var startColumNumber = 1;
    var startRowNumber = Number(document.getElementById("startRowNumber").value);
    var endRowNumber = Number(document.getElementById("endRowNumber").value);
    var endColumNumber = Number(document.getElementById("endColumNumber").value);
    
    MultiplicationFactory.createMultiplicationTable(startRowNumber,endRowNumber, startColumNumber, endColumNumber);
    if (startRowNumber > endRowNumber) {
        alert("첫 번째 단이 마지막 단보다 더 작아야 합니다.");
        history.go(0);
    } else {
        MultiplicationUI.printMultiplicationTable(startRowNumber , endRowNumber, startColumNumber , endColumNumber);
    }
}
  • 인풋값 (startRowNumber, endRowNumber, endColumnNumber)을 받은 후 이를 각각 변수에 담았다. startColumnNumber의 경우 1로 고정했다. 
  • 이를 MultiplicationFactory.createMultiplicationTable() 함수에 전달해서 테이블을 만들었다. 
  • 그 후 첫 번째 단과 마지막 단에 대한 체크 진행 후 MultiplicationUI.printMultiplicationTable() 함수와 연결했다. 
728x90
저작자표시 (새창열림)

'Project' 카테고리의 다른 글

스프링 mvc로 곱셈 출력 프로그램 만들기  (0) 2021.10.26
스프링 MVC로 구구단 출력 프로그램 만들기 - 도메인(vo), JUnit 테스트  (0) 2021.10.25
자바스크립트로 빈도 top10 문자 카운터 만들기  (0) 2021.10.21
자바스크립트로 입력값 모음 개수 카운터 프로그램 만들기  (0) 2021.10.20
자바스크립트로 문자의 개수를 카운트해주는 프로그램 만들기  (0) 2021.10.19

관련글

티스토리툴바