ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 23_10_28 JS공부정리
      개발공부/JavaScript 2023. 10. 29. 03:45

      [코딩애플] 중급모듈

       

      *위 아래 두코드는 동일하게 동작함

      -배열.forEach(function(e,i) {})
      -배열.forEach((element, index) => {함수})

       

       

      jQuery 셀렉터로 여러 요소 찾은 뒤 하나만 고르기

      지금 class="tab-button" 가진 요소가 3개나 있습니다.

      그래서 $('.tab-button').on() 이렇게 이벤트리스너 달면

      3개 버튼에 전부 이벤트리스너를 달게됩니다.

      그게 싫고 버튼0만 달고 싶으면 

      $('.tab-button').eq(0).on('click', function(){
  
});

      이렇게 쓰면 됩니다.

      $( ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택하고 싶으면

      $( ).eq(x) 쓰면 됩니다. 

       

       

      -탭 코드

              integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> //부트스트랩라이브러리
          <style>
              ul.list {
                  list-style-type: none;
                  margin: 0;
                  padding: 0;
                  border-bottom: 1px solid #ccc;
              }

              ul.list::after {
                  content: '';
                  display: block;
                  clear: both;
              }

              .tab-button {
                  display: block;
                  padding: 10px 20px 10px 20px;
                  float: left;
                  margin-right: -1px;
                  margin-bottom: -1px;
                  color: grey;
                  text-decoration: none;
                  cursor: pointer;
              }

              .orange {
                  border-top: 2px solid orange;
                  border-right: 1px solid #ccc;
                  border-bottom: 1px solid white;
                  border-left: 1px solid #ccc;
                  color: black;
                  margin-top: -2px;
              } //클릭시 추가되는 속성(탭디자인)

              .tab-content {
                  display: none;
                  padding: 10px;
              }

              .show {
                  display: block;
              } //클릭시 추가되는 속성(내용)
          </style>
      </head>

      <body>
          <div class="container mt-5">
              <ul class="list">
                  <li class="tab-button">Products</li>
                  <li class="tab-button orange">Information</li>
                  <li class="tab-button">Shipping</li>
              </ul>
              <div class="tab-content">
                  <p>상품설명입니다. Product</p>
              </div>
              <div class="tab-content show">
                  <p>스펙설명입니다. Information</p>
              </div>
              <div class="tab-content">
                  <p>배송정보입니다. Shipping</p>
              </div>
          </div>
       
      //js 
      const $tabBtn = document.querySelectorAll('.tab-button');
      const $tabContent = document.querySelectorAll('.tab-content');

      $tabBtn.forEach(function(e,i) { //탭클릭시 이벤트
          e.addEventListener("click", function() {
              $tabBtn.forEach((element,i) => {
                  element.classList.remove('orange');
              }) //모든 탭버튼 오랜지클래스 제거
              $tabContent.forEach((element,i) => {
                  element.classList.remove('show');
              }) //모든 내용 show클래스 제거
              e.classList.add('orange'); //클릭된 버튼 오랜지클래스 추가
              $tabContent[i].classList.add('show'); //클릭된 버튼 내용추가
          }) 
      })

       

      -모달창 밖을 누르면 모달창이 꺼지는 코드

          document.querySelector('.black-bg').addEventListener("click", (event) => {
            if(event.target == event.currentTarget) { //내가 누른게(까만배경) 이벤트가 달린곳(까만배경)인지 확인
              document.querySelector('.black-bg').classList.remove('show-modal');
            } //화살표함수일땐 this는 window를 가르키기때문에 사용할 수 없음.
          })

      *이벤트 버블링 현상때문에 black-bg에 달린 이벤트임에도 input이나 white-bg를 클릭했을때 black-bg에도 이벤트가 발생하므로 모달창이 꺼지는 버그 발생.

      *event.target(내가 실제로 누른거. input이나 white-bg를 눌렀을때도 포함)과 event.currentTarget(이벤트를 달아놓은 black-bg)를 비교해서 같을때만 콜백함수가 실행되게 만들어야함.

       

      e.target //유저가 실제로 누른거
      e.currentTarget(=this, addEventListener 안에서 화살표함수가 아닐때만.) //이벤트리스너 달린곳
      e.preventDefault //이벤트 기본동작 막아줌
      e.stopPropagation(); //내 상위요소로 이벤트 버블링 막아줌

       

      -제이쿼리를 이용한 조건문

          if($(e.target).is($('.black-bg'))) {
            document.querySelector('.black-bg').classList.remove('show-modal');
          }

      (참고2. e.target == $('.black-bg')로도 가능?? ) 

      jQuery 셀렉터로 찾은 결과와

      querySelector 셀렉터로 찾은 결과는 다르게 생겼습니다.

      출력해보면 전자는 이상한 object 이런게 나오고 후자는 <html> 이런게 나옵니다. 

      그래서 e.target == $('.black-bg') 이건 사용불가능합니다.

      그리고 애초에 jQuery 셀렉터끼리 등호비교는 불가능합니다. 

      $('.black-bg').is($('.black-bg')) 이런 비교용 함수쓰든가 하면 됩니다.

      위 예제에선 $(e.target).is($('.black-bg')) 이러면 됩니다. 

       

      -이벤트리스너는 램용량을 많이 차지하기 때문에 이벤트 버블링을 이용해서 이벤트리스너를 하나만 달아놓는것이 좋다

       

      -data-작명="값' 을 HTML태그 속성으로 삽입해놓으면 데이터전달이 가능함

                  <li class="tab-button" data-id="0">Products</li>

      이런식으로 출력가능.

      -data-작명='값'을 이용해 if문을 사용하지 않고도 가능

      <li class="tab-button" data-id="0">Products</li>
      <li class="tab-button orange" data-id="1">Information</li>
      <li class="tab-button" data-id="2">Shipping</li>
       
      document.querySelector('.list').addEventListener("click", function(event){
        탭열기(parseInt(event.target.dataset.id))
      }) 

       

      배열.sort() : 배열을 숫자-영어-한글 순으로 정렬함.

       

      -서버사이드 렌더링 : 완성된 html파일을 유저에게 전달하는 방식

       

      -클라이언트사이드 렌더링 : 빈 html과 필요한 데이터를 유저에게 전송해서 브라우저에서 렌더링되는 방식

      -데이터 바인딩 : 데이터를 html에 꽂아넣는 방식

      서버사이드렌더링
      클라이언트사이드 렌더링

       

      -상품선택 코드

      셔츠선택시 아래에 드롭다운박스 추가

        <form class="container my-5 form-group">
          <p>상품선택</p>
          <select class="form-select mt-2" id="form-select">
            <option>모자</option>
            <option>셔츠</option>
          </select>
          <select class="form-select mt-2" id="shirt-size" style="display:none;">
            <option>90</option>
            <option>95</option>
            <option>100</option>
          </select>
        </form>
       
          const $formSelect = document.querySelector('#form-select')
          const $shirtSize = document.querySelector('#shirt-size')
          $formSelect.addEventListener("change", () => {
            if($formSelect.value == '셔츠') {
              $shirtSize.style.display = "block"
            } else {
              $shirtSize.style.display = "none"
            }
          })

       

       

      -append와 appendChild 차이점

      -append는 생성된 태그(노드) 뿐 아니라 택스트도 자식으로 넣을 수 있음. 아무것도 반환하지 않음.

      -appendChild는 태그(노드)만 자식으로 넣을 수 있음. 노드를 반환함.

      https://webruden.tistory.com/634

       

      [Javascript] append vs appendChild 차이점 (초간단)

      append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간

      webruden.tistory.com

       

      -요즘은 append로 태그삽입보다는 insertAdjacentHTML()을 많이씀

      - insertAdjacentHTML(삽입할위치, 텍스트)

      https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

       

      Element: insertAdjacentHTML() 메서드 - Web API | MDN

      Element (en-US) 인터페이스의 insertAdjacentHTML() 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입합니다.

      developer.mozilla.org

      -예시코드. createElement()보다 좀더 직관적으로 태그를 만들 수 있음.

        <div id="test"></div>

        <script>
          let 템플릿 = '<p class="hi">안녕</p>';
          document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿)
        </script>

      실행결과

      -forEach : array를 반복하는 문법 

      -for in : object를 반복하는 문법

      형식 : for(let key in 객체)

          var obj = {name:'kim', age:30}
         
          for (let key in obj) {
            console.log(key);
          }
       
          for (let key in obj) {
            console.log(obj[key]);
          }

      출력결과1 : 키값출력
      출력결과2 : 밸류값출력

      https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

       

      for...in - JavaScript | MDN

      for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

      developer.mozilla.org

       

      -배열.some(콜백함수) : 조건이 맞는순간 함수를 실행하고 즉시 종료됨.

      -철수가 2번반복되도 한번만 출력됨

      const 출석부 = ['흥민','철수','영희','철수']
      function 이름찾기(이름) {
          if(출석부.some(e => e === 이름)) {
              console.log("있어요");
          }
      }

      https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some

       

      Array.prototype.some() - JavaScript | MDN

      some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를

      developer.mozilla.org

       

      '개발공부 > JavaScript' 카테고리의 다른 글

      23_10_30 JS공부정리  (0) 2023.10.31
      23_10_29 JS공부정리  (0) 2023.10.30
      23_10_27 JS공부정리  (0) 2023.10.28
      23_10_26 JS공부정리  (0) 2023.10.27
      23_10_24 JS공부정리  (1) 2023.10.25

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바