개발로드

★KDT 2024-04-01☆SpringBoot-Maven- 본문

JAVA

★KDT 2024-04-01☆SpringBoot-Maven-

위대한개발자 2024. 4. 1. 17:38

Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#get-data").click(function () {
                let data = [
                    {"name": "홍길동1", "age": 20, "img": "[[@{/images/img01.jpg}]]"},
                    {"name": "홍길동2", "age": 30, "img": "[[@{/images/img02.jpg}]]"},
                    {"name": "홍길동3", "age": 40, "img": "[[@{/images/img03.jpg}]]"}
                ];//data 배열 끝

                let content = "";
                $(data).each(function (index, item) {
                    content += "<h2>";
                    content += "<img src='" + item.img + "'>";
                    content += item.name + " : " + item.age;
                    content += "</h2>";
                });//end of data.each

                $("#result").html(content);
            });//end of get-data.click
        });//전체함수 끝
    </script>
</head>
<body>
<div id="jquery1" style="margin-top: 2px">
    <a href="#" id="get-data">자료가져오기</a>
    <hr style="margin-bottom: 10px;margin-top: 9px">
    <div id="result"></div>
</div>
<img th:src="@{/images/img01.jpg}" alt="사진" style="width:100px; height: 100px">
</body>
</html>

문서 준비 함수($(document).ready()): 

 

이 함수는 문서가 완전히 로드되고 파싱되면 실행됩니다. 이렇게 함으로써, HTML 문서의 모든 요소에 대한 조작이 안전하게 수행됩니다.



"자료가져오기" 클릭 이벤트 핸들러($("#get-data").click()): 

 

이 코드는 id가 "get-data"인 요소(보통은 버튼 또는 링크)가 클릭되면 실행됩니다. 이렇게 함으로써, 사용자가 해당 버튼을 클릭할 때마다 데이터를 가져오는 작업이 수행됩니다.



데이터 배열 선언: 

 

변수 data는 사람들의 정보를 포함하는 배열입니다. 각 요소는 이름(name), 나이(age), 이미지 경로(img)를 포함합니다.

 


데이터 배열 순회($(data).each()): 

 

$(data).each() 함수는 배열의 각 요소를 순회하며 처리를 수행합니다. 이 경우, 각 요소에 대해 이름, 나이, 이미지를 <h2> 태그로 구성된 문자열로 만들어 content 변수에 추가합니다.

 


결과 표시($("#result").html(content)): 

 

마지막으로, content 변수에 저장된 내용을 id가 "result"인 요소에 HTML 형식으로 삽입합니다. 이렇게 함으로써, 사용자가 "자료가져오기"를 클릭할 때마다 데이터가 화면에 표시됩니다.

자료가져오기 클릭 전

 

자료가져오기 클릭 후

 

 

 

 

코드 리펙토링 - 하나의 책임만 지게 하자!

<script>

    function display(data) {
        let content = "";
        $(data).each(function (index, item) {
            content += "<h2>";
            content += "<img src='" + item.img + "'>";
            content += item.name + " : " + item.age;
            content += "</h2>";
            $("#result").html(content);
        });//end of data.each
    }//end of display

    function getData() {
        let data = [
            {"name": "홍길동1", "age": 20, "img": "[[@{/images/img01.jpg}]]"},
            {"name": "홍길동2", "age": 30, "img": "[[@{/images/img02.jpg}]]"},
            {"name": "홍길동3", "age": 40, "img": "[[@{/images/img03.jpg}]]"}
        ];//data 배열 끝

        /*화면에 출력하기위한 함수 호출*/
        display(data);
    }//end of getData

    $(document).ready(function () {
        $("#get-data").click(function () {
            getData();
        });//end of get-data.click
    });//전체 함수 끝
</script>

 

display(data): 

 

이 함수는 data라는 매개변수를 받아와서 화면에 데이터를 표시하는 역할을 합니다. 이 함수가 호출되면, $(data).each() 내에서 순회하면서 각각의 데이터를 화면에 출력하게 됩니다.



getData(): 

 

이 함수는 데이터를 가져오고, 가져온 데이터를 display() 함수에 전달하여 화면에 표시하는 역할을 합니다. 데이터를 가져온 후에는 display(data)를 호출하여 데이터를 화면에 출력합니다.



$(document).ready() 내부의 클릭 이벤트 핸들러: 

 

이 부분은 문서가 준비되면 실행되는 코드를 정의합니다. 여기서는 "자료가져오기" 버튼이 클릭되면 getData() 함수를 호출합니다.



이것이 자바스크립트에서 함수 호출 관계를 나타내는 한 예입니다. 함수가 호출될 때마다 호출 스택에 해당 함수의 호출 정보가 쌓이고, 함수가 실행을 마치면 해당 정보가 스택에서 제거됩니다.

 

Javascript 버전

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let data1 = document.querySelector('#get-data');

        data1.addEventListener("click", function () {
            getData();
        })//end of data1.click
    });//전체 함수 끝

    function getData() {
        let data = [
            {"name": "홍길동1", "age": 20, "img": "[[@{/images/img01.jpg}]]"},
            {"name": "홍길동2", "age": 30, "img": "[[@{/images/img02.jpg}]]"},
            {"name": "홍길동3", "age": 40, "img": "[[@{/images/img03.jpg}]]"}
        ];//data 배열 끝

        /*화면에 출력하기위한 함수 호출*/
        display(data);
    }//end of getData

    function display(data) {
        let content = "";
        for(let i=0;i<data.length;i++){
            content += "<h2>";
            content += "<img src='" + data[i].img + "'>";
            content += data[i].name + " : " + data[i].age;
            content += "</h2>";
            document.querySelector('#result').innerHTML = content;
        }//end of for
    }//end of display


</script>

 

여유가 되신다면 제 GitHub에 오셔서 좋은 코드들을 구경해주세요!

 

https://github.com/gimpo5975?tab=repositories

 

gimpo5975 - Overview

gimpo5975 has 6 repositories available. Follow their code on GitHub.

github.com

 

'JAVA' 카테고리의 다른 글

★KDT 2024-04-02☆SpringBoot-Maven-Restful,JPA,@RestController  (0) 2024.04.02
☆KDT 2024-04-01★SpringBoot-Maven-회원CRUD  (0) 2024.04.01
☆KDT 2024-04-01★SpringBoot-Maven-MyBatis  (0) 2024.04.01
★KDT 2024-03-26☆SpringBoot-Maven-Model, 바인딩, textContent()  (0) 2024.03.28
☆KDT 2024-03-21★SpringBoot-Maven-Mapper,@Service,@Repository  (0) 2024.03.27
'JAVA' Related Articles more