공부의 기록/자바 풀 스택 : 수업내용정리

자바 풀 스택 12/6 오후 기록 012-2

파티피플지선 2024. 12. 6. 17:55

<14:30 5교시>

입력 예제 더 편리하게 만들기

 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document3 CreateElement 예제</title>
</head>
<body>
    <div class="container">
        <input type="text" id="inputMsg" placeholder="메시지 입력...">
        <button id="addBtn">추가</button>
        <ul id="msgList">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            <li>Saepe sed explicabo illo optio?</li>
        </ul>
    </div>
    <script>
        (function(){//함수를 글로벌 영역에서 만들자마자 호출하는 방법
    
            function addText(){
            //1. 입력한 메시지 읽어오기
            const msg = document.querySelector("#inputMsg").value
            //2. li요소를 만들어서 새로 만든 li요소의 참조값이 만들어짐
            const li= document.createElement("li")
            //3. li 요소에 입력한 메시지를 innerText로 추가하고
            li.innerText = msg;
            //4.ul의 자식요소로 추가하기
            document.querySelector("#msgList").append(li);
            //5. input 요소의 value에 빈문자열 대열
            document.querySelector("#inputMsg").value = ""

        }

        })
   
        document.querySelector("#inputMsg").addEventListener("keydown", function(e){
           if(e.key == "Enter"){
           addText();
           }
        })


        document.querySelector("#addBtn").addEventListener("click", function(){
            //1. 입력한 메시지 읽어오기
            const msg = document.querySelector("#inputMsg").value
            //2. li요소를 만들어서 새로 만든 li요소의 참조값이 만들어짐
            const li= document.createElement("li")
            //3. li 요소에 입력한 메시지를 innerText로 추가하고
            li.innerText = msg;
            //4.ul의 자식요소로 추가하기
            document.querySelector("#msgList").append(li);
            //5. input 요소의 value에 빈문자열 대열
            document.querySelector("#inputMsg").value = ""

        })


    </script>
</body>
</html>

json javascript object notation의 약자로 쓰일 정도로 json 문자열이 가지는 형식이 독특하고 유용하고 체계적이어서 어플리케이션에서 바로 활용할 수 있는 형태로 쉽게 바꿀 수 있음(JSON.parse(json 형식의 문자열을 넣어주면 됨).

 

 

 

<15:30 6교시 수업>

JSON을 이용한 예제

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json.html</title>
</head>
<body>
    <h1>json 문자열 사용해 보기</h1>
    <button id="printBtn">출력하기</button>

    <h2>회원정보</h2>
    <p>
        번호 : <strong id="num"></strong>
        이름 : <strong id="name"></strong>
        주소 : <strong id="addr"></strong>
    </p>

    <h2>좋아하는 음식목록</h2>
    <ul>

    </ul>
    <script>
        const json = `{"num":1, "name":"김구라", "addr":"노량진"}`;
        const json2 = `["떡복기", "라면", "김밥"]`;

        document.querySelector("#printBtn").addEventListener("click", function(){
            // json 문자열을 object 로 변환
            const mem = JSON.parse(json);
            const foods = JSON.parse(json2);

            document.querySelector("#num").innerText = mem.num;
            document.querySelector("#name").innerText = mem.name;
            document.querySelector("#addr").innerText = mem.addr;

            //반복문 돌면서 
            for(let i=0; i<foods.length; i++){
                // li 요소를 만들어서 
                const li = document.createElement("li");
                // i 번째에 저장된 문자열로 innerText 를 출력하고
                li.innerText = foods[i];
                // ul 에 li 를 추가하기
                document.querySelector("ul").append(li);
            }

        });
    </script>
</body>
</html>

 

 

for 문과 while 문

반복 횟수가 결정된 반복문 : for 문 사용 

반복 횟수가 결정되지 않은 반복문 : while 문 사용

while문도 반복횟수가 결정되었다면 그 형태가 for문과 유사한데, for문하고 다른 점은, while문으로 유한한 반복횟수 진행 후 i가 증발되지 않고 살아있다는 것이다. 무한한 반복횟수를 진행해야 한다면 break를 걸어서 반복문을 빠져나오는것을 도와줘야 한다.

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while 예제</title>
</head>
<body>
    <script>
        //간단한 while 문 테스트
        let i=0;

        while(i<10){
            //while 옆 소괄호 안쪽이 true이면 while 문이 무한루프를 돌리고 컴퓨터는 다운될 수 있다.
            console.log(i);
            i++;
        }

        let count=0;
        while(true){
            console.log("무언가를 작업 중입니다!")
            count++;
            if(count==5) {
                break;// 반복문에서 빠져 나오기
        }}

    </script>
</body>
</html>

 

<17:30 7교시 수업>

https://koreanjson.com/ 활용한 JSON 데이터 받아오기

 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json2.html</title>
    <style>
        td{
            max-width: 500px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h1>json 문자열 활용</h1>
    <button id="getBtn">글 받아오기</button>
    <h2>글정보</h2>
    <div class="wrapper">
        <table border="1">
            <colgroup>
                <col width="100">
                <col width="500">
                <col width="200">
            </colgroup>
            <thead>
                <tr>
                    <th>아이디</th>
                    <th>제목</th>
                    <th>작성일</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        document.querySelector("#getBtn").addEventListener("click", function(){
            fetch("https://koreanjson.com/posts/1")
            .then(function(res){
                return res.json();
            })
            .then(function(data){
                // data 는 글 하나의 정보를 가지고 있는 object 이다.
                console.log(data);
                //글정보를 이용해서 tr 문자열을 구성한다.
                const tr = `
                    <tr>
                        <td>${data.id}</td>
                        <td>${data.title}</td>
                        <td>${data.createdAt}</td>
                    </tr>
                `;
                // tbody 에 html 로 해석되게끔 넣어준다.
                document.querySelector("tbody").innerHTML=tr;

            });
        });
    </script>
</body>
</html>

 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json2.html</title>
    <style>
        td{
            max-width: 500px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h1>json 문자열 활용</h1>
    <button id="getBtn">글 받아오기</button>
    <h2>글정보</h2>
    <div class="wrapper">
        <table border="1">
            <colgroup>
                <col width="100">
                <col width="500">
                <col width="200">
            </colgroup>
            <thead>
                <tr>
                    <th>아이디</th>
                    <th>제목</th>
                    <th>작성일</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        let id=0;
       
   
        document.querySelector("#getBtn").addEventListener("click", function(){
            id++
            fetch("https://koreanjson.com/posts/"+id)
            .then(function(res){
                return res.json();
            })
            .then(function(data){
                // data 는 글 하나의 정보를 가지고 있는 object 이다.
                console.log(data);
                //글정보를 이용해서 tr 문자열을 구성한다.
                const tr = `
                    <tr>
                        <td>${data.id}</td>
                        <td>${data.title}</td>
                        <td>${data.createdAt}</td>
                    </tr>
                `;
                // tbody 에 html 로 해석되게끔 넣어준다.
                //document.querySelector("tbody").innerHTML=tr;
                document.querySelector("tbody").insertAdjacentHTML("beforeend",tr);
            });

           /*
            for(i=0;i<posts.length;i++){
                let posts =[]
                posts[i].push(post)
                document.querySelector("tbody").insertAdjacentHTML=tr;
            }
*/
        });
    </script>
</body>
</html>

 

<8교시 자습시간 오늘 수업에 대한 반성>

지극히 개인적인 이유 때문에 수업들으면서 눈물 질질짜면서 계속 폰으로 연락돌리면서 위로받으면서 간신히 진도 따라감..

내일은 죽었다 생각하고 오늘 못따라간거 그냥 외운다 생각하고 일단 한번 생각하면서 따라서 코드 짜고, 그 다음에 생각하면서 안 보고 스스로 짜고, 오늘도 남은시간이라도 열심히 하다가 가고 집에 가는 길에도 코드 한 번 더 보고 그래야지..

'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글

자바 풀 스택 12/9 오후 기록 013-2  (1) 2024.12.09
자바 풀 스택 12/9 오전 기록 013-1  (1) 2024.12.09
자바 풀 스택 12/6 오전 기록 012-1  (1) 2024.12.06
자바 풀 스택 12/5 오후 기록 011-2  (1) 2024.12.05
자바 풀 스택 12/5 오전 기록 011-1  (0) 2024.12.05

'공부의 기록/자바 풀 스택 : 수업내용정리'의 다른글

  • 현재글자바 풀 스택 12/6 오후 기록 012-2

관련글

티스토리툴바