[개발일지] JavaScript & JQuery 기초 수업 Level 2-2

<코딩애플 온라인강의 수강일지>

Level 2-2 JavaScript: scroll event, 반복문

 

1. scroll 이벤트

//scroll 이벤트 리스너

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


//scroll 값

window.scrollY // Y 스크롤값
window.scrollX // X 스크롤값


// scroll 기능

window.scrollTo(0, 100) // 100px 위치까지 세로 스크롤
window.scrollBy(0, 100) // 현재 위치에서 100px 만큼 세로 스크롤


// bootstrap 설치 시
:root { scroll-behavior : auto } // css 파일 맨 위에 추가하면 바로 이동


// scroll 값
var scrTop = document.querySelector('.lorem').scrollTop; // 스크롤 한 높이
var scrHeight = document.querySelector('.lorem').scrollHeight; // 스크롤의 높이
var cliHeight = document.querySelector('.lorem').clientHeight; // 박스가 화면에 보이는 높이


//응용
        $('.lorem').on('scroll', function () {
            var scrTop = document.querySelector('.lorem').scrollTop;
            var scrHeight = document.querySelector('.lorem').scrollHeight;
            var cliHeight = document.querySelector('.lorem').clientHeight;

            console.log(scrTop, scrHeight, cliHeight)

            if (scrTop + cliHeight == scrHeight) {
                alert('약관을 전부 읽었습니다.')
            } else { }
        })
        
        
// progress bar(scroll

        window.addEventListener('scroll', function () {
            var progressBar = window.scrollY * 200 / document.documentElement.scrollHeight
            $('.prog-bar').css('width', `${progressBar}%`)
        })

 

2. 반복문 사용하여 탭기능 만들기

        var buttons = $('.tab-button')
        var contents = $('.tab-content')

        for (let i = 0; i < buttons.length; i++) {
            buttons.eq(i).on('click', () => {
                contents.removeClass('show')
                buttons.removeClass('orange')

                contents.eq(i).addClass('show')
                buttons.eq(i).addClass('orange')
            }) 
        }

 

3. 이벤트리스너 안에서 쓰는 이벤트 함수들

  e.target; // 실제 클릭한 요소를 알려줌(이벤트 발생한 곳)
  e.currentTarget; // 지금 이벤트리스너가 달린 곳 알려줌
  e.preventDefault(); // 실행 시 이벤트 기본동작을 막아줌
  e.stopPropagation(); // 실행 시 상위요소로의 이벤트 버블링 중단

// 모달창 이벤트 버블링 방지하기

document.querySelector('.black-bg').addEventListener('click', function(e){
  if ( e.target == document.querySelector('.black-bg') ) {
    document.querySelector('.black-bg').classList.remove('show-modal');
  }
})

// 클릭한 요소가 내가 원하는 요소(검은 배경)인지 확인하여 실행

// Jquery로 변경 시 .is() 함수 이용하여 비교하여야 함

        $('.black-bg').on('click', (e) => {
            if ($(e.target).is($('.black-bg'))) {
                $('.black-bg').removeClass('show-modal')
            } else { }
        })

 

응용하기

// data-id 이용하여 데이터값을 숨겨놓을 수 있다.

        <ul class="list">
            <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>
        </ul>

// e.target, dataset 이용하여 현재 누른 버튼 판별 가능

        $('.list').click((e) => {

            openTab(e.target.dataset.id)
        })

        // var buttons = $('.tab-button')
        // var contents = $('.tab-content')

        // for (let i = 0; i < buttons.length; i++) {
        //     buttons.eq(i).on('click', () => {
        //         openTab(i)
        //     })
        // }

        function openTab(a) {
            contents.removeClass('show')
            buttons.removeClass('orange')
            contents.eq(a).addClass('show')
            buttons.eq(a).addClass('orange')
        }

 

 

4. 쓸만한 자바스크립트 라이브러리들

 

 1) Swiper: 캐러셀 만들기

https://swiperjs.com/get-started#use-swiper-from-cdn

Getting Started With Swiper

 

 2) Chart.js: 웹페이지에 차트 만들기

  - js 다운 / cdn 설치

https://cdnjs.com/libraries/Chart.js

Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 - 예제코드

https://www.chartjs.org/docs/latest/

Chart.js | Chart.js

 

 3) Animate On Scroll: 스크롤 시 요소 등장 애니메이션

https://github.com/michalsnik/aos

GitHub - michalsnik/aos: Animate on scroll library

css, js cdn 설치 후 script 태그 입력 하면 설치 완료

<script>
  AOS.init();
</script>

 

  - 예제 코드

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

 

 4) EmailJS : 이메일 송수신 가능

https://www.emailjs.com/docs/introduction/how-does-emailjs-work/ 

How does EmailJS work? | EmailJS

가입하여 계정 만들고 튜토리얼 복사 붙여넣기

 

 

 5) Lodash: array, object, 문자, 숫자 자료를 다루기 편해지는 기본함수 제공

https://lodash.com/

Lodash