Rev. 2.73

자바스크립트 이펙트의 대명사 스크립타큘러스(Scriptaculous)는 1.7 베타에 추가되는 모프(Morph)와 트랜스폼(Transform) 이펙트의 데모를 시연했습니다. 현재 테스트 파일이 정식으로 배포된 상태는 아니지만 테스트 소스를 추출하여 사용해 보았습니다. Prototype 1.5.0의 RC2가 베이스로 사용되고 있더군요. 트랜스폼 이펙트는 List Item 에서 특정 메시지를 부각시키는 역할을 합니다. 그리고 모프 이펙트는 아래에서 직접 체험해 봅시다.

Effect.Morph

// Usage : Element morph
new Effect.Morph('error_message',{
style:'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
duration:0.8
});

// same thing with Element morph is
$('error_message').morph(
'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
{duration:0.8}
);

Usage를 보면, 스타일시트의 코드 자체가 스트링으로 입력받는 모습이 독특합니다. { background: '#f00', fontSize: '2em' } 요딴 식으로 작성하기가 무척 불편했었는데 말이죠. 아무튼 멋집니다.

Comments

Monnerjahn씨는 마우스의 휠을 Prototype의 Event.observe로 확장코드를 개발하고 공개했습니다. 좌측의 사각형 엘리먼트에 마우스를 올리고 휠을 사용해 보세요.(마우스 오버하는 순간 스크롤바가 비활성화 됩니다.) 이 이벤트를 사용하여 구글맵의 줌인/줌아웃처럼 페이지 스크롤 자체를 자바스크립트로 컨트롤 할 수 있게 되었습니다. 멋진 그림이 그려지지 않으세요?

/*
* Orginal: adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie@gmail.com
*/
Object.extend(event, {
    wheel:function (event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;
        } else if (event.detail) { delta = -event.detail/3; }
        return Math.round(delta); //Safari Round
    }
});

/*
* end of extension
*/

var counterSite=0;
function handleSite(e) {
    counterSite +=  event.wheel(e);
    $('delta').innerHTML = counterSite +'#'+ event.wheel(e) +
    ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

var counterDIV=0;
function handleDIV(e) {
    counterDIV +=   event.wheel(e);
    $('divdelta').innerHTML = counterDIV +'#'+ event.wheel(e) +
     ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

event.observe(document, "mousewheel", handleSite, false);
event.observe(document, "DOMMouseScroll", handleSite, false); // FF

event.observe($('divdelta'), "mousewheel", handleDIV, false);
event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // FF

덧. 실습예제가 업데이트 되었습니다.(IE6,7에서 스크롤 막기, 움직이는 엘리먼트)

Comments

지난 17일 자바스크립트의 강력한 디버그툴인 파이어버그 1.0 베타가 릴리즈 됬습니다. 파이어버그는 파이어폭스의 플러그인 형태로 설치할 수 있는 애드온 애플리케이션입니다. 0.4.1에서 갑작스런 정식 릴리즈로 약간은 당혹스럽기도 합니다만, 기대 이상으로 뛰어나고도 훌륭한 기능을 많이 가지고 있습니다. Jesse씨가 공개한 스크린케스트에는 Inspect모드에서 HTML과 Stylesheet가 자동으로 대조 되어 실시간으로 디자인을 조작하는 과정을 설명하고 있습니다. 정말 감동입니다. ㅠ.ㅠ;

firebug.png

- 더욱 빠르고 효율적인 디버깅 환경
- XMLHttpRequest 응답시간 표시
- 네트워크 감시 및 로드타임 체크
- 실시간 HTML 및 Stylesheet 수정
- 프로파일러 내장

덧. 이클립스의 프로파일러에 비하면 매우 빈약하지만 GUI를 가진 프로파일러를 내장하고 있습니다. 함수 개개의 사용빈도/처리시간 측정이 가능하며, 개발하는 과정에서 의심되는 부분들을 Profiling 툴을 이용하여 체크함으로서 실행속도 향상을 이끌어 낼 수 있습니다. 사용 방법은 콘솔 모드에서 Profile을 클릭하여 활성화하고 해당 함수가 작동하도록 조작한 후 다시금 Profile을 클릭하면 리포트가 출력됩니다.

Comments