function deletexhr(xhr) {
    function doNothing() {
    }
    xhr.onreadystatechange = doNothing; //onreadystatechagne를 더미함수로 대체    
    xhr.abort();                        //xhr 요청 중단
    delete xhr;                         //xhr 객체 밑의 모든 프로퍼티 삭제
}

var o = {           //변수 정의 및 객체 초기화
    x:1,
    y:2
}
delete o.x;         //객체 프로퍼티중 하나를 삭제한다. true 반환
typeof o.x;         //존재하지 않은 프로퍼티. "undefined" 반환
delete o.x;         //존재하지 않는 프로퍼티를 삭제하려한다. true반환
delete o;           //선언된 변수는 삭제할 수 없다. false 반환
delete 1;           //정수도 삭제할 수 없다. true 반환
x = 1;              //var 키워드를 사용하지 않고 암묵적으로 변수를 선언
delete x;           //이와 같은 변수는 삭제할수 있다. true반환
x;                  //런타임 에러, x는 삭제되었으므로 정의되지 않았다.

var my = new Object();      //'my'라는 이름의 객체를 생성
my.hire = new Date();       //my.hire는 Date객체 참조
my.fire = my.hire;          //my.fire도 동일한 객체 참조
delete my.hire;             //hire속성 삭제 true반환
document.write(my.fire);    //하지만 my.fire는 여전히 Date객체를 참조

delete objectNamedelete objectName.property
delete objectName[index]delete property // with 문장 안에서만 유효

var x=42;
var y= 43;
var myobj=new Number();
myobj.h=4;      // h라는 속성을 만듭니다
delete x;       // returns true (암시적으로 선언된 변수는 지울 수 있습니다)
delete y;       // returns false (var로 선언한 변수는 지울 수 없습니다)
delete Math.PI; // returns false (미리 정의된 속성은 지울 수 없습니다)
delete myobj.h; // returns true (사용자 정의 속성은 지울 수 있습니다)
delete myobj;   // returns true (암시적으로 선언되었으므로 지울 수 있습니다)

trees=new Array("redwood","bay","cedar","oak","maple");
delete trees[3];
if (3 in trees) {   // 이 블록은 실행되지 않는다.
   alert(trees[3]);
}

trees=new Array("redwood","bay","cedar","oak","maple");
trees[3]=undefinedif (3 in trees) {   // 이 블록은 실행된다.
}

var a=document.getElementsByTagName('div');
 for(i=0;i

delete a.member; 

delete Integer.prototype.toUnsigned; 

Object.prototype.extend=function(obj){
       for(var x in obj)
           this[x]=obj[x];
       return this;
 }

var ob={
    a:'가',
    b:'나',
    c:function(){
        return '다';
      },
    d:4
};

ob=ob.extend({e:5,f:'라마바',g:(function(ret){return ret;})('사아자차카타파하')}); 
delete Object.prototype.extend; 

var Vervain = new Herb();
var Verbena = Vervain;  

var Vervain = new Herb();
var Verbena = new Herb();  
Vervain.see = Verbena;  
Verbena.see = Vervain;  

//IE일 경우 모든 이벤트 및 프로퍼티 삭제
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;
        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}//객체 destory 처리
destroy : function(){
    Ext.each(arguments, function(arg){
        if(arg){
            if(Ext.isArray(arg)){
                this.destroy.apply(this, arg);
            }else if(Ext.isFunction(arg.destroy)){
                arg.destroy();
            }else if(arg.dom){
                arg.remove();
            }
         }
    }, this);
},
destroyMembers : function(o, arg1, arg2, etc){
    for(var i = 1, a = arguments, len = a.length; i < len; i++) {
        Ext.destroy(o[a[i]]);
        delete o[a[i]];
    }
},
remove : function(o){
    var index = this.indexOf(o);
    if(index != -1){
        this.splice(index, 1);
    }
    return this;
}

Beautifully Documented Code를 보다가 일전에 Wiki 관련 Parser에 대해서 관심을 가지게 되었다.
그때는 Java로 된, 혹은 Server side 언어쪽만 찾아봤었는데 이렇게 자바스크립트로 된 파서를 찾아서 꿈쳐둔다.

웹페이지를 퍼블리싱할때 디자인적인 측면이 많이들 강조된다. 타이포나 문장에 대한 배치등 그리드에 대한것도 전적으로 디자이너의 몫으로 넘기기 쉽다. 그러나 사실 이러한 문서 작업은 디자이너들 보다는 퍼블리셔나 산출물작업의 양만으로 따진다면 서버 프로그래머들의 작업량이 더 많다.

뭐 잡설은 집어치고,  이전 레이텍(Latex)이나 HanTex과 같이 화면상에 문서를 구성할수 있게 실시간으로 스크립트를 이용해서 만들어 준다면 얼마나 좋을까? 바로 Creole Parser가 이러한 것을 가능하게 해주었다.
 

parse_demo.zip

스크립트 관련 레퍼런스

• Mozilla Core JavaScript 1.5 Reference
• Mozilla Core JavaScript 1.5 Guide
• Mozilla New In JavaScript 1.6
• Mozilla Gecko DOM Reference
• Rhino : JavaScript Engine for Java
• JavaScript Tutorial
• SlayerOffice MouseOver DOM Inspector
• 접근성을 고려한 JavaScript/Accessible JavaScript
• Live Validation : JS로 폼값 검사하기

JavaScript 시작

1. <script type="text/javascript" defer="defer">
2. //<![CDATA[
   
   1. // defer="defer" 옵션을 지정하면, JavaScript에서 문서 내용을 생성하지 않는다는 의미이며,
   2. // 이 때문에, 브라우져는 자바스크립트를 로딩하기 전에 먼저 웹 페이지를 먼저 처리한다.
   3. // 이 옵션은 IE에서만 작동한다.(2008년 현재)
3. //]]>
4. </script>

• JavaScript의 위치
  • <body> : 페이지를 로드할 때 동적으로 웹페이지의 컨텐트를 생성하는 경우
  • <head> : 함수 안에서 정의하고 page 이벤트에 사용되는 자바스크립트 코드, body 태그가 읽히기 전에 미리 읽히게 된다.
• JavaScript 선언시 HTML 주석 <!-- -->으로 감싸지 말것. XHTML 규칙에 어긋난다.

var 키워드와 영역(scope)

• 함수 내에서 var 키워드로 변수를 선언하면 함수내 영역에 종속된다.
• 함수 내에서 var 키워드 없이 변수를 선언하면 전역 영역에 종속된다.
• 함수 밖 전역 영역에서는 var 키워드 사용 유무에 관계 없이 무조건 전역 영역에 종속된다.
• undefined : 변수를 선언해 놓고서, 값을 지정하지 않은 상태.

좋은 코딩 습관

• 함수 안의 변수는 항상 "var"로 선언하라.
• 자바스크립트의 유무와 관계없이 싸이트의 정보를 모두 사용할 수 있도록 하라(JavaScript를 끄고 코딩하기).
• JavaScript 접근성 튜토리얼(영문)
• noscript : JavaScript가 작동안하면 출력되는 정적인 코드를 <noscript>태그 안에 넣는다. JavaScript가 작동할 경우에는 무시된다.
• Mozilla JavaScrip Style Guide
• &&, || 연산시 CPU를 더 적게 사용하는 식을 왼편에 두면 효율성이 높아진다.
• 인라인 이벤트 등록 방식은 되도록 피하고, Javascript를 이용한 기본 이벤트 등록 방식을 사용하라. (object.onevent=func)

형(Type)

• object.toString()
• object.toBoolean() : "",숫자 0, NaN, Null, Undefined 일경우에는 false 나머지는 모두 true
• parseInt(string)
• parseFloat(string)
• Number(string)
• isNaN(변수) : 변수가 숫자가 아니면 true
• const CURRENT_MONTH = 3.4;  // CURRENT_MONTH 는 상수가 되었다.
• 정수/정수의 결과가 실수가 될수도 있다. 3/2 == 1.5

연산자

• "3.0" == 3.0 : true - 동등 연산자, ==, !=
• "3.0" === 3.0 : false - 일치연산자, ===, !==

구문

• for (varName in 연관배열) { statements...; }
• if (value in [연관배열|배열|객체])

내장 클래스

• Number 클래스
• String 클래스 : 문자열("...")은 자동으로 String 객체로 변환된다.
• Date 클래스 : 날짜 연산.
  
  • Date.now : 현재 시각
  • Date.parse : Unix Time millisecond
  • 웹 사용자에게 보여줄 시간은 Local 시간을, 국제적으로 시간 비교가 필요할 때는 UTC 사용.
• Math 클래스 : 대부분 정적 프라퍼티, 정적 메소드
  
  • Math.random() : 0~1 사이의 난수
• Array 배열
  
  • array.slice(2,4) : 지정 범위를 배열로 반환
  • array.concat(배열) : 배열 연결
  • array.join("구분자") : 배열의 값들을 "구분자"로 연결한 하나의 문자열로 변환
  • 콜백 함수관련 메소드들 : 이 메소드들은 FireFox 1.5 이상에서만 지원된다. IE 7 이하, Opera 9.2 이하에서는 지원되지 않는다. prototype.js 를 사용하면 어느 정도 지원해 준다.
    • 각 콜백 함수는 element, index, array 를 인자로 받는다.
    • array.filter(func) : 특정 조건을 만족하지 못하는 원소 제거. 조건 체크는 함수 인자가.
    • array.forEach(func) : 배열 원소를 함수 인자에서 처리
    • array.every(func) : 배열의 모든 원소에 대해 false 값이 반환될 때까지 콜백 함수 실행
    • array.map(func) : 배열의 모든 원소에 대해 콜백 함수를 실행하고 결과를 배열로 리턴
    • array.some(func) : 배열의 모든 원소에 대해 true 값이 반환될 때까지 콜백 함수 실행
  • 배열인덱스 사용하기

1. var langs = new Array('a', 'b', 'c');
2. for (var itemIndex in langs) {
3. alert(langs[itemIndex];
4. }

• 연관배열 : HashMap

1. var assocArray = new Object();
2. assocArray["one"] = "one";
3. assocArray["two"] = "two";

정규표현식

• JavaScript 정규표현식 Tutorial
• new RegExp('+s') 는 /+s/ 와 같다.
• /pattern/i,new RegExp('pattern', 'i') : 대소문자를 구분하지 않는다.
  
  • i : 대소문자 구분 안함
  • g : 전역 매칭. 마지막 매칭 위치를 기억하고 있다가, 또 다시 regexp.exec(string)이 호출되면 그 이후부터 검색한다.
  • m : 여러줄 매칭
• 특수문자
  
  • * : 0회 이상 반복
  • + : 1회 이상 반복
  • ? : 0 또는 1개 문자
  • . : 1개 문자

1. // 정규표현식 replace
2. var regExp = /\s\*/g;
3. var str = "This *is *a *test *string";
4. var resultString = str.replace(regExp, '-');

1. // 정규표현식 매칭되는 문자열 찾기
2. var regExp = /:\D*\s\d+\sd+/;
3. var str = "This is a date: March 12 2005";
4. var resultString = str.match(regExp);

• 괄호
  • 매칭(String.match(regex)) 결과를 ["전체매칭문자열","첫번째괄호에들어가는문자열", "두번째", ...] 형태의 배열로 리턴한다.
  • 각 괄호에 매칭된 문자열을 $1, $2, .. 로 나타내어 대체가 가능하다. str.replace(regExp, "$2-$1")
• /s{2}/ : 문자 s가 2회 나온다.

함수

함수도 객체다.

• 익명함수 : 읽을때마다 파싱
  
  • new func = new Function("인자1", "인자2", ..., "함수몸체");
• 함수 리터럴 : 단 한번만 파싱

1. var func = function (인자들) {
2.     statements;
3. }

• 클로저(closure) : 다른 함수 내에서 내부 객체로 생성된 함수 리터럴을 반환하여 호출 프로그램에서 이를 변수로 배정한 것
  
  • 메모리 누수의 위험이 있으므로 주의해서 사용할 것.
  • JavaScript Closure FAQ
• 함수명.length : 인자의 개수
  
  • arguments[i] : 각 인자의 값을 순서대로 가지고 있다.

이벤트

• QuriksMode JavaScript
• IE 에서는 window.event 에 이벤트 객체가 저장된다.
• FireFox/Mozilla/Opera 등은 이벤트 함수에 event 객체가 인자로 전달된다.

1. // 브라우저에 무관한 이벤트 처리
2. function eventProc(nsEvent) {
   
   1. var theEvent = nsEvent ? nsEvent : window.event;
   2. // 이벤트 처리..
3. }

• 이벤트 함수 내의 this는 이벤트를 발생시킨 객체를 의미한다.
• DOM 2 : 한 이벤트에서 여러개의 함수 호출 가능
  
  • object.addEventListener('event', function, 이벤트처리방식boolean);
  • object.removeEventListener()
  • object.dispatchEvent()
  • IE 에서는 이를 지원하지 않는다.
    • object.attachEvent, object.detachEvent() 사용.
    • 각 이벤트가 메모리를 차지하므로, window.onunload 이벤트를 받아서 attach된 이벤트들을 모두 제거해줘야만 한다.

• HTML의 인라인 이벤트 메소드들은 FireFox의 경우 event 라는 이름으로 변수를 설정해야 이벤트 객체가 전달된다.

  • 이벤트 객체 체크방식은 기존과 마찬가지로 IE와 FF 방식을 분리해서 하는 방식을 사용하면 된다.
  1. <img src="test.jpg" onclick="testinlinemethod(event, arg1, arg2, ...);" />

도메인

document.domain = "somecompany.com";

이후부터는 자바스크립트가 *.somecompany.com와 소통 가능.

BOM

• window.open
• self.method() : 현재 윈도우 자신에게 메소드 수행
• opener.method() : 현재 윈도우를 열어준 부모 윈도우 참조
• screen : 화면 정보 availTop, availLeft, availWidth, availHeight, colorDepth, pixelDepth

Tips

• IE JavaScript Development & Debugging

Ajax로 데이터 교환하기

Ajax 인터페이스가 가진 가장 일반적인 문제들 중 하나는 클라이언트 브라우저와 호스트 서버 간 정보 교환에 인코딩 및 사후 처리(post-processing) 또는 데이터 스트림을 JavaScript 애플리케이션 내에서 직접 사용할 수 있는 것으로 변환하는 파싱이 필요하다는 점이다.

Ajax에서, 캡슐화 방식은 XML이다. 전 세계적인 공통 이해를 기반으로 사용되고 있지만 문제와 한계도 안고 있다. XML의 기본적인 문제는 인코딩 프로세스가 비싸고, 대부분의 브라우저에서, XML 응답의 디코딩(decoding)에 시간이 많이 든다는 점이다.

Ajax 애플리케이션을 사용하면, 요청은 폼의 콘텐트에 기반하게 된다. 응답은 서버에 의해 리턴되는 정보가 자바 객체 시리즈로 표현된다. 결과 시퀀스는 그림 1과 비슷하다.

그림 1의 프로세스는 두 가지 문제를 갖고 있다.

• 첫 번째는 XML로 작동하는 것이 매우 복잡하다. XML을 처음부터 생성하든, 서버에서 XML을 소비하든, 프로세스는 시간이 많이 걸리고 지루하고, 대게는 비효율적이다.
• 다른 문제는 데이터를 디스플레이 포맷으로 변환하는 것이 복잡하다는 점이다. DOM 모델을 사용하여 직접 UI 엘리먼트를 구현하든지, 사전 포맷된 XHTML로 데이터를 제공해야 한다. 후자 방식은 서버가 UI 엘리먼트를 제공해야 한다. (이 자체로 위험한 발상이다.) 전자는 오버헤드를 프로세스에 추가하게 된다.

DOM 모델은 다른 웹 브라우저들과 환경이 다른 DOM 구조와 인터페이스를 갖고 있다는 사실에도 영향을 받는다. 이는 여러분이 로딩하는 정보의 디스플레이에도 복잡성을 추가하게 되고, 이는 전혀 원하던 바가 아니다.

이러한 문제에 대한 솔루션이 많이 있다. 첫 번째 솔루션은 XML 포맷에서 JSON으로 데이터가 교환되는 방식을 변경하는 것이다. 이 부분은 이 글의 초점은 아니지만, JSON을 이해하면 JsonML을 더욱 쉽게 이해할 수 있을 것이다. JsonML은 정보의 실제 디스플레이를 더욱 쉽게 만드는 또 다른 솔루션도 제공한다. 먼저 JSON부터 보도록 하자.

위로

JSON 이해하기

JavaScript Object Notation (JSON)은 XML 사용, 콘텐트의 파싱, JavaScript 표준 기능을 사용하여 정보를 교환함으로써 가용성 있는 내부 구조로의 변환을 통해 대부분의 문제를 해결하려고 한다.

JSON의 중심은 여전히 텍스트 포맷이지만, 가독성이 더욱 강화되었고, 많은 언어들(Perl, PHP, Python, Java, Ruby)로 중첩된 데이터 객체들을 생성하는 방식과 호환되고, 이는 JavaScript 객체 포맷(중첩된 데이터 구조)와 잘 맞는다.

Listing 1처럼, XML로 비즈니스 리스트를 모델링 한다.

                
<business>
<name>One on Wharf</name>
<address>
    <street>1 Wharf Road</street>
    <town>Grantham</town>
    <county>Lincolnshire</county>
</address>
<phonenumbers>
    <phone>01476 123456</phone>
    <phone>01476 654321</phone>
</phonenumbers>
</business>

JavaScript 내에서 파싱 하려면 DOM 모델을 사용하여 컴포넌트에 액세스 해야 한다. 예를 들어, JavaScript 내 이 구조에서 전화 번호를 얻으려면, Listing 2의 코드를 사용해야 한다.

                
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load("/json/address.xml");
  getaddress();
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
  {
  xmlDoc=document.implementation.createDocument("","",null);
  xmlDoc.load("/json/address.xml");
  xmlDoc.onload=getaddress;
  }
else
  {
  alert('Your browser cannot handle this script');
  }
}
function getaddress()
{
document.getElementById("business").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
document.getElementById("fax").innerHTML=
xmlDoc.getElementsByTagName("phone")[1].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>Address</h1>
<p><b>Business</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

Listing 2의 코드는 단 1 개의 주소 정보만 얻었고, 다음 로직을 사용하여 비즈니스 이름 같은 원래의 XML 문서 엘리먼트에 액세스 한다. xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue.

좋아 보이지는 않는다!

JSON에서 같은 정보를 보자. (Listing 3)

                
{
    "business" : {
        "name" : "One on Wharf",
        "address" : {
            "street" : "1 Wharf Road",
            "town" : "Grantham",
            "county" : "Lincolnshire",
        },
        "phonenumbers" : [
                          "01476 123456",
                          "01476 654321",
                          ]
                      }
}

구조가 훨씬 읽기 쉽고 간단하다. JSON에 사용된 마크업 포맷은 eval()을 사용하여 파서 없이도 JavaScript에서 직접 계산될 수 있다. 그리고 결과는 또 다른 JavaScript 객체이다: var addressbookObj = eval('(' + jsontext + ')');.

주: 이상적으로는 eval()을 사용해서는 안된다. 임의의 텍스트를 실행하는데 사용될 수 있기 때문이다. JSON 텍스트만 파싱하는 많은 JSON 파서들이 있다.

정보가 JavaScript 내 객체라면, 표준 JavaScript 표기법을 사용하여 정보에 액세스 할 수 있다. 예를 들어, 객체로 파싱 되었던 JSON 데이터 소스에서 같은 이름과 전화 번호를 얻을 수 있다. (Listing 4)

                
addressbookObj.business.name
addressbookObj.business.phonenumbers[0]
addressbookObj.business.phonenumbers[1]

Listing 4는 사용하고 액세스 하기가 더욱 간단하고 쉽다. 위 데이터 구조를 사용하고 원래의 XML 예제와 같은 정보를 제공하는 전체 페이지를 작성할 수 있다. (Listing 5)

                
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function showaddress(req)
{
    var addressbookObj = eval('(' + req.responseText + ')');

    document.getElementById("business").innerHTML = 
       addressbookObj.business.name;
    document.getElementById("phone").innerHTML = 
       addressbookObj.business.phonenumbers[0];
    document.getElementById("fax").innerHTML = 
       addressbookObj.business.phonenumbers[1];
}

function getaddress()
{
   new Ajax.Request('address.json',
                    { method : 'get',
                      onSuccess : showaddress,
                      onFailure: function(){ 
              alert('Something went wrong...') }});
}
</script>
</head>
<body onload="getaddress()">
<h1>Address</h1>
<p><b>Business:</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

필자는 여기에서 Prototype 라이브러리를 사용하여 원래 JSON 파일을 로딩했지만, JSON 파일에 있는 정보를 실제로 파싱하고 디스플레이 하는 프로세스가 훨씬 더 간단하다는 것을 알 수 있다. 하지만, 여전히 DOM을 사용하여 JSON 파일에서 로딩되었던 정보로 아웃풋을 채워야 한다.

원래 JSON으로 돌아가서, JSON은 전송되는 데이터의 관점에서 볼 때 비교적 작고, 더 큰 Ajax 프로젝트에서 XML의 페이로드 오버헤드는 상당하다. 실제로 콘텐트를 처리하는 감소된 JavaScript 오버헤드와 이것을 합병할 때 오버헤드가 크다.

Listing 5의 예제는 JSON 표준의 단순함을 보여준다. 대부분의 Ajax 애플리케이션의 핵심은 정보 디스플레이의 커스터마이징이다. 이 예제에서, 여러분은 DOM 모델을 사용하여 XML 또는 JSON 데이터 콘텐트를 HTML 페이지로 삽입했다. 많은 Ajax 애플리케이션에서, 구현해야 할 더 복잡한 사용자 인터페이스 엘리먼트가 있다.

JsonML

JSON Markup Language는 JSON 데이터 교환 포맷의 기본 방식을 사용하고 이를 XML 표현에 적용하여 비슷한 텍스트 기반 마크업을 사용하여 XML 포맷 데이터를 교환할 수 있다.

XML을 직접 사용하는 대안으로서 XML 데이터를 모델링 하는 표기법 포맷으로 보인다. 하지만, 원래의 XML과 비교해서 JSON의 구조와 가독성을 생각해 보라. JsonML에서, 많은 장점들을 활용할 수 있다. 가독성과 데이터 크기는 분명한 이점이 된다.

JsonML의 주 초점은 UI 엘리먼트를 구현하는 툴로서이다. 전통적으로, 여러분은 이러한 종류의 브라우저 기반 사용자 인터페이스를 개발하는 두 가지 방식을 갖고 있다.

• 서버에서 XHTML을 생성하여 DOM 객체의 innerHTML 애트리뷰트를 사용하여 현재 페이지로 삽입한다.
• 클라이언트 DOM 인터페이스를 사용하여 DOM 구조를 직접 구현한다.

여러분도 보다시피, 이것은 다소 성가신 방법이다. 대형 데이터 세트의 경우, 포맷팅이라는 반복적인 특성이 프로세스를 혼돈시킬 수 있다. 게다가, 브라우저에 민감한 DOM 구현들을 다루는 문제도 있다.

바로 이것이 JsonML이 해결하고자 하는 것이다. JSON 마크업의 단순함과 대상 포맷으로서 DOM을 혼합한다. 여러분은 같은 효과를 볼 수 있다. 소스는 JavaScript 클라이언트에 의해 쉽게 로딩 및 파싱될 수 있다. (DOM 구현에 대해서는 걱정할 필요가 없다.) 또한, 여러분은 JsonML 문서에 모든 것을 기술할 수 있기 때문에, 데이터와 마크업을 하나의 파일로 효과적으로 삽입할 수 있다.

그림 1로 다시 돌아가면, Ajax 인터페이스를 통해 복원된 정보를 디스플레이 하는 전형적인 방식에는 데이터를 요청하고, XML을 파싱하고, XML을 브라우저에서 요구하는 DOM 구조로 변환하고, 아웃풋을 실제로 디스플레이 하는 것이 포함된다.

JsonML을 사용하여, 전체 XML, XHTML, DOM, JavaScript 단계를 하나의 단계로 대체할 수 있다.

JsonML 마크업

JsonML 예제를 보기 전에, JsonML의 구조부터 살펴보자. 이 구조의 공식 포맷은 Listing 6과 같다.

                
element
    = '[' tag-name ',' attributes ',' element-list ']'
    | '[' tag-name ',' attributes ']'
    | '[' tag-name ',' element-list ']'
    | '[' tag-name ']'
    | json-string
    ;
tag-name
    = json-string
    ;
attributes
    = '{' attribute-list '}'
    | '{' '}'
    ;
attribute-list
    = attribute ',' attribute-list
    | attribute
    ;
attribute
    = attribute-name ':' attribute-value
    ;
attribute-name
    = json-string
    ;
attribute-value
    = json-string
    ;
element-list
    = element ',' element-list
    | element
    ;

복잡해 보이지만, 기본 구조는 매우 간단하다.

모든 엘리먼트는 텍스트이기 때문에 [ "ul" ] 같은 un-numbered list 엘리먼트를 만들 수 있다.

대괄호는 엘리먼트를 논리적으로 그룹핑 한다. 애트리뷰트를 이 엘리먼트에 추가하려면, 이 그룹 안에서 리스트의 다음 엘리먼트로서 중괄호를 사용한다. 예를 들어, 스타일을 변경하려면 다음과 같이 한다: [ "ul", { style : "list-style-type:none"} ].

물론, 이 리스트는 자식이 없이는 소용이 없다. 이들은 같은 리스트에 추가 엘리먼트로서 추가된다. (Listing 7)

                
[ "ul", { style : "list-style-type:none"}, 
    [ "li",
      "First item"],
    [ "li",
      "Second item"],
    [ "li",
      "Third item"],
    ];

아이템에 대한 애트리뷰트는 선택적이기 때문에, 생략할 수 있다. (Listing 7)

JsonML을 XHTML로 파싱하기

위 예제는 JSON이기 때문에, JavaScript 애플리케이션 내에서 정의할 수 있다. 콘텐트를 XHTML로서 디스플레이 하는 객체로 파싱하려면, JsonML 웹 사이트에서 JsonML 라이브러리를 가져온다. JsonML에서 JSON 객체를 XHTML로 파싱하려면 parseJsonML() 메소드를 사용한다. JsonML이 파싱되면, 페이지에 추가할 수 있는 UI 엘리먼트로서 액세스 할 수 있다.

Listing 8은 제공된 링크를 클릭할 때 마다 불리트(bulleted) 리스트를 사전 정의된 컨테이너에 추가할 전체 웹 페이지 모습이다.

                
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

function addblock (id,jsonmlblock)
{
    var aselement = listblock.parseJsonML();
    var container = document.getElementById(id);
    container.appendChild(aselement);
}

</script>
</head>
<body>
<a href"#list" onclick="addblock('container', 
 listblock);return false;">Add block</a>
<div id="container"/>
</body>
</html>

그림 2는 웹 페이지 실행 모습이다. 페이지로 반입된 불리트 리스트와 함께 2회 정도 링크가 클릭된 후 보여지는 보습이다.

예제를 단계 별로 살펴보자. 첫 번째 블록은 리스트 아이템을 나타내는 JsonML이다. (Listing 9)

                
var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

이것은 단순한 JavaScript 객체이다. 사용자가 링크를 클릭하면, addblock() 함수가 호출된다. 단 세 단계만 거친다. 첫 단계는 JavaScript 객체를 XHTML로 파싱하는 것이다. parseJsonML() 메소드를 적용한다: var aselement = jsonmlblock.parseJsonML();.

이제 목적지 컨테이너를 얻는다: var container = document.getElementById(id);.

마지막으로, 생성된 XHTML을 추가하고 이를 컨테이너에 붙인다: container.appendChild(aselement);.

기존 XHTML이나 XML을 JsonML로 파싱하기

JsonML을 사용하는 애플리케이션을 구현하기 전에, JsonML로 변환하고자 하는 XML 또는 XHTML 구조가 있어야 한다. JsonML 사이트(참고자료)에서는 XML 소스에서 JsonML을 만들어 내는 XSL 변형을 제공한다.

이를 사용하려면, JsonML.xsl 변형을 다운로드 한 다음, xsltproc을 사용하여 변환을 수행한다. Listing 10의 XML 구조를 보자.

                
<table class="maintable">
<tr class="odd">
<th>Situation</th>
<th>Result</th>
</tr>
<tr class="even">
<td><a href="driving.html" title="Driving">Driving</a></td>
<td>Busy</td>
</tr>
...
</table>

Listing 10을 JsonML로 변환할 수 있다: $ xsltproc JsonML.xsl.xml samp.xml.

결과 아웃풋은 Listing 11에 나타나 있다. 실제 아웃풋 내에 스트링 엘리먼트로서 보존되었지만 XSL이 아웃풋에서는 새로운 라인을 제거했다.

                
["table",
 {"class":"maintable"},
 "\n",
 ["tr",
  {"class":"odd"},
  "\n",
  ["th",
   "Situation"],
  "\n",
  ["th",
   "Result"],
  "\n"],
 "\n",
 ["tr",
  {"class":"even"},
  "\n",
  ["td",
   ["a",
    {"href":"driving.html",
     "title":"Driving"},
    "Driving"]],
  "\n",
  ["td",
   "Busy"],
  "\n"],
 ]

이 메소드를 사용하여 어떤 구조라도 XML에서 JsonML로 변환할 수 있다.

기존 DOM 구조를 JsonML로 파싱하기

또 다른 상황은 XML 또는 XHTML 블록을 구현하고 이를 JsonML로 변환해야 하는 상황이다. 변환에 JavaScript 함수를 사용할 수 있다. JsonML 웹 사이트를 참조하라.

UI 빌더로서 JsonML 사용하기

여러 가지 방식으로, UI 빌더로서 JsonML을 사용할 수 있다. 한 가지 쉬운 방법은 구현하고자 하는 UI로서 작동하는 JsonML에 JavaScript 구조를 만드는 것이다. JavaScript 구조를 구현하면, 한 가지 액션에 있는 구조를 XHTML로 변환하고 생성된 XHTML을 이 페이지에 삽입한다. Listing 12는 테이블의 행에 검은 셀 또는 흰 셀을 추가할 수 있고, 행을 테이블에 추가하고, 테이블을 만드는 테이블 셀용 UI 빌더를 나타내고 있다. 이것은 JsonML 소스 및 상응하는 XHTML 소스이다.

                
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var blackcell = [ "td", {"style" : "background-color:black"},"CELL"];
var whitecell = [ "td", {"style" : "background-color:white"},"CELL"];

var currentrow = new Array();
var currenttable = new Array();

function onLoad()
{
    initrow();
    inittable();
}

function initrow()
{
    currentrow = new Array();
    currentrow.push("tr");
}

function inittable()
{
    currenttable = new Array();
    currenttable.push("table");
    currenttable.push({"border" : "1"});
}

function addrow()
{
    currenttable.push(currentrow);
    currentrow = new Array();
    currentrow.push("tr");
    showsource();
}

function addcell(color)
{
    if (color == "black")
        {
            currentrow.push(blackcell);
        }
    else
        {
            currentrow.push(whitecell);
        }
}

function showsource()
{
    var tablelement = currenttable.parseJsonML();
    var container = document.getElementById("viewabletable");
    container.removeChild(container.lastChild);
    container.appendChild(tablelement);

    var srccontainer = document.getElementById("sourceoutput");
    srccontainer.value = currenttable.toSource();

    var domcontainer = document.getElementById("domsourceoutput");
    domcontainer.value = container.innerHTML;
 }

function showtable()
{
    showsource();
    initrow();
    inittable();
}

</script>
</head>
<body onload="onLoad()">
<a href"#addrow" onclick="addrow();return false;">Add Row</a><br/>
<a href"#addbcell" onclick="addcell('black');return false;"
  >Add Black Cell</a><br/>
<a href"#addwcell" onclick="addcell('white');return false;"
  >Add White Cell</a><br/>
<a href"#showtable" onclick="showtable();return false;"
  >Show Table</a><br/>
<a href"#showsource" onclick="showsource();return false;"
  >Show Source</a><br/>

<div id="viewabletable">
</div>
<b>JsonML Source</b>
<textarea rows="20" cols="120" id="sourceoutput"></textarea><br/>
<b>DOM Source</b>
<textarea rows="20" cols="120" id="domsourceoutput"></textarea><br/>

</body>
</html>

이 애플리케이션의 연산은 매우 단순하다. Add Black/White Cell 버튼을 클릭할 때마다, JsonML 포맷에 올바른 정보(이 경우, 올바른 텍스트와 포맷팅을 가진 테이블 셀)로 채워진 어레이를 현재 행을 구성하는 어레이에 추가한다. Add Row를 클릭하면, 그 행과 관련된 어레이를 전체 테이블과 관련된 어레이로 추가하게 된다. 각각의 경우, JsonML 표기법에 내부 객체의 정의를 확장한다.

Show Table을 클릭하면, 내부 JavaScript 구조가 XHTML로 파싱되어 parseJsonML() 메소드를 사용하는 테이블을 디스플레이 하여 원래 JsonML을 렌더링 된 포맷으로 변환한다. 또한, JsonML 소스(JavaScript 객체에 toSource() 메소드 사용)를 디스플레이 하고, 생성된 XHTML 소스를 덤핑함으로써 XHTML 소스를 디스플레이 한다. 여러분은 내부 JavaScript 구조만 다루기 때문에, DOM 인터페이스를 사용하여 HTML을 생성할 필요가 없다. XHTML을 최종 문서로 삽입하는 것을 제외하고는 말이다.

정적 텍스트 엘리먼트를 사용하여 테이블을 구현했지만, 이것이 행으로 삽입되기 전에 테이블 데이터를 변경할 수 있다. JsonML 템플릿은 단순한 JavaScript 객체이기 때문에, 간단한 할당을 사용하여 콘텐트를 업데이트 할 수 있다: blackcell[2] = "Some other content";.

이 템플릿의 콘텐트는 쉽게 업데이트 되기 때문에 복잡한 UI 구현 프로세스의 한 부분이 제거되었다. (Ajax 연결을 통해 여러분이 로딩한 정보를 디스플레이에 사용된 XHTML로 변환하는 방법)

Behaviors를 JsonML 엘리먼트에 바인딩 하기

위 예제(Listing 12)는 매우 간단한 메소드를 제공하여 동등한 XHTML을 생성하는데 사용되는 내부 구조를 사용하여 테이블을 생성한다. 하지만, 특정 스타일에 맞도록 아웃풋을 변경하거나, 현재 페이지 내에서 사용할 수 있는 스타일 및 아웃풋 가이드라인과 매치하도록 기존 템플릿을 변경해야 한다면?

JsonML을 사용하는 한 가지 방법은 로딩 시 페이지로 반입하는 UI 템플릿을 생성하는 것이다. (Listing 13)

                
<script type="text/javascript" src="resultstable.js"></script>
<script type="text/javascript" src="resultline.js"></script>
<script type="text/javascript" src="resultselectionpopup.js"></script>

이제 페이지의 다른 엘리먼트를 만들어 내기 위해, 각 객체를 로딩하고, parseJsonML을 사용하여 이를 XHTML로 변환하고, 결과를 만들어 낸다. 지금까지 CSS가 사용되었지만, Listing 13의 방식은 어떤 유형의 정보나 데이터를 아웃풋에 도입하는 방법을 제공하지 않는다.

전통적인 Ajax/DOM 모델에서, 각 엘리먼트를 개별적으로 파싱하고 다른 엘리먼트들을 적용할 시기와 장소를 선택할 수 있기 때문에 이러한 결정들을 내릴 수 있다. 같은 방식으로 JsonML 파싱 프로세스와 상호 작동 할 수 없지만, 콜백 바인딩을 파싱 단계에 추가할 수 있다. 이 단계에서는 각 엘리먼트를 파싱하고 결과를 낸다.

바인딩 함수는 JsonML 소스에서 생성된 각 XHTML 태그에 대해 실행되고, 아이템은 표준 HTML 객체이기 때문에, 비교 또는 결정 메소드를 사용하여 템플릿의 아웃풋을 변경할 수 있다.

예를 들어, Listing 14는 또 다른 JsonML 포맷 테이블을 보여준다.

                
var table = ["table",{ "border" : "1" },
             ["tr",
              ["td",{"class" : "highlight-effect"},"Highlighted row"],
              ],
             ["tr",
              ["td",{"class" : "non-highlight"},"Non-Highlighted row"],
              ],
             ];

파싱될 때 이것은 간단한 테이블을 생성한다. 여러분은 CSS 클래스를 사용하여 원하는 포맷팅을 제공한다. 하지만, 테이블에 삽입하고자 하는 데이터에 중요한 것이 들어있을 때에만 행을 강조하고 싶을 수도 있다.

이렇게 하려면, 엘리먼트를 하이라이트 효과 클래스로 바꾸는 바인딩 함수를 작성하여 다른 배경색을 갖도록 한다. (Listing 15)

                
function actionbindings(elem) {
    if (elem.className.indexOf("highlight-effect") >= 0) {
        elem.style.backgroundColor = "red";
    }
    return elem;
}

바인딩을 사용하려면, 바인딩 함수를 parseJsonML() 함수에 제공한다: var renderedtable = table.parseJsonML(actionbindings);.

바인딩 함수는 원래 JsonML에서 포맷된 것처럼 엘리먼트로 완전히 액세스 할 수 있기 때문에 바인딩은 태그 이름, 클래스 이름, ID 같은 많은 애트리뷰트를 기반으로 포맷을 검사 및 변경할 수 있다. 여러분이 해야 할 일은 이것을 파서로 리턴하기 전에 엘리먼트를 수정하여 변경된 엘리먼트를 DOM 트리에 삽입하는 것이다.

JsonML과 XML

비록 이 글이 XHTML에 대한 솔루션으로서 JsonML의 사용에 초점을 맞춰 설명한 것이지만, 거의 모든 XML 데이터에도 JsonML을 사용할 수 있다. XHTML은 메인 XML 표준의 하위 세트이기 때문이다.

이 장치는 정적인 XML 조각들을 JavaScript 애플리케이션에 저장해야 할 경우 유용하지만, 애플리케이션이 정보를 다른 클라이언트와 교환할 때 문서를 XML로 교환하는 기능을 갖고 있다.

특히, JsonML은 JavaScript 내 구조로서 액세스 할 수 있으므로, XML 구조의 콘텐트를 쉽게 업데이트 하고 이를 서버로 보낼 수 있다.

Listing 16처럼 간단한 XML 구조의 예를 들어보자.

                
<name>
<firstname>Martin</firstname>
<lastname>Brown</lastname>
</name>

JsonML에서, 이것은 Listing 17처럼 생성된다.

                
["name", 
  ["firstname", "Martin"],
  ["lastname", "Brown"],
]

JavaScript 객체로서 여러분은 상세를 업데이트 할 수 있다. (Listing 18)

                
address[1][1] = "Sharon";

parseJsonML()을 사용하여 XML 버전의 객체를 생성하여 Listing 19에서 보이는 것을 만든다.

                
<name>
<firstname>Sharon</firstname>
<lastname>Brown</lastname>
</name>

위 프로세스는 DOM 파서를 사용하여 XML 구조를 생성하거나, 텍스트 조작(남용 및 실수 여지가 많음)을 사용하는 것 보다 훨씬 단순하다. 각 경우 기본 템플릿은 작고 즉각적으로 액세스 가능하다.

요약

Ajax 애플리케이션을 사용하면 많은 문제들이 야기된다. 데이터를 효과적으로 교환하는 방법, 애플리케이션에 데이터를 디스플레이 하기 위해 포맷하는 방법 등이 문제가 된다. Ajax 애플리케이션의 정보는 동적이고, 이 정보를 포맷하는데 사용되는 XHTML을 구현해야 한다. XHTML을 직접 작성하기에는 시간이 오래 걸리고 DOM 모델을 사용하면 문제가 많이 생긴다. DOM 인터페이스는 브라우저 구현들마다 다르기 때문이다.

JsonML은 JSON을 기반으로 구현되고 JavaScript 표기법을 사용하여 사용자 인터페이스 엘리먼트를 모델링 할 수 있다. 따라서 XHTML이나 DOM 기반 엘리먼트를 직접 생성하는 것 보다 훨씬 구현하기가 쉽고 호환성도 높다. JavaScript 구조를 XHTML로 변환할 때에는 DOM 인터페이스나 차이를 걱정할 필요가 없다.

이 글에서는 JSON과 JsonML 표준의 기초를 설명했고, 이들을 쉽게 업데이트 하는 방법도 설명했다. 또한 JsonML을 사용하여 UI 엘리먼트를 구현하는 방법도 다루었다. 파싱 단계 동안 프로세싱을 함으로써 JsonML 콘텐트를 확장하는 방법과 XHTML 아웃풋 방식을 확장 및 강화하는 방법도 배웠다.

참고자료

• JSON 홈페이지
• JsonML 홈페이지
• Ajax 마스터하기, Part 10: 데이터 전송에 JSON 사용하기 (한글) (Brett McLaughlin, 한국 developerWorks, 2007년 5월): JSON에 대해 알아보고, 이것이 애플리케이션에서 데이터와 객체들을 어떻게 이동시키는지를 설명한다.
• JSON 캐시 (Bakul L. Patel, developerWorks, 2006년 10월): 클라이언트 측에서 JSON을 사용하여 밸리데이션 메타데이터를 캐시하고, 밸리데이션 데이터와 로직을 구별해 본다.
• XML에서 JSON을 생성하여 Ajax 사용하기 (Jack D Herrington, developerworks, 2006년 9월): XSLT V2를 사용하여 XML 데이터를 XML data into JavaScript Object Notation (JSON)으로 변환하기.
• XML 기술 자료: 한국 developerWorks XML 존에서 광범위한 기술 자료, 팁, 튜토리얼, 표준, IBM 레드북을 볼 수 있다.
• developerWorks 기술 이벤트와 웹캐스트
• technology bookstore

• JS Minifier
• JSMin
• JSLint : JavaScript Verifier
• Javascript compressor : JavaScript 압축 도구
• CSS & JavaScript Compressor : CSS & JavaScript 압축 도구
• ShrinkSafe : JavaScript 압축 도구
• Huffman JavaScript Compression
• SOC (Safe Obfuscator/Compressor)
• ANT 프로젝트 구축으로 로컬에서 자유자제로 JavaScript 압축 : 여기

• CSS OPTIMIZER : CSS파일의 사이즈를 압출해주는 툴
• CSS compressor : CSS 압축기
• ROBSON CSS COMPRESSOR : CSS 압축도구
• CSS DRIVE CSS COMPRESSOR : CSS 압축도구
• CSS Compressor from Lottery Post : CSS 압축기
• FLUMPCAKES CSS OPTIMIZER : CSS파일을 최적화 도구
• CSS ANALYZER : URL방식으로 CSS를 Validation
• CSS TIDY : open source 기반의 CSS parser와 optimizer
• 온라인으로도 최적화 사이트
• CLEAN CSS : CSS를 formatting하고 optimizing하는 온라인 도구
• CSSCHECK : URL기반으로 CSS파일을 기입하면 코드에 대한 피드백을 리포팅합니다. Warning과 에러 정보를 제공합니다.
• Code Beautifier (Based on CSS Tidy)
• CSS Optimizer : 다운로드 클라이언트를 사용하여 CSS를 최적화함

• CSS Sprite Generator
• 웹 성능 개발 방안

• 자바스크립트 최적화하기
  자바스크립트 반복문 벤치마크

• @class : 클래스설명을 기술한다.
  @constructor : 생성자일때만 표기
  @param : 인자값들을 표기한다.
                표기방법 : @param {타입} 인자명 인자설명
                표기예 : @param {int} tableLength 테이블의 갯수
  @throws : 예외처리에 대해 기술한다.
  @extends : 상속
  @author : 작성자
  @version : 버전
  @since : 작성일
  @see : 참조
        표기방법 : @see 참조문서
        표기예 : @see #generateTableMethod  -> 현재 클래스의 generateTableMethod참조
                    @see sortTable.generateTableMethod
   @link : API문서에 링크걸때 표기
        표기방법 : {@link 링크할주소 링크표시}              

  @type : 메쏘드 타입
  @return : 반환값 있을 경우 (반환값이 한개일때 경우 )
  @returns : 반환값 있을경우 (반환값이 여러개일 경우)
  
  그외 : 각 설명(description)에는 HTML Tag로 표기하되 스타일시트가 없는 형태로 넣는다
  

3. 클래스 변수 및 메쏘드 변수표기

표기법 참조 문서 (첨부파일참조) :

invalid-file

자바스크립트 파일명명법은 java,jsp 파일명과 동일하게 camel 표기법으로 명명한다.

표준 자바스크립트 사용

객체 접근은 cross-browser를 지원하는 표준 메쏘드나 프로퍼티를 사용한다.
1. document.all 보다는 document.getElementById, document.getElementsByName 등으로 접근한다.
2. eval은 되도록이면 자제하도록한다.
3. 객체가 create되면 반드시 destory할때 null처리를 한다.
4. try~ catch~throws 문은 필요한 부분에서만 사용한다.

AJAX사용시 Callback함수 표기방법 (jQuery기준)

1. 기본표기법 : 해당 메쏘드를 XHR 형태와 혼합해서 쓰는경우

2. Callback함수 별도지정 : Callback함수를 공통으로 사용하는 경우

invalid-file

샘플 :

invalid-file

http://adomas.org/javascript-mouse-wheel/

Mouse wheel programming in JavaScript

Quick links: source · test page · long test page (with scrollbars) · compatibility

Though many people still find this page useful, there have been some changes in the browsers since last update of this page, and I generally consider some information here to be outdated. However, I suggest using MooTools or other general Javascript frameworks that provide portable and maintainable basis for writing Javascript code.

Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX.

This page, however, is not about AJAX (or any other buzzword). It is about rather simple user input method -- mouse wheel. I believe it would now be difficult to find a mouse without wheel. Vast majority of users are used to the wheel as a control for scrolling in lists, zooming etc. Rather few web applications, however, make smart use of mouse wheel. This page is to provide you with general information about handling mouse wheel-generated events in JavaScript programming language.

Annotated code

Below is annotated javascript code, which should explain the magic behind mouse wheel generated events. There is also plain version for copy and paste.

/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
        if (delta < 0)
		…;
        else
		…;
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

Handler function

In the code above, there is “handle” function which is, of course, meant to be written by you. As you have noticed, it takes on parameter, delta. It is called so, because mouse wheel has no absolute system, and we only capture scrolling deltas, that is wheel angle changes.

Practically, you only have to watch for positive and negative values of delta. These cases are pictured on the left.

If delta is positive, wheel was scrolled up. Otherwise, it was scrolled down.

Note that in applications, scrolling up usually means page is scrolled down etc.

You might wonder, what will the actual values of delta be. In fact, the code above is adjusted in such a way that you should get -1 or +1 in 99% of all cases. Though, for instance, I have seen ±3 in Firefox if you scroll very fast. Someone in Digg reported delta of 14, and Geoffrey Kruse was able to get 76 on his Powerbook trackpad. :-) Of course, that depends on sensivity that you've set for your mouse. There is also subtlety in Firefox (at least): if you start scrolling the wheel fast and then push the right mouse button for the menu, large value of delta is reported, e.g. 30.

Robert Gerlach writes about his experience on Safari, MacOS X: “For a single turn its +-0.1, if you roll it faster, the values become bigger. This is because of Mac OS' mouse/wheel-acceleration. You move/turn it one time, it moves/scrolls 1 pixel. Then you move/turn it three times fast and it moves/turns 30 pixel” He also writes about Camino, which is based on Gecko, the same engine that Firefox uses: “much like Safari (+- 0.3 to +-Infinity), which astonishes me, since it is based on the same engine as Firefox, which only shows +-2.666666 despite the speed.”

You are also welcome to see test page and also long test page, i.e. with scrollbars – that shows how preventing default behaviour works.

Compatability

I have written first version of this code in January 2006. Back then, Firefox and Internet Explorer 6 were only supported browsers. Older Internet Explorer version do not work. Thanks to Kane Barton for reporting that this works since Firefox 1.0.7 (so possibly since 1.0).

I would like to thank Jean-Luc Milot for contributing notes on how to make the code work properly in Opera 9. That version of Opera is relatively new (as of July 2006); previous versions of Opera do not support mouse wheel. I am also grateful to Юрій Чайковський (Yurij Chaikovsky) for pointing out that in newer versions of Opera (at least from 9.20 and up) you no longer have to invert the sign of delta. So the behaviour is the same as in Internet Explorer. I am a bit worried about compatability with older versions of Opera (though Opera forcibly recommends its users to update once new version is out) but after some time passes I will remove the conditional code that was written specifically for Opera.

Also thanks to Andrew Shearer, Dorian and Geoffrey Kruse for pointing out that the code works in Safari. Andrew mentions version 2.0.4, but I am not sure about earlier versions. Markus Rothenbacher wrote me telling that Konqueror (at least till version 3.5.4) does not have support for mouse wheel.

Preventing default behaviour code comes from phpspot.org and Johan Sundström. You can see how their code works in long test page (i.e. with scrollbars). Still, it works in IE/Firefox. It should also work in Opera since version 9.02. (Thanks to Jarkko Rantavuori for pointing this out.)

It is useful to note, however, that Opera, Safari and Firefox include automated upgrade systems that prompt users to upgrade to newer versions of the browser once it gets released, so you can be prepared to the fact that more and more internet users will have browsers for which this mouse wheel code works.

Mouse wheel currently works on: (with earliest version known to work)

• Internet Explorer 6
• Firefox 1.0
• Opera 9.
• Safari.

Unsupported browsers: (no existing version supports mouse wheel)

• Konqueror
• OmniWeb
• iCab

Usability

(Few “don't”s.)

• Don't make wheel act unexpectedly. Users know that wheel scrolls the list of files. If there is list of files in your web application, use it. Some map programs use wheel for zooming (and so does Google Maps). So use it.
• Don't force users to depend on having wheel working. Just as it is bad practice to rely on JavaScript.
• Try to get rid of global scrollbars, because mixing them with this code might cause frustration to the users.

Real world examples

If you know more practical and interesting examples, please mail me a link.

• Google Maps uses mouse wheel for zooming in and out.
• ACME Mapper combines more data sources than original Google Maps.
• ImageFlow by Finn Rudolph

Related stuff

• Italian translation with live demonstration, by Francesco Napoletano.
• Digg
• Simple Mouse Wheel support for GWT

Hope this was useful to you. You may drop me a note if it was.

[출처 : PHPSchool]

쩝..IE7에서 보안이 강화되면서 미리보기 기능이 구현안돼서 헤매고 당기다 아지트에서 발견하다...

소스 :

invalid-file

IE전용으로 프로젝트를 진행하다 보니 Jscript를 사용할 일이 생겼다.
Ajax를 이용하지 않고 Jscript만 사용한다면 아래 방법도 괜찮을것 같다.

XML은 기존의 훌륭한 Formatter와 개발툴들이 많이 있으나(가량, XMLSpy와 같이..) JSON에서는 해당하는 포맷터를 찾기 힘들었다.
Visualizer같은것이 있다면 좋을텐데 라는 생각에 검색을 보니 아래와 같이 좋은놈(?)이 있었다.. Search is life ㅡ.,ㅡ;

Formatter
http://curiousconcept.com/jsonformatter

Visualizer
http://www.codeplex.com/JsonViewer/Project/ProjectRss.aspx (이넘은 Fiddler Plugin까지 있다.)
http://www.epocalipse.com/blog/2007/06/03/json-viewer/

이놈은 StandAlone형태, Visual Studio Plug-in, Fiddler에서 Plug-in형식으로 볼수 있게 해준다 
Fiddler에서 사용하는 방법은 아래와 같다.

Fiddler2 (http://www.fiddler2.com) 를 설치하고 해당 디렉토리의 fiddler.exe.config파일을 열어서 아래와 같이 추가한다.

<configuration> 


  <runtime> 


    <legacyUnhandledExceptionPolicy enabled="1" />


 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">


     <probing privatePath="Inspectors" />


 </assemblyBinding>


  </runtime> 


</configuration> 

과 같이 설정후 Inspectors  디렉토리에 다운로드 받은 dll파일을 추가한다. 

FireFox에서의 사용
FireFox에서 Fiddler를 사용하려면 설정의 고급->네트워크->연결->프록시설정에서 아래의 프록시 자동설정주소에서
file:///C:/사용자문서위치/Documents/Fiddler2/Scripts/BrowserPAC.js 을 입력후 새로고침한후 실행하면 된다. (아래 다시 설명.. ㅡ.,ㅡ;)

참고적으로 IE7 에서 실행이 안되거나 Fiddler2에서 폰트가 깨져나올때
Tools > Fiddler Options 에서 Enable IPv6 항목을 uncheck 해주면 된다.

Fiddler는 브라우저와 서버와의 HTTP 통신 상태를 보여주는 HTTP Debugging proxy이다. Fiddler에 대해서는 다음을 참조한다. (http://www.fiddlertool.com)
Fiddler를 사용할 경우 IE나 Opera 또는 그 외의 HTTP 통신은 모두 잡는다. 그런데 유독 firefox의 HTTP 통신은 잡지 못한다.

다음과 같은 방법으로 firefox에서도 fiddler를 사용할 수 있다.

1. Fiddler를 설치하고 실행한다.

2. "내 문서" 폴더 밑에 보면 "Fiddler2"라는 폴더가 있다. 그 하위 폴더에 Scripts라는 폴더가 있으며 이 디렉토리 경로를 복사한다.

3. Firefox를 열어 "도구 > 설정" 메뉴에서 "고급"을 선택한다.

4. 고급메뉴에서 "네트워크" 탭의 연결의 "설정" 버튼을 선택하여 "프록시 자동 설정 주소"를 선택하고 위에서 디렉토리 경로를 붙여넣고 마지막에 "BrowserPAC.js" 파일을 추가한다.
    예)  C:\Documents and Settings\stan\My Documents\Fiddler2\Scripts\BrowserPAC.js

6. Firefox를 restart하면 firefox의 HTTP 통신이 fiddler에 잡힌다.

• Firebug (in browser)
• HTTPWatch (in browser)
• Fiddler (proxy based)
• Netmon (network level)
• Wireshark (network level)
• Charles (proxy based)

httpwatch.zip

NM33_x86.zip

wireshark-setup-1.0.7.part1.rar

wireshark-setup-1.0.7.part2.rar

wireshark-setup-1.0.7.part3.rar

jQuery의 창시자 John Resig의 자바스크립트 강의 동영상이 있어 포스팅한다.

Javascript2 에 대한 내용도 있어 상당히 유용한 동영상이다.

John의 동영상은 구글비디오에서 볼수 있다.

원본출처 : John Resig's Blog

IE8이 출시된지 2주일이 지난 지금 이전 브라우저에서 정상적으로 동작되던 스크립트들이 IE8에서는 안되는 경우가 있다. 예를 들면 XMLHttpRequest를 통한 전송부분이나 <object>.getElementsByTagName("*")부분일 것이다.

W3C: querySelector

CSS 선택자(id,class선택자들..)를 쉽게 찾을수 있게 해주는 querySelector가 표준이다. IE8의 경우 CSS2.1을 지원하며 CSS3는 아직 지원하지 않는다.. 아직 표준확정이 되지 않은 CSS3를 지원한다는건...

HTML 5 부분!

HTML5 호환은 환상적인 스펙의 향상이다.

이미 대부분의 브라우저에서는 지원하고 있지만 ajax에서 뒤로가기 버튼문제에 대해 해결하기 위해 window.loaction.hash를 지원한다. 또한 hashchanged란 이벤트도 지원한다.
window.location.hash는 페이지 URL에 대해 변경된 내용을 저장하는것이다.

HTML 5: postMessage

postMessage는 서로다른 프레임간 통신하는 방법인데 IE8, Opera9, Firefox3,Webkit등에서 앞으로 지원할 예정이라 한다. IE8같은 경우 postMessage를 쓰면 화면자체의 Section부분만 바로 통신하여 가져올수 있으니... 점점 간단해 지겠군효~~

IE8과 Firefox3만 지원하는 기능으로써 자바스크립트를 통해 커넥션을 감지할수 있는 쉬운방법이다.

아주 재미있는 기능으로 이기능에 대해선 MS에서 작성한 문서를 참조하기 바란다. 데꾸벅도 설명하기 힘들다.. ㅠ.,ㅠ;

XML파일
<OpenSearchDescription>
<ShortName>나루</ShortName>
<Description>나루 블로그 전문 검색</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">
https://t1.daumcdn.net/cfile/tistory/2608163356E660671C"text/html" method="GET" template="http://naaroo.com/search/{searchTerms}"/>
<SearchForm>http://naaroo.com</SearchForm>
<Developer>astraea</Developer>
<Contact>http://withstory.net</Contact>
</OpenSearchDescription>

웹페이지
<ul>
<li><a href="#" onclick='window.external.AddSearchProvider("xml파일");'>설치할 URL</a></li>
</ul>

invalid-file

<div id="protoflow">

        <img src="imgs/DSCN0940_91360.jpg"/>

        <img src="imgs/stimme_von_oben_187192.jpg"/>

        <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>

        <img src="imgs/farbraum_012_147508.jpg"/>

        <img src="imgs/IMG_4906_199357.jpg"/>

        <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>

        <img src="imgs/Fries_201253.jpg"/>

        <img src="imgs/Fries_201253.jpg"/>

</div>

 

<ul id="protoCaptions" class="protoCaptions">

        <li>Caption 1</li>

        <li>Caption 2</li>

        <li>Caption 3</li>

        <li>Caption 4</li>

        <li>Caption 5</li>

 

        <li>Caption 6</li>

        <li>Caption 7</li>

        <li>Caption 8</li>

</ul>





Event.observe(window, 'load', function() { 

  cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});

});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>autumn II - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #111;
		width: 100%;
		height: 100%;
	}
	#screen {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #000;
	}
	#screen img {
		position: absolute;
		cursor: pointer;
		visibility: hidden;
		width: 0px;
		height: 0px;
	}
	#screen .tvover {
		border: solid #876;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#screen .tvout {
		border: solid #fff;
		opacity: 0.7;
	}
	#bankImages {
		display: none;
	}
</style>

<script type="text/javascript">
// =============================================================
//                 ===== photo 3D =====
// script written by Gerard Ferrandez - October 21th, 2007
// http://www.dhteumeuleu.com
// =============================================================

/* ==== library ==== */
var Library = {};
Library.ease = function () {
	this.target = 0;
	this.position = 0;
	this.move = function (target, speed)
	{
		this.position += (target - this.position) * speed;
	}
}

var tv = {
	/* ==== variables ==== */
	O : [],
	screen : {},
	grid : {
		size       : 4,  // 4x4 grid
		borderSize : 6,  // borders size
		zoomed     : false
	},
	angle : {
		x : new Library.ease(),
		y : new Library.ease()
	},
	camera : {
		x    : new Library.ease(),
		y    : new Library.ease(),
		zoom : new Library.ease(),
		focalLength : 750 // camera Focal Length
	},

	/* ==== init script ==== */
	init : function ()
	{
		this.screen.obj = document.getElementById('screen');
		var img = document.getElementById('bankImages').getElementsByTagName('img');
		this.screen.obj.onselectstart = function () { return false; }
		this.screen.obj.ondrag        = function () { return false; }
		/* ==== create images grid ==== */
		var ni = 0;
		var n = (tv.grid.size / 2) - .5;
		for (var y = -n; y <= n; y++)
		{
			for (var x = -n; x <= n; x++)
			{
				/* ==== create HTML image element ==== */
				var o = document.createElement('img');
				var i = img[(ni++) % img.length];
				o.className = 'tvout';
				o.src = i.src;
				tv.screen.obj.appendChild(o);
				/* ==== 3D coordinates ==== */
				o.point3D = {
					x  : x,
					y  : y,
					z  : new Library.ease()
				};
				/* ==== push object ==== */
				o.point2D = {};
				o.ratioImage = 1;
				tv.O.push(o);
				/* ==== on mouse over event ==== */
				o.onmouseover = function ()
				{
					if (!tv.grid.zoomed)
					{
						if (tv.o)
						{
							/* ==== mouse out ==== */
							tv.o.point3D.z.target = 0;
							tv.o.className = 'tvout';
						}
						/* ==== mouse over ==== */
						this.className = 'tvover';
						this.point3D.z.target = -.5;
						tv.o = this;
					}
				}
				/* ==== on click event ==== */
				o.onclick = function ()
				{
					if (!tv.grid.zoomed)
					{
						/* ==== zoom in ==== */
						tv.camera.x.target = this.point3D.x;
						tv.camera.y.target = this.point3D.y;
						tv.camera.zoom.target = tv.screen.w * 1.25;
						tv.grid.zoomed = this;
					} else {
						if (this == tv.grid.zoomed){
							/* ==== zoom out ==== */
							tv.camera.x.target = 0;
							tv.camera.y.target = 0;
							tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
							tv.grid.zoomed = false;
						}
					}
				}
				/* ==== 3D transform function ==== */
				o.calc = function ()
				{
					/* ==== ease mouseover ==== */
					this.point3D.z.move(this.point3D.z.target, .5);
					/* ==== assign 3D coords ==== */
					var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
					var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
					var z = this.point3D.z.position * tv.camera.zoom.position;
					/* ==== perform rotations ==== */
					var xy = tv.angle.cx * y  - tv.angle.sx * z;
					var xz = tv.angle.sx * y  + tv.angle.cx * z;
					var yz = tv.angle.cy * xz - tv.angle.sy * x;
					var yx = tv.angle.sy * xz + tv.angle.cy * x;
					/* ==== 2D transformation ==== */
					this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
					this.point2D.x = yx * this.point2D.scale;
					this.point2D.y = xy * this.point2D.scale;
					this.point2D.w = Math.round(
					                   Math.max(
					                     0,
					                     this.point2D.scale * tv.camera.zoom.position * .8
					                   )
					                 );
					/* ==== image size ratio ==== */
					if (this.ratioImage > 1)
						this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
					else
					{
						this.point2D.h = this.point2D.w;
						this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
					}
				}
				/* ==== rendering ==== */
				o.draw = function ()
				{
					if (this.complete)
					{
						/* ==== paranoid image load ==== */
						if (!this.loaded)
						{
							if (!this.img)
							{
								/* ==== create internal image ==== */
								this.img = new Image();
								this.img.src = this.src;
							}
							if (this.img.complete)
							{
								/* ==== get width / height ratio ==== */
								this.style.visibility = 'visible';
								this.ratioImage = this.img.width / this.img.height;
								this.loaded = true;
								this.img = false;
							}
						}
						/* ==== HTML rendering ==== */
						this.style.left = Math.round(
						                    this.point2D.x * this.point2D.scale +
						                    tv.screen.w - this.point2D.w * .5
						                  ) + 'px';
						this.style.top  = Math.round(
						                    this.point2D.y * this.point2D.scale +
						                    tv.screen.h - this.point2D.h * .5
						                  ) + 'px';
						this.style.width  = this.point2D.w + 'px';
						this.style.height = this.point2D.h + 'px';
						this.style.borderWidth = Math.round(
						                           Math.max(
						                             this.point2D.w,
						                             this.point2D.h
						                           ) * tv.grid.borderSize * .01
						                         ) + 'px';
						this.style.zIndex = Math.floor(this.point2D.scale * 100);
					}
				}
			}
		}
		/* ==== start script ==== */
		tv.resize();
		mouse.y = tv.screen.y + tv.screen.h;
		mouse.x = tv.screen.x + tv.screen.w;
		tv.run();
	},

	/* ==== resize window ==== */
	resize : function ()
	{
		var o = tv.screen.obj;
		tv.screen.w = o.offsetWidth / 2;
		tv.screen.h = o.offsetHeight / 2;
		tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
		for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
		{
			tv.screen.x += o.offsetLeft;
			tv.screen.y += o.offsetTop;
		}
	},

	/* ==== main loop ==== */
	run : function ()
	{
		/* ==== motion ease ==== */
		tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
		tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
		tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
		tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
		tv.camera.zoom.move(tv.camera.zoom.target, .05);
		/* ==== angles sin and cos ==== */
		tv.angle.cx = Math.cos(tv.angle.x.position);
		tv.angle.sx = Math.sin(tv.angle.x.position);
		tv.angle.cy = Math.cos(tv.angle.y.position);
		tv.angle.sy = Math.sin(tv.angle.y.position);
		/* ==== loop through all images ==== */
		for (var i = 0, o; o = tv.O[i]; i++)
		{
			o.calc();
			o.draw();
		}
		/* ==== loop ==== */
		setTimeout(tv.run, 32);
	}
}

/* ==== global mouse position ==== */
var mouse = {
	x : 0,
	y : 0
}
document.onmousemove = function(e)
{
	if (window.event) e = window.event;
	mouse.x = e.clientX;
	mouse.y = e.clientY;
	return false;
}

</script>
</head>

<body>

<div id="screen"></div>

<div id="bankImages">
	<img alt="" src="wi23.jpg">
	<img alt="" src="wt06.jpg">
	<img alt="" src="wt47.jpg">
	<img alt="" src="wt16.jpg">

	<img alt="" src="wt43.jpg">
	<img alt="" src="wt19.jpg">
	<img alt="" src="wt27.jpg">
	<img alt="" src="wt46.jpg">

	<img alt="" src="wt14.jpg">
	<img alt="" src="wt21.jpg">
	<img alt="" src="wt35.jpg">
	<img alt="" src="wt48.jpg">

	<img alt="" src="wt55.jpg">
	<img alt="" src="wt40.jpg">
	<img alt="" src="wt53.jpg">
	<img alt="" src="wt25.jpg">

</div>

<script type="text/javascript">
	/* ==== start script ==== */
	onresize = tv.resize;
	tv.init();
</script>

</body>
</html>

출처 : dhteumeuleu소스다운로드 : 
invalid-file

jsonsql.query("select * from json.channel.items order by title desc", json);
jsonsql.query("select title,url from json.channel.items where (category=='javascript' || category=='vista') order by title,category asc limit 3", json);

var jsonsql = {
       
    query: function(sql,json){

       var returnfields = sql.match(/^(select)\s+([a-z0-9_\,\.\s\*]+)\s+from\s+([a-z0-9_\.]+)(?: where\s+\((.+)\))?\s*(?:order\sby\s+([a-z0-9_\,]+))?\s*(asc|desc|ascnum|descnum)?\s*(?:limit\s+([0-9_\,]+))?/i);
       
        var ops = {
            fields: returnfields[2].replace(' ','').split(','),
            from: returnfields[3].replace(' ',''),
            where: (returnfields[4] == undefined)? "true":returnfields[4],
            orderby: (returnfields[5] == undefined)? []:returnfields[5].replace(' ','').split(','),
            order: (returnfields[6] == undefined)? "asc":returnfields[6],
            limit: (returnfields[7] == undefined)? []:returnfields[7].replace(' ','').split(',')
        };

        return this.parse(json, ops);       
    },
   
    parse: function(json,ops){
        var o = { fields:["*"], from:"json", where:"", orderby:[], order: "asc", limit:[] };
        for(i in ops) o[i] = ops[i];

        var result = [];       
        result = this.returnFilter(json,o);
        result = this.returnOrderBy(result,o.orderby,o.order);
        result = this.returnLimit(result,o.limit);
               
        return result;
    },
   
    returnFilter: function(json,jsonsql_o){
       
        var jsonsql_scope = eval(jsonsql_o.from);
        var jsonsql_result = [];
        var jsonsql_rc = 0;

        if(jsonsql_o.where == "")
            jsonsql_o.where = "true";

        for(var jsonsql_i in jsonsql_scope){
            with(jsonsql_scope[jsonsql_i]){
                if(eval(jsonsql_o.where)){
                    jsonsql_result[jsonsql_rc++] = this.returnFields(jsonsql_scope[jsonsql_i],jsonsql_o.fields);
                }
            }
        }
       
        return jsonsql_result;
    },
   
    returnFields: function(scope,fields){
        if(fields.length == 0)
            fields = ["*"];
           
        if(fields[0] == "*")
            return scope;
           
        var returnobj = {};
        for(var i in fields)
            returnobj[fields[i]] = scope[fields[i]];
       
        return returnobj;
    },
   
    returnOrderBy: function(result,orderby,order){
        if(orderby.length == 0)
            return result;
       
        result.sort(function(a,b){   
            switch(order.toLowerCase()){
                case "desc": return (eval('a.'+ orderby[0] +' < b.'+ orderby[0]))? 1:-1;
                case "asc":  return (eval('a.'+ orderby[0] +' > b.'+ orderby[0]))? 1:-1;
                case "descnum": return (eval('a.'+ orderby[0] +' - b.'+ orderby[0]));
                case "ascnum":  return (eval('b.'+ orderby[0] +' - a.'+ orderby[0]));
            }
        });

        return result;   
    },
   
    returnLimit: function(result,limit){
        switch(limit.length){
            case 0: return result;
            case 1: return result.splice(0,limit[0]);
            case 2: return result.splice(limit[0]-1,limit[1]);
        }
    }
   
};