JSDT란?
JSDT (JavaScript Debug Toolkit)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다.  JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.

JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
 

http://www.ibm.com/developerworks/kr/library/os-eclipse-jsdt/
http://wiki.eclipse.org/index.php/ATF/JSDT
링크의 JSDT (JavaScript Development Toolkit)와는 다른 디버깅을 위한 툴입니다.


JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.

JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다.  이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
 

이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.


JSDT를 사용
JSDT 프로젝트 페이지에서 Swing 스탠드 애플리케이션 및 Eclipse 플러그인을 제공하고 있습니다.
우선 간단하게 사용할 수 있는 Swing 버전을 다운로드하여 사용해 봅니다.  윈도우의 경우 setup.exe 파일을 다운로드 받아 설치하면 다음과 같은 창이 나타납니다.

 

디버깅할 HTML 파일과 웹 브라우저의 실행 파일을 선택하고 시작 버튼을 클릭하고 디버깅을 시작할 수 있습니다.

사용은 일반적인 디버거와 비슷합니다.  디버깅을 시작하면 JSDT의 소스 코드 편집기에 소스코드가 표시되기 때문에, 정지하고자 하는 위치에 중단점(Breakpoint)을 찍고 단계별 스텝 오버, 스텝 아웃을 할 수 있습니다.  변수의 값은 variables 탭에서 확인할 수 있으며, expression 탭에서 임의의 표현식을 등록하고 평가 결과를 볼 수 있습니다.
  
Eclipse 플러그인 버전도 기본적인 사용법은 동일합니다.  다운로드 페이지에서 jsdt – 2.1.0.zip 을 다운로드 하고 적당한 위치에 압축을 푼 후, 업데이트 관리자에서 플러그인을 설치할 수 있습니다.  Eclipse 플러그인 버전에서는 디버거로서의 기능뿐만 아니라, 구문 검사 기능 등을 갖춘 유용한 JavaScript 편집기도 제공되며, JavaScript 편집기에서 임의의 행을 클릭하여 중단점을 설정할 수 있습니다.

Eclipse에서 JavaScript Debugging 모습

JavaScript Debug Configuration 설정 모습



Eclipse 의 웹 작업 영역에서 HTML 파일을 선택하고 마우스 오른쪽 클릭 -> “debug” -> “JavaScript Debug Tool”으로 디버깅을 시작할 수 있습니다.


정리
JSDT는 HTTP 프록시가 디버깅 코드를 삽입하는 방법을 이용하여 브라우저 측에 특수 기능 등을 필요로 하지 않고 사용자 웹 브라우저에서 JavaScript 디버깅을 가능하게 하고 있습니다.  또한 독립 실행형 버전과 Eclipse 플러그인 버전을 제공하고 있으며, 개발 스타일에 맞춰 선택할 수 있습니다.

그러나 아직까지는 몇몇 문제점들이 남아있습니다.  실제로 개발에 적용해보는 것은 어려울 지도 모르겠습니다.  하지만 그런 문제점들을 떠나서 JSDT의 구조를 보면 알겠지만 매우 획기적인 디버거라 할 수 있다는 것입니다.  


출처 : http://journal.mycom.co.jp/column/ide/063/index.html 

신고
Posted by Rhio.kim
Aptana 개발자인 Ryan Johnson 씨는 다양한 JavaScript 환경에서 지원하는 ORM(Object-relation Mapping) 오픈소스 인 ActiveRecord.js 베타 버젼을 발표하였습니다.

    

  1. Google Gears(클라이언트에 저장방식)
  2. 메모리(SQL server가 아닌 클라이언트 시스템의 메모리)
  3. Adobe AIR(클라이언트에 저장방식)
  4. SQLite and MySQL(Aptana Jaxer 혹은 오픈 소스 Ajax 서버를 통해)
  5. 추가적인 환경(HTML5와 같은)은 프로젝트 사이트에 커뮤니티를 통해 개발되어질 것으로 기대됨

ActiveRecord.js는 Ruby on Rails 커뮤니티에 의해서 대중화된 ActiveRecord Pattern를 사용해 정렬, 찾기, 선택 그리고 오브젝트와 그것들의 데이터를 검색을 위해 JavaScript 개발자가 일관된 API를 사용할 수 있도록 SQL 명령문의 뼈대를 추상화 하였습니다.

다양한 지원 정보는 생략합니다.

ORM 지원을 위한 프레임웍, 라이브러리가 나오는 것이...
언젠가 스타트랙에 나온 영화의 한 장면처럼 JavaScript의 우주 표준 Language가 되는날이 얼마 남지 않는 것 같다. (우스게 소리임)


ORM에 대한 내용은 JAVAJIGI.net 에 잘 정리 되어있네요.
http://wiki.javajigi.net/pages/viewpage.action?pageId=3081 (Object-Relational Mapping Strategies)
http://wiki.javajigi.net/pages/viewpage.action?pageId=297 (Hibernate 프레임워크를 이용한 효율적인 개발 전략)


더 읽어보세요.
ORM Wikipedia : http://en.wikipedia.org/wiki/Object-relational_mapping
원글 : http://www.aptana.com/blog/rjohnson/activerecord_js_released_as_beta
프로젝트 사이트 : http://activerecordjs.org/
GitHub Repository : http://github.com/aptana/activejs/tree/master
신고
Posted by Rhio.kim
심플한 라이브러리를 소개할까 합니다.  최근에 라이브러리 소개를 하지 않았는데 오랜만에 ^^..
소개하는데도 당연히 이유가 있겠죠.



Blackbird 라는 라이브러리 입니다.

일단 사이트에 접속을 하면 큰 글자로 이렇게 적혀있습니다.


Blackbird 에게는 "만나서 반가워" 이라고 말하고 alert() 에게는 "이만 안녕" 이라 말하라고 합니다. 
그래서 무엇인고 봤더니 log와 profiler로 활용하기 좋은 rich application을 JavaScript로 구현을 해 놓았군요.
이런 라이브러리야 이미 YUI에도 유사한 모양으로 있고 firebug에서도 강력하게 지원을 해주고 있는데...

깜직한 아이콘은 둘째 치고 개발자 편의를 위해 단축키까지 처리해 놓은 것을 보면 참. 많은 것을 느낍니다.

이미 나온 Blackbird 라이브러리는 누구나가 만들 수 있지만... 처음 나온 Blackbird 라이브러리는 처음 만든 개발자의 스킬과 마인드에서 밖에 나올 수 없는게 아닐까 생각해봅니다.

alert() 에게 "이만 안녕" 이라 말 할만 한가요?

Library : http://www.gscottolson.com/blackbirdjs/
Google : http://blackbirdjs.googlecode.com/
신고
Posted by Rhio.kim
사용자 삽입 이미지





  다양한 프레임웍(DOMAssistant 2.6, jQuery 1.2.3, Prototype 1.6.0.2, Mootools 1.2b2, ExtJS Core 2.0.1, YUI 2.4.1)들에 대한 셀렉터(Selector) 속도 및 유효성 테스트입니다.

  정확한 테스트와 상호 테스트간의 충돌을 방지하기 위해서 각각의 프레임웍 테스트를 각각의 아이프레임내에서 수행되도록 처리했네요. 최대한 정확한 테스트가 되기위해서 여러모로 신경을 썼다는 군요.

사용자 삽입 이미지

제 PC 에서 수행한 결과입니다.
DOMAssistant 2.6         1087ms
jQuery 1.2.3                  1454ms
Prototype 1.6.0.2      2324ms
Mootools 1.2b2             1578ms
ExtJS Core 2.0.1      617ms
YUI 2.4.1                      1789ms

테스트 결과가 생각과 많이 다르네요..
Prototype.js가 속도면이나 유효성면에서 제일 떨어지네요.  실망스럽네요. 하지만 다른 부분은 탄탄하게 구성되어있으니 element 찾을때 Selector를 이용해 접근하는 $$ 함수의 사용을 자재해야겠군요.

  반면 ExtJS는 그리드 기반의 Framework인데 Selector 부분을 신경을 많이 썼나보군요.
하기야 대부분 css 컨트롤을 통해서 그리드 구성을 할터이니 이부분도 상당히 신경을 썼겠죠..
내부 로직은 잘 모르겠지만 ExtJS가 Selector에서는 다른 Framewokr에 비해서 탁월한 성능을 보이는게 사실이네요.

테스트 사이트 : http://www.domassistant.com/slickspeed/
신고
Posted by Rhio.kim
사용자 삽입 이미지

Mootools javascript 라이브러리를 이용하여 artViper designstudio team 에서 유동적인 효과는 만들었지만 Mootools 기반의 확장과는 다른 것들중의 일부 입니다.

artViper 사이트에 들어가면 다양한 Ajax 기반의 라이브러리들이 많이 있습니다.

mooColorFinder, mooAutoComplete, mooImageCrop, mooSocialize, mooInlineEditor, mooSecrueForm, mooTell-A-Friend, mooSlide 와 같은 다양한 라이브러리를 제공해주고 있습니다.

북마크 위젯은 상당히 호감가는 라이브러리이네요.
그외에 PHP로 구현한 다양한 라이브러리를 제공하고 있네요.


신고
Posted by Rhio.kim
PBwiki 팀의 Brian Klug 씨는 자바스크립트(javascript) 라이브러리 제공에 대해 좀더 자세히 배우기 위해서

자바스크립트(javascript) 라이브러리 테스트를 Dojo, jQuery, Prototype, YUI, Prototculous 를 로딩해서 만들었네요. 

azki 님이 이런쪽에 관심이 많을것 같은데요?? 그런가요?? ^-^

이 테스트는 압축(packed)과 최소화(minified), gzip 과 gzip 하지 않았을때, 캐시 기타 등등 테스트에

속해있습니다.   흥미로운 결과중에 하나가.. 압축(packed)를 사용하지 말라는 것입니다.. ^^;;

테스트 써머리 페이지 http://jst.pbwiki.com/summary.php

사용자 삽입 이미지

Result Calculus (cached, gzipped, minified)
사용자 삽입 이미지

신고
Posted by Rhio.kim
사용자 삽입 이미지


사용자 삽입 이미지

별거 아닙니다.
FF에는 파이어 버그가 있어서window.console.log('debug'); 로 디버깅 메세지를 쉽게 볼 수 있는데요.

IE, Opera, Safari(최근 버젼에서는 지원하죠?) 에서는 원활히 지원되지 않아서..

급작스럽게 만든 티가 엄청 납니다.. ^-^;
나만 쓸껀데 뭐 ㅎㅎㅎ

그럼 머한데 공개했냐..?
자랑하려구요 ㅠ.ㅠ

갑자기 만들걸 자랑한다고? 
그럼 어쩌라구요?



간단하게 String native에 추가를 해버렸습니다.


사용법은 매우 아니 너무 간단합니다.


신고
Posted by Rhio.kim
John-David Dalton 씨는 최근(?) 업데이트된 120k가 넘는 Prototype.js 를 압축한 라이브러리를
구글 그룹스에 올렸네요.

1.4 버젼부터 대부분의 릴리즈 버젼을 압축하였네요.
용량은 상당히 많이 줄었네요..

Prototype’s lowest weighs in at 20.4kb.
Scriptaculous’ lowest weighs in at: 19.7kb.
Protoculous’ lowest weighs in at: 38.4kb.

또한 Script.aculos.us 와 Protoculous

http://groups.google.com/group/prototype-core
사실 오픈된 Compressor 를 적용시키면 에러가 많이 나는데 좋은 작업 해주었네요..
신고
Posted by Rhio.kim
사용자 삽입 이미지











Prototype 기반의 Ajax 버디버디 IM 3.2 입니다.

깔끔한 인터페이스 Javascript로 개발되어진 버디버디입니다.  실시간 메시징 처리가 됩니다.

개인 블로그며 홈페이지 원하는 곳에 플러그인 처럼 연동해서 사용할 수 있습니다.

PHP와 JS를 통한 OO 개발이 되었구요. 기존에는 prototype 기반이 아니여서 이번 버젼에는

기존 버전에 비해 많은 부분이 수정되었답니다.  다중 언어도 지원할 뿐더러. PHP 기반 세션 처리로

아이디와 비번을 메세지 날릴때마다 체크하지 않아도 됩니다.

테마(스킨) 기능도 지원됩니다. 블랙 테마가 추가 되었나 보내요..

국내 유저들은 언제쯤 이런 라이브러리를 개발해서 paypal 붙여볼까요??

붙인다고 후훤해주는 분들도 없으시곘지만요... ^^ 외국인에게라도 지원 받을 수 있지 않을까요???

그리고 참고로 한가지..

Copyright (c) 2006-2008, Joshua Gross (unwieldy studios)  All rights reserved.

사용자 삽입 이미지

신고
Posted by Rhio.kim
사용자 삽입 이미지

별점 라이브러리입니다.
Script.aculo.us 와 Prototype 1.6.0을 이용한 라이브러리 입니다.

유사하게 만들어 놓은 것이 있기는 한데 이게 훨씬 더 깔끔하네요...
투명 이미지를 통한 백그라운드 색상을 변화시켜서 처리를 했습니다.

상당히 효율적인 생각으로 접근했네요.  대부분의 국내 사이트의 롤오버 효과를 보면 이미지를 새로 로딩하는
경우가 많은데요.

이는 효율적인 웹 사이트 개발에 아주 저해되는 요소입니다.
개발자가 알아야할 부분이기도 하지만 디자이너도 알아야 할 부분입니다.

롤오버 자체는 더이상 이미지를 두개로 만들어 _on.gif  와 _off.gif 방식으로 롤오버는 더 이상
만들지 마시길 바랍니다.

이 라이브러리도 한가지 단점이라면 투명이미지를 활용해서 백그라운드 색상에 다른 경우에는
이미지를 새롭게 만들어 주어야 한다는 것이죠!

별의 색깔은 자유자재로 변곃라 수 있지만 백그라운드의 색상에 맞게 변경할 수는 없답니다.
그것까지 가능하려면 플래시를 조금 이용하거나 base64 이미지를 이용해서 동적인 이미지를 그리면 되겠죠.
하지만 그렇게 처리한다는 것 자체는 너무 무거워지는 라이브러리가 된다는 것!!

사용법 간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요. 이렇게 사용하면 됩니다. 다양한 옵션들은 이 처럼 설정하시면 됩니다. 사용자 css 도 가능하겠죠.. ^^
신고
Posted by Rhio.kim
사용자 삽입 이미지





























Jash (javascript shell)
크로스 브라우징이 가능한 날아다니는 자바스크립트 디버깅 툴이네요.. -_-b 따봉~

DHTML 기반으로 어느 브라우저에서든지 Command line을 제공하여 Javascript에 접근하여 디버깅할 수
있도록 지원합니다.

기능들은 빠른 스크립트 디버깅, 다중 DOM, 현재 페이지의 오브젝트 접근, 값, 스택등을 찍어 볼 수 있습니다.
firebug놔 inspector 와는 조금은 효용성이 떨어지지만 아직 지원되지 않는 IE, Opera에서는
사용할만 하겠네요.

그렇지만 아무래도 번거럽겠죠??
오페라 9.10 + 에서는 원활한 지원이 되지 않네요..

출처 : http://www.billyreisinger.com/jash/

Source:


신고
Posted by Rhio.kim
Bindows Ajax Framework
웹에서 윈도우와 같은 기능을 할 수 있는 다양한 Ajax 프레임웍이 발표되었네요..

베타 수준이지만 완성도는 꾀 높습니다. (demo)
그리고 기능들도 참 많이 지원합니다.  윈도우 느낌을 줄 수 있는 Javascript Application 은 많이 보았지만 지금까지중에서는 가장 좋은것 같네요..  뭐 사용성은 얼마나 될지 모르겠지만요..
사용자 삽입 이미지

Ajax Gauges
사용자 삽입 이미지
사용사 설정을 자유롭게 할 수 있다는 점이 좋네요..
신고
Posted by Rhio.kim
사용자 삽입 이미지
RSH 0.6 파이널 버젼이 릴리즈 되었네요.
더이상 무거워 지면 안되는데 ;;

더이상 무거워 지진 않겠죠.. ^-^*

IE, Safari, Opera, FF 모두 지원하며 Ajax 개발 시 유용합니다.

개발 사이트 : http://code.google.com/p/reallysimplehistory/
다운로드 : http://reallysimplehistory.googlecode.com/files/RSH0.6FINAL.zip
신고
Posted by Rhio.kim
사용자 삽입 이미지
Script.aculo.us 개발자인 Thomas Fuchs 씨는

다시 컨설팅 업무로 돌아가면서 새로운 자신의 사이트를 만들었습니다.

만들어진 사이트에는 Script.aculo.us 2.0의 일부 기능(PhotoZoom)을 사용하여 Script.aculo.us의 달라질 능력을 내비췄습니다.







신고
Posted by Rhio.kim
사용자 삽입 이미지
Mootools 에서 Calendar 컴포넌트가 나왔네요.

몇일전에도 심플리티 캘린더라이브러리를 소개했었는데요.

이번 라이브러리는 깜찍하네요.  활용도가 높을꺼 같아요.

CSS-styling hooks 과 적절한 element 사용으로 사용자 정의 UI(?) 가능하게 구현하였네요.




API
신고
Posted by Rhio.kim
사용자 삽입 이미지
Javascript Ajax Date 라이브러리 입니다.

다양한 Method를 지원하네요. 왠지 Prototype 의 엘리먼트 부분하고 유사하네요.

today().next() 이런식으로 접근하는게 왠지 ^^

특이한게 Date.parse() 메서드인데요.

Date.parse('today'); 를 통해서 오늘 날짜를 구할 수 있다는거..

이런 방식으로 정규화된 string 파싱을 통해서 Date 포멧을 넘겨준다는 것

너무 Date라는 라이브러리에 입각해서 만든것 같다는 생각이

참 멋진 생각인거 같기도 하구요 반면에 이런걸 얼마나 사용할까? 라는 생각도 들었습니다.

사이트 : http://www.datejs.com/?
다운로드 : http://code.google.com/p/datejs/downloads/list


API





신고
Posted by Rhio.kim
사용자 삽입 이미지
  프로토타입 기반의 아주 가볍고 빠르고 사용하기 간편한 캘린더 입니다.

여러개의 캘린더를 충돌없이 사용할 수 있습니다.

유효한 HTML/XHTML 생성 코드를 사용하고 있어서 크로스 브라우징에도 문제가 없네요..

이미지에서도 볼 수 있듯이 아주 심플리트 그자체입니다.

저도 이런걸 추구합니다. 요즘은 더무 복잡하고 광범위한 옵션을 제공하는 프로토타입 기반의 라이브러리들이 많이 나옵니다.  왜 국내에는 없을까요??
회사일에 바쁘셔서 그런거 할 시간이 없다?? ^-^*

외국에서는 Prototype 프레임웍의 인지도가 상당히 높은데요.
최근에 나오는 대부분의 라이브러리들은 Prototype, Script,aculo.us 를 이용하고 있습니다.

몇가지 추가적인 기능으로는 스킨기능, 다국어 지원, 이벤트 계획기능도 포함합니다.
참 캘린더가 갖을 수 있는 컴팩트한 기능은 모두 지원하는 군요...

사용법은 매우 간단합니다.   라이브러리 파일을 로드하고 아래와 같이.

<div id="samplecal" class="scal"></div>
<div id="scalupdate">&nbsp;</div>

var samplecal = new scal('samplecal', 'scalupdate');


원본출처 : http://scal.fieldguidetoprogrammers.com/
다운로드 : http://scal.fieldguidetoprogrammers.com/files/scal_0.2.zip
신고
Posted by Rhio.kim
원본 : http://greghoustondesign.com
데모 : http://greghoustondesign.com/demos/mocha/
다운로드 : Download Mocha UI v0.5
소스 : View mocha.js

Mocha 는 MooTools의 유저 인터페이스 클래스이구요 캔버스 태그와 그래픽적 요소를 가지고 만들어 졌습니다.
어머나 너무 씸플해요!!

사용자 삽입 이미지


짬을 내서 UI 적으로 비주얼한 부분을 만들어 봐야 할까봐요...
백날 보이지 않는 소스 개발해봐야.. 알아주는 사람도 없구 ^^

그것 보다 비쥬얼한 부분이 웹에서도 비쥬얼한 부분이 예전에 비해 Web2.0 패러다임이 나오면서 더욱 강조되고 있는것 같습니다. 또한 크로스 브라우징이 가능한...!!

위의 데모에서 보면 알 수 있듯이 정말 심플하고 원래 Drag & Drop 방식의 UI는 CPU점유율이 높아
저 사양 PC에서는 버벅거리는 현상을 발생하는데요.

Mocha UI의 CPU 점유율 테스트 결과 입니다.

사용자 삽입 이미지
이는 기본적인 이동 시에 CPU 점유율(녹색)입니다. 최대 약 47%까지

사용자 삽입 이미지
리사이즈 시에 CPU 점유율(녹색)입니다.  최대 약 50%까지

사용자 삽입 이미지
최대화 시에 CPU 점유율(녹색)입니다.  최대 약 5.38%까지

별 의미 없는 테스트 일 수도 있겠네요. 컴퓨터 사양이 좋아서 말이죠.. ^^
신고
Posted by Rhio.kim
원본 출처 : http://ayueer.spaces.live.com/Blog/cns!9E99E1260983291B!1136.entry

참 즐겁습니다.
암호화가 있으니 복호화도 있는 것이구요..  경찰이 있으니 도둑이 있는 거고 닭이 있으니 계란도 있습니다.
누가 먼저냐는 그런 질문은 삼가해주세요..!!

하지만 이번에는 누가 먼저냐 나중이냐는 정해져 있어요..

Javascript Compressor 한번쯤은 사용해보신분들 많으실 껍니다.
Google의 javascript 소스나 Mootools 의 Compressor 돌려버린 모습이나...

엔터치면서 소스 분석해보시는 분들 몇몇 계셨을꺼라 생각을 해봅니다.
본인도 구굴 소스 분석한답시고 여러 차례 노가다 및 삽질을 해봤습니다..

하지만 누군가!! 그 누군가가

UI 개발 Ajax 개발 Web2.0 개발을 해오면서 javascript 소스는 오픈 되어버립니다. 그래서
소스의 암호화, 혹은 난독기를 통해서 압축하고 최소화 시키는 작업을 해왔습니다.

하지만 지금 소개할 Javascript Beautify 는 그 반대의 목표를 두고 있습니다.

사이트를 소개합니다. http://elfz.laacz.lv/beautify/?

복잡하게 난독처리 된 소스를 한번 넣어보세요..

확대


신고
Posted by Rhio.kim
사용자 삽입 이미지
이번주 중에 진행중인 개인 프로젝트 입니다.

간단한 고전 퍼즐이구요.

0.1.00 버전에서는 순수히 뼈대와 ajax 게임자체가 동적으로 움직이다보니 메모리 혹은 CPU 점유일이 실행간 급격히 오르락 내리락 하는 경우가 많은데요.
그런 부분을 해소시키고 부드럽게 진행할 수 있고 기본적인 퍼즐의 기본 기능에 구현하는데 목적을 둡니다.

일단 기본 개발 룰은 퍼즐 게임을 위한 기본 판넬은 DIV 구조로 미리 작성된 상태에서 OOP, MVC 개념을 추가해서 Ajax 개발하도록 하겠습니다.

내부적으로 Prototype과 script.aculo.us 를 사용하고 있지만 왠만하면 사용하지 않는 방향으로 점점 나아갈 것입니다.

2.0 버젼에서는 script.aculo.us를 통해 비쥬얼한 부분을 추가와 DB 연동을 통해 rank 부분을 지원할 예정입니다.

--------------------------------------------------------------------------------------------------

전제
1. 원하는 레벨을 선택할 수 있습니다.
    [초급, 중급, 고급, 초난감]
2. 원하는 Row, Cell 개수를 입력받아 할 수 있습니다.
3. 플레이 타임을 표시합니다.
4. 숫자모드, 알파벳 모드(버젼2), 가나다모드(버젼2) 를 지원합니다.
5. 클릭을 하면 자동으로 비어있는 Cell로 이동합니다.
6. 게임시작을 누르면 랜덤으로 퍼즐이 섞입니다.
7. 모두 맞추게 되면 성공 메세지를 뿌립니다.

8. 게임번호를 선택할 수 있습니다.(차후 이스트에그 지원)
9. 화면 리프래쉬, 리로드, game reset을 누를 경우 랜던함 게임이 DOM으로 생성

기본 구현 구성

퍼즐은 테이블로 생성해 TD안에 숫자를 입력하며 해당 TD를 클릭할 경우 비어있는 TD와 교체를 합니다.

import  script.aculo.us
          prototype 1.5.1

신고
Posted by Rhio.kim
TGlobalStorage extention 입니다.

FireFox 의 sessionStroage 와 globalStorage 를 호환시켜 크로스 브라우징 localStorage 역활을 할 수 있도록 개발중입니다.

Prototype.js 기반으로 개발하려다.  프레임웤에 의존적으로 작동하면 별 도움이 되지 않는 부분이기에 따로 window 하위 객체로 바로 써버렸습니다.

FF의 sessionStorage와 globalStorage 에 override가 되지 않아 조금 문제가 있습니다.

아래의 요소는 그냥 sessionStorage의 역활에 불과합니다. 페이지가 변경(리프레쉬, 리로딩)되면 날아가버리는 global variable 과 같은 의미입니다.

/**
 * @projectDescription Rhio Ajax Application 2007 - Global Storage extention
 *
 * @author riho.kim@pandora.tv, tizie80@nate.com
 * @messanger (msn)kim2000version@hotmail.com, (nate)tizie80@nate.com
 * @version 0.0.1
 * @usage var TClass = ;
 *
 * @sdoc
 * @namespace
 * @import
 */

/* clien-side globalStorage for cross-browser IE is {}, FF is persistent storage "globalStorage"*/

/* sessionStorage is FF's major Storage Object & globalStorage is FF's persistent storage Object
  * It's two Storage Object is supported only FireFox 2.0 more
  * page is http://cse-mjmcl.cse.bris.ac.uk/blog/2006/10/30/1162236580795.html
  */

window.TStorage = {    
    STORAGE_DEFAULT_LENGTH : 0,
    
    setup : function() {
        this.STORAGE_DEFAULT_LENGTH = this.size();
    },
    
    /* public */
    setItem : function(key, value) {
        this[key] =  value;
    },
    
    /* public */
    getItem : function(key) {
        return this[key];
    },
    
    /* public */
    removeItem : function(key) {
        if(this.isKey(key)) delete this[key];
    },
    
    /* public */
    hasItem : function(key) {
        return typeof this.getItem(key) != 'undefined';
    },
    
    /* public */
    keys : function() {
        var key = [];
        for(property in this) key.push(property);
        return key;
    },
    
    /* public */
    values : function() {
        var value = [];
        for(property in this) value.push(this[property]);
        return value;
    },
    
    /* public */
    size : function() {
        return this.keys().length - this.STORAGE_DEFAULT_LENGTH;
    },
    
    /* public debug method */
    viewStorageTable : function() {
        var keys = this.keys();
        var value = this.values();
        
        var str = [];
        for(var i=0, limit=keys.length; i<limit; i++) {
            str.push('key : <b>'+ keys[i] +'</b>, value : <b>'+ values[i] +'</b><br />');
        }
        var o = document.createElement('div');
            o.style.cssText = this.visibilityStyles;
            o.innerHTML(str.join(''));
        
        document.body.appendChild(o);
    },
    
    visibilityStyles: 'position: absolute; top:0px; left:0px; z-index:9999;'
};
신고
Posted by Rhio.kim
사용자 삽입 이미지


Nick Stakenburg 는 Prototype 1.6 에 맞춰 새롭게 재 개발 했네요.
툴팁 열기, 닫기와 토글을 마우스 이벤에 언제든지 사용할 수 있고 열린 툴팁을 유지시키고 새로운 영역에 추가할 수 도 있습니다. 그리고 새로운 방식을 사용되도록 있습니다. 이번 릴리즈에서는 닫기 버튼, 딜레이 등 닫기 기능 링크를 당신이 툴팁 안에 추가할 수있게 되었습니다.
또한 CSS모델로 만들어 져서 툴팁의 스타일 변경이 쉬워졌답니다.

사용법
new Tip(
element, // the id of your element
content, // html
{
className: 'tooltip', // or your own class
closeButton: false // or true
duration: 0.3, // duration of the effect, if used
delay: 0.2 // seconds before tooltip appears
effect: false, // false, 'appear' or 'blind'
fixed: false, // follow the mouse if false
hideOn: 'mouseout' // 'click', 'mousemove', 'mouseover',
{ element: 'element|target|tip|closeButton|.close',
event: 'click|mouseover|mousemove' }
hook: false, // { element: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle',
tip: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle' }
offset: {x:16, y:16} // or your own, example: {x:30, y:200}
showOn: 'mousemove', // or 'click', 'mouseover', 'mouseout'
target: 'anotherId', // make the tooltip appear on another element
title: false, // or a string, example: 'tip title'
viewport: true // keep within viewport, false when fixed or hooked
}
);

신고
Posted by Rhio.kim