웹프로그래밍 6일차

yoonmiring·2022년 6월 8일
0

web_programing

목록 보기
9/13

실습1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body>
    <script>
        function loadData() {
            fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json => {
                $('#list').append(`<li>${json.title}</li>`)
            });
        }
    </script>
    <button onclick="loadData()">데이터 로드</button>
    <ul id="list">
        <li>여기</li>
    </ul>
</body>
</html>

결과화면


실습2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body onload="loadData()">
    <script>
        function loadData() {
            fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json => {
                $('#list').append(`<li>${json.title}</li>`)
            });
        }
    </script>
    <ul id="list">
        <li>여기</li>
    </ul>
</body>
</html>

결과화면

실습3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body onload="loadData()">
    <script>
        function loadData() {
            fetch('https://jsonplaceholder.typicode.com/todos/')
            .then(response => response.json())
            .then(jsonArray => {
                let $list = $('#list');
                jsonArray.forEach((data ,i) => {
                    $list.append(`<li>${i} : ${data.title}</li>`)
                })
                console.log(jsonArray);
            });
        }

    </script>
    <ul id="list">

    </ul>
</body>
</html>

결과화면

실습4(첫 화면 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <style>
        .card {
        /* Add shadows to create the "card" effect */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        margin-bottom: 10px;
        width: 600px;
        }

        /* On mouse-over, add a deeper shadow */
        .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }

        /* Add some padding inside the card container */
        .container {
        padding: 2px 16px;
        }
    </style>
</head>
<body onload="loadData()">
    <script>
        function moveCommentsPage(userId){
            console.log(userId);
            //페이지 이동
            document.location.href = `exam4_comments.html?id=${userId}`;
        }
        function loadData() {
            fetch('https://jsonplaceholder.typicode.com/posts/')
            .then(response => response.json())
            .then(jsonArray => {
                let $list = $('#list');
                jsonArray.forEach((data ,i) => {
                    $list.append(`<div class="card"token interpolation">${data.id})">
                                    <div class="container">
                                    <h4><b>${data.title}</b></h4>
                                    <p>${data.body}</p>
                                    </div>
                                </div>`);
                })
                console.log(jsonArray);
            });
        }

    </script>
    <div id="list">

        <!-- <div class="card">
            <div class="container">
                <h4><b>John Doe</b></h4>
                <p>Architect & Engineer</p>
            </div>
        </div> -->


    </div>
</body>
</html>

결과화면


코멘트 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body>
    <script>
        $(function(){
            const queryString = window.location.search; //url 뒤 ? 부터 (ex : '?id =1')
            const urlParams = new URLSearchParams(queryString);
            const id = urlParams.get('id');
            console.log(id);

            loadData(id);
        });
        function loadData(id) {
            fetch(`https://jsonplaceholder.typicode.com/comments?postId=${id}`)
            .then(response => response.json())
            .then(jsonArray => {
                let $list = $('#list');
                jsonArray.forEach((data ,i) => {
                    $list.append(`<li>${data.body}</li>`);
                })
                console.log(jsonArray);
            });
        }

    </script>
    <h1>댓글</h1>
    <ul id="list">

    </ul>
</body>
</html>

결과화면

실습5(영화페이지 구현)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body onload="loadData()">
    <style>

        /* Add some padding inside the card container */
        .container {
            font-size: large;
            padding: 2px 16px;
            text-align: center;
            color: white;
        }

        img {
            border-radius: 20px 20px 20px 20px;  
        }
        img:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        } 

        table,
        th,
        td {
            background-color: #466093;
           
        }
    </style>
    <script>

        function loadData() {
            fetch('https://api.themoviedb.org/3/movie/upcoming?api_key=a64533e7ece6c72731da47c9c8bc691f&language=ko-KR&page=1')
            .then(response => response.json())
            .then(movieArray => {
                let $movies = $('#movies');
                movieArray.results.forEach((data ,idx) => {

                    if(idx % 3 == 0){
                        $movies.append('<tr>');
                    }
                    $movies.append(`<td class="card">
                                    <img src="https://image.tmdb.org/t/p/w500${data.poster_path}" alt="poster" style="width:100%">
                                        <div class="container">
                                            <h4><b>${data.title}</b></h4>
                                        </div>
                                    </td>`);
                if((idx + 1) % 3 == 0){
                    $movies.append('</tr>')
                }
            });
        })
    }

    </script>
    <table id="movies"></table>
</body>
</html>

결과화면

실습6 (상세페이지 구현)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</head>
<body>
    <style>
        #oneMovie {
            width: 60%;
            padding: 2%;
            border: 2px black solid;
            border-radius: 5%;
        }
        #title{
            font-size: xx-large;
            color: brown;
        }
        #poster{
            width: 70%;
        }
        #box{
            position: relative;
            background-color: rgb(255, 204, 255);
            width: 50px;
            border-radius: 10px 10px 10px 10px;  
            margin: 10px;
            padding: 10px;
        }
    </style>
    <script>
        $(function(){
            const queryString = window.location.search; //url 뒤 ? 부터 (ex : '?id =1')
            const urlParams = new URLSearchParams(queryString);
            const id = urlParams.get('id');
            console.log(id);

            loadData(id);
        });
        function loadData(id) {
            fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=a64533e7ece6c72731da47c9c8bc691f&language=ko-KR&page=1`)
            .then(response => response.json())
            .then(movie => {
                $('#movieDetail').append(` <table id="oneMovie">
                                                            <tr>
                                                                <td id="title" colspan="2">${movie.title}</td>
                                                            </tr>
                                                            <tr>
                                                                <td id="poster"> <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="poster"> </td>
                                                                <td> 
                                                                    <div>개봉일 : ${movie.release_date} </div> <br>
                                                                     <div id="box"> √ ${movie.vote_count}</div> 
                                                                     <div id="box"> ★ ${movie.vote_average} </div>
                                                                </td>
                                                            </tr>
    
                                                            <tr>
                                                                <td colspan="2">${movie.overview}</td>
                                                            </tr>
                                                        </table>`);
            });
        }

    </script>
    <div id = "movieDetail"></div>

</body>
</html>

결과화면

profile
yoonmiring
Yoon_ministop
이전 포스트

웹 프로그래밍 5일차

다음 포스트

jsp 웹 프로그래밍 1일차

0개의 댓글