Element가 Select 되지 않게 하려면~

Element를 drag하는 경우 이를 처리하는 방법에 대해서 검색을 해보다가 Mootools의 ticket#663 글에서 다음과 같은 내용을 발견하였습니다.

Element.implement({
    disableSelection: function () {
        if (Browser.Engine.gecko) {
            this.style.MozUserSelect = 'none';
		} else if (Browser.Engine.webkit) {
			this.style.KhtmlUserSelect = 'none';
        } else if (Browser.Engine.trident || Browser.Engine.opera) {
			this.unselectable = 'on';
		}
		return this;
    }
});

IE에서의 Unselectable만 알고 있었는데 Firefox의 MozUserSelect와 Webkit의 KhtmlUserSelect도 'none'으로 값을 설정함으로서 Select가 안되게 설정이 가능하군요.

관련자료 :

• Mootools의 ticket#663
  
• Ajax Cookbook의 Disable Text Selection

Rhino - JavaScritp for Java

Rhino는 Java만 사용하여서 JavaScript를 구현한 오픈소스입니다. 세부 특징은 다음과 같습니다.

• ECMA-262 edition3를 구현 - Rhino 1.5 부터
  
• ECMA-357 ECMAScript for XML (E4X구현) - Rhino 1.6 부터
  
• JavaAdapter구현 (JavaScript에서 Java로 접근할 수 있는 어댑터, Java의 모든 클래스에 접근가능)
  
• Java 1.4 이상 버전이 필요하며, SUN의 JVM에서만 테스트 되어있습니다.
  

관련 링크들

• Rhino 사이트
  
• Tutorial
  
• Examples
• JavaScript Shell - Rhino를 사용하여 js를 shell 상에서 실행하는 방법입니다.
  

P.S>

jsdoc toolkit (JavaScript Toolkit)에서는 JavaScript Documentation을 생성하기 위해서 Rhino를 사용하고 있습니다. 소스 코드에서 JsIO.js를 보시면 Rhino를 사용하여서 어떻게 파일 입출력을 하는 지를 살펴보실 수 있습니다.

JSLeaksDetector

Rhio.Kim님의 블로그에서 'JavaScript Memory Leak Detector - 자바스크립트 메모리 누수 디텍터'글을 보고 설치를 해보았습니다. (Rhio.Kim님 좋은 글 감사해요 ^^)

1. JSLeaksDetector는 IE에서 Memory leack을 측정하는 툴입니다.
   
2. 설치는 인스톨러에 나와있는 명령대로 설치를 하면 됩니다. (바로 설치하니 나오지 않더군요. 저의 경우 재부팅 후 활성화가 되더군요.)
   
3. JSLeaksDetector을 실행시키기 위해서는
   
   • '메뉴 모음 > 보기 > 탐색창 > js memory leaks detector'를 클릭하면 IE Dev toolbar 처럼 창의 하단에 나오게 됩니다.
     
     
   • 또는 '명령 모음 > 도구 > 도구모음 > 탐색창 > js memory leaks detocr'를 클릭합니다.
4. 그 다음에, '도구 > 인터넷 옵션 > Advanced > Disable script debugging(Internet Explorer)'의 체크를 풀어서 디버깅이 가능하게 설정합니다.
   
5. JSLeaksDetector에서 Settings를 눌러서 IE6/7 또는 Actual leaks를 눌러서 각각의 케이스의 경우에 Memory leak에 대한 체크를 설정합니다.
   
   • IE6: where all circular references are considered leaks
   • IE7: where only the DOM objects detached by the markup at "closing" time could be leaked. (IE 7에서는 circular reference에 대해서 gc 시점에 제거를 합니다.)
     
   • Actual leaks: look for leaked DOM elements.
     
     
6. 페이지를 load/unload를 해보면서 memory leak을 찾아보면 됩니다.
   
   
   
   

사용 소감: DOM leak에 대해서는 잘 찾는 것 같습니다만, jsObject에 대한 Memory leak에 대해서는 잘 모르겠네요.^^;; - 만들었던 페이지를 이동하면서 보니 leak이 생각외로 많군요;;;;;

출처:

• 'JavaScript Memory Leak Detector - 자바스크립트 메모리 누수 디텍터' by Rhio.Kim
  
• JavaScript Memory Leak Detector by GPDE Team Blog

JavaScript의 파라미터를 어떻게 처리할 것인가?

Wait till I come!에 Sending Objects as parameters - good or bad?라는 글에서 JavaScript의 파라미터들을 어떻게 처리할 것인가에 대해서 다루었는데요.

JavaScript의 코드들을 살펴보면 파라미터가 여럿 사용된 코드들을 쉽게 찾아볼 수 있습니다.

function doLayerFloat(id, start, end, direction, speed, fade, whatelse, Iforgot) {
}

이러한 코드의 가장 큰 문제점은 이 함수를 호출할 때 파라미터의 개수와 순서를 항상 기억해야하는 문제점을 지니고 있습니다. 게다가 첫 파라미터를 제외와 마지막 파라미터만 값을 넘겨야 하는 경우 null 또는 ''의 값을 넘겨야 하는 문제점도 있죠.

doLayerFloat('myDIV', null, null, null, null, null, null, 'default') {
}

이러한 복잡함은 인자를 항상 받아야할 파라미터를 제외하고 나머지를 배열로 받음으로써 쉽게 해결할 수 있습니다. (배열을 사용하는 비용은 들겠지만요.)

function doLayerFloat(id, props) {
   var elm = typeof id !== 'string'? id: document.getElementById(id);
   for (var i in props) {
   }
   // 또는 || 연산을 사용하여 디폴트 값을 채워줄 수도 있구요.
   props = props || {};
   props.start = props.start || 100;
   ....
}

※ prototype.js를 사용하신다면 다음과 같은 방법도 사용할 수 있습니다.

function doLayerFloat(id, props) {
   var elm = $(id);
   props = Object.extend({
      start: 100,
      ...
   }, props || {});
}

※※ 파라미터가 함께 여러곳에 쓰인다면 Hash가 아닌 의미있는 클래스로 만들어버리는게 바꿔주는게 가장 적당하겠네요. -_-a

출처: Wait till I come!의 Sending Objects as parameters - good or bad?

YSlow

YSlow는 Yahoo에서 만든 웹 페이지의 퍼포먼스를 측정하는 툴로서 Firebug의 플러그인입니다.

측정하는 페이지의 퍼포먼스를 내기 위해서 HTTP Request의 개수와 Gzip 사용여부 등을 측정해서 점수(Performance Grade)를 매깁니다. 제가 만든 페이지는 F를 받았군요. -_-;;;

그 외에 페이지의 쿠키나 헤더 등을 볼 수 있는 툴이긴 합니다만, 그렇게 필요성을 느끼지는 못하겠네요.

출처: YSlow via Ajaxian

※ IE에서 Performace 체크를 할 수 있는 AjaxView(via InfoQ)라는 것도 있습니다만, 저는 자꾸 브라우져가 죽어서 사용해보지 못했습니다. (Ajaxian에 올라있는 AjaxView 소개글도 참고하세요.)

document.write없이 html삽입하기

document.write을 사용해서 javascript코드를 삽입하는 방법은 다음의 문제를 가지고 있습니다.

1. XHTML 모드에서 동작하지 않습니다.
   
2. document.write를 써서 추가된 코드는 API를 사용하여 접근할 수 있는 방법이 없습니다.
   
3. document.write는 HTML을 노드로 보지 않고 Serialized text로 보는 전혀 다른 관점을 지니고 있습니다.(DOM하고 비교했을 때)

document.write가 아닌 DOM을 이용해서 코드를 삽입하려면 다음의 방법을 선택할 수 있습니다.

1. 호출할 javascript코드를 페이지에 삽입합니다.
   <scrip type="text/javascript" id="syndication" src="syndication.js"></script>
   
   
2. syndication.js에 다음의 코드를 추가합니다.
   // 삽입할 태그를 DOM을 이용해서 생성합니다.
   var newContent = document.createElement('p');
   newContent.id = 'syndicated-content';
   newContent.appendChild(document.createTextNode('Here is some syndicated content.'));
   
   var source = document.getElementById('syndication');
   // script태그의 바로 앞쪽에 newContent를 삽입하게 합니다.
   source.parentNode.insertBefore(newContent, source);

2의 코드는 document.write('<p id="syndicated-content">Here is some syndicated content</p>');와 동일한 역할을 합니다.

출처: Insert in place without document.write via Simon Willison’s Weblog

Jania님이 소개해주신 JavaScript의 기본적인 디버깅 도구들..

오늘 WebAppsCon의 실전 Ajax와 웹표준의 세번째 강좌, 강규영(Jania)님의 '효과적인 Ajax 구현을 위한 팁과 노하우'을 듣고 왔습니다. 너무 재미있더군요. ^^

그 중에서 가장 머리에 남았던 부분이 기본적인 디버깅 도구들 이었습니다.
JavaScript의 가장 기본적인 디버깅 수단은 alert()입니다. 출력하고 싶은 로그의 내용을 alert()을 띄워서 보여주는 가장 기본적인 수단이죠.

그리고, 이 외의 수단으로 (저의 경우) body태그의 가장 아래 쪽에 div를 추가하고 여기에 로그의 내용을 출력시켜주는 방법을 선택하거나(내부에 출력하는 거죠 뭐.. ^^;;) 파이어버그의 디버깅 도구를 이용해서 디버깅을 했었는데요.

새로운 방법을 배웠습니다. ^^

• document.title을 이용해서 출력하는 방법 - alert()과 달리 창이 안뜨죠 ^^.
  
• 주소창을 이용해서 출력하는 방법 - 주소창에 javascript:를 이용하여 코드를 실행할 수가 있는데 이 코드에서 현재 페이지의 DOM에 접근이 가능해서 훌륭한 디버깅 용도로 쓰일 수 있습니다.
  
• firebug의 콘솔에 출력하는 방법 - window.console.log메소드로 로그를 출력할 경우 파이어버그의 콘솔에 출력을 할 수 있습니다.
  

아~ 하는 소리를 낼 정도로 너무 재미있었습니다. 언제 시간되시면 강규영님의 강좌 꼭 한번 들어보세요 ^^

P.S. 시간이 되시면, 강규영님이 강좌 중간에 소개하셨던 오픈마루 DevDay 행사에도 한 번 가보세요 ^^

javascript로 브라우져의 창 조절하기

자바스크립트를 이용하여 브라우져의 크기를 조절하는 방법은 다음과 같습니다.

javascript:window.resizeTo(1024,768);

을 주소창에 입력한 후에 엔터를 치면 크기가 조절이 됩니다.

그래서? 해상도에 따라 어떻게 웹페이지의 모습을 확인할 수 있습니다.
그리고, 아래의 링크를 북마크에 추가해두면 쉽게 사용할 수 있습니다.

• 800x600
  
• 1024x768
  

출처: Tip for Resizing Your Browser Window

JavaScript와 CSS를 하나의 파일안에서 사용하기

Ajaxian에 재미있는 기사가 올라왔습니다.
JavaScript와 CSS를 하나의 파일로 쓰는 방법에 관한 기사(Squeeze CSS and JS into one file)인데요. 브라우져의 JavaScript파서와 CSS파서가 <!--에 대해서 동일하게 주석(또는 무시)처리를 한다는 점을 이용하였더군요.

<!-- /*
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

- CSS 파서의 경우 <!--를 만나는 경우 무시를 해버립니다.
- JavaScript 파서의 경우 <!--를 만나는 경우 한 줄을 주석처리합니다.

따라서, 위의코드를 CSS파서에서 보면 다음과 같이 인식을 합니다 .

<!-- /* CSS파서는 여기를 주석처리 합니다.
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

<!--를 무시하고 /* */ 부분을 주석처리하고 남은 나머지 부분을 CSS로 인식합니다.

반면에, JavaScript 파서에서는 다음과 같인 인식을 합니다.

<!-- /*
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

<!-- 부분을 한 줄 주석으로 판단하고 남은 부분을 JavaScript로 인식합니다.
<!-- 말고도 //로도 동일하게 처리가 가능합니다.

출처 : "Combine CSS with JS and make it into a single download!" by Ajaxian

Safari에서 디버깅하기

이전에 발생하였던 Safari의 버그를 무시무시한 alert으로 잡은 후에 (일단 급한 불은 꺼야겠죠.) Safari에서 디버깅은 어떻게하나 검색을 해보았습니다. 답은 있더군요. (무식이 죄죠.. ^^;;)

먼저 터미널을 연다음에 "defaults write com.apple.Safari IncludeDebugMenu 1"를 터미널에 입력하고 엔터를 친 후, Safari를 다시 띄웁니다.

Safari를 다시 띄우면, Debug항목이 새로 추가된 것을 보실 수가 있습니다.

이 Debug항목을 누른 다음에 Show JavaScript Console을 클릭하시면 JavaScript Error Log를 아주 쉽게 보실 수가 있습니다. 이 외에도 DOM Tree등 여러 기능들을 제공하고 있으니 참고하시면 좋을 것 같습니다.

출처 :

Apple Developer Center - How do I debug JavaScript in Safari

P.S  How do I debug JavaScript in Safari에는 window.console을 이용하여서 JavaScript에러 이외에도 원하는 로그를 출력할 수 있는 방법이 소개되어 있으니 참고해보시는 것도 좋을 것 같습니다.

[JavaScript] Safari에서만 나는 에러

오늘 디버깅 작업을하고 있었는데, 특이한 문제가 Safari에서 발생했습니다.

<script type="text/javascript"src="prototype.js"></script>
<script type="text/javascript" type="text/javascript">
    var Sample = {
        testFunction: function testFunction(){
            alert("testFunction");
        }
    }

    function load(){
        Sample.testFunction();
    }
    Event.observe(window, "load", load);
</script>

이전에 php 페이지에서 사용되었던 testFunction 메소드를 Sample의 mtehod로 넣는 과정에서 function의 위치는 적절히 변경하였지만, function뒤의 testFunction을 삭제하지 않아서 발생한 버그입니다.

이러한 버그가 특이하게도 Firefox와 IE에서는 정상 동작을 하는게 문제였습니다.
제가 사용하는 JSEclipse에서도 에러표시가 나지는 않더군요. 그러나, Safari에서는 에러가 나더군요.

그것도, 위와 같은 내용이 js파일에 포함되어 있는 경우 해당하는 js파일 자체를 레퍼런스할 수 없다고 나와버리더군요. 그래서 메소드 하나하나를 alert으로 추적해야하는 암울한 작업을 수행해야 했습니다.

Safari 테스트를 하실 때, js파일이 정상적으로 script태그로 썼는데도 불구하고 레퍼런스할 수 없다고 나오신다면 위의 케이스를 참고하셔서 소스 파일을 확인해보시는게 좋을 것 같습니다. ^^



P.S.1  저같은 경우에는 JavaScript로 개발을 할 때, Firefox는 Firebug와 Web Developer를 사용하고, IE에서는 Developer Toolbar를 사용하고 있습니다. Webkit에서는 Drosera를 사용하고 있구요.

P.S.2  이외에도 몇가지 문제가 발생했었는데요. id가 중복되는 경우 Firefox와 IE에서 에러는 발생하지 않는데요. Safari에서는 id 중복이 발생하는 경우 DOM hierarchy에 대한 에러 메시지를 출력합니다.

Prototype.js사용 시 Array에서 에러가 나는 경우..

Prototype.js를 사용하는 경우 가끔씩, Array처리하는 코드에서 에러가 발생하곤 하였습니다. 이 때 debugging을 해보면 Array의 마지막에 Array를 구동하는 function의 코드가 나오는게 원인이었습니다.

발생하는 부분이 for(index in loop)의 'for in' style의 루프에서만 발생하여서 'for in' 루프를 사용하지 않았었는데요. Ajaxian에 관련한 기사가 있었네요.

Problem
JavaScript에서 다음과 같은방법 Associative Array를 사용하는 경우에 Array.length값은 갱신이 되지 않습니다. 따라서, for in 스타일의 루프를 사용하게 되면 값을 length가 0이므로 오동작하게 됩니다.

var hardcoreBands = new Array();
hardcoreBands["mathyGoodnes"] = "Dillinger Escape Plan";
hardcoreBands["legendary"] = "Converge";
hardcoreBands["fashionistas"] = "Every Time I Die";

alert(hardcoreBands.length);

for in 스타일의 루프를 사용하지 않고, for(var i=0; i < array.length; i++) 스타일의 루프도 동작을 하지 않습니다.

Solution
Associative Array를 생성해서 사용하는 경우에 String을 key로 사용하지 않고 index를 사용합니다. 또는, Prototype.js의 Hash클래스를 사용하는 것이 나을 것 같습니다.

출처 : Javascript Associative Arrays considered harmful

Dojo Offline Toolkit이 제공된다고 합니다.

Ajaxian에 Dojo Offline Toolkit Kicks Off라는 기사가 올라왔습니다.
Dojo Offline Toolkit이란 사용자가 오프라인 상에서도 작업할 수 있는 기능을 제공합니다.

1. 사용자가 B사이트에 들어갔을 때, 'Work Offline'이라는 버튼을 봅니다. (오~ 뭘까? 하며 클릭을 해야하죠~)
   
2. 클릭 시, 창이 하나 뜨면서 '이 Web Application'은 오프라인에서도 사용가능해!'라는 강렬한 메시지를 전달합니다. (미소를 지으며, 그래 나도 오프라인에서 사용할 수 있으면 좋겠어라며 사용자는 다시 또 클릭을 합니다.)
   
3. 사용자의 OS에 따라서 100k~300k 정도 되는 프로그램을 다운로드 받아 설치를 합니다. (인스톨러가 따로 제공이 됩니다.)
   
4. 설치된 뒤에는 Web applicatoin의 URL을 북마크 해놓거나 링크를 드래그해서 바탕화면에 깔게합니다.
   
5. 온라인 상에서 사용자가 사용하더라도 로컬에 저장이 저장하고 싶은게 있다면 로컬에 저장이 가능합니다. 오프라인인 경우에도 Web Application 링크를 클릭하거나 북마크를 클릭하거나 URL을 입력하고 들어감으로 Web Application을 실행시킬 수 있습니다.
   
6. 실행을 시키면, 마법과 같이(Ajaxian에 그렇게 되어 있군요 ㅎㅎ) 온라인상에서의 Web Application이 화면에 나타납니다. 오프라인임에도 불구하고 !!
   
7. 사용자의 로컬에 저장되어 있는 데이타는 언제라도 읽어들일 수 있고 다시 수정하여 로컬에 저장할 수 있습니다.
   
8. 또한, 온라인에 다시 연결될 경우 Dojo Offline은 이를 알아채고 로컬에 있는 데이타들을 웹서버에 보낼 수 있게 해줍니다.

로컬에서의 저장은 Dojo Storage를 사용하게 되는데, 사용자의 허락하에 부라우져에서 몇 백KB에서 MB까지 저장이 가능합니다. Dojo Offline Toolkit은 IE, Firefox, Safari에서 동작이 가능할 것이며(will work라 되어 있네요), Windows, Linux/x86, Mac OS X/Universal Binary에서 구동될 수 있다.(여기도 will run)

---

상당히 재미있으나 강렬한 기능일 것 같습니다만, Dojo를 사용해야한다는 점이...걸리네요.(언제 또 다 공부할지 ㅠㅠ)

출처 :

Ajaxian에 Dojo Offline Toolkit Kicks Off
The Dojo Offline Toolkit
Dojo Storage관련 글

압축과 통합을 통한 js, css 다운로드 최적화

Ajaxian에 Maximizing Performance with Compression and Combination이라는 기사가 있더군요. [Ajaxian의 밀린 기사 읽는 중이랍니다. ^^;;] 이전에 Vox.com 분석할 때 Vox.com의 js 및 css를 자동으로 통합해서 배포하는것 같다는 얘기를 한 적이 있습니다. 이와 비슷한 방법이기는 하나 Ajaxian의 Maximizig Performance...도 js와 css를 자동으로 통합해서 배포하는 방법에 대해서 설명하고 있습니다.

큰틀은 다음과 같습니다.

• js 및 css 파일들을 request에 따라 하나의 통합된 파일로 생성합니다. (Combination)
  
• 이 통합 파일을 gzip으로 압축하여 배포합니다.
  
• 그리고 압축파일을 디스크에 캐싱해 둡니다.

.htaccess파일을 수정하여 css나 js파일이 여럿 나오는 경우 이를 combine.php로 redirect시켜서 처리하도록 하고 있군요. 솔루션 자체도 오픈되어 있습니다.

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

솔루션을 공개해주신 rakaz님께 감사를~~ ^^

출처 : 
rakaz님의 Make your pages load faster by combining and compressing javascript and css files
Ajaxian의 Maximizing Performance with Compression and Combination

BackButton Overloading

Ajaxian의 기사를 다시 보고있는데 BackButton Overloading기사에서 onunload 이벤트 헨들러를 사용하여 페이지에서 빠져나가지 못하게 하는 방법에 대한 기사가 있네요.

페이지가 빠져나가는 순간(onunload 이벤트 발생하는 순간)에 location을 현재의 위치로 변경하게하여서 빠져나가지 못하게 하는군요. 이런 기쁜 방법(?)이... [Mario Heiderich님의 테스트페이지]

잘 사용한다면 글쓰기페이지에서 실수로 벗어나는 경우를 막는데 사용할 수 있지 않을까 싶네요.
나쁘게 사용한다면... 난감 -_-;;;;;

출처 : Ajaxian의 BackButton Overloading

graft()

DOM을 사용하여 html을 생성해내는 코드를 작성할 때 부딪치는 가장 큰 문제가 상당히 많은 양의 코딩이 필요하다는 점입니다. 코드가 많아질 수록 당연히 Bug가 생길 가능성도 증가하게 되겠죠. 이를 해결하기 위해서 나온 방법이 html구조를 쉽게 표현하는 구조와 이를 파싱하여 DOM으로 자동 생성해주는 코드를 만드는 방법입니다.

생성할 html 코드

Graft function이 이러한 해결책을 위해서 나온 function인데요.
동작원리는 간단합니다. Array로 구성된 Html구조를 파싱하면서 recursive하게 DOM객체를 생성하거나 attribute를 설정해주는 코드입니다.

Grant로 파싱할 대상인 html array

사용방법은 간단합니다. []로 태그를 감싸는데요. Array의 처음은 태그의 이름이 두번째는 태그에 들어갈 text나 속성(Hash Object인 {})이 들어갑니다. 동일한 html을 생성하는 DOM 생성 코드와 비교하면 상당히 많은 줄의 차이를 갖습니다.

DOM 생성 코드

대략 25줄대 2~3줄 정도의 차이니까, 코딩양으로 본다면 엄청난 양을 줄일 수 있는 장점이 있습니다.
Grant의 실제 코드를 보면 다음과 같습니다.

graft의 경우에는 release된 version이 없습니다. function만 올려진 상태구요. 댓글 달린 것과 경험상 봤을 때 setAttribute를 사용하여 Class설정하는 코드는 IE에서 동작하지 않을겁니다. className으로 설정하도록 수정이 필요하구요.

검증이 100% 안된코드로 보시고 작업하셔야 될 걸로 생각되네요..
그래도, 이런게 어딥니까 ^^

출처 :

Ajaxian의 Garft: Making JavaScript DOM a Piece of Cake
Making Javascript DOM a Piece of Cake with the graft() Function

P.S. 1:
graft란 단어는 '접목하다', '이식하다'라는 의미를 가진 단어입니다. (사전 찾아봤습니다. ^^;;)

P.S. 2:
Ajaxian에 최근에 올라왔던 DOMTool(html을 코드를 읽어들인 다음 동일한 html을 생성해내는 DOM 생성 코드를 만들어내는 툴입니다.)에 대한 기사를 읽다가 Graft가 생각나서 정리해봤습니다.

P.S. 3:
Graft()는 Sean Burke씨와 그의 책, Higher Order JavaScript에 나와있는 코드를 기반으로 하여 만들어졌습니다. [얼핏 기억으로는 Perl로 만들었다는 글을 본 것 같기도 합니다. 미확인 정보 --;;]

On-demand JavaScript

JavaScript를 로딩하기 위해서는 <script>태그를 사용하여 초기에 로딩하게 됩니다.

그러나, 경우에 따라서는 특정한 경우에만 JavaScript로딩을 사용하게 됩니다. 예를 들자면, Wiki 사용자들 대부분이 내용을 읽기만하지, 쓰기는 하지 않습니다. 즉 파일업로드와 같은 JavaScript는 사용하지 않기 때문에, <script>태그를 사용하여 로딩하지 않아도 되는 것이죠.

이를 구현하는 방법에는 크게 두가지가 있습니다. 하나는 Script태그를 사용하여 읽어들이는 것이구요, 또다른 하나는 XMLHttpRequest를 사용하여 읽어들이는 방법이 있습니다. Script태그를 사용하여 읽어들이는 경우에는 로딩이 되었는지 확인하는 절차와 sync문제가 존재합니다.

또 하나의 방법은, XMLHttpRequest로 파일을 요청하고 이를 받아서 eval()를 사용하여 해당코드를 실행시키는 방법입니다. 이 때 주의할 점은 단순한 function을 로딩하게 되면 한 번 실행한 후에 종료가 된다는 점입니다.

이를 위해서 브라우져의 윈도우 오브젝트 self를 이용하여 해결할 수 있습니다.

출처 : On-Demand JavaScript

Check valid email address using regural expression.

JavaScript에서 가장 많이 쓰이는 기능 중 하나는 정규표현식을 사용하는 것입니다.
정규표현식(RegExp)에는 test()를 가지고 있어서 인자로 받는 string이 test를 만족하는지 만족하지 않는지를 boolean 값으로 리턴해줍니다.

var booleanValue = (RegExp).test([str]);

그 중에서도 가장 많이 쓰이는 것이 e-mail을 체크하는 기능입니다. QuirksMode에서는 이러한 e-mail을 체크하는 정규표현식에 관한 기사가 있습니다. 이를 사용하면 쉽게 e-mail을 체크하는 코드를 다음과 같이 만들 수 있습니다.

function checkMail(mailAddress){
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return filter.test(mailAddress);
}

Url을 체크하는 것도 가능합니다. 비록 완벽하지는 않지만요.

function checkURL(urlString){
  var filter =/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
  return filter.test(urlString);
}

출처:

QuirksMode의 Valid email address
validate a url(regexp)

Mr.Proto님의 Carousel 라이브러리(Scrolling-Object)

한 눈에 봐도 강렬한 뽀스가 느껴지는 Mr.Proto님(본명은 Sébastien Gruhier)은 13년간의 C++과 Java로  OO계를 주름 잡으셨다가 최근에 Ruby on Rails로 전향하셨다고 합니다. 흰눈썹에서 품어져 나오는 이미지는 그의 나이를 궁금케 하는군요. ^^

Bookmark manager, Transparent message, Prototype window, Prototype carousel 라이브러리가 Mr.Proto님의 홈페이지에서 제공되고 있습니다. 이번에 살펴볼 라이브러리는 Prototype carousel로서 스크롤링 라이브러리입니다.

Consulting, Training, Development Ruby on Rails/AJAX/JavaScript가 직업이라고 되어 있는데 현재는 free라고 되어있네요. 코드를 보시면 알겠지만 이 분의 코드는 상당히 깔끔하게 객체화도 잘되어있고, 읽기도 편합니다.

먼저, 코드의 Outline을 살펴보면 다음과 같습니다.

위의 property 중에 대부분의 코드는 option항목을 저장하기 위해서 사용됩니다.
스크롤링이 되는 대상들은 페이지 로딩 시에 로딩이되고 각각이 li태그로 감싸져서 반영이 됩니다. 이들 li태그들은 가로방향으로 생성이 됩니다. 다음은 li태그임을 보여주기 위해서 모든 css를 제거한 화면입니다.

css를 모두 제거한 화면

이 화면에 carousel.css를 적용하게 되면 다음과 같이 가로바 형태의 모습이 나오게 됩니다. 여기에서 다시 appliecation.css를 적용하여서 스크롤링하기 위한 Object만 나오게 합니다.

이 때 사용하는 방법이 li들이 저장되어 있는 ul객체를 div로 감싸고 이 div의 크기를 줄인다음 overflow:hidden으로 처리함으로써 나머지 영역을 클리핑하게 됩니다.

carousel.css만 적용한 상태로 div에 overflow:hidden이 적용되어있으나 width는 정하지 않은 상태입니다.

이 상태에서 스크롤 버튼을 누를 때 li의 위치만 변경시켜주면 스크롤이 되게 됩니다. 내부에서는 Clipping되어 안보이기는 하나 li태그들의 위치가 좌우로 움직이게 됩니다. 이 때 사용자는 Clipping 영역만 보기 때문에 스크롤이 되었다고 느끼게 되는거죠.

new Effect.MoveBy(this.carouselList,
      0, delta * this.elementSize, this.options.animParameters);

위의 코드는 script.aculo.us이 코드로 this.carouselList element를 x좌표 0, y좌표 delta * this.elementSize만큼 옮겨줍니다. this.options.animParameters는 script.aculo.us에서 사용되는 설정값들을 저장하는 array들입니다.

개념 자체는 상당히 simple합니다만, 실제 적용하기 위해서는 좌표 계산등에 대해서 상당히 신경써야 되는 부분이 있습니다.  Mr. Proto님께 감사의 마음을 갖고(센스와 디자인 감각도 상당함을 느끼세요) 라이브러리를 사용하셔야 합니다. ^^

• 이 라이브러리는 Bill Scott's Carousel Component(YUI 라이브러리 사용)의 Prototype/script.aculo.us버전입니다.
• 버전은 0.26입니다.
• 라이센스는 MIT 라이센스입니다.
• IE6, Firefox(Mac, PC), Opera, Camino, Safari에서 테스트되었습니다.

출처 : http://www.xilinus.com/

xfade 2

xfade 2 라이브러리는 fade in/fade out을 실행하는 라이브러리입니다. 특징은 다음과 같습니다.

• id가 imageContainer인 div에서 fade in/fade out할 이미지목록들을 지닙니다.
• setTimeout을 실행시켜 so_xfade()를 특정시간 뒤에 호출하며 내부에서도 recursion으로 호출합니다.
• 이미지들을 동일 선상에서 출력하기 위해서 display: block을 사용합니다.
• fade in/out은 style의 MozOpacity(for ff), opacity(for safari), filter(for ie)를 사용합니다.

출처: xfade2