on
자바스크립트 MVC 형태로 구구단 출력 프로그램 만들기
자바스크립트 MVC 형태로 구구단 출력 프로그램 만들기
728x90
메인화면 결과화면
첫 단, 마지막 단, 마지막 곱할 수 를 입력하는 칸을 만들고 계산하기 버튼을 만든다.
를 입력하는 칸을 만들고 계산하기 버튼을 만든다. 첫 단 은 구구단의 시작단이 되고, 마지막 단 은 구구단의 마지막 끝나는 단이된다.
은 구구단의 시작단이 되고, 은 구구단의 마지막 끝나는 단이된다. 첫 단 이 2일 때 2 * 1 = 2 부터 시작되게 되고 마지막 곱할 수 에 입력된 값까지의 곱을 출력한다.
이 2일 때 2 * 1 = 2 부터 시작되게 되고 에 입력된 값까지의 곱을 출력한다. 전체 출력 화면의 경우 2단/2단,3단/2단,3단,4단.. 등의 형태로 직각삼각형 모양으로 출력한다.
짝수단의 경우 주황색, 홀수단의 경우 파란색으로 출력한다.
1단계 : Multiplication.html 파일 만들기
이번 자바스크립트 MVC 형태로 구구단 출력 프로그램 만들기 프로젝트는 M(Model), V(View), C(Controller) 를 분리해서 진행할 것이므로 모든 파일을 나눠두기로 하였다.
그 중 우선 html 파일을 만든다.
구구단 만들기_ver2 첫 단 : 마지막 단 : 마지막 곱할 수 :
사용한 태그
구구단 만들기 컨트롤러로 사용할 MultiplicationController.js 파일과 모델로 사용할 MultiplicationFactory.js, 뷰로 사용할 MultiplicationUI.js 파일을
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]; }
처음부터 구구단 테이블을 만든다! 라고 접근을 하니 너무 막막하였다. 그래서 이를 쪼개서 생각해보기로 했고, 순차적으로 진행하였다. createMultiplicationOperation(rowNumber, columnNumber) - 곱셈 연산식을 만드는 함수 구구단은 곱셈 연산식으로 이루어진 것이기 때문에 우선 rowNumber, columnNumber 가 매개변수로 입력되었을 때 이를 rowNumber * columnNumber = result 의 형태로 만들어주었고, 이를 operation 이라는 배열에 담았다. createMultiplicationRow( rowNumber , startColumNumber , endColumNumber ) - 곱셈 테이블의 행을 만드는 함수(한 단을 만드는 함수) 곱한 값을 각 단별로 나눠주기 위해 한 단을 만드는 함수를 생각해내었다. 이는 같은 rowNumber 에서 startColumnNumber ~ endColumnNumber 까지의 곱으로 나타낼 수 있다. 이를 위해 multiplyRow 배열을 선언하고 startColumnNumber 값의 인덱스에 createMultiplicationOperation() 함수를 호출한 값을 넣어주었다. createMultiplicationTable(startRowNumber, endRowNumber, startColumnNumber, endColumnNumber) - 곱셈 테이블을 만드는 함수 한 단씩 만들어둔 곱셈 테이블의 행을 열로 배열하여 테이블 형태로 만들기 위해 createMultiplicationTable() 함수를 생각하였다. startRowNumber ~ endRowNumber 까지의 인덱스에 createMultiplicationRow() 함수로 만들어진 한 단의 곱셈 테이블을 넣어 행렬 형태로 이차 배열을 완성하였다. multiplicationTable 변수의 경우 하나의 곱셈식을 찾는 findMultiplicationItem() 함수에서도 사용할 것이므로 MultiplicationFactory.multiplicationTable = []; 의 객체 형태로 선언해주었다. 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(""); document.write(""); for (k = startRowNumber; k <= endRowNumber; k++) { for (i = startRowNumber; i <= k; i++) { document.write(""); for (j = startColumNumber; j <= endColumNumber; j++) { var color = (i % 2 == 1) ? "" : ""; var resultText = MultiplicationFactory.findMultiplicationItem(i, j); // resultText는 하나의 아이템 document.write(color + resultText + ""); } document.write(""); } document.write(""); } document.write(""); }
인풋값 ( 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 형태의 곱셈식을 꺼내고 거기에 , 의 속성을 추가하여 짝수단의 경우 주황색, 홀수단은 파란색으로 출력되게 하였다.
를 반복하고, i-for문에서 각 row를 반복하는 동안 까지 반복하고 j-for 문을 통해 columnNumber를 지정해주었다.
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로 고정했다.
)을 받은 후 이를 각각 변수에 담았다. 의 경우 1로 고정했다. 이를 MultiplicationFactory.createMultiplicationTable() 함수에 전달해서 테이블을 만들었다.
함수에 전달해서 테이블을 만들었다. 그 후 첫 번째 단과 마지막 단에 대한 체크 진행 후 MultiplicationUI.printMultiplicationTable() 함수와 연결했다.
728x90
from http://ele-code.tistory.com/37 by ccl(A) rewrite - 2021-10-22 10:02:10