인기포스트

ABOUT ME

Steadily

Today
Yesterday
Total
  • [ JavaScript ] 별찍기 홀수 출력 하기
    다양한 공부/JavaScript 2024. 2. 23. 14:56

    간단하게 생각해보면

     

    별 변수와 

    공백 변수를 생성하고

     

    층수에 몇개가 들어가는 지 논리 만들고

     

    코드 짜고 

    출력하면 된다.

    1. First version

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>Star Odd Number</h1>

    <script>

        // !! 별 출력되는 층수, 별, 공백 변수설정
        let floor = 5;
        let star = '*';
        let blank = '&nbsp';

        // !! 별 출력 시작
        document.write("!!! Star Start !!!");
        document.write("</br>");
        document.write("</br>");

        // !! 첫번째 구조
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < i; j++) {
                document.write(blank);
            }

            for (let k = 9; k > i * 2; k--) {
                document.write("*");
            }

            document.write("</br>"); //한 줄 출력 후 개행
        }

        document.write("</br>");
        document.write("</br>");
        document.write("!!! Star End !!!");
        // !! 별 출력 끝

    </script>
</body>

</html>

     

    2. Second version

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>Star Odd Number</h1>

    <script>

        // !! 별 출력되는 층수, 별, 공백 변수설정
        let floor = 5;
        let star = '*';
        let blank = '&nbsp';

        // !! 별 출력 시작
        document.write("!!! Star Start !!!");
        document.write("</br>");
        document.write("</br>");

        // !! 두번째 구조
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < i; j++) {
                document.write(blank);
            }

            for (let k = 0; k < (floor * 2) - (i * 2 + 1); k++) {
                document.write("*");
            }

            document.write("</br>"); //한 줄 출력 후 개행
        }

        document.write("</br>");
        document.write("</br>");
        document.write("!!! Star End !!!");
        // !! 별 출력 끝

    </script>
</body>

</html>
Designed by Tistory.

티스토리툴바