[DAY - 30] animate, 갤러리, 갤러리+animate, load, this, target / currentTarget

animate
갤러리
갤러리+animate
load
this
target / currnetTarget

1) animate

css의 animation와 동일한 효과를 script에서 줄 수 있다.

        <!-- 함수 정의해서 사용 -->
        const a = [
            { transform: "rotate(0) scale(1)" },
            { transform: "rotate(360deg) scale(0)" },
            { transform: "rotate(0deg) scale(2)" },
        ];

        const b = {
            duration: 2000,
            iterations: 3,
        };

        div.addEventListener('click', function(){
            div.animate(a,b);
        });

        <!-- 함수 없이 넣어서 사용 -->

        div.addEventListener('click', function(){
            div.animate([
            { transform: "rotate(0) scale(1)" },
            { transform: "rotate(360deg) scale(0)" },
            { transform: "rotate(0deg) scale(1)" },
        ],3000)
        })

        <!-- 다른 효과 추가 -->

        div.addEventListener('click', function(){
            div.animate([
            { transform: "rotate(0) scale(1)", opacity : 0 },
            { transform: "rotate(360deg) scale(0)", opacity : 1},
            { transform: "rotate(0deg) scale(1)", opacity : 0.5},
        ],3000)
        })
        
        <!-- offset -->

        div.addEventListener('click', function(){
            // offset : 0~1 3초 = 1 (처음과 끝은 생략 가능)
            div.animate([
            { transform: "translateX(0px)", offset : 0},
            { transform: "translateX(200px)", offset : 0.3},
            { transform: "translateX(400px)", offset : 0.5},
            { transform: "translateX(600px)", offset : 0.8},
            { transform: "translateX(800px)", offset : 0.9},
            { transform: "translateX(1000px)", offset : 1},
        ],3000)
        })

        <!-- easing -->

        let div = document.querySelector('div');

        div.addEventListener('click', function(){
            div.animate([
            { transform: "translateX(0px)", easing : 'ease'},
            { transform: "translateX(200px)", easing : 'ease-in'},
            { transform: "translateX(400px)", easing : 'ease-in-out'}
        ],3000)
        })

        <!-- 객체 형식 -->

        div.addEventListener('click', function(){
            // 속성 : [값, 값, 값]
            div.animate({
                transform : ['translateX(0px) scale(1)',
                'translateX(200px) scale(2)'],
                backgroundColor : ['pink', 'orange'],
            },3000)
    })

style과 마찬가지로 하이픈이 있는 태그는 붙여서 쓰되 첫자를 대문자로 쓴다.
ex) background-color -> backgroundColor
사용하는 태그들은 css에서 사용하던 익숙한 것들이라 쉽게 적용 가능하다.
효과, 시간, 반복 횟수를 함수로 지정해서 넣을 수 있고 직접 작성할 수도 있다.
offset은 css의 @keyframes와 같은 기능을 한다.

2-1) 갤러리

<body>
    <div class="gallery">
        <h2>xxx</h2>
        <img src="images/img4.jpg" alt="">
        <p>
            <button>이미지1</button>
            <button>이미지2</button>
            <button>이미지3</button>
            <button>이미지4</button>
            <button>이미지5</button>
        </p>
    </div>
    <script>
        'use strict';
        let txt = document.querySelector('.gallery h2');
        let pic = document.querySelector('.gallery img');
        let btn = document.querySelectorAll('.gallery p button');

        btn[0].addEventListener('click', function(){
            txt.textContent = '짹짹';
            pic.setAttribute('src', 'images/img1.jpg')
        });
        btn[1].addEventListener('click', function(){
            txt.textContent = '멍멍';
            pic.setAttribute('src', 'images/img2.jpg')
        });
        btn[2].addEventListener('click', function(){
            txt.textContent = '삐약';
            pic.setAttribute('src', 'images/img3.jpg')
        });
        btn[3].addEventListener('click', function(){
            txt.textContent = '꽥꽥';
            pic.setAttribute('src', 'images/img5.jpg')
        });
        btn[4].addEventListener('click', function(){
            txt.textContent = '뿌우';
            pic.setAttribute('src', 'images/img6.jpg')
        });
    </script>
</body>

button들을 querySelectorAll을 사용해 지정했으므로 배열로 취급된다.
따라서 btn[0]과 같이 인덱스 번호로 구별할 수 있다.

2-2) 갤러리 배열 사용

        let arr = ['애옹','짹짹','끼끼','삐약','뿌우','멍멍']
        txt.textContent = arr[5];

        btn[0].addEventListener('click', function(){
            txt.textContent = arr[0];
            pic.setAttribute('src', 'images/img0.jpg')
        });
        btn[1].addEventListener('click', function(){
            txt.textContent = arr[1];
            pic.setAttribute('src', 'images/img1.jpg')
        });
        btn[2].addEventListener('click', function(){
            txt.textContent = arr[2];
            pic.setAttribute('src', 'images/img2.jpg')
        });
        btn[3].addEventListener('click', function(){
            txt.textContent = arr[3];
            pic.setAttribute('src', 'images/img3.jpg')
        });
        btn[4].addEventListener('click', function(){
            txt.textContent = arr[4];
            pic.setAttribute('src', 'images/img5.jpg')
        });

좀 전의 코드에서 h2의 내용을 배열로 만들어 같은 인덱스 번호로 사진과 h2내용이 같게 할 수 있다.

2-3) 갤러리 배열+for 사용

    <script>
        'use strict';
        let txt = document.querySelector('.gallery h2');
        let pic = document.querySelector('.gallery img');
        let btn = document.querySelectorAll('.gallery p button');
        let arr = ['애옹','짹짹','끼끼','삐약','뿌우','멍멍']
        txt.textContent = arr[5];

        for(let i=0; i<btn.length; i++){
            btn[i].addEventListener('click', function(){
            txt.textContent = arr[i];
            pic.setAttribute('src', 'images/img'+i+'.jpg')
            })
        }
    </script>

같은 인덱스 번호를 인용한다는 것을 이용해 for문을 사용하면 더 간단하게 작성할 수 있다.

2-4) 갤러리 타이머

    <script>
        'use strict';
        let txt = document.querySelector('.gallery h2');
        let pic = document.querySelector('.gallery img');
        let arr = ['애옹','짹짹','끼끼','삐약','뿌우','멍멍']
        txt.textContent = arr[5];

        let cnt = 0;
        const make=()=>{
            cnt++;
            if(cnt===arr.length){
                cnt=0;
            }
            txt.textContent = arr[cnt];
            pic.setAttribute('src', 'images/img'+cnt+'.jpg')
        }
        setInterval(make, 1000);
    </script>

setInterval을 사용해 make함수를 1초마다 실행하게 해 보았다.
사진 설명과 이미지를 불러오기 위해 cnt를 정의하고, make함수가 실행되면 cnt가 1씩 증가하여 설명과 이미지가 바뀌도로 했다.

2-5) 갤러리 animate

    <script>
        'use strict';
        let txt = document.querySelector('.gallery h2');
        let pic = document.querySelector('.gallery img');
        let btn = document.querySelectorAll('.gallery p button');
        let arr = ['애옹','짹짹','끼끼','삐약','뿌우','멍멍']
        txt.textContent = arr[5];

        for(let i=0; i<btn.length; i++){
            btn[i].addEventListener('click', function(){
            pic.animate([
                {opacity : 0},
                {opacity : 1}
            ],500)
            txt.textContent = arr[i];
            pic.setAttribute('src', 'images/img'+i+'.jpg')
            })
        }
    </script>

button을 누를 시 설명과 이미지 src만 바뀌는 게 아니고 pic의 opacity도 바뀌어 자연스럽게 바뀌도록 할 수 있다.

3) load

<style>
    body {
        margin: 30px;
    }
    button {
        width: 200px;
        height: 60px;
        margin-bottom: 10px;
    }    
    .box {
        width: 200px;
        height: 60px;
        border: 1px solid #000;
        font-size: 30px;
        line-height: 2;
        text-align: center;
    }
</style>
<script>
    'use strict';  
    let btn = document.querySelector('button');
    let dom = document.querySelector('.box');

    btn.addEventListener('click', function(){
        dom.textContent = 'load 실행';
    })
</script>
</head>
<body>
    <button>확인</button>
    <div class="box">xxx</div>
</body>

script를 html 위에 작성을 하게 되면 html 내부의 div.box를 생성하기 전에 script가 실행되기 때문에 Error가 발생한다.
이를 방지하기 위해 사용하는 것이 load이다.

<style>
    body {
        margin: 30px;
    }
    button {
        width: 200px;
        height: 60px;
        margin-bottom: 10px;
    }    
    .box {
        width: 200px;
        height: 60px;
        border: 1px solid #000;
        font-size: 30px;
        line-height: 2;
        text-align: center;
    }
</style>
<script>
    'use strict';
    window.onload = function(){
        let btn = document.querySelector('button');
        let dom = document.querySelector('.box');
        btn.addEventListener('click', function(){
        dom.textContent = 'load 실행';
        })
    }
</script>
</head>
<body>
    <button>확인</button>
    <div class="box">xxx</div>
</body>

이처럼 window.onload를 사용하면 이미지, 동영상, 텍스트, style 등이 로딩된 후 해당 script가 실행된다.

    window.addEventListener('DOMContentLoaded', function(){     
        let btn = document.querySelector('button');
        let dom = document.querySelector('.box');
        btn.addEventListener('click', function(){
        dom.textContent = 'load 실행';
        })
    });

DOMContentLoadad는 초기 html 문서만 불러오고 script를 실행한다. 대신 style, 이미지, 하위 프레임은 불러오기 전에 실행됨으로 속도가 빠르다.

* 과거 IE8 버전 이하에선 사용이 불가능했었다.

4) this

        let dom = document.querySelector('.box')
        dom.addEventListener('click', function(){
            dom.textContent = 'HELLO';
            dom.style.backgroundColor = 'tan';
            dom.style.color = 'white';
        })

        let dom = document.querySelector('.box')
        dom.addEventListener('click', function(){
            this.textContent = 'HELLO';
            this.style.backgroundColor = 'tan';
            this.style.color = 'white';
            console.log(this)
        })

dom을 this로 바꾼 뒤 dom인. box를 클릭하고 콘솔을 확인하면 click 이벤트를 한 .box가 출력된다.

        let dom = document.querySelector('.box')
        dom.addEventListener('click', ()=>{
            this.textContent = 'HELLO';
            this.style.backgroundColor = 'tan';
            this.style.color = 'white';
            console.log(this)
        })

주의할 점은 화살표 함수에서 사용 시 error가 발생한다는 것이다.
따라서 화살표 함수에서 사용하고 싶을 땐 아래와 같이 하면 된다.

        let dom = document.querySelector('.box')
        dom.addEventListener('click', (event)=>{
            event.currentTarget.textContent = 'HELLO';
            event.currentTarget.style.backgroundColor = 'tan';
            event.currentTarget.style.color = 'white';
            console.log(this)
        })

함수 매개변수와 this대신 event, evt, e, event.currentTarget을 사용하면 된다.
대신 this는 상위 영역(스코프)의 window가 된다.

5) target / currentTarget

    <div class="con-box">
        <p class="box1">
            <strong>HELLO</strong>
        </p>
        <p class="box2">
            <span>BYE</span>
        </p>
    </div>
    <script>
        'use strict';
        let dom = document.querySelector('.con-box');
        dom.addEventListener('click', function(e) {
            console.log(this); // div
        })
    </script>

가장 바깥쪽의 div인 con-box에 click 이벤트가 걸려있을 때 이벤트를 발생시키고 this의 출력값을 보면 con-box가 나오게 된다.

        let dom = document.querySelector('.con-box');
        dom.addEventListener('click', function(e) {
            console.log(e.currentTarget);
        })

this 대신 currentTarget을 사용해도 마찬가지로 이벤트가 걸려있는 대상인 click가 출력된다.

        let dom = document.querySelector('.con-box');
        dom.addEventListener('click', function(e) {
            console.log(e.target);
        })

하지만 target을 사용하면 실제로 click을 한 대상이 출력된다.

1) animate

2-1) 갤러리

2-3) 갤러리 배열+for 사용

2-4) 갤러리 타이머

2-5) 갤러리 animate

3) load

4) this

5) target / currentTarget

티스토리툴바