Client-Side/Javascript2010. 12. 29. 15:21

[JavaScript] Closure 예제

클로저로 인해 해당 블록내의 코드는 만들어진 순간의 환경 정보를 그대로 가지고 있다. 그렇기 때문에 클로저안에서 선언된 변수는 생성 당시의 값을 그대로 유지할 수 있다. 

클로저가 필요한 예제
var lists = [];
for(idx = 0; idx < 10; idx++){
    lists[idx] = $('<li>'+idx+'</li>');

    var target = idx;
    lists[target].click(function() {
        alert(target);
    });

    $('#test').append(lists[idx]);
}
for 반복문 내부에서 태그를 생성해서 클릭 이벤트를 붙여준다. 이때 "target" 변수는 계속 count가 올라가기 때문에 해당 태그들은 클릭 이벤트가 붙는다. 하지만 "target" 변수는 9로 남아있기 때문에 모든 태크를 클릭해도 9를 본다.

클로저로 구현한 예제
var lists = [];
for(idx = 0; idx < 10; idx++){
    lists[idx] = $('<li>'+idx+'</li>');

    (function() {
        var target = idx;
        lists[target].click(function() {
            alert(target);
        });
    }());

    $('#test').append(lists[idx]);
}
클로저 내부에 구현된 "target" 이라는 지역변수에 0~9까지 값이 할당된다. 클로저 내부에 익명함수가 생성되는 순간의 "target" 값을 기억하기 때문에 각 태그를 클릭하면 그에 맞는 숫자를 본다.

아래 소스는 해당 예제를 실행할 수 있는 코드이다. 테스트의 편의를 위해 하나의 파일로 만들었다.
가장 밑에 Tester.init('on')은 클로저를 수행하는 코드이고, Tester.init('off')로 변경하면 클로저를 수행하지 않는다.



저작자표시

'Client-Side > Javascript' 카테고리의 다른 글

JavaScript - Zoo Keeper  (0) 2010.06.06
CSS3와 jQuery TOOLS 를 사용한 탭디자인  (0) 2010.05.11
[Prototype, Script.aculo.us] twitter Top tweets 따라하기  (0) 2010.04.28
이메일 체크.  (0) 2009.09.24
javascript mootools addEvent 주의사항.  (0) 2009.09.17
Posted by 준피
Client-Side/Javascript2010. 6. 6. 18:09

JavaScript - Zoo Keeper

invalid-file

Javascript로 Zoo Keeper를 만들었습니다.

더 깨질 블럭이 없는 경우 판을 재배치하는 기능과
동시에 여러개 블럭을 움직였을 때의 경우가 구현이 안되었습니다.
그 밖에 미쳐 발견하지 못한 버그가 있을 수 있겠지만
일단은 프로토타입 거의 완성입니다!

물론 css로 눈속임을 했고, 기능이 완벽하지 않지만 뿌듯하네요.
이번 프로젝트를 통해서 게임을 만들기 위해서 어떤 고민을 해야하는지를 꺠달았습니다.

향후 구현하지 못한 부분을 완성시키고,
html5, css3, javascript UI library(스크립타큘러스 또는 제이쿼리 UI 등등)를 이용해서
좀더 화려한 게임으로 업그레이드 시키고 싶네요.

'Client-Side > Javascript' 카테고리의 다른 글

[JavaScript] Closure 예제  (0) 2010.12.29
CSS3와 jQuery TOOLS 를 사용한 탭디자인  (0) 2010.05.11
[Prototype, Script.aculo.us] twitter Top tweets 따라하기  (0) 2010.04.28
이메일 체크.  (0) 2009.09.24
javascript mootools addEvent 주의사항.  (0) 2009.09.17
Posted by 준피
Client-Side/Javascript2010. 4. 28. 13:38

[Prototype, Script.aculo.us] twitter Top tweets 따라하기



















twitter.com에서 Top tweets에서의 push notification이 흥미로워서

javascript에서 흉내만 내봤다.

오랜만에 prototype과 scriptaculous를 써서 그런지 버벅거리긴 했다.

---------------------------<Source Code>----------------------------------
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" charset="utf-8">
        #input {
            width: 200px;
            margin-bottom: 5px;
        }
        #button {
            width: 60px;
            height: 30px;
            margin-bottom: 10px;
            border: 1px solid #CCCCCC;
        }
        #wrapper {
            height: 200px;
            overflow: hidden;
        }
        #comments {
            width: 200px;
            height: 250px;
            overflow: hidden;
        }
        .talk {
            height: 49px;
            color: #FFFFFF;
            background-color: #23A420;
            border-bottom: 1px solid #000000;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="input" />
        <div id="button">click</div>
    </div>
    <div id="wrapper">
        <div id="comments">
            <div id="5" class="talk">
                <div>5</div>
            </div>
            <div id="4" class="talk">
                <div>4</div>
            </div>
            <div id="3" class="talk">
                <div>3</div>
            </div>
            <div id="2" class="talk">
                <div>2</div>
            </div>
            <div id="1" class="talk">
                <div>1</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
    <!--
        // setting id of first-child
        var comments = $('comments').childElements();
        var nowId = comments[0].id;

        $('button').observe('click', function () {
            // create new comment element
            var superDiv = document.createElement('div');
            superDiv.className = 'talk';
            nowId++;
            superDiv.id = nowId;
           
            var childDiv = document.createElement('div');
            childDiv.innerHTML = $('input').value;
            superDiv.appendChild(childDiv);
           
            // attach new comment
            $('comments').insert({
                top: superDiv
            });
           
            new Effect.SlideDown(superDiv);
            new Effect.Opacity(superDiv, {from: 0, to: 1});

            // remove last comment
            var newComments = $('comments').childElements();
            var len = newComments.length;
            newComments[len-1].remove();
        });
    //-->
    </script>
</body>
</html>

'Client-Side > Javascript' 카테고리의 다른 글

JavaScript - Zoo Keeper  (0) 2010.06.06
CSS3와 jQuery TOOLS 를 사용한 탭디자인  (0) 2010.05.11
이메일 체크.  (0) 2009.09.24
javascript mootools addEvent 주의사항.  (0) 2009.09.17
jsdoc-toolkit 실행하기.  (0) 2009.09.15
Posted by 준피
Client-Side/Javascript2009. 9. 24. 15:04

이메일 체크.

var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = $('email').value;

if( !email.match(emailRegEx) ){
window.alert("이메일 양식에 맞게 입력하세요.");
}

'Client-Side > Javascript' 카테고리의 다른 글

CSS3와 jQuery TOOLS 를 사용한 탭디자인  (0) 2010.05.11
[Prototype, Script.aculo.us] twitter Top tweets 따라하기  (0) 2010.04.28
javascript mootools addEvent 주의사항.  (0) 2009.09.17
jsdoc-toolkit 실행하기.  (0) 2009.09.15
Prototype => Element.extend  (0) 2009.08.20
Posted by 준피
Client-Side/Javascript2009. 9. 17. 23:04

javascript mootools addEvent 주의사항.

$(element).addEvent(event, function);    <- addEvent 문법.


mootools에서 addEvent를 사용하는 경우 주의사항이 있다.
function부분을 잘 살펴 보자.

만일 함수부분에서 메소드를 호출하는 경우,

$(element).addEvent(click, Dog.bark());
이런식으로 사용하게 되면 돔에 이벤트 리스너를 붙임과 동시에 실행을 하게 된다.

$(element).addEvent(click, Dog.bark);
이렇게 하면 실행은 하지 않은채 이벤트 리스너만 붙인다.


prototype의 경우도 마찬가지이다.

$(element).observe(click, Dog.bark());
-> 이벤트 리스너를 돔에 붙임과 동시에 실행.
$(element).observe(click, Dog.bark);
-> 이벤트 리스너를 돔에 붙인다. 실행은 하지 않는다.

'Client-Side > Javascript' 카테고리의 다른 글

CSS3와 jQuery TOOLS 를 사용한 탭디자인  (0) 2010.05.11
[Prototype, Script.aculo.us] twitter Top tweets 따라하기  (0) 2010.04.28
이메일 체크.  (0) 2009.09.24
jsdoc-toolkit 실행하기.  (0) 2009.09.15
Prototype => Element.extend  (0) 2009.08.20
Posted by 준피

티스토리툴바