근래에 있었던 작은 버전들의 갱신 후에 드디어 커다란 걸음을 내딛는 jQuery 1.2 버전이 공개되었다. 이번 버전은 여러 새로운 기능들이 추가되었고, 이번에 소개된 새로운 jQuery Animation API를 이용해서 특정 요소에 색깔 변화 효과를 줄 수 있는 Color Animation Plugin을 포함해서 호환성 문제 해결을 위한 새로운 plugin들도 소개되었다. 반면에, 그 동안 잘 사용되지 않고 혼란을 가중시킬 수 있었던 몇 가지 기능들도 함께 제거되었는데, 제거된 기능들은 보다 나은 대체 기능들을 사용하면 되겠다. 물론 굳이 없어진 기능들을 계속 사용하려면, 이번에 새로 소개된 하위 버전과 호환성을 유지시켜 주는 Compatibilility Plugin을 사용하면 된다.
또, 한 가지.
User Interface의 특수 효과와 관련해서 jQuery의 공식 plugin으로 자리잡을 jQuery UI가 이번 16일 일요일에 드디어 공개될 예정이다. jQuery UI의 대략적인 구성은 이미 공개되었듯이 Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, 그리고 modals이 포함되게 된다. 이렇게 되면 다른 라이브러리들의 의존성도 줄이고 선택면에서 더 이상 부럽지 않겠군. 8)
jQuery에서 selector 선언이나 jQuery 함수(method)를 사용하면 되돌려받는 것은 항상 jQuery object이다.
대부분은 이 오브젝트에 직접 여러 method들을 묶어서(chaining) 사용하거나 기본적으로 제공되는 모든 object들의 자동적인 접근의 용이함도 장점이겠지만 가끔은 DOM element를 직접 만져야 할 때가 있다.
이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 할 수 있다:
var tag = $('#some-element').get(0).tagName;
여기에는 .get()을 쓰느 대신 더 간단한 방법이 있는데, $('#some-element').get(0) 대신에 바로 $('#some-element')[0]처럼 사용할 수도 있다.
바로 DOM elements의 array처럼 사용될 수 있는 것이다.
공식 jQuery 문서에는 설명이 안 되어 있는 것 같아서 적어놓는다.
날로 웹 애플리케이션의 UI가 복잡해지고 JavaScript를 이용해서 사용자와 웹 애플리케이션 간의 상호작용에 따른 특정 객체에 대한 접근과 조작이 점점 더 유행을 타게 되면서, 웹 브라우저의 창 속에 존재하는 어떤 한 객체의 정확한 크기와 위치 좌푯값을 얻는 일은 무척이나 중요해졌다. 하지만 객체의 위치를 재는 방법과 그 속성은 헷갈릴 만큼이나 다양하고, 불행히도 웹 브라우저마다 같은 속성도 서로 다른 크기를 돌려준다. 그래서 여기에 DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성값들을 정리하고, 그림으로 나타내 보았다.
DOM에 존재하는 한 객체의 크기와 자신의 위치를 나타내는 여러 속성 값들을 정리(이)란 제목의 글 마저 읽기 →
jQuery 1.1.3 버전에 와서는 거의 80개 이상의 버그가 잡혔고 DOM 위를 돌아다니는 속도가 무려 800%나 빨라졌다고 한다.
그리고, 이벤트와 효과 관련 시스템이 다시 쓰여지면서, 키보드 이벤트를 더 효율적으로 처리할 수 있게 되었고 UI 효과의 처리 속도와 호환성이 향상되었다.
그 동안 다른 자바스크립트 라이브러리들과 비교해서 selector 처리 속도에서 약점을 보여왔었는데, 이젠 말끔히 해소된 느낌이다.
또한 눈에 띄는 것은, 새로운 유형의 selector들이 소개되었는데, 그 중 selector로 유니코드를 사용할 수 있게 되면서 $("div.머릿말")처럼 한국어로 된 속성 값을 바로 사용할 수 있게 되었고, 새로 추가된 ‘test suite’은 애니메이션 효과를 실험하는데 있어 버그 탐색에 도움을 줄 듯 하다. 또, event.which 속성으로 눌린 특정 키나 마우스 버튼에 관한 상세한 정보를 얻을 수도 있단다.
이제 더 날렵해지고 활동 범위도 넓어진 jQuery의 다음 버전도 기대되는데, 7월 말에 1.1.4 버전의 발표를 끝으로 더 많은 새로운 기능들을 흡수한 jQuery 1.2로 건너뛸 예정이다.
한편, 그 동안 비밀 프로젝트로 숨겨왔던 jQuery UI 소식을 공개하였는데, 여기에는 Drag & Drop 라이브러리가 포함되어 있고 Draggables, Droppables, Sortables, Resizables, 그리고 Slider 등 여러 UI 효과와 관련된 코드가 포함될 예정이란다. 아마도 이 놈은 Prototype과 Script.aculo.us가 쌍을 이루듯 jQuery의 UI 효과를 위한 대표 plugin으로 자리잡을 듯. 8)
JavaScript에서 사용되는 변수들이 가리키는 객체의 유형은 항상 유동적으로 변할 수 있기 때문에 변수에 담겨있는 객체(Objects)의 유형을 검사(type checking)하는 일은 자주 있으며 그 방법에는 두 가지가 있다.
첫 번째 방법은 typeof 연산자를 사용하는 방법. 이것은 변수에 담겨있는 객체의 유형을 String 값으로 돌려준다.
if ( typeof num == "string" )
num = parseInt( num );
if ( typeof arr == "string" )
arr = arr.split(",");
하지만, 이 방법은 Object와 Arrary 혹은 맞춤 Object를 구분하지 못하고 그냥 “object”로 인식하기 때문에 이것을 구별하려면 모든 JavaScript Object들이 가지고 있는 constructor 속성을 확인하면 된다.
var obj = { an: "object" };
var arr = [ an, arrary ];
var myObj = new MyObject();
if ( obj.constructor == Object ) alert('This is an object!');
if ( arr.constructor == Array ) alert('This is an array!');
if ( myObj.constructor == MyObject ) alert('My holy object!');