2023.05.19 JS 기본개념

vw = 브라우저 폭

X초 마다 코드 실행하려면

setlnterval(function(){실행할 코드}, ms)

function 문법

1. 긴 코드 축약해서 쓸 수 있음
2. 파라미터 추가가능
3. return → 반환
   1. return은 함수 종료 기능도 있음
   2. function 함수(){ return 1 + 3 console.log(1); } let 변수 = 함수() console.log(변수);
4. function 함수(){ return 123(아무거나 다 가능) } let 변수 = 함수() console.log(변수);

return 의 용도

1. 아래 표와 같이 많은 식이 필요할 때 식을 만들어 표현
2. console.log(6000 * 0.1); function vat(a) { return a * 0.1 } vat(50000)

소수점 반올림

→ 숫자.toFixed(몇자리)

console.log(vat(55555));

    function vat(a) {
      let num = (a * 1.1).toFixed(1)
      return
    }

자바스크립트 + 연산자 특징

• ‘문자’ + 123 = ‘문자123’
• ‘문자’ + ‘문자’ = ‘문자문자’

문자였던 숫자를 숫자로 변환

• parseFloat(’123) → 실수
• parselnt(’123’) → 정수

console.log(vat(55555));

    function vat(a) {
      var num = (a * 1.1).toFixed(1)
      return perseFloat(num)
    }

scroll 이벤트 리스터

<script>

    window.addEventListener('scroll', function(){
      
    })

  </script>

유저가 얼마나 스크롤바 내렸는지

<script>

    window.addEventListener('scroll', function(){
      console.log(window.scrollY);
    })

  </script>

강제 스크롤 하기 → window.scrollTo(0, 100);

현재 위치부터 강제로 스크롤하기 → window.scrollBy(x, y)

스크롤바 내린 높이 → 셀렉터.scrollTop

div 실제 높이 → 셀렉터.scrollHeight

document.querySelector('html').scrollTop;

//현재 웹페이지 스크롤양

document.querySelector('html').scrollHeight;

//현재 웹페이지 실제높이

document.querySelector('html').clientHeight;

//현재 웹페이지 보이는 높이임

For반복문

for(let i = 0; i < 3; i++){
  console.log('안녕')
}

탭기능 구현

const tabButtons = document.querySelectorAll('.tab-button');

for (let i = 0; i < tabButtons.length; i++) {
  tabButtons[i].addEventListener('click', function() {
    removeClass(tabButtons, 'orange');
    addClass(tabButtons[i], 'orange');
    removeClass(tabButtons, 'show');
    addClass(tabButtons[i], 'show');
  });
}

function removeClass(elements, className) {
  elements.forEach(function(element) {
    element.classList.remove(className);
  });
}

function addClass(element, className) {
  element.classList.add(className);
}

이벤트 버블링 현상

어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상

수정 코드

1. e.target → 실제로 이벤트 발생한 곳 - 유저가 실제로 누른 것
2. e.currentTarget;, this; → 이벤트 달린 곳
3. e.preventDefault(); → 이벤트 기본동작 막아줌
4. e.stopPropagation(); → 내 상위 요소로 이벤트 버블링 막아줌

document.querySelector('.black-bg').addEventListener('click', function(e){

      e.target; // 실제로 이벤트 발생한 곳 - 유저가 실제로 누른 것
      e.currentTarget; // 이벤트 달린 곳 - 
      this;
      e.preventDefault(); // 이벤트 기본동작 막아줌
      e.stopPropagation(); // 내 상위 요소로 이벤트 버블링 막아줌

      document.querySelector('.black-bg').classList.remove('show-modal');
    })

html 태그에 정보 숨기기 가능

data-자료이름=”값”

<li class="tab-button" data-작명="값">Products</li>
      

숨겼던 자료 출력은

셀렉터.dataset.자료이름

console 창에

document.querySelector('.tab-button').dataset.id

 

요즘 뭔가 집중력이 많이 풀린거 같다.. 

리마인드를 해야할 거 같다.

이제 15기 온보딩이 시작한니 다시 열심히 달려보자! 화이팅!!