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

클로저가 필요한 예제
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')로 변경하면 클로저를 수행하지 않는다.



Posted by 준피
Client-Side/Javascript2010. 6. 6. 18:09

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

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

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

향후 구현하지 못한 부분을 완성시키고,
html5, css3, javascript UI library(스크립타큘러스 또는 제이쿼리 UI 등등)를 이용해서
좀더 화려한 게임으로 업그레이드 시키고 싶네요.
Posted by 준피
Client-Side/Javascript2010. 5. 11. 10:40
jQuery 기반 UI Library인 jQuery TOOLS가 나온 소식을 몇일전에 접했습니다.

자바스크립트 코드 몇줄이면 멋진 UI가 튀어나오더군요.

너무 재밌어서 데모를 시연해보다가 탭 디자인 한개를 직접 사용해봤습니다.


<탭 디자인 그림파일>


1. jQuery와 jQuery TOOLS 링크입니다.

2. css3를 적용했습니다. (참고사이트 : http://www.designlog.org/2512076)

3. HTML

4. jQuery TOOLS를 사용한 자바스크립트


이 링크를 따라가시면 jQuery TOOLS 데모를 볼 수 있습니다.
      

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

[JavaScript] Closure 예제  (0) 2010.12.29
JavaScript - Zoo Keeper  (0) 2010.06.06
[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


















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("이메일 양식에 맞게 입력하세요.");
}

Posted by 준피