본문 바로가기
HTML, JAVASCRIPT

javascript - for문을 활용하여 트리 만들기

by 스노위13 2022. 6. 14.

*로 삼각형과 트리 만드는 문제는 잊을만하면 다시 돌아오는 것 같다ㅋㅋㅋ 나중에 JSTL 배울 때도 또 만들었다는거... 끝냈다 싶으면 끝없이 살아 돌아오는 트리를 만들어 보자. 

트리를 만들기 전에 더 쉬운 for문 문제를 풀고 싶다면 구구단을 표에 넣는 것부터 먼저 해보자. 아래 링크를 통해가면 볼 수 있다.

구구단 표에 넣기 

그러면 이제 *로 트리를 만들어 보자. 먼저 출력결과는 아래와 같다.

(사실 트리라기보다는 직각삼각형과 역직각삼각형 그리고 정삼각형이라고 부르는 것이 더 정확할 것 같다. )

어쨌든 위와 같은 출력결과를 위해 하드코딩을 한 내용은 아래 더보기를 누르면 확인할 수 있다. 

더보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*<br>
**<br>
***<br>
****<br>
*****<br>
 
<hr><hr><hr>
 
&nbsp;&nbsp;*****<br>
&nbsp;&nbsp;&nbsp;&nbsp;****<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*<br>
 
<hr><hr><hr>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*****<br>
&nbsp;&nbsp;&nbsp;&nbsp;*******<br>
&nbsp;&nbsp;*********<br>
 
cs

그렇다면 위의 하드코딩한 내용을 보면서 이것을 for문으로 바꾸어보자.
결과는 아래와 같다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<%
    int line = 5;
    String tree = "*";
    //1번
    for(int i = 0 ; i < line; i++){
        out.print(tree + "<br>");
        tree+="*";
    }
    out.print("<hr><hr><hr>");
    //2번
    tree = "*";
    String blank = "&nbsp;&nbsp;";
    for (int i = 0; i < line; i++) {
        out.print(blank);
        for (int j = line - i; j > 0; j--) {
            out.print(tree);
        }
        blank+="&nbsp;&nbsp;";
        out.print("<br>");
    }
    out.print("<hr><hr><hr>");
    //3번
    tree = "*";
    for (int i = 0; i < line; i++) {
        for (int j = (line - 1- i; j > 0; j--) {
            out.print("&nbsp;&nbsp;");
        }
        out.print(tree + "<br>");
        tree += "**";
    }
    
%>
cs


사실 자바에서 해봤던 내용이기 때문에 크게 어렵지는 않았는데 나중에 또 forEach로 만드려니 살짝 헷갈렸음... forEach문을 열심히 공부해야겠다.

댓글