구구단 출력 프로젝트 04 - 뷰(View) 출력방식 수정

• 기존의 뷰(View)에서는 3중 for문을 이용하여 직각삼각형 모양의 화면을 만들어내었다.

 

• 기존의 소스에서는 3중의 for문을 반복하면서 위의 형태로 구구단을 출력해주는 형태였다.
  • 우선 세로줄을 만들어주고
  • 가로줄을 반복적으로 채워주고
  • 한 칸을 채워주는 방식으로 진행되었다.

var src = "<table border=1>";
for (i = firstTimesNumber; i < value.length; i++) { // 첫번째 단 ~ 마지막 단 까지 출력(세로방향)
    src += "<tr>";

    for (k = firstTimesNumber; k <= i; k++) { // 한 줄 당 첫번째 단 ~ i 단 까지 출력(가로방향)
        src += "<td>";

        for (j = 1; j < value[i].length; j++) { // [2][1] -> 2 * 1 = 2 ... 출력
        var color = (k % 2 == 1) ? "<font color=blue>" : "<font color=orange>";
        src += color + value[k][j] + "<br>";

        }
        src += "</td>";
    }
    src += "</tr>";

}
src += "</table>";

 

• 이 방식의 소스에서 for 문 하나를 제거하고 임시변수 temp를 사용하는 방식으로 변경해보았다.

var temp = "";
var src = "<table border=1>";
for (i = firstTimesNumber; i < value.length; i++) { // 첫번째 단 ~ 마지막 단 까지 출력(세로방향)
	src += "<tr>";
    temp += "<td>";
    for (j = 1; j < value[i].length; j++) { // [2][1] -> 2 * 1 = 2 ... 출력
      var color = (i % 2 == 1) ? "<font color=blue>" : "<font color=orange>";
      temp += color + value[i][j] + "<br>";
    }
    temp += "</td>";

    src += temp;
    src += "</tr>";

}
src += "</table>";

• 가로줄을 반복적으로 채워주는 부분이었던 k-for문을 제거하고 이를 임시변수로 만들어보았다.
• 2단 ~ 5단까지 반복한다고 가정할 때 과정은 다음과 같다.
  1.  i값 -> 2 
  2.  2단을 temp에 저장하고 j-for 문을 나간다.
  3.  src에 temp 저장 -> 2단
  4.  i값 증가 -> 3
  5.  2단이 저장되어있는 temp에 3단을 추가적으로 저장하고 j-for 문을 나간다. 
  6.  src에 temp 저장 -> 2단, 3단
  7.  i값 증가 -> 4
  8.  2단과 3단이 저장되어있는 temp에 4단을 추가적으로 저장하고 j-for 문을 나간다.
  9.  src에 temp 저장 -> 2단, 3단, 4단
  10.  i값 증가 -> 5
  11.  2단, 3단, 4단이 저장되어 있는 temp에 5단을 추가적으로 저장하고 j-for 문을 나간다.
  12.  src에 temp 저장 -> 2단, 3단, 4단, 5단
  13.  i값 증가 -> 6 => 조건 false => i-for 문을 나간다.
• src를 $().html(src) 형태로 출력할 경우 3번, 6번, 9번, 12번의 값이 출력이 되게 되고 3중 for문을 반복했을 때와 같은 방식으로 출력되는 것을 확인할 수 있다.