자바스크립트 함수 및 정보 정리 - 3

for 문 에서 i는 let 변수 사용해야 함

이유:

let 변수의 적용범위는 { } 안이기 때문에 각 중괄호 안에서 지정된 숫자가 출력됨

var 변수의 적용범위는 function이기 때문에 향후 이벤트리스너 실행 시 for문의 최종 숫자가 i에 적용됨

 

for (let i = 0; i < $(".list li").length; i++) {

  $(".tab-button")

    .eq(i)

    .on("click", function () {

      $(".tab-button").removeClass("orange");

      $(".tab-content").removeClass("show");

      $(".tab-button").eq(i).addClass("orange");

      $(".tab-content").eq(i).addClass("show");

    });

}

이벤트버블링: 이벤트가 상위html로 퍼지는 현상

 

이벤트리스너 e 활용방법

        e.target; // 유저가 실제로 누른 태그 산출

        e.currentTarget; // 이벤트리스너 달린 태그 산출

        this; // (e.currentTarget 와 똑같이) 이벤트리스너 달린 태그 산출

        e.preventDefault(); // 이벤트 기본동작 막아줌

        e.stopPropagation(); // 내 상위요소로 이벤트 버블링 막아줌

<모달창 바깥 누르면 닫게 하는법>

      $(".black-bg").on("click", function (e) {

        console.log(e.target);

        console.log(document.querySelector(".black-bg"));

 

        if (e.target == document.querySelector(".black-bg")) {  // (참고) JQuery는 .black-bg 찾을때 다른 형태로 나와서 바로 사용 불가, 별도 라이브러리 사용 필요

          $(".black-bg").removeClass("show-modal");

        }

      });

오브젝트 자료형 = key : value 형태로 저장, 순서 개념 없음(따라서 인덱싱, 정렬 불가 / ※array는 정렬 가능)

var car2 = {name: "소나타", price: 50000, color: "white"};

꺼낼때 car2.name 또는 car2[‘name’]

1. 클라이언트 사이드 렌더링

완성된 html 파일

2. 서버 사이드 렌더링

빈 html 파일 + 데이터(html 완성은 js가 하도록)

데이터 바인딩: 데이터를 빈칸에 꽃아넣는 것

 

 

텍스트박스에서 현재 선택한 값 가져오는 법

e.currentTarget.value

array.forEach

sizeList.forEach(function(data ,i ) {  

sizeSelectBox += `<option>${data}</option>`;

        });

// 함수 () 안에 아무 변수 써주면, 그 변수가 array 인자 하나씩 반복하는 것임  // 쉼표 뒤  i 는 0부터 1씩 증가하는 정수가 나옴

 

arrow function 사용 방법

sizeList.forEach( (size ,i ) => {  

sizeSelectBox += `<option>${size}</option>`;

        });

 

function과 차이점: this를 function 안에서 쓰면 뜻이 달라질 수 있음

 

오브젝트 자료 반복문

for (var key in obj {

console.log(obj[key]);

)

자바스크립트 정렬

 

문자순 정렬

array.sort();

 

숫자 오름차순 정렬

array.sort(function (a, b) {

        return a - b;

      });

a, b는 array안의 자료이고 모든 숫자를 둘씩 비교해서, a-b가 양수면 a를 오른쪽으로 옮김

 

내림차순은 => b - a

 

자바스크립트 필터

 var newArray = array.filter(function (a) {     // 필터는 어딘가 저장해서 쓰게 되어있음

        return a > 50;

      });

 

map => 값을 바꿀때 사용

var mapArray = array.map(function (a) {

        return a * 50;

      });

      console.log(mapArray);

DOM(Document Object Model): 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한 것

 

localStorage

localStorage는 사이트 재접속해도 유지

localStorage.setItem('이름', 'kim')   저장하는법

localStorage.getItem('이름');   key 가져오는법

localStorage.removeItem('이름');   삭제하는법

개발자도구 -> Application에서 확인 가능

 

문자만 저장 가능(array 등은 저장 불가)

그러나 JSON.stringify으로 변경하여 json으로 저장 가능

var arr = [1,2,3];

      var newArr = JSON.stringify(arr);

      localStorage.setItem('num', newArr);

 

(저장한 걸 가져올 때 JSON.parse(x)로 다시 배열로 변경 가능)

 

수정하려면 자료꺼냄 -> 꺼낸거 수정 -> 다시넣음

 

sessionStorage는 사이트 나가면 자동삭제 

sessionStorage.xxx로 사용 가능