JavaScript Lv.3

Suji Park·2022년 8월 30일
JavaScript코딩애플
0

코딩애플

목록 보기
3/7
post-thumbnail

Array 와 Object 자료형

  • array 자료형 var car = [자료1, 자료2, 자료3 ]

    • 변수 하나에 여러자료 저장가능

    • array에서 자료 꺼내려면 console.log(car[0]);

    • array 자료 추가/수정하려면 car[0] = '아반떼'; 또는 car[3] = '아반떼'; console.log(car);

        var car = ['소나타', 50000, 'white'];
        car[3] = '아반떼';
        console.log(car);
  • object 자료형 var car: {이름1: 자료1, 이름2: 자료2}
    • 이름붙여서 저장가능한게 장점이다.
    • 자료 이름 부분을 Key, 자료부분을 value라 한다.
    • key:value형태로 저장가능
    • object 자료 추가 수정 car.price = 40000;
    • 아래 두 콘솔은 같은 값이 나옴 
        console.log(car2['price']); //변수넣기 가능
        console.log(car2.price); //변수넣기 불가
  • array/object 차이점
    • array
      • 순서대로 저장할 수 있는 것이 장점,
      • 자료간 정렬(sort메소드)및 자르기(slice)도 가능하다.
      • 자료간 순서가 존재하여 인덱싱가능하다.
      • 자료검색도 가능
      • 맨 앞/뒤에 자료 추가 가능
  • object: 이름을 붙여서 저장할 수 있는 것이 장점, 순서개념 없음(인덱싱할 수 없음)

약간 복잡한 Array & Object 데이터바인딩

  • array나 object 안에 array나 object 다 들어갈 수 있다. var car2 = {name : '소나타', price: [50000, 3000, 4000]};

  • 복잡한 자료에서 console.log 원하는 데이터 꺼내기
    (1) console.log로 일단 출력해보기
    (2) 출력물이 중괄호인 것은 object 자료이므로 원하는 값의 key를 입력하면 바로 출력가능하다.
    (2-2) 대괄호 시작은 array 자료다. car2,price[2] 인덱싱으로 꺼내면 된다.

복잡하게 생긴 Array object의 경우 일단 출력해보고 시작 괄호가 어떤 모양인지 확인해보면 좋다.

  1. server-side rendering 개발방식1 완성된 html파일을 유저한테 보내는 것: 서버가 힘들다.
  2. client-side rendering 개발방식2 빈 html 파일+ 데이터를 유저한테 보내는 것(html의 완성은 JS가 하도록): 서버가 편하다.
    데이터 바인딩(html에 데이터 꽂기 )
    데이터 바인딩 쉽게 해주는 라이브러리 jQuery,React, Vue ...등

데이터바인딩 숙제 & 문자중간에 변수넣는 법

  • 데이터 바인딩 숙제
    // 실습. card-title과 price에 데이터바인딩하기
    document.querySelectorAll('.card-body h5')[0].innerHTML = products[0].title;
    document.querySelectorAll('.card-body p')[0].innerHTML = '가격 : ' + products[0].price;
    document.querySelectorAll('.card-body h5')[1].innerHTML = products[1].title;
    document.querySelectorAll('.card-body p')[1].innerHTML = '가격 : ' + products[1].price;
    document.querySelectorAll('.card-body h5')[2].innerHTML = products[2].title;
    document.querySelectorAll('.card-body p')[2].innerHTML = '가격 : ' +products[2].price;
    

 $('.card-body h5').eq(0).html(products[0].title);

  • 자바스크립트에서 문자합치기는

    • '가격은' + products[0].price;
    • 1 + '2' = '12'로 나온다.

  • 문자 중간에 변수 쉽게 넣기

var a = '안녕';
방법1) '문자' + a + '문자'
방법2) `문자${a}문자` //엔터쓰기 가능!! 변수를 중간에 끼워넣기 가능하다.

Select 인풋 다루기

  • select 사용법은 input과 같다.
  • option이 dropdown형식으로 보이며 사용자들이 선택만 가능하다.
  • input은 사용자들에게 너무 자유롭다. 
        <select  class="form-select mt-2">
            <option>모자</option>
            <option>셔츠</option>
        </select>
    // 셔츠고르면 select 하나 더 보여주기
    var value = $('.form-select').eq(0).val() //유저가 <select>에서 선택한 정보 가져오기 
    if (value == '셔츠') {    // 유저가 선택한 것 == 셔츠면 
        $('.form-select').eq(1).removeClass('form-hide'); //form-hide 떼어주세요. 
    };

그러나,
// 페이지 로드시 1회만 실행된다.
// 유저가 선택할 때마다 저 코드를 실행하기

event input? ??? input의 값이 변할 때마다 이벤트 발생 

        $('.form-select').eq(0).on('input',function(){   // 유저가 선택할 때마다 코드를 실행하기 
            var value = $('.form-select').eq(0).val();//유저가 <select>에서 선택한 정보 가져오기 
        if (value == '셔츠') {    // 유저가 선택한 것 == 셔츠면 
            $('.form-select').eq(1).removeClass('form-hide'); //form-hide 떼어주세요. 
        };
        })

위 코드 속의 var value = $('.form-select').eq(0).val();는 var value = e.currenttarget.value과 같다.

Select 2 : 자바스크립트로 html 생성하는 법

document.createElement('p');

  • 속도가 빠르지만, 요새 별 차이 없다. 
        var a = document.createElement('p');
        a.innerHTML = '안녕';
        document.querySelector('#test').appendChild(a);
  • 문자형 HTML 추가하는 메소드 insertAdjacentHTML(어느 위치에 추가할지, 내용)

        var a = '<p>안녕</p>';
        document.querySelector('#test').insertAdjacentHTML('beforeend', a);//JS
        $('#test').apeend(a); //jQuery

  • 생성법1
    .createElement()

  • 생성법2
    .insertAdjacentHTML()
    .append()

  • Q.바지선택하면 28,30 옵션이 나오게

        else if (value == '바지') {
            $('.form-select').eq(1).removeClass('form-hide');

            $('.form-select').eq(1).html(''); // append는 그저 추가일뿐, 원래 존재하는 HTML은 삭제
            var pantSize=`<option>28</option>
            <option>30</option>`;
            $('.form-select').eq(1).append(pantSize);
        };

Select 3 : forEach, for in 반복문

  • array에 붙일 수 있는 forEach반복문

  • for 반복문이 더 빠르게 동작하지만 큰 차이는 없다.

  • Q. pants 데이터갯수만큼<option>생성

array안에 있던 데이터들을 순차적으로 꺼내기
pants.forEach(function(a,i){
forEach안에 파라미터 2개 생성가능하다.

  • 첫째(a)는 array안의 데이터
  • 둘째(i)는 0부터 1씩 증가하는 정수 
            
// pants 데이터갯수만큼<option>생성
pants.forEach(function(a){
    $('.form-select').eq(1).append(`<option>${a}</option`);
});
  • object 자료 갯수만큼 반복문 돌리려면 for(var key in obj) 
        })

        var obj = {name: 'kim', age: 20}

        for(var key in obj) {
            console.log(key);
            console.log(obj[key]);//value값 모두 나오는 것

            }

반복문의 용도
1. 코드 반복
2. array,object 데이터 전부 꺼낼 때

  • forEach, forin반복문 둘 다 화살표 함수 가능하다.
    • 화살표함수를 사용하면 function 안에 바깥에 있던 this를 그대로 사용한다.(이건 이상함)
    • 화살표 함수를 쓰면 함수 안의 this뜻이 달라진다.
    • 그냥 function this를 쓰면 알맞게 this값이 정의된다.

Ajax 1 : 개념정리

  • 서버와 데이터주고 받는 법

  • 서버: 데이터 달라고하면 다 보내주는 프로그램

  1. 어떤 데이터인지 = 데이터의url
  2. 어떤 방법으로 요청할 건지 잘 기재해야 데이터를 준다. = GET인지 POST인지 잘 기재해야 데이터를 준다.

가정
1. 데이터의 url기재해야 한다.(comic.naver.com)
2. GET/POST 둘 중 하나 선택해야 한다.
GET: 데이터를 읽고싶을 때 POST: 데이터를 보낼 때

url GET 요청

form태그 POST 요청

        <form action="경로" method ="post">

서버가 하는 일

  • 데이터 보내주기,

  • 유저 데이터 DB에 저장하기

  • GET/POST 요청하면 브라우저가 새로고침된다.

  • ajax: 새로고침 없이 GET, POST 요청하는 기능이다.

  • ajax로 GET 요청하는 법 

     //ajax로 GET 요청하는 법 
    $.get('https://codingapple1.github.io/hello.text')
    //GET 성공시 실행되는 함수는 .done
    .done(function(data){//data파라미터: 받아온 데이터가 들어있다. 
      console.log('data');
    })

    //ajax로 POST 요청하는 법 
    $.post('https://codingapple1.github.io/hello.text', {name: 'kim'})
      .done(function(data){
      console.log('data');
    })
    .fail(function(){//ajax실패시 특정코드 실행하고 싶으면
      console.log('실패함');
    })

  • 파라미터 data: 받아온 데이터가 들어있음

  • ajax로 요청하는 법

  • ajax 실패시 특정코드 실행하고 싶으면

  • 404는 url이 이상하다는 뜻

  • 브라우저 기본함수 fetch 써도 ajax가능하다.

  • 서버와 유저는 문자자료만 주고받을 수 있다.

    JS에서 하려면?

  • object,array 보내고 싶으면 따옴표처럼 문자로 만들어야 한다.

  • 받아온 JSON을 object로 바꿔주는 한줄이 더 필요하다.

  • axios 라이브러리 사용

Ajax 2 : 상품 더보기 버튼 만들기

    //더보기 버튼 누르면 상품 3개 가져와서 출력하기
    $('#more').click(function(){
      $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=> {
        console.log(data);

        // 가져온 데이터로 카드 3개 더 만들기 
        data.forEach((a,i)=> {
          var card = `<div class="col-sm-4">
          <img src="https://rdironworks.com/wp-content/uploads/2017/12/600x600.png" class="w-100">
          <h5>${data[i].title}</h5> 
          <p>가격 : ${data[i].price}</p>
        </div> `;
        $('.row').append(card);
        })
    });
  });

array에 자주 쓰는 sort, map, filter 함수

  • array 문자정렬 = sort()
  • array 숫자 오름차순 정렬 = array.sort(function(a,b){return a-b});
  • 동작원리
    1. a, b는 array 안의 자료이다.
    2. return 오른쪽이 양수면 a를 오른쪽으로
    3. return 오른쪽이 음수면 b를 오른쪽으로 보내준다. 
    var array = [7,9,3,5,2,40]
    array.sort(function(a,b){
      return a-b
    });
  • array 숫자 내림차순 정렬 = array.sort(function(a,b){ return b - a});
  • 문자 역순 정렬은 (JS에서는 문자 부등호비교가 가능하다.)참고하여 생각해보기~
  • array object 안의 숫자데이터 정렬 
    //버튼 누르면 products 안의 데이터를 가격순 정렬
    $('#price').click(function(){
      products.sort(function(a, b){
        return a.price - b.price
      })

      $('.row').html('');//카드 3개있던 div의 내용 제거 
      
      // product 수만큼 카드생성
      products.forEach((data,i) => {
      var card = `<div class="col-sm-4">
          <img src="https://rdironworks.com/wp-content/uploads/2017/12/600x600.png" class="w-100">
          <h5>${data.title}</h5> 
          <p>가격 : ${products[i].price}</p>
        </div> `;
    $('.row').append(card);
    });

     
      ```
      
 -    array 자료 원하는 것만 필터하려면 .filter()
 
 ```js
    var array = [7,9,3,5,2,40]
//filter()의 결과는 변수에 저장해서 써야한다. 
    var newArray = array.filter(function(a){
      return a < 4
    });

.sort()는 원본 변형 O
.filter()는 원본 변형 X

  • array 자료 전부를 똑같이 변형시키려면 .map()
  • ex. 달러표시 상품가격인데 전부 원화로 변경할 때 사용 
    var array = [7,9,3,5,2,40]
    var newArray = array.map(function(a){
      return a * 4
    });

문자 역순 정렬

return 양수 -> a 우측으로 감
return 음수 -> b 우측으로 감
a = 가, b = 다 일 경우 return 양수
a = 다, b = 나 일 경우 return 음수
a = 가, b = 나 일 경우 return 양수

  • 같은 글자일 경우 return 0을 하면 아무 조치 취하지않는다. 
    // 문자 역순 정렬
    var array = ['가', '다', '나'];

    array.sort(function(a, b){
      if (a < b) {
        return 1
      } else if (a = b) {
        return 0 //- 같은 글자일 경우 return 0을 하면 아무 조치를 취하지않는다. 
      } else {
        return -1
      }
    })

sort, map, filter 상품정렬기능 숙제

  • 다나가순 정렬 
  $('#sort').click(function(){

    products.sort(function(a, b){
      if (a.title < b.title) {
        return 1
      } else {
      return -1
      }
});
$('.row').html('');//카드 3개있던 div의 내용 제거 
      
      // product 수만큼 카드생성
      products.forEach((data,i) => {
      var card = `<div class="col-sm-4">
          <img src="https://rdironworks.com/wp-content/uploads/2017/12/600x600.png" class="w-100">
          <h5>${data.title}</h5> 
          <p>가격 : ${products[i].price}</p>
        </div> `;
    $('.row').append(card);
    });
  })
  • 6만원 이하 상품보기 기능

    $('#filter').click(function(){
      var newProduct = products.filter(function(a){
        return a.price <= 60000
      });

      $('.row').html('');//카드 3개있던 div의 내용 제거 
      
      // newproduct 수만큼 카드생성
      newProduct.forEach((a,i) => {
      var card = `<div class="col-sm-4">
          <img src="https://rdironworks.com/wp-content/uploads/2017/12/600x600.png" class="w-100">
          <h5>${newProduct[i].title}</h5> 
          <p>가격 : ${newProduct[i].price}</p>
        </div> `;
      $('.row').append(card);
    })

    });
profile
Suji Park
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵
이전 포스트

JavaScript Lv.2

다음 포스트

JavaScript Lv.3-2

0개의 댓글