JavaScript Lv.3-2

장바구니 기능과 localStorage

• 구매버튼 누르면 장바구니에 상품명 추가

• 브라우저 안에 몰래 데이터 저장가능하다.
  

• local storage, 이름: 값 형태로 저장가능하다. 용량은 5mb 문자/숫자만 저장가능하다. array나 object는 못쓴다. 사이트 재접속해도 유지. 반영구적으로 데이터를 사용하고 싶을 때 사용
• session sotage : 이름: 값 형태로 저장가능하다. 용량은 5mb 문자/숫자만 저장가능하다. array나 object는 못쓴다. 사이트 나가면 값이 자동삭제.
  쓴 다.
  lodexDB
  구조화된 대용량데이터 저장시
  보통 로그인정보 저장
  cache storage html css js파일 저장하는 곳

    localStorage.setItem('이름','kim'); // 저장
    localStorage.getItem('이름'); // 출력
    localStorage.removeItem('이름'); //삭제

• session Storage사용법은 local storage사용법과 동일하다.

• localStorage에 array,object를 저장하려면?

  • array/object를 JSON으로 바꾸면 저장가능하다. JSON.stringify(변수명)
  • JSON에서 array/object로 바꾸려면? JSON.parse(변수명)

    var arr = [1,2,3];
    var newArr = JSON.stringify(arr);

    localStorage.setItem('num', newArr );
    var 꺼낸거 = localStorage.getItem('num');
    console.log(JSON.parse(꺼낸거[0]));

수정하려면
1. 자료꺼내기
2. 꺼낸거 수정하기
3. 다시 넣기

• 숙제1. 구매버튼 누르면 누른 상품명 localStorage에 저장하기
  - 구매버튼 누를 때 cart 하몽 없으면 array 추가 있으면 array수정

$('.buy').click(function (e) {
        var title = $(e.target).siblings('h5').text(); // siblings 형제요소 선택해준다
  // 만약에 이미 cart라는 항목이 있으면 수정하기
        if(localStorage.getItem('cart') != null ) {
            var 꺼낸거 = JSON.parse(localStorage.cart);
            꺼낸거.push(title);
            localStorage.setItem('cart', JSON.stringify(꺼낸거));
        } else {
            localStorage.setItem('cart', JSON.stringify([title]));
        }
    })

jQuerysiblings 형제요소 선택해준다

• 숙제2. cart.html방문시 localStorage에 저장된 상품명들 다 보여주기

position : sticky 활용하기

position: sticky

• 조건부로 fixed된다.
• 스크롤이 다 끝났을 때 = 부모박스 넘어서면 해제된다.

스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기

    // 화면이 스크롤 될때마다 내부 코드를 실행해주세요. 
    $(widnow).scroll(function(){
      var 높이 = $(window).scrollTop();

      // 높이가 650~1150 까지 스크롤 바를 내리면, 첫째카드의 opacity 1~0으로 서서히 변경
      var y  = (-1/500) * 높이 + (115/50); // 스크롤 높이에 따라 변하는 값
      $('.card-box').eq(0).css('opacity', y);

    });

캐러셀에 스와이프 기능 만들기

기능1. 내가 드래그한 거리만큼 박스도 왼쪽으로 움직인다.
mousedown 마우스를 클릭할 때
mouseup 마우스 뗄 때
mousemove 마우스 움직일 때

        var 시작좌표 = 0; // 전역변수= 아무데서나 쓸 수 있는 변수
        var 눌렀냐 = false;

        //기능1. 내가 드래그한 거리만큼 박스도 왼쪽으로 움직인다. 
        $('.slide-box').eq(0).on('mousedown', function(e){
            시작좌표 = e.clientX; // e.clientX 현재 마우스 위치 X좌표를 알려준다.
            눌렀냐 = true;
        });
        $('.slide-box').eq(0).on('mousemove', function(e){
            if(눌렀냐 == true) {
                console.log(e.clientX - 시작좌표);
                $('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px)`);
            }
        });
        // 기능2. 100px 이상 이동시 둘째 사진으로 보인다. 아니면 첫째 사진이 보인다.
        $('.slide-box').eq(0).on('mouseup', function(e){
            눌렀냐 = false;

            console.log(e.clientX - 시작좌표);
            if( e.clientX - 시작좌표 < -100){ // 이동거리 100이상일경우
                $('.slide-container').css('transition', 'all 0.5s')
                .css('transform', 'translateX(-100vw)');
            } else {
                $('.slide-container').css('transition', 'all 0.5s')
                .css('transform', 'translateX(0)');
            }

            setTimeout(() => {
                $('.slide-container').css('transition', 'none');
            },500);
        });

모바일에서 사용할 경우 touchstart move end로 바꾸면 좋다.
터치이벤트에서 x좌표로 출력하라면 e.touches[0]으로 바꾸기

        //기능1. 내가 드래그한 거리만큼 박스도 왼쪽으로 움직인다. 
        $('.slide-box').eq(0).on('touchstart', function(e){
            시작좌표 =e.touches[0].clientX; // e.clientX 현재 마우스 위치 X좌표를 알려준다.
            눌렀냐 = true;
        });
        $('.slide-box').eq(0).on('touchmove', function(e){
            if(눌렀냐 == true) {
                console.log(e.touches[0].clientX - 시작좌표);
                $('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px)`);
            }
        });
        // 기능2. 100px 이상 이동시 둘째 사진으로 보인다. 아니면 첫째 사진이 보인다.
        $('.slide-box').eq(0).on('touchend', function(e){
            눌렀냐 = false;

            console.log(e.touches[0].clientX - 시작좌표);
            if( e.changedTouches[0].clientX - 시작좌표 < -100){ // 이동거리 100이상일경우
                $('.slide-container').css('transition', 'all 0.5s')
                .css('transform', 'translateX(-100vw)');
            } else {
                $('.slide-container').css('transition', 'all 0.5s')
                .css('transform', 'translateX(0)');
            }

            setTimeout(() => {
                $('.slide-container').css('transition', 'none');
            },500);
        });

e.clientX 현재 마우스 위치 X좌표를 알려준다.

• 기능2. 100px 이상 이동시 둘째 사진으로 보인다. 아니면 첫째 사진이 보인다.

• img에 style draggable="false" 를 넣으면 이미지가 드래그 & 이동이 안된다.

간혹 쓰는 Switch 문법

• if 문 대용으로 쓴다.
• if는 다양한 조건식 가능하지만, switch는 변수 1개만 테스트 가능하다.
• switch는 간결해보이는 장점이 있다.
• 변수하나만 검사할 때 간편하게 사용가능하다.
• else와 비슷한 default: 아무것도 해당 안됐을 경우 특정코드를 실행해주세요.
• break는 탈출

    let 변수 = 2 + 2;
    switch (변수) {
      case 3: 
        alert('변수가 3이네요');
        break // 스위치문 중지 & 탈출 

      case 4:
        alert('변수가 4이네요');
        break 
      
      default:
        alert('아무것도 해당안됨');
    }