구구단, 테이블 만들기

오늘은 통으로 외우기만 했던 구구단과 테이블을 파헤쳐 보려고 한다!

 

구구단

//구구단 
 
for(let i=2; i<=9; i++){
    document.write( i + "" ," <br>");

    for (let j=1; j<=9; j++){
        document.write( i + "*" + j + "=" + i * j + "    ");
    }
}

1.

구구단은 반복형이기 때문에 반복문 중 for 반복문을 사용한다. 

i를 2부터 9까지 반복하는 것이  우선

• 구구단은 2단부터 시작이기 때문에 초기식을 2(i=2;)로 설정해주고 9단까지만 반복할 것이기 때문에 조건을 9(i<=9;)로 적용해준다.
• 2단, 3단, 4단 ... 이런 형식으로 1씩 증가해야함으로 증가감에는 +1을 적용해준다. (i++)

=> 2단, 3단, 4단 ... 9단 까지 반복할 준비가 완료되었다.

 

2.

• 이제 1번 for문 안에 구구단의 " 2 x 1 " 처럼 곱셈을 수행해줄 반복문을 작성해야한다.
• 2단의 2, 3단의 3은 i이기 때문에 이번 반복문에서는 뒷자리의 1부터 9까지의 수를 반복해주어야한다. i라는 변수는 이미 사용했기 때문에 i 대신 j로 반복문을 작성해준다.
• 1부터 9까지 곱셈을 할 것이기 때문에 초기값은 1(j=1;) 조건식은 (j<=9;) 증가감은 +1(j++)로 작성해준다.
• 실행문을 써주는데 ""안에 있는 것은 문자열이고 띄어쓰기를 위한 빈칸이거나 곱셈을 의미하는 기호이다.
• 1번에서 작성해주었던 i(단)과 j(곱해야할 수)를 곱해야하기 때문에 i * j를 넣어주서 실행문을 작성한다.
• i + "*" + j "=" + i*j+""
• 구구단 끝!

---

테이블

let table = "<table border = '1'>";
    for(let i=1; i<=5; i++){
        table += "<tr>";

        for(let j=1; j<=5; j++){
            table += "<td>" + j + "</td>";
        }
    }
        table += "</tr>";
    table+="</table>";
document.write(table);

table border => 표 테두리

1.

table이라는 변수를 먼저 선언하고 table border 로 테두리를 만들어준다. 이때 1은 선의 크기이자 border의 속성이다.

첫번째 for문은 tr태그를 5번 반복하기 위한 식으로 table += "<tr>"이 실행문이 된다. 

 

2. 

두번째 for문은 마찬가지로 td태그를 5번 반복하기 위한 식이다. 이 때 td사이에 j를 넣었기 때문에 칸 안에는 j의 값이 출력된다.

첫번째와 두번째 식이 끝났다면 마지막에 /tr을 사용하여 코드를 완성해주고 table이라는 태그를 열었기 때문에 닫아준 뒤

출력문 document.write(table); 코드를 사용해준다.

 

▶︎테이블 만드는 식에서 for반복문을 사용하는 tr과 td가 매번 반복되기 때문이다.

아래와 같은 식을 좀 더 간결하게 쓰기 위해 for반복문을 사용하는 것이므로 아래와 같은 코드를 작성한다고 생각해주면 좋다.

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>