TIL 211121

devyoon99·2021년 11월 20일
0

TIL

목록 보기
32/38
post-thumbnail

jQuery / 해당 class 갯수 세기

$(".tab-content").length

의미 : 해당 class의 갯수

자바스크립트 / 이벤트 버블링

<div>
  <div>
  	<p></p>
  </div>
</div>
  • p tag를 클릭했다.
    • 우리는 1번 클릭했다고 인지한다.
    • 컴퓨터는 p와 p를 포함하는 상위요소도 클릭했다고 인지한다.
      • 총 3번
      • div, div, p

자바스크립트 / 이벤트 버블링 방지법

  • 개념

    • 익명함수에 매개변수 e 추가

    • e.target 지금 실제로 클릭한 요소

    • e.currentTarget 이벤트 리스너가 달린 곳

    • $(this) 이벤트 리스너가 달린 곳, jQuery버전

      • this 이벤트 리스너가 달린 곳, javascript버전

    • e.preventDefault(); 기본 동작 막기

  • 설명

    • 아래의 코드에서 이벤트 리스너가 달린 곳은 .black-background html tag이다.
    • 조건문 의미
      • 이벤트 리스너 달린 곳을 클릭하면, 조건문을 실행한다.
$(".black-background").on("click", function (e) {
  if (e.target === e.currentTarget) {
    //class 추가 & 제거
  }
});

UI / 로그인 모달창의 검은색 배경 클릭하면, 모달창 없어지게 만들기

  • 문제상황
    • 이벤트 버블링때문에, 로그인창을 클릭했을 때, 로그인창은 검은색 배경에 포함되어있기때문에, 검은색 배경도 클릭했다고 컴퓨터가 인지한다.
  • 해결방법
    • 컴퓨터가 실제로 클릭한 것만 인지하도록 해야한다.
  • 설명
    • 이벤트의 익명함수에 매개변수 e를 추가한다.
    • 조건문 만든다.
    • e.target === e.currentTarget
      • e.currentTarget 검은색 배경을 의미한다.
      • 검은색 배경을 클릭하면, 조건문이 참이다.
    • 모달창이 꺼진다.
  • 개념
    • e.target 지금 실제로 클릭한 요소
    • e.currentTarget 이벤트 리스너가 달린 곳
    • $(this) 이벤트 리스너가 달린 곳, jQuery버전
      • this 이벤트 리스너가 달린 곳, javascript버전
    • e.preventDefault(); 기본 동작 막기
$(".black-background").on("click", function (e) {
  if (e.target === e.currentTarget) {
    $(".black-background").addClass("slide-up");
  }
});

코드리뷰 / 알아보기 쉽도록 코드를 함수로 축약하자

  • 클릭 이벤트의 class 추가&제거 부분을 함수안에 넣어서 사용하였다.
    • 나중에 알아보기 쉽다.
//수정전
for (let i = 0; i < $(".tab-button").length; i++) {
  $(".tab-button").eq(i).on("click", function () {
    $(".tab-button").removeClass("active");
    $(".tab-button").eq(i).addClass("active");

    $(".tab-content").removeClass("show");
    $(".tab-content").eq(i).addClass("show");
  });
}
//수정후
for (let i = 0; i < $(".tab-button").length; i++) {
  $(".tab-button").eq(i).on("click", function () {
      tabButtonClick(i);
  });
}

function tabButtonClick(i) {
  $(".tab-button").removeClass("active");
  $(".tab-button").eq(i).addClass("active");

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

UI / 클릭 이벤트 핵심개념

여러 개인 자식에 클릭 이벤트를 설정하지 않고, 한 개인 부모에 클릭 이벤트를 설정하라

<ul class="list">
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
</ul>
  • 자식 여러 개에 클릭 이벤트를 걸면, 메모리를 많이 잡아먹으므로,
    • 한 개인 부모에 클릭이벤트를 설정하고,
    • 이벤트 버블링을 통하여 자식인 li가 실제로 클릭되면, 동작되도록 만들어야 한다.

javascript / javascript로 html 가져오기 핵심개념

<ul class="list">
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
</ul>
  • 원리 : 자바스크립트는 jQuery와 달리 중복된 html을 가져올 때, 전부 가져오지 않고, 제일 위의 것만 가져온다.
  • 자바스크립트도 jQuery처럼 중복된 html 모두 가져오게 만들기
//javascript
document.querySelectorAll(".tab-button")

//참고 jQuery
$(".tab-button")
  • 자바스크립트도 jQuery처럼 중복된 html중 내가 원하는 위치의 html 가져오기
    • 제일 위의 li tag를 가져온다.
    • 제일 위부터 0, 1, 2, 3...
//javascript
document.querySelectorAll(".tab-button")[0]

//참고 jQuery
$(".tab-button").eq(0)

자바스크립트 / 이벤트 버블링, 실제로 클릭하고 싶은 부분을 지정하기

실제로 클릭한 것과 javascript로 가져온 것이 같냐고 조건문을 만들면, 된다.

e.target === document.querySelectorAll(".tab-button")[0]

jQuery로 가져오면, 오류뜬다.

<ul class="list">
 <li class="tab-button"></li>
 <li class="tab-button"></li>
 <li class="tab-button"></li>
</ul>
  • 상위 부분에 이벤트를 걸고, 하위 부분을 클릭 동작을 시키고 싶음
$(".list").on("click", function (e) {
  if (e.target === document.querySelectorAll(".tab-button")[0]) {
    tabButtonClick(0);
  } else if (e.target === document.querySelectorAll(".tab-button")[1]) {
    tabButtonClick(1);
  } else if (e.target === document.querySelectorAll(".tab-button")[2]) {
    tabButtonClick(2);
  } else if (e.target === document.querySelectorAll(".tab-button")[3]) {
    tabButtonClick(3);
  }
});

코드 리뷰 / 숫자만 다르고 나머지는 전부 같은 코드 줄이기

숫자가 0,1,2,3...일때

  • 방법 : 반복문
    • 숫자 부분(0,1,2,3)빼고, 나머지 부분은 전부 동일
    • 코드들을 반복문안에 넣고, 숫자 자리에 반복문 변수를 넣는다.
  • $(".tab-button").length란?
    • class .tab-button의 갯수이다. 즉 버튼의 갯수를 의미한다.
//수정 전
if (e.target === document.querySelectorAll(".tab-button")[0]) {
  tabButtonClick(0);
} else if (e.target === document.querySelectorAll(".tab-button")[1]) {
  tabButtonClick(1);
} else if (e.target === document.querySelectorAll(".tab-button")[2]) {
  tabButtonClick(2);
} else if (e.target === document.querySelectorAll(".tab-button")[3]) {
  tabButtonClick(3);
}
//수정 후
for (let i = 0; i < $(".tab-button").length; i++) {
  if (e.target === document.querySelectorAll(".tab-button")[i]) {
    tabButtonClick(i);
  }
}

숫자가 불규칙적일때,

  • 배열이나, 객체이용
const arr = [11,54,32];
for(let i = 0; i < arr.length; i++){
	arr[i]
}

이벤트 버블링을 이용하여 탭 버튼 수정하기

  • 목적
    • ul tag 한 개, li tag 여러 개이다.
    • 현재는 li에 클릭 이벤트가 설정되어 있기 때문에 메모리를 많이 잡아먹는다.
    • 한 개있는 ul에 클릭 이벤트를 설정하면, 메모리를 덜 잡아먹는다.
<ul class="list">
  <li class="tab-button product-button">Products</li>
  <li class="tab-button active information-  button">Information</li>
  <li class="tab-button shipping-button">Shipping</li>
  <li class="tab-button shipping-button">Price</li>
</ul>
  • ul에 클릭이벤트를 설정한다.
    • 실제로 클릭한 곳이 li tag면, 조건문을 실행시킨다.
      • e.target === document.querySelector(".tab-button"
function tabButtonClick(i) {
  $(".tab-button").removeClass("active");
  $(".tab-button").eq(i).addClass("active");

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

$(".list").on("click", function (e) {
//버전1
for (let i = 0; i < $(".tab-button").length; i++) {
  if (e.target === document.querySelectorAll(".tab-button")[i]) {
    tabButtonClick(i);
  }
});

자바스크립트 / html에 data 넣기

  • data 넣는법
    • data-이름="값"
<ul class="list">
  <li class="tab-button" data-id="0">Products</li>
  <li class="tab-button active" data-id="1">
  Information
  </li>
  <li class="tab-button" data-id="2">Shipping</li>
  <li class="tab-button" data-id="3">Price</li>
</ul>
  • data 사용법
    • 이벤트 버블링써야함
    • e.target.dataset.id
      • 내가 실제로 클릭한 것의 id이름의 data값을 얻어옴
function tabButtonClick(i) {
  $(".tab-button").removeClass("active");
  $(".tab-button").eq(i).addClass("active");

  $(".tab-content").removeClass("show");
  $(".tab-content").eq(i).addClass("show");
}
$(".list").on("click", function (e) {
  tabButtonClick(e.target.dataset.id);
});

jQuery / html에 데이터 넣기

  • data 넣기
$(".list").data("이름","값");
  • data 사용
$(".list").data("이름");

UI / dataset을 이용하여 탭 버튼 코드 줄이기


//이벤트 동작 함수
function tabButtonClick(i) {
  $(".tab-button").removeClass("active");
  $(".tab-button").eq(i).addClass("active");

  $(".tab-content").removeClass("show");
  $(".tab-content").eq(i).addClass("show");
}
//수정 전
$(".list").on("click", function (e) {
for (let i = 0; i < $(".tab-button").length; i++) {
  if (e.target === document.querySelectorAll(".tab-button")[i]) {
    tabButtonClick(i);
  }
});
//수정 후
$(".list").on("click", function (e) {
  tabButtonClick(e.target.dataset.id);
});

html / select tag & option tag

주로 form tag 안에서 사용한다.

모자 셔츠 하의 
<form>
  <select class="form-control" id="option1">
    <option>모자</option>
    <option>셔츠</option>
    <option>하의</option>
  </select>
</form>

자바스크립트 / form tag의 input event & change event

input tag에서 작동 방식

  • input event
    • input창에 입력하는 즉시 이벤트 동작
  • change event
    • input창에 입력 후, 다른 곳을 클릭하여, focus가 바뀌면, 이벤트 동작

UI / select 만들기

html

  • 옷 종류를 선택하는 select, 사이즈를 선택하는 select 총 2개 있음
//html
<form class="container my-5">
  <div class="form-group">
    <p>상품선택</p>
    <select class="form-control" id="option1">
      <option>모자</option>
      <option class="shirts">셔츠</option>
      <option>하의</option>
    </select>

    <div class="shirts-size size-select">
      <p class="mt-4">사이즈선택</p>
      <select class="form-control" id="option2">
        <option>100</option>
        <option>105</option>
        <option>110</option>
      </select>
    </div>
  </div>
</form>

css

  • class를 만들고, 사이즈 셀렉트를 안보이게함
.size-select {
  display: none;
}

이벤트

  • 이벤트는 select tag에 설정해야 한다.
    • select가 값들인 option을 포함한다.
  • 셔츠를 선택하면, 셔츠 사이즈가 보이도록 한다.
    • $("#option1").val() === "셔츠"
$("#option1").on("change", function (e) {
  if ($("#option1").val() === "셔츠") {
    $(".shirts-size").removeClass("size-select");
  } else {
    $(".shirts-size").addClass("size-select");
  }
  // $(".shirts-size").removeClass("size-select");
});

새로운 UI 만드는 방식 with javascript로 html을 만들어서 넣기

<button>
</button>

<div>
</div>
  • 버튼 클릭 이벤트
    • div 안의 모든 tag 없앤다.
    • 변수에 html tag를 넣는다.
      • html tag들을 백틱(`)으로 한꺼번에 감싼다.
      • 띄워쓰기는 없어야한다. 단, 엔터키는 가능
    • div에 그 변수를 넣는다.
$("button").on("click", function () {
  $("div").html("");
  const productList = `<div>맥북</div><div>모니터</div><div>키보드</div>`;
  $("div").append(productList);
  • 기존의 방식 : html을 숨기고, class를 넣어서, html을 보이도록 했음

UI / js로 html을 만들고 넣어서 select만들기

  • 옷 종류 셀렉트와 사이즈 셀렉트 2개 있음
  • 이벤트
    • 옷 종류 셀렉트의 값이 바뀌는 것을 감지
      • 바지 선택 -> 바지 사이즈 나옴
      • 셔츠 선택 -> 셔츠 사이즈 나옴
//js
$("#clothes-select").on("change", function () {
  if ($("#clothes-select").val() === "셔츠") {
    $("#size-select").html("");
    $(".shirts-size").removeClass("size-select__hide");
    const shirtsSize = `<option>95</option>
    <option>100</option>
    <option>105</option>
    <option>110</option>`;
    $("#size-select").append(shirtsSize);
  } else if ($("#clothes-select").val() === "하의") {
    $("#size-select").html("");
    $(".shirts-size").removeClass("size-select__hide");
    const pantsSize =
      "<option>30</option>" +
      "<option>31</option>" +
      "<option>32</option>";
    $("#size-select").append(pantsSize);
  }
});
//html
<form class="container my-5">
  <div class="form-group">
    <select class="form-control" id="clothes-select">
      <option class="shirts">셔츠</option>
      <option>하의</option>
    </select>

    <div class="shirts-size size-select__hide">
      <select class="form-control" id="size-select"></select>
    </div>
  </div>
</form>

코드리뷰 / js로 html을 만들고 넣을 때, 코드리뷰

//수정 전
const shirtsSize = `<option>95</option>
<option>100</option>
<option>105</option>
<option>110</option>`;
  • html tag가 숫자만 다르고 나머지는 같음
    • 숫자가 0,1,2,3이 아니므로, 배열을 이용하면 된다.
//수정 후
let shirtsSize;
const shirtsSizeArr = [95, 100, 105, 110];
for (let i = 0; i < shirtsSizeArr.length; i++) {
  shirtsSize = shirtsSize + "<option>" + shirtsSizeArr[i] + "</option>";
}
profile
devyoon99
dev
이전 포스트

TIL 211120

다음 포스트

TIL 211206

0개의 댓글

관련 채용 정보