[CSS 기초] Level 2

hhhhy 2023. 8. 5. 14:38

Javascript 시작하기

split : 문자열 자르기

📍 문자열.split('구분할인자')
email.split('@')  //결과는 ['abc', 'gmail.com']

2. indexOf : 문자열 자리 찾기

 📍문자열.indexOf('찾을문자열')
email.indexOf('a')  //결과는 0  //0부터 시작합니다!

Javascript 복습하기

“@”이 없는 이메일 (이메일을 잘못 입력한 사람 찾기)

let users = [
    {'name':'영희', 'email':"young@gamil.com"},
    {'name':'영숙', 'email':"suk@naver.com"},
    {'name':'민수', 'email':"minsu.gmail.com"},
    {'name':'형준', 'email':"jun@naver,com"},
    {'name':'철수', 'email':"su.gmail.com"},
    {'name':'동희', 'email':"dongdong@daum.net"},
]

for(let i=0; i<users.length; i++) {
    if(users[i]['email'].includes('@') == false) {
        console.log(users[i]['name']);
    }}  // 민수, 철수

jQuery 시작하기

JQuery : 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
장점
- 코드의 가독성이 좋음
- 자바스크립트를 모두 알 필요 없이도 웹 사이트 제작을 용이하게 해줌
JQuery 사용법 : JQuery 사용을 선언 ⇒ 이름표 붙이기 ⇒ 이름을 가리키고, 원하는 동작 입력!

fetch 시작하기

fetch 사용법 : fetch 기본 골격 작성 ⇒ 호출할 정보를 가져올 파일경로(또는 URL경로) 작성 ⇒ 호출 성공하면 불러올 정보 조건 작성!
Json 형식 : 데이터 주고 받을 때 쓰는 딕셔너리 형태(key:value가 핵심!)의 데이터 구조

fetch 기본골격

fetch("경로").then(res => res.json()).then((data) => {
    console.log(data);
});

fetch 복습하기

let cnt = 0;

function movieReviews() {

let url = 'http://spartacodingclub.shop/post'

fetch(url).then(res => res.json()).then((data) => {

let rows = data['articles'];

let image = rows[cnt]['image'];

let title = rows[cnt]['title'];

let comment = rows[cnt]['comment'];

$('#moviesPic').attr('src',image);

$('#movieTitle').text(title);

$('#movieComment').text(comment);

cnt = cnt + 1

});

}

</script>

JS & Jquery & Fetch

Netflix 클론코딩

<!-- netflex.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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>넷플릭스 - 따라만들기</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        body,
        h1,
        h2,
        h3,
        p,
        a {
            font-weight: normal;
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        body {
            background-color: black;
        }

        .gnb {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .gnb>a {
            margin: 0px 40px;
            color: white;
        }

        .gnb>a:hover {
            color: gray;
        }

        .gnb>a:last-child {
            margin-right: auto;
        }

        .main {
            color: white;
            padding: 20px;
        }

        .main>p {
            margin-top: 40px;
            margin-bottom: 10px;
            font-size: 20px;
        }

        .today {
            background-image: url(https://image.tmdb.org/t/p/w500/nHf61UzkfFno5X1ofIhugCPus2R.jpg);
            background-position: center;
            background-size: cover;

            height: 250px;
            padding: 50px;
            font-size: 32px;
            cursor: pointer;
        }

        .top>img {
            margin: 2px;
            cursor: pointer;
        }

        .top>img:hover {
            width: 210px;
            margin: 10px;

        }

        .recommend>img {
            margin: 2px;
            cursor: pointer;
        }

        .recommend>img:hover {
            width: 210px;
            margin: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            movie()
        });

        function movie() {
            let base_url = "https://image.tmdb.org/t/p/w500"
            let url = 'https://api.themoviedb.org/3/movie/popular?api_key=127d1ec8dfd28bfe9f6b8d15f689cdd4&language=ko-KR&page=1'

            fetch(url).then(res => res.json()).then((data) => {
                let movies = data['results']

                // 오늘의 영화
                let rans = Math.floor(Math.random() * 10)
                // 📍 0~1 사이에서 랜덤으로 나오는데, * 10하고 소수점 버리면 0~9 나옴
                let today_movie = movies[rans]
                let today_img = base_url + today_movie['backdrop_path']
                let today_title = today_movie['title']

                $('#today').css('background-image', `url('${today_img}')`)
                $('#today > h1').text(today_title)

                // top10 영화
                for (let i = 0; i < 10; i++) {
                    let top_movie = movies[i]
                    let top_img = base_url + top_movie['poster_path']

                    let temp_html = `<img width="200" src="${top_img}">`
                    $('#top').append(temp_html)
                }

                // 추천 영화
                for (let i = 0; i < movies.length; i++) {
                    let recommend_movie = movies[i]
                    let recommend_img = base_url + recommend_movie['poster_path']

                    if (recommend_movie['vote_average'] > 7.5) {
                        let temp_html = `<img width="200" src="${recommend_img}">`
                        $('#recommend').append(temp_html)
                    }

                }
            });

        }
    </script>
</head>

<body>
    <div class="gnb">
        <img width="130"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Logonetflix.png/1200px-Logonetflix.png">
        <a href="#">홈</a>
        <a href="#">TV프로그램</a>
        <a href="#">영화</a>
        <a href="#">내가 찜한 콘텐츠</a>
    </div>
    <div class="main">
        <p>오늘의 영화</p>
        <div id="today" class="today">
            <h1>토르: 러브 앤 썬더</h1>
        </div>
        <p>오늘 한국의 Top 10 영화</p>
        <div id="top" class="top">
        </div>
        <p>오늘 한국의 추천 영화</p>
        <div id="recommend" class="recommend">
        </div>
    </div>
</body>

</html>