2. Javascript/Jquery 입문

https://superkts.com/jquery/

  • jquery 공작소 참고합시다

1. 자바스크립트

셀렉터

document.getElementById('hello').innerHTML =  '안녕'
-웹문서의 ID가 hello인 HTML요소에서  HTML의 내부글자를 안녕으로 바꾼다

innerHTML 대신 style.color 등으로 색상도 바꿀 수 있다.

document.getElementById('???').??? =  '???'
- 빈칸에 변화를 주고 싶은 대로 채울 수 있다.


onclick = document.getElementById('ID명').style.display = display=block;

을 사용하여 클릭시 숨겨둔 것을 보이도록 할 수 있다.

셀렉터 종류

1. 클래스 : getElementsByClassName('class명')[n].~~
 몇번째 클래스인지 같이 표기를 해주어야한다.

.addEventListener

HTMl 창을 조금 더 깔끔하게 정리할 수 있다.

click keydown scroll mouseover

document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none'
});

- .addEventListener 왼쪽의 요소를 클릭하면 안의 코드를 실행 시키라는 명령
'close라는 ID를 클릭하면 alert id를 안보이게 해라'

click 외에도 keydown, scroll, mouseover 등 다양한 이벤트를 적용할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/Events

function 활용하기

1) 복잡한 함수를 한단어로 정리

script 안에 
	function 아무작명() {
    	함수입력~~~~~~~
       }
 을 하고 넣고자하는 곳안에 아무작명()을 넣으면 보기 좋게 만들 수 있다.

2) 함수의 파라미터

  • 함수 하나로 다양한 기능 실행 가능

     function plus(구멍) {
         2 + 구멍
     }
     
  파라미터(구멍)부분에 넣은 값에 따라 결과 값이 달라진다.
  이는 여러 함수를 만들 필요없이 하나의 함수에서 입력값만 
  달리하여 다양한 결과를 나타낼 수 있다.

	function plus(구멍1, 구멍2) {
   	구멍1 + 구멍2
       }
       
   이렇게 두개의 파라미터를 줄 수도 있다.

    함수

    if문

    if (3 > 1) {

    console.log('안녕')
    }

     괄호 안의 조건이 맞으면 중괄호 안의 내용을 실행

    if ( 3 > 5) {
    console.log('안녕')
    } else {
    console.log('반가워')
    }

      괄호 안의 조건이 맞지 않으면 else를 실행

    if( 3 == 1) {
    console.log('안녕')
    } else if ( 1 == 2) {
    console.log('반가워')
    } else {
    console.log('고마워')
    }

    조건은 두개 이상 준다. 앞선 조건식이 틀리면 마지막을 실행시키고 맞는 것이 있으면 그것을 실행한다.

  • and와 or
    if( 3 ==1 && 1 == 1 )
    • &&은 and로, and로 연결된 두 조건이 둘다 맞아야 참으로 인정된다.
    if( 3 == 1 || 1 == 1)
    • ||는 or로, 연결된 두 조건 중 하나만 맞아도 참으로 인정된다.
  • 괄호안에 들어 갈 수 있는 등호
    <, >, =<, >=, ==, ===
    ===는 데이터 타입까지 맞아야하고 ==는 하나는 문자형, 하나는 숫자형이더라도 모양이 같으면 같다고 인정한다.

for문

for ( i = 0; i < 6; i++) {
	console.log(i)
    }
    
초기값설정; i의 범위 설정; 증감범위 설정
- 첫번째부터 시작하여 6까지 1씩 늘어나는 값을 출력

for (var i = 0; i < 6; i++) {
	var 이름 = ~~
    
   }
   
 이런식으로 변수선언도 가능하다.

forEach문

HTML에서 만들어 놓은 곳에 자료를 넣는 것이 아니라 반복된 자료만큼 자바스크립트에서 공간을 만들어 넣는다.

var 사이즈 = [26,28,30,32,34,36];

$('#option1').on('change', function(){

if ($('#option1').val() == '바지'){

 	사이즈.forEach(function(i){
   		var 템플릿 = `<option>${i}</option>`;
    	$('#option2').append(템플릿);
 	});

}
});

option1이 변화할 때 함수가 적용된다.
만약 option1의 값이 바지가 되면

사이즈 배열의 값을 반복하는데
<option></option>의 틀 안에 i의 값이 들어가는 형태이고
이 탬플릿은 option2에 나타난ㄷ.

sort 정렬

숫자형 정렬

var 어레이 = [7,3,5,2,40];

어레이.sort()를 한다면 문자열 오름차순으로 설정되기 때문에 앞 글자만 정렬하여 40이 4로 인식이 된다.

어레이.sort(function(a,b){
return a - b

});

숫자를 오름차순으로 하려면 위와 같은 함수를 주어야한다.

어레이.sort(function(a,b){
return b - a

});

위는 내림차순

a에서 b를 빼서 양수가 나오면 b가 먼저 배치되고 음수가 나오면 a가 앞으로 나오기 때문에 a - b이면 오름차순, b - a이면 내림차순이다.

문자형 정렬

var 가나다 = ['c','v','e','a']

가나다.sort() 
오름차순으로 정렬한다.

가나다.sort()
가나다.reverse()
오름차순으로 정렬 후 앞뒤를 바꾸면 내림차순으로 된다.
바로 reverse를 하면 변수 내에서만 앞뒤가 바뀐다.

filter

어떤 배열에서 원하는 내용을 걸러낸다.

var 필터주기 = [5,4,8,41,56,223,1]
var 뉴필터주기 = 필터주기.filter(function(a){
	return a <= 4
});

* 신문법이기 때문에 변수선언을 다시 해주어야한다.

배열 중 4 이하만 걸러낸다.

map

어떤 배열의 구성요소에 각각 똑같은 작업을 시켜 새로운 배열을 만들 수 있다.

var 필터주기 = [5,4,8,41,56,223,1]
var 새필터주기 = 필터주기.map(function(a){
	return a * 2
});

* 신문법이기 때문에 선언을 새로 해주어야함

모든 배열에 2를 곱한다.

배열을 이용하여 상품 정렬 기능 만들기

Jquery

js를 간단하게 만들 수 있는 라이브러리

설치 방법

  1. jquery cdn을 검색하여 jquery 버전을 선택하여 복붙하기 - 복붙한 script 아래에 코드를 입력하여야한다.
  2. 파일을 다운받아서 연결하기 - script src로 연결

기본 문법

js : document.getElementById('title').innerHTML = '바보';
jq : $('#title').html('바보');

  • title이라는 id 태그에서 html을 바보로 바꾸라는 의미인데 jquery는 간단히 표현할 수 있다.

    $에는 찾는 셀렉터를 적는다 css에서와 같은 방식으로 id면 #, class면 .

    뒷부분은 메소드를 사용하여 세부 속성을 바꿀 수 있다.

    .text : 안에 있는 모든 텍스트를 변경
    .html : 안에 있는 모든 태그를 변경-> .html('<//p>바보<//p>')
    .css : 스타일 속성을 변경 -> .css('color','red') 빨간색으로 변경
    .attr : 속성을 변경 -> .attr('src','ddd.jpg')

활용 (애니메이션)

1) JS는 개별로 코드를 주어야하는 것을 제이쿼리는 한번에 줄 수 있다.

document.getElementsByClassName('btn')		[1].addEventListener('click', function(){
        document.getElementsByClassName('greeting')[0].style.display = 'block';
    })

-> 두번째 btn을 누르면 greeting 첫번째 클래스를 보이도록해라

    $('.btn').eq(2).on('click',function(){
        $('.greeting').show();
    })

-> 세번째 btn을 누르면 greeting 모두를 보이도록해라

2) 애니메이션 만들기

css에서 적용전 형태를 만들고 js, jquery를 통해 트리거를 만들어 준다.

.black-background {
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
display: block;
transition: all 1s;
transform: translateY(-1000px);
}

미리 변경전 화면을 만들고 transition을 준다.

$('#login').on('click', function(){
      $('.black-	background').css('transform','translateY(0px)')
    });
    
js, jquery에서 .css를 통해 바꿀 형태로 설정을 해준다.

  • margin, left, right 등 보다 transform으로 이동해주는 게 빠르고 자연스럽다. (css에서도 같음)

  • .css 대신 .addClass를 통해 미리 만들어 놓은 class를 붙여서 만들 수 있다.

    		$('#login').on('click', function(){
 	   $('.black-background').addClass('slide-add')
  });
  
  slide-add라는 클래스에 transform : translateY(0px);을 설정해놓으면 black-background 클래스에 추가되면서 트랜스폼이 적용된다.

  • 스크롤 애니메이션 (스크롤 할 시 상단 메뉴에 배경색이 입히고 글자 크기가 변화

    		$(window).on('scroll',function(){
   if ($(window).scrollTop() > 100) {
     $('.nav-menu').addClass('nav-black');
   } else {
     $('.nav-menu').removeClass('nav-black');
   }
   
 });
 
 * css에 transition을 적용하여 자연스럽게 변화하도록 설정
 * nav-black이라는 class를 미리 만들어 놓는다.
 * scroll-top은 스크롤이 상단으로부터 얼마나 떨어져있는 지 나타낸다.
 * $(window)는 뷰포트를 기준으로 한다.
 
 
 *스크롤은 지속적으로 적용되기 때문에 많이 사용하면 느려지는 등 성능저하가 온다.

Jquery class 선택하기

HTML 
	<li class="tab-button">Products</li>
    <li class="tab-button active">Information</li>
    <li class="tab-button">Shipping</li>

JS
	$('.tab-button').eq(0)
    뒤에 eq()를 붙이면 같은 클래스에서 몇번째 클래스를 선택할 수 있다.

Jquery 쓸만한 함수

.fadeIn() : 점점 어두워짐

.fadeOut()

.slideDown() : 아래로 내려오면서 표시

.slideToggle() : slideDown/up을 동시에 넣어놈

-> slide 자리에 fade, show, hide 등 다양하게 활용가능

.val() : 앞에 입력된 값을 가져온다.

(설정값).preventDefault() : 전송을 막는다.

.animate() : css 속성을 서서히 변경할 수 있다.
	.animate({ css속성, ...}, 동작속도);
    
     css 속성은 ,로 구분하여 여러가지를 줄 수 있다.
     동작 속도는 ms 단위로 5000은 5초이다.
     
     예시 .animate({marginLeft : 100px, marginTop :100px}, 5000);  - 왼쪽과 위쪽에 마진을 100px주고 동작시간은 5초
     
 .css : css를 수정가능
 
 .adClass : 미리 만들어놓은 다른 클래스를 붙일 수 있다.
 
 .removeClass : 적용된 클래스를 없앨 수 있다.

ready와 load 이벤트리스너

ready

<script> 태그에서 HTML을 찾아서 어떤 이벤트를 실행한다.
이때 HTML을 한줄 한줄 읽고 script 태그에서 실행하는데 
script 태그 아래 어떤 HTMl 태그가 있다면 읽지를 못해
그 태그에 대한 명령은 오류가 난다.

이를 해결하기 위해 ready를 사용한다.

$(document).ready(function(){

//$(document)에 있는 HTML을 다 읽었을 때 실행할 코드
});

$(document) = 현재 웹문서
자바스크립트에서는 그냥 document

<script>

$(document).ready(function(){
document.getElementById('test').innerHTML = '안녕'
});

<p id="test">임시글자</p>

ready를 사용하면 자바스크립트가 위에 있어도 오류가 나지 않는다.
자바스크립트 위치를 내가 사용할 수 없을 때 사용하면 좋다.

load

이미지, css파일, js파일이 로드 되었는지 확인가능

$('img'or document).on('load', function(){

//이미지나 document에 포함된 것들이 다 로드가 되었을 경우 실행할 코드
});

event들

form

input : 값이 변결될때 실행
click : 클릭 시 실행
change : 값이 변경되고 다른 곳에 focus가 될 때 실행

변수

자료를 잠깐 저장하기 위해 사용 / 한글로 선언 가능

var

var 이름(변수명) = 'John is back shinee is back'

이름을 변수로 설정하면 'John is back shinee is back'을 가져온다.

* 셀렉터를 변수로 넣을 수도 있다.

ex) var 이메일 안내창 = $('#email-alt');


* 변수는 일반적으로 function 내부에서 선언을 하면 function 내에서만 작동을 한다. 
지정된 함수 밖에서는 나타나지 않음 
반대로 함수 밖에서 선언된 변수는 function안에서 사용 가능

 전역 변수 - 지역 변수

let

- 재선언이 불가능한 변수를 만들 때 사용

재선언이랑 같은 글자로 변수를 사용하는 것인데 var은 가능하나 let은 불가능하다.

- 범위가 {}(중괄호) 안으로 한정

const

- 재선언이 불가능하고 재할당이 불가능하다.

재할당은 변수 안에 들어가는 값을 할당
: const는 이를 할 수 없다.

변하지 않는 변수를 만들 때 사용

- 범위가 {}(중괄호) 안으로 한정

자료형

array 자료형

var 어레이 = ['BMW', 520, 'white'];

1. 대괄호를 열고 자료를 집어넣으시면 됩니다. (변수에 저장해서 쓰는게 일반적입니다.)

2. 내부 자료들을 콤마로 하나씩 구분해서 집어넣습니다. 


var 어레이 = ['BMW', 520, 'white'];
console.log(어레이[1]);

대괄호를 뒤에 붙여 출력가능

object 자료형

var 오브젝트 = { brand : 'BMW', model : 520 };

1. 중괄호를 열고 자료를 집어넣으시면 됩니다. (변수에 저장해서 쓰는게 일반적입니다.)

2. 그런데 자료 왼쪽에 자료의 이름과 콜론을 붙여서 저장하셔야합니다.

key값을 지정하고 value를 설정

var object = {brand : 'BMW', model : 520}
	console.log(object.brand)
    
 변수명뒤에 .을 붙여 key값을 불러온다.

데이터 바인딩

var 자료 = [ { brand : 'BMW' }, { model : 520 } ];

console.log(자료[0].brand)

array형을 먼저 뽑아내고 안쪽의 object형을 뽑아낸다.

데이더 바인딩을 통해 HTML을 완성시키기

서버에서 HTML을 모두 완성하여 전송하는 방법은 내용의 변화에 대처하기가 어렵기 때문에 빈 HTML 파일과 데이터만 보내고 자바스크립트에서 HTML을 완성한다.

var products = [
  { id : 0, price : 70000, title : 'Blossom Dress' },
  { id : 1, price : 50000, title : 'Springfield Shirt' },
  { id : 2, price : 60000, title : 'Black Monastery' }
] 

array 자료가 있다.

<h5 class="title">Card title</h5> 
이렇게 제목이 설정되어 있지 않은 태그에 title이라는 클래스를 부여하고

$('.title').eq(0).html(products[0].title)

타이틀 클래스 첫번째 클래스를 products 변수의 첫번째 타이틀로 바꾼다.

이렇게 다음 타이틀도 바꿔주고 price도 바꿀 수 있다.

바꿔야할 항목이 많으면 반복문을 사용하여 간단하게 바꿀 수 있다.

정렬을 사용하여 완성된 HTML 가격 낮은 순으로 정렬하기

$('#sort-price').click(function(){
products.sort(function(a,b) {
    return a.price -b.price
})

$('.title').eq(0).html(products[0].title);
$('.title').eq(1).html(products[1].title);
$('.title').eq(2).html(products[2].title);

$('.card-body span').eq(0).html(products[0].price);
$('.card-body span').eq(1).html(products[1].price);
$('.card-body span').eq(2).html(products[2].price);
})

버튼을 클릭하면 오름차순으로 정렬을 해주고 거기에 맞게 데이터 바인딩을 한다.
이때 가격순으로 정렬을 하기 위해 a와 b에 price를 붙여주여 어떤 것을 정렬할 지 선택한다.

Ajax

서버에 데이터를 받아오는데 새로고침없이 스무스하게 받아오는 함수/툴

서버 : 접속자가 요청하면 데이터를 가져다 준다.

요청 : GET / POST

  • GET : URL을 입력하여 요청 - 읽기 ex) 홈페이지 이동, 사이트방문
  • POST : 정보를 숨겨서 전달 - 쓰기 ex) 로그인, 글 발행

Ajax : 서버에다 GET / POST를 요청할수 있게 도와주는데 새로고침없이 요청 가능하다. (Jquery를 사용하는 게 낫다)

예시

$.ajax({
            url : 'https://codingapple1.github.io/hello.txt',
            type : 'GET'
        }).done(function(데이터){
            console.log(데이터)
        })

아약스에서 연결할 링크와 타입을 적어주고 
url의 데이터를 데이터 항목에서 보여준다.

메소드

done : ajax 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.

fail : ajax 요청이 실패하면 fail안의 오류 정보가 전달된다.

always() : ajax 요청이 성공 실패와 상관없이 요청이 되면 전달하는 내용이다. ex) 로딩중 표시

활용

$('#show-products').on('click',function(){

        $.ajax({
            url : 'https://codingapple1.github.io/data.json',
            type : 'GET'
        }).done(function(데이터1){
            $('.card-title').html(데이터1.model);
            $('.card-text').html(데이터1.price);
            $('.card-img-top').attr('src',데이터1.img);

        })
    });
    
    
   show-products를 클릭하면 
   저 링크 안의 내용이 요청되는데
   각각 링크의 model은 card-title
   price는 card-text
   img는 card-img-top으로 전달된다.
   
   *attr은 속성 값을 가져온다.

Hammer.js

기종, 기기마다 호환성이 다른데 Hammer.js를 통해 호환성을 좋게 한다.

모바일과 비슷한 터치기능을 구현 할 수 있다.

설치

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>

를 복사하거나 Hammer.js를 검색하여 다운받아 첨부할 수 있다.
jquery도 필요하다.

사용

이전에 사용했던 슬라이드 박스를 사용한다. (버튼을 누르면 슬라이드로 이미지 이동)

<div style="overflow: hidden; position: relative">
  <div class="slide-container">
    <div class="slide-box">
      <img src="img/shirt1.jpg">
    </div>
    <div class="slide-box">
      <img src="img/shirt2.jpg">
    </div>
    <div class="slide-box">
      <img src="img/shirt3.jpg">
    </div>
  </div>
</div>

그 후 Hammer.js를 세팅한다.

var 이미지1 = document.querySelectorAll('.slide-box img)[0];

	// 터치를 구현할 HTMl요소를 자바스크립트 셀렉터를 통해 찾는다.

var 매니저 = new Hammer.Manager(이미지1);

	// new Hammer.Manager() 함수에 담아준다.(원리 없음 그냥 암기)

매니저.add(new Hammer.Pan({ threshold : 0 }));
	// 내가 사용할 이벤트를 .add 함수로 등록하고 threshold값을 세팅한다.
	threshold는 이를 발동하기 위해 움직여야할 픽셀 값이다.(
	마우스로 사진을 움직인다고 할 때 threshold가 0이면 바로 움직이지만 100이라면 100px을 마우스로 움직여야 움직인다.

매니저.on('pan',function(e) {
	//이미지1이 pan 되었을 때 실행할 코드
   })
	// pan 자리에 원하는 이벤트 리스너를 사용
    

pan : '터치 후 슬라이드했을 때'를 체크(상하좌우 모두 가능)
   
매니저.on('pan', function(e){
//console.log(e.deltaX)
// deltaX는 x축으로 드래그한 거리를 알려준다.

if (e.deltaX < -1) {
$('.slide-container').css('transform', 'translateX(' + e.deltaX + ')' );
}
})

// 매니저라는 이벤트를 pan 했을 때
움직인 값이 음수라면
slide-container를 css에서 transform의 transition의 항목을 x축으로 드래그한 거리만큼 움직여라

if (e.isFinal&& 현재사진 == 1) {
    //console.log(e.isFinal)
    //마우스를 놓아 터치가 끝나는 걸 알려줘야하는데 이는 isFinal을 사용하여 끝낸다.
    $('.slide-container').css('transform', 'translateX(-100vw)');
    // 이때 이미지가 2번으로 넘어가게 하는 코드를 작성한다.
    $('.slide-container').addClass('transforming')
    $('.slide-container').css('transform', 'translateX(-100vw)');
        setTimeout(function(){
    $('.slide-container').removeClass('transforming')
        }, 800)
        
     // 자연스럽게 이미지가 넘어가게 해야하는데 HTML에 transition: transform 1s;
     을 주면 중복이 일어나 버그가 난다. 그래서 따로 class로 만들어 addclass와 removeclass를 통해 필요한 부분에만 적용했다. 없앤다. 그리고 없앨때는 애니메이션 시전 시간을 주기 위해 마지막에 시간을 적용한다. setTimeout을 적용 (800은 0.8초)
  }
  
  isFinal && 현재사진 == 1은 -100px이 움직이는 것은 한번 밖에 없으므로 각각 사진들의 이동이 필요한 픽셀마다 코드를 짜야한다.

sticky를 활용한 애플뮤직UI 카피

HTML

<div class="card-background">
    <div class="card-box">
        <img src="./card1.png" alt="">
    </div>
    <div class="card-box">
        <img src="./card2.png" alt="">
    </div>
    <div class="card-box">
        <img src="./card3.png" alt="">
    </div>
</div>

CSS

.card-background {
height: 3000px;
margin-top: 800px;
margin-bottom: 1600px;
}

.card-box img {
	display: block;
	margin: auto;
	max-width: 80%;

	width: 600px;
	height: 400px;
	max-width: 600px;

	transition: all;
}
- transition으로 부드러운 효과를 준다.

.card-box {
	position: sticky;
	top: 300px;
	margin-top: 200px;
}
- sticky를 설정해주고 top으로 시작점을 준다.

JS

$(window).scroll(function(){
        var 높이 = $(window).scrollTop();
        console.log(높이);

        var y = (-1/368) * 높이 + 1096/368;
        var w = (-1/3680) * 높이 + 551/460;


        // y는 스크롤 728에서 1096까지 스크롤을 내리면 서서히 opacity를 1 ~ 0으로 바뀐다.
        // y = a * 높이 + b
        // 1 = a * 728 + b
        // 0 = a * 1096 + b

        // W는 스크롤 위치에 따라 크기를 1에서 0.9로 줄인다.
        // 1 = a * 728 + b
        // 0.9 = a * 1096 + b


        $('.card-box').eq(0).css('opacity', y);
        $('.card-box img').eq(0).css('transform',`scale(${w})`);
    });
    
    * 이때 스크롤이 위에 있을 때 크기가 1보다 더 커지는 것에 대한 해결 방안 검토 필요
    
    1. 스크롤의 위치를 scrollTop을 통해 찾아주고 변수를 적용
    2. 1차 방정식을 통해 스크롤에 따른 투명도를 설정해준다.
    3. 동일한 방식으로 크기를 조정
    4. 첫번째 항목을 Css 메소드로 조정해준다.

Typewriting 애니메이션(한글자씩)

버튼을 누르거나 화면이 뜨면 한글자씩 출현하는 애니메이션

  • 한글 코딩

  1. 버튼을 누르면

  2. 기존 글자가 사라지고

  3. 0.5초 후 첫번째 글자가 나타난다.

  4. 0.5초 후 두번째 글자가 추가된다.
    ... 쭉 이어짐

    HTML

    버튼

    	<h1>abdce</h1>

    JS

    var h1태그 = document.querySelector('h1');  
 - $() 셀렉터와 유사한 querySelector를 통해 h1 태그를 찾는 변수 제작

    var 원래글씨= document.querySelector('h1').innerHTML;
    - 글자를 찾는다.

    	$('button').click(function(){

    $('h1').html('') 혹은 h1태그.innerHTML = ''
    });

    앞에는 jquery / 뒤에는 js

    setTimeout(function(){

    h1태그.innerHTML = h1태그.innerHTML + 'a'
    }, 500)

    - setTimeout이라는 내장함수를 통해 h1태그에 a를 더해준다.
	1000가 1초이므로 500은 0.5초

    var h1태그 = document.querySelector('h1');
    var 원래글씨 = document.querySelector('h1').innerHTML;

    	$('button').click(function(){

    h1태그.innerHTML = '';

    setTimeout(function(){
    h1태그.innerHTML = h1태그.innerHTML + 원래글씨[0]
    }, 500)

    	});

    이를 정리하면 이렇게 나타나고 a라는 하드코딩 대신 들어가야할 순서를 설정해 넣는다. (원래글씨[0])

이렇게 코드를 만들면 적은 수는 만들 수 있지만 다량의 내용을 일일히 짜기 힘들다.

var h1태그 = document.querySelector('h1');
var 원래글씨 = document.querySelector('h1').innerHTML;

$('button').click(function(){

애니메이션(h1태그, 원래글씨)
});

function 애니메이션(h1태그, 원래글씨){
	- 함수로 만들어 생산성을 높이고 파라미터를 부여하여 어떤 변수에도 대응이 가능하도록 한다.

h1태그.innerHTML = '';

for (let i = 0; i < 원래글씨.length; i++){
setTimeout(function(){
h1태그.innerHTML = h1태그.innerHTML + 원래글씨[i]
}, i * 500);
}
- 반복문 for를 사용해 여러개를 만들 수 있고 변수 var 대신 let을 주어 setTimeout이 시작하기 전에 반복문이 끝나는 것을 막는다.
}

GKE 기본 제공 로그 요약 (새 Kubernets Monitoring 버전)
[BOJ- JAVA] 2110 공유기 설치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage