[JS] Level3 7-11강

ByeolGyu·2024년 6월 23일

목록 보기

8/17

✔ array, for 반복문 문제 (7강)

1. Array에서 데이터 찾기

<script> 
        var 출석부 = ['흥민', '흥민', '영희', '철수', '재석'];
        
        function find(name) {
            var found = false;
            출석부.forEach(function(nameList){
                if(name === nameList){
                    found = true;
                } 
            });

            if(found){
                console.log("있음");
            } else {
                console.log("없음");
            }
        } 

        find("흥민");   // 있음
        find("메롱");   // 없음
    </script>

<script>
        // 1번 다른 방법
        var 출석부 = ['흥민', '흥민', '영희', '철수', '재석'];

        function find(name){
            for(let i=0; i<출석부.length; i++){
                if(name == 출석부[i]){
                    console.log("있음");
                    return;
                } 
            } console.log("없음");
        }
        find("흥민");   // 있음
        find("메롱");   // 없음
    </script>

    <script>
        // 2번 문제 : 구구단 출력
        for(let i=2; i<=9; i++){
            for(let j=1; j<9; j++){
                console.log(`${i} * ${j} = ${i*j}`);
            }
        }
    </script>

2. 구구단 출력

    <script>
        // 2번 문제 : 구구단 출력
        for(let i=2; i<=9; i++){
            for(let j=1; j<9; j++){
                console.log(`${i} * ${j} = ${i*j}`);
            }
        }
    </script>

3. 평균점수 계산기

기존 모의고사 성적들을 array 자료에 전부 담아 첫 파라미터로 입력하고
이번 11월 모의고사 성적을 둘 째 파라미터로 입력하면
11월 성적이 기존 성적들의 평균에 비해 얼마나 우수한지 결과

<script>
        function 계산기 (array, b) {
            var total = 0;
            var avg;
            for(let i=0; i<array.length; i++){
                total += array[i];
            }
            avg = total/array.length;

            if (avg < b){
                console.log(`지난 평균점수보다 ${b-avg}점 올랐습니다`);
            } else {
                console.log(`지난 평균점수보다 ${avg-b}점 떨어졌습니다`)
            }
        }

        계산기 ([10, 20, 30, 40, 50], 40); //지난 평균점수보다 10점 올랐습니다
        계산기 ([40, 40, 40], 20); //지난 평균점수보다 20점 떨어졌습니다
</script>

✔ Ajax 개념 (8강)

서버란?

유저가 데이터를 요청을 하면 데이터를 보내주는 프로그램

서버에 데이터 요청

어떤 데이터인지 url로 기재
어떤 방법으로 요청할지 결정 (GET/POST 등)

GET / POST / PUT / DELETE

HTTP 프로토콜에서 사용되는 주요 메서드

GET

서버에 있는 데이터를 읽고 싶을 때 주로 사용
리소스를 조회하고 가져올 때 사용
GET요청의 가장 간단한 방법은 브라우저 주소창에 URL적으면 그 곳으로 GET 요청을 날리는 것

POST

서버로 데이터를 보낼 때 사용
<form action="요청할url" method="post"> 태그 이용하면 폼 전송되었을 때 POST 요청 날려줌

PUT

서버에 존재하는 데이터를 업데이트할 때 사용
기존 리소스를 수정하거나 대체

DELETE

서버에서 데이터를 삭제할 때 사용
주어진 리소스를 제거하도록 요청

Ajax란?

서버와 데이터를 주고 받는 방법 중 하나
GET이나 POST요청하면 브라우저가 새로고침 하는 문제
→ AJAX는 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능
새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고 새로고침 없이도 댓글을 서버로 전송 가능함

jQuery로 AJAX 요청

GET 요청

$.get('https://codingapple1.github.io/hello.txt');

가져온 데이터는 .done 또는 .then 뒤의 콜백함수 속 파라미터 안에 들어있음
ajax 요청 성공 시 .done 안에 있는 코드 실행
ajax 요청 실패 시 .fail 안에 있는 코드 실행
done/fail 말고 then/catch 사용 가능

jQuery의 $.get()은 JSON으로 자료를 받아오면 알아서 array/object 자료로 바꿔줌

$.get('https://codingapple1.github.io/hello.txt').done(function(data){
            console.log(data); //'안녕하세요 반갑습니다요.'
        }).fail(function(){
            console.log("ajax 요청 실패"); 
        });

        $.get('https://codingapple1.github.io/price.json').done(function(data){
            console.log(data);	// {price: 5000}
            console.log(data.price); // 5000
        }).fail(function(){
            console.log("ajax 요청 실패");
        });

Post 요청

$.post('https://codingapple1.github.io/hello.txt', {name:"kim"}).done(function(data){
            console.log(data);
        });

JS로 AJAX 요청

fetch 함수는 Edge 브라우저 이상에서만 동작

기본함수 fetch()는 JSON으로 자료를 받아오면 알아서 array/object 자료로 바꿔주지 않음
→ fetch()로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 추가해야함

        fetch('https://codingapple1.github.io/price.json')
        .then(res => res.json()) // 받아온 JSON을 Object로 바꿔주는 기능
        .then(data => {
            console.log(data);
            console.log(data.price);
        }).catch(error => {
            console.log(error);
        });

✔ Ajax 상품 더보기 버튼 (9강)

<div class="container">
        <div class="row">
            <!-- 여기에 카드 3개 만들기
            <div class="col-sm-4">
              <img src="https://via.placeholder.com/600" class="w-100">
              <h5>Card title</h5>
              <p>가격 : 70000</p>
            </div>
            -->
        </div>
    </div> 
      
    <script>
        var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];
        products.forEach((item, i) => { // 기본 카드
            var card = 
            `<div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>${item.title}</h5>
                <p>가격 : ${products[i].price}</p>
            </div>`;
            $('.row').append(card);
        });
    </script> 

	<!--상품 더 보기 버튼-->
    <div class="container">
        <button class="btn btn-danger" id="newProdcuts">더보기</button>
    </div>

    <script>
        var cnt = 1;
        $('#newProdcuts').click(function(){            
            if(cnt == 1){
                $.get('https://codingapple1.github.io/js/more1.json')
                .done((data) => {
                    console.log(data);
                    data.forEach((item, i) => {
                        var card = 
                        `<div class="col-sm-4">
                            <img src="https://via.placeholder.com/600" class="w-100">
                            <h5>${data[i].title}</h5>
                            <p>가격 : ${item.price}</p>
                        </div>`;
                        $('.row').append(card);
                    });
                    cnt++ ;
                    
                }).fail(function(){
                    console.log(error);
                });
            } else if (cnt == 2){
                $.get('https://codingapple1.github.io/js/more2.json')
                    .done((data)=>{
                        console.log(data);
                        data.forEach((item) => {
                        var card 
                        = `<div class="col-sm-4">
                            <img src="https://via.placeholder.com/600" class="w-100">
                            <h5>${item.title}</h5>
                                <p>가격 : ${item.price}</p>
                        </div>`;
                        $('.row').append(card);
                        $('#newProdcuts').hide();
                    });
                    return;
                }).fail(function(){
                    console.log(error);
                });
            } 
        });
    </script>

축약

createCard 함수로 중복되는 코드 줄임

function createCard(item){
            return `<div class="col-sm-4">
                        <img src="https://via.placeholder.com/600" class="w-100">
                        <h5>${item.title}</h5>
                        <p>가격 : ${item.price}</p>
                    </div>`;
        }

var cnt = $(this).data('cnt') || 1
: jQuery를 사용해 클릭 횟수 추적, 기본값 1로 설정
$(this)는 현재 클릭된 요소인 $('#newProducts')
data('cnt')메서드를 사용해 해당 요소의 data-cnt 속성값 가져옴
$('#newProdcuts').data('cnt', 2);에서 cnt를 2로 업데이트

<script>
        var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];


        function createCard(item){
            return `<div class="col-sm-4">
                        <img src="https://via.placeholder.com/600" class="w-100">
                        <h5>${item.title}</h5>
                        <p>가격 : ${item.price}</p>
                    </div>`;
        }

        products.forEach((item, i) => {
            var card = createCard(item);
            $('.row').append(card);
        });


        $('#newProdcuts').click(function(){   
            var cnt = $(this).data('cnt') || 1;       
            
            if(cnt == 1){
                $.get('https://codingapple1.github.io/js/more1.json')
                .done((data) => {
                    console.log(data);
                    data.forEach((item, i) => {
                        var card = createCard(item);
                        $('.row').append(card);
                    });
                    $('#newProdcuts').data('cnt', 2);
                    
                }).fail(function(){
                    console.log(error);
                });

            } else if (cnt == 2){
                $.get('https://codingapple1.github.io/js/more2.json')
                    .done((data)=>{
                        console.log(data);
                        data.forEach((item) => {
                        var card  = createCard(item);
                        $('.row').append(card);
                    });
                    $('#newProdcuts').hide();
                }).fail(function(){
                    console.log(error);
                });
            } 
        });
    </script>

✔ array-sort, map, filter 함수 (10-11강)

Array

array 자료는 순서 개념이 있어 정렬 가능

a, b는 array 안의 자료들
return이 양수면 a를 오른쪽으로 정렬
return이 음수면 b를 오른쪽으로 정렬
array 안의 자료들을 계속 뽑아서 a, b에 넣어줌

-ex ) a, b가 7과 3일 경우 7 - 3 하면 → 양수 4
→ 7을 3보다 오른쪽으로 보냄

 var array = [7, 3, 5, 10];
        var array2 = ['a', '가', 'c', '바'];

        // 오름차순 정렬
        array.sort(function(a,b){
            return a-b;
        });
        console.log(array);

        // 내림차순 정렬
        array.sort(function(a,b){
            return b-a;
        });
        console.log(array);

        // 문자 오름차순 정렬
        array2.sort()
        console.log(array2);

        // 문자 내림차순 정렬
        array2.sort(function(a, b){
            return a < b ? 1 : -1;
        });
        console.log(array2);

sort 함수

정렬 시 사용
원본을 변형
→ array/object 자료 조작시엔 원본을 따로 복사해두고 조작

가격순 정렬

var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];

배열 구조는 [{}, {}, {}] 이기 때문에

products.sort(function(a, b){
  return a - b 
});

에서 a, b는 {}, {} 즉 object-object → 비교 불가

products.sort(function(a, b){
  return a.price - b.price // object 안에 있는 가격끼리 빼기
});

console.log(products);

html은 정렬

가격순 정렬버튼 누르면
products 자료를 가격순으로 정렬
지금 있는 카드 지우고 products 갯수만큼 카드를 새로 만들기

배열 복사

var allProducts = [...products];
: products 배열의 모든 요소를 복사해 allProducts라는 새로운 배열을 생성
... 스프레드 연산자
: products 배열의 요소들을 분리하여 allProducts 배열에 하나씩 추가

concat()

concat : 배열에 다른 배열이나 값들을 합침
allProducts = allProducts.concat(data);
: concat을 사용해 초기 제품 목록이 있는 allProcucts 배열에 data 배열을 합쳐서 새로운 배열 반환
→ 합친 배열을 다시 allProducts에 할당

    <script>
        var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];
        // 초기 제품을 포함하는 모든 제품 목록
        var allProducts = [...products];

        // 카드 생성
        function createCard(item){
            return `<div class="col-sm-4">
                        <img src="https://via.placeholder.com/600" class="w-100">
                        <h5>${item.title}</h5>
                        <p>가격 : ${item.price}</p>
                    </div>`;
        }

        // 제품 표시 : 기존 products를 지우고 제품 표시
        function showProducts(products) {
            $('.row').html('');
            products.forEach((item) => {
                var card = createCard(item);
                $('.row').append(card);
            });
        }

        // 초기 제품 표시
        showProducts(products);

        // 더보기 버튼 이벤트 핸들러
        $('#newProdcuts').click(function(){   
            var cnt = $(this).data('cnt') || 1;       
            
            if(cnt == 1){
                $.get('https://codingapple1.github.io/js/more1.json')
                .done((data) => {
                    console.log(data);
                    allProducts = allProducts.concat(data);
                    showProducts(allProducts);
                    $('#newProdcuts').data('cnt', 2);
                    
                }).fail(function(){
                    console.log(error);
                });

            } else if (cnt == 2){
                $.get('https://codingapple1.github.io/js/more2.json')
                    .done((data)=>{
                        console.log(data);
                        allProducts = allProducts.concat(data);
                        showProducts(allProducts);
                        $('#newProdcuts').hide();
                }).fail(function(){
                    console.log(error);
                });
            } 
        });

        // 가격 순 정렬 버튼 이벤트 핸들러
        $('#price').on('click', function(){
            allProducts.sort(function(a, b){
                return a.price - b.price;
            });
            console.log(allProducts);
            showProducts(allProducts);

        });

    </script>

</body>
</html>

가나다 / 다나가 순 정렬

자바스크립트는 문자끼리 부등호비교가 가능
ㄱ < ㅎ

        // 가나다 순 정렬버튼 
        $('#sort1').on('click', function(){
            allProducts.sort((a, b) => {
                return a.title > b.title ? 1: -1;
            });
            console.log(allProducts);
            showProducts(allProducts);
        });

        // 다나가 순 정렬버튼 
        $('#sort2').click(function(){
            allProducts.sort((a, b) => {
                return a.title < b.title ? 1: -1;
            });
            showProducts(allProducts);
        });

filter 함수

array 자료에서 원하는 자료만 필터링하고 싶으면 filter 함수 사용
filter는 원본을 변형시키지 않음
→ 새로운 변수에 담아서 사용

var arr = [7, 3,2, 5, 40];
        var filterArr = arr.filter(function(item) {
            return item <= 5;
        });
        console.log(filterArr); // [3, 2, 5]

6만원이하 상품보기

// 6만원 이하
        $('#filter').click(() => {
            var sixUnder = allProducts.filter((item)=>{
                return item.price <= 60000
            });
            console.log(sixUnder);
            showProducts(sixUnder);
        });

// 6만원 이하2 (allow로 더 간편하게)
// 함수 { } 안에 return 한 줄 밖에 없으면 중괄호와 return 동시에 생략가능
        $('#filter').click(() => {
            var sixUnder = allProducts.filter((item) => item.price <= 60000);
            showProducts(sixUnder);
        });

가격으로 필터링

<div class="container my-3">
        <div class="input-group mb-3">
            <input type="text" id="titleSearch" class="form-control" placeholder="제품명 검색" style="width: 20%;">
            <button class="btn btn-primary" id="search" style="margin-right:10px">검색</button>
            <input type="number" id="priceInput" class="form-control" placeholder="가격 입력" style="width: 20%;">
            <button class="btn btn-primary" id="filterPrice">가격으로 필터</button>
        </div>
    </div>
    
<script>
        $('#filterPrice').click(() => {
            var priceInput = $('#priceInput').val().trim();
            if(price === '' ){
                alert("가격을 입력하세요");
                return;
            }
            var filterPriceProduct = allProducts.filter((item) => {
                return item.price <= parseInt(priceInput);
            })
            showProducts(filterPriceProduct);
        })
</script>

map 함수

array 안의 자료들을 전부 변형하려면 map 함수 사용

        var arr = [7, 3,2, 5, 40];
        var mapArr = arr.map((item) => {
            return item * 5;
        });
        console.log(mapArr); // [35, 15, 10, 25, 200]

원화 to 달러

{ ...item, price: ... }
: 객체 디스트럭처링 문법을 사용해 item의 모든 속성을 새로운 객체로 복사
모든 속성을 그대로 가져오면서 price 속성만 새로운 값으로 대체
{(item.price / 1200).toFixed(2)}
: item.price 값을 1200으로 나눈 후,
그 결과를 소수점 두 자리까지 반올림하여 문자열 형태로 반환하는 객체를 생성

        $('#map').click(() => {
            var toDollar = allProducts.map((item) => {
                return { ...item, price: `$${(item.price / 1200).toFixed(2)}` };
            });
            console.log(toDollar);
            showProducts(toDollar);
        });

검색 / 원래 순서로

$('#search').click(()=>{
            var searchTitle = $('#titleSearch').val().trim();
            if(searchTitle === ''){
                alert('검색어를 입력하세요.');
                return;
            }
            var searchResult = allProducts.filter((item)=>{
                return item.title.toLowerCase().includes(searchTitle.toLowerCase());
            })
            showProducts(searchResult);
        });

        // 원래 순서로
        $('#reset').click(function(){
            allProducts = [...products]; // 초기 데이터로
            showProducts(allProducts);
        });

ByeolGyu

이전 포스트

[JS] Level3 1-6강

다음 포스트

[JS] Level3 7-11강

JavaScript

✔ array, for 반복문 문제 (7강)

1. Array에서 데이터 찾기

2. 구구단 출력

3. 평균점수 계산기

✔ Ajax 개념 (8강)

서버란?

서버에 데이터 요청

GET / POST / PUT / DELETE

GET

POST

PUT

DELETE

Ajax란?

jQuery로 AJAX 요청

GET 요청

Post 요청

JS로 AJAX 요청

✔ Ajax 상품 더보기 버튼 (9강)

축약

✔ array-sort, map, filter 함수 (10-11강)

Array

sort 함수

가격순 정렬

html은 정렬

배열 복사

concat()

가나다 / 다나가 순 정렬

filter 함수

6만원이하 상품보기

가격으로 필터링

map 함수

원화 to 달러

검색 / 원래 순서로

[JS] Level3 1-6강

[JS] Level3 12-14강

0개의 댓글