댓글 수정
패스워드 :
답변 쓰기
패스워드 :
- 확인을 누르면 댓글이 삭제됩니다 !! -
패스워드 :
등록일 :
작성자 :
급행 제이쿼리(jQuery) 강좌ㆍ강의 - 초급에서 중급까지만 !
[예제] 제이쿼리로 건담 출동시키기?!
중간 중간 잠시 쉬어가는 예제입니다.
이번에는 건담을 출동시켜 볼까요?!

건담 출동 !! (아래 출동 버튼을 연타해 보세요)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

건담 출동 소스 (저장 후 테스트 가능)

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :

이 소스는 자바스크립트와 HTML, CSS에 대한 약간의 지식이 있다는 가정을 하고 설명에 들어갑니다.
만약 자신이 아직 초보라는 생각이 드시더라도 그냥 한번 보셔도 좋습니다. 그런건 중요치 않으니까요~ (찡긋)


<script type="text/javascript">

        건담을 에니메이션 시키는 함수
        function anim(j){
                var px1 = Math.round(Math.random() * 100);
                var px2 = Math.round(Math.random() * 100);
                var time = Math.round(Math.random() * 500) + 500;
                함수를 실행할 때 마다 건담의 움직임이 다르게 랜덤값을 설정합니다.
                left, top 이동값과 에니메이션 실행 시간을 무작위로 설정합니다.


                if(j.position().top > 500){
                        j.fadeOut(500, function(){ j.remove() });
                        return;
                }
                건담의 top 위치 500 보다 크다면 희미하게 사라지는 효과를 줘서 안보이게 만든 다음 없앱니다.
                안보이게 하는것과 없애는 것은 다릅니다. 없애지 않으면 보이지는 않지만 존재하게 됩니다.
                그리고 return; 으로 함수를 종료시킵니다. 재귀호출을 종료하는 것이죠. 이제 그만 끝내는 거죠.

                j.animate({left:'+=' + px1,top:'+=' + px2}, time, function(){ anim(j) });
                무작위로 설정된 값을가지고 에니메이션을 시킵니다. left, top 값을 동시에 증가시키면 오른쪽 아래로 이동합니다.
                그리고 애니메이션이 끝나면 다시 함수를 호출 해서 애니메이션 또 하고, 계속 반복합니다.
                마지막으로 top 의 수치가 500 이상이면 위 if 때문에 종료됩니다.

        }


        건담을 출동 시키는 함수입니다. 정직한 이름 gogogo 와 정직한 내용.
        function gogogo(){
                $('#base').append('<img src="http://biketago.com/img/etc/gundam1.gif" style="z-index:999; position:absolute;" />');
                anim($('#base img:last'));
        }
        버튼을 누르면 append 메써드를 이용하여 이미지 태그를 #base 안에 추가 시킵니다.
        기존에 있는 내용을 유지하면서 마지막에 내용을 추가해 줍니다. 즉 누를때마다 건담이 계속 추가되는 것이죠.
        이렇게 추가된 것중 마지막이 최근것 인데요. #base img:last 셀렉터를 사용하면 찾을 수 있습니다.
        찾아낸 마지막 것을 anim($('#base img:last')) 이렇게 바로 에니메이션 함수 넘겨서 실행시킵니다.

        그리고 나면 이미지의 이동한 높이가 500 을 넘을때 까지 실행되다가 알아서 멈추고 사라집니다.


</script>

위 함수에서 랜덤값을 설정하고 함수를 여러번 실행시키는 이유는 건담의 움직임이 좀 다르게 되도록 하려고 그렇습니다.


<div id="base" style="top:0; left:0; position:fixed;"></div>

위 태그는 건담의 기지(base) 입니다. 스타일 설정은 왼쪽 상단에 고정입니다.
그래서 화면 스크롤을 하더라도 건담들이 자기 위치를 간단히 유지하는 것이죠.
이 안에서 시작했기 때문에 다른 환경에 영향을 받지 않게 됩니다. 일종의 기법입니다.



<div style="text-align:center; margin-top:400px;">
        <input type="button" value="출 동 !" style="width:150px; height:50px;" onclick="gogogo()">
</div>


출동 버튼입니다.


장난치는것 같은 소스에 사실 좀 어려운 개념이 몇 가지 들어가 있습니다.

- HTML 객체 동적생성
여기서 건담은 미리 대기중 명령을 받고 출동한게 아닙니다. 출동 명령이 떨어지면 바로 만들어지고 출동한 것이죠. (!!!)
동적생성은 없는것을 그때그때 만들어 내면서 원하는것을 하고자 할때 사용하면 편리한 방법입니다.
예를들면 쇼핑몰에서 물건 주문할때 추가를 누르면 물건이 하나씩 늘어나는 것을 보신적이 있으실 겁니다.

만약 이 예제에서 건담을 100개 정도만 미리 준비 해두고 버튼을 누를때 마다 하나씩 내보내면 언젠가는 끝나게 되겠죠.
하지만 동적생성으로 출동하기 때문에 이론상 무한대의 건담이 출동할 수 있죠. 연타 실력이 뛰어나다면 화면을 도배할 수도 있겠죠.


- 재귀호출
자기가 자기를 호출하면서 뭔가를 하는 행위입니다. 종료하는 부분을 잘 만들어주지 않으면 무한루프가 됩니다. 위험하죠. (영원히 고통받는 거죠)
위 스크립트 함수중 anim 함수가 그 역할을 합니다. 건담을 계속 움직이게 만들어 주고 매 움직임이 조금씩 다르죠.


- 클로져(Closures)
굉장히(?) 이해하기가 어려운 개념입니다. 프로그램 언어를 배울때 전역변수, 지역변수라고 배웁니다.
이 클로져라는것도 변수(?)의 개념인데요. 전역도 아니고 지역도 아닙니다. ㄷㄷㄷ
머릿속을 잠시 정리하시고 아래 설명을 봅시다. 집중.

anim 함수의 아래 코딩을 설명해 볼께요.
j.animate({left:'+='+px1,top:'+='+px2}, time, function(){ anim(j) });
위 코딩은 j 를 에니메이션 시키고 끝나면 다시 anim 함수를 호출해라. 즉 재귀호출 하는 명령입니다.
여기서 눈여겨 볼 것이 있습니다.바로 j 변수 인데요.!

위 명령을 실행하고 함수는 역할이 끝나게 됩니다. 즉 j 는 함수내에서 지역변수로 설정되어 있다가 사라지는 것이죠.
그런데 에니메이션이 끝나면 function(){ anim(j) }j 를 넣어서 함수를 다시 호출 하게 됩니다. (재귀호출)
하지만 이미 함수는 실행이 끝난 상태인데 에니메이션이 끝나고 함수를 호출할때 사용한 j 는 어디에 있다가 온걸까요?

j전역변수 설정하지는 않았고, 함수는 끝났기 때문에 지역변수로 남아있지 않는데 어디 있다가 왔을까요?
어딘가에는 존재하고 있었던 것이죠. 이게 클로져의 개념입니다. 이 이상으로 설명은 어려워서 못하겠어요. 하하.

만약! j 를 전역변수로 설정했다면 모든 건담은 j 변수를 공유하기 때문에 각자 따로 움직이지 못하게 됩니다.
그렇다고 건담의 숫자 만큼 전역변수를 설정할 수도 없겠죠. 몇개가 나올지 모르니까요.
전역변수를 동적생성하면 어떨까? 같은 뜬금포를 쏠 수도 있지만, 가능하다라고 하더라도 왠지 안닌것 같다가 정답입니다.

결국 이 소스는 클로져 개념을 이용하여 각 건담이 따로따로 움직이도록 하는 에니메이션이 완벽히 구현된것이죠. 신기한가요?
사실 저도 클로져를 이해하고 만든건 아닙니다. 하고나서 보니 그게 그거더라 하는 그런 거죠. ^^;

복잡한 개념은 처음부터 이해하려고 하지말고 어느날 아.. 그렇구나! 할 때가 옵니다. 그런게 있다 정도로 하구 넘어가용!

이 예제에 대한 설명은 여기서 마쳐야겠습니다. 너무 어려워 졌나요?
급행 강좌라고는 하지만 너무 앞서가면 복잡하니 그래도 천천히 가봅시다.

설명을 제대로 했는지 모르겠네요 ㅠㅠ 지켜봐 주세요!

▼ 덧보기
댓글 쓰기
이름 : 패스워드 :