[js] 7. 반복문

Sep 05, 2024


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border: 1px solid black;
            padding: 10px;
        }

        .card {
            border: 1px solid lightgray;
            box-shadow: 0 4px 4px 0 grey;
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h1>반복문으로 리스트 만들기</h1>
    <button onclick="render()">render</button>
    <div class="box" id="outerBox">
    </div>
    <script>
        function render() {
            let el = document.querySelector("#outerBox");
            for (let i = 1; i < 5; i++) {
                el.append(makeCard(i));
            }
        }
        function makeCard(id) {
            let card = document.createElement("div");
            card.setAttribute("class", "card");
            card.setAttribute("id", "card-" + id);
            card.innerHTML = `
<h3>제목${id} 입니다</h3>
<p>내용${id} 입니다</p>
<button onclick="del(${id})">삭제</button>
`;
            return card;
        }
        function del(id) {
            let el = document.querySelector("#card-" + id);
            el.remove();
        }
    </script>
</body>

</html>


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border: 1px solid black;
            padding: 10px;
        }

        .card {
            border: 1px solid lightgray;
            box-shadow: 0 4px 4px 0 grey;
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1>반복문으로 리스트 만들기</h1>
    <button onclick="render()">render</button>
    <div class="box" id="outerBox">
    </div>
    <script>
        // 1. 그림그리기
        function render() {
            for (let i = 1; i < 5; i++) {
                $("#outerBox").append(makeCard(i));
            }
        }
        // 2. DOM 만들기
        function makeCard(id) {
            return `<div id="card-${id}" class="card">
                        <h3>제목${id} 입니다</h3>
                        <p>내용${id} 입니다</p>
                        <button onclick="del(${id})">삭제</button>
                    </div>`;
        }
        function del(id) {
            $(`#card-${id}`).remove();
        }
    </script>
</body>

</html>

이런식으로도 쓴다. for(board of boardlist) {}

boardlist.forEach(function(board, index) { console.log(${index}: ${board}); });

let i = 0; while (i < 10) { console.log(i); i++; }

let i = 0; do { console.log(i); i++; } while (i < 10);