| JavaScript ... 에 해당되는 글 12건 |
2008/04/24 11:45
 Stephen Celis 이 공개한 날짜 선택 콤포넌트입니다. 특정 기간을 선택하기에 좋게 되어있군요. 예제를 보시려면 이곳 을 이용하시면 되고 사파리에서 가장 좋은 품질을 보여준다고 하는데... 확실히 이쁘긴 하네요... ;; 위에 캡쳐는 파이어폭스2 입니다. 아래는 ajaxian 캡쳐인데 맥 & 사파리인듯..  이쁘죠?  (0)  (0) |
Trackback Address :: http://blog.phpdic.com/trackback/32
2008/04/22 11:48
 게임명에서 눈치 챌 수 있듯이 Prototype과 Script.aculo.us를 이용했습니다. 개발자는 Pierre Chassaing이며 http://www.protorpg.com/ 라는 도메인을 가지고 서비스를 공개했습니다. 조작법이 익숙치 않으실텐데 문앞에 가서 U키를 누르고 문이 있는쪽으로 방향키를 누르면 문이 열립니다. 가려져 있던 부분이 나타나는것도 Script.aculo.us를 이용했으면 더 좋았을텐데 대화창 같은 UI부분에만 사용했군요... (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/31
2008/04/11 13:13
 Jacob Seidelin 은 14KB의 자바스크립트로 구현한 슈퍼마리오를 공개했습니다. 당연히 javascript 압축도구를 이용해서 압축된 사이즈이고 원본은 35KB라고 합니다. YUI Compressor를 통해 압축되었다고 하는군요 데모는 아래 링크에서 확인 할 수 있습니다. 작은 화면 : no music or with music 큰화면 : no music or with music (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/28
|
Tracked from EnZine : 번역웹진 | 2008/04/12 10:02 | DEL
from Super Mario; 14KB of JavaScript on Ajaxian Jacob Seidelin씨가 재밌는 것을 만들어냈습니다. 14KB의 코드로 닌텐도의 히트작인 수퍼 마리오 게임을 만들었네요. 한 개의 JavaScript 파일에 작게 유지되는 실험을 하나 했습니다. 어떠한 이미지를 비롯 어떠한 외부 파일도 사용되지 않았으며, 모든 것은 canvas 엘리먼트와 구식 방법인 div 생성/배열(IE에서)으로만 렌더링됩니다. 스프라이트는.. |
2008/04/11 13:04
Jacob Seidelin은 <canvas> 객체를 여러 파일로 저장 할 수 있는 라이브러리를 공개하였습니다.
데모는 여기서 확인하실수 있습니다. http://www.nihilogic.dk/labs/canvas2image/ (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/27
|
제목이 거 참 구수하군요. (이 숨길 수 없는 사투리 본능이란... 훗. -_ㅠ) &nbsp; Internet Explorer 에서는 절대로 가능하지 않거나, 혹은 일부만 지원 되는 것. 그리고 IE 를 제외한 나머지 최신의 브라우저에서는 대게의 경우 잘 지원하는 것. 이렇게 말씀드리면 열 손가락이 부족할 정도로 많다고 하실지 모르겠습니다. ^^;;; 오늘은 그 중 하나인 Canvas 에 대해서 한 번 같이 알아보고자 합니다. &nb... |
2008/03/13 09:59
Obaid Ahmed 는 Prototype과 Script.aculo.us로 구현한 Coverflow를 공개하였습니다. <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'}); }); 설정해주면 끝입니다. 데모는 http://www.deensoft.com/lab/protoflow 에서 확인하실수 있고 다운로드는 이곳입니다. (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/24
2008/02/23 12:27
| Vlad Shamgin 이 Hello World에 대한 시대별 작성법을 포스트 했군요. 1998 <font><b>Hello World</b></font> 2000 var myText = "Hello World"; var _textNodeParent; var docNodes = document.childNodes[1].lastChild.childNodes; for(var j=0; j<document .childNodes.length; j++){ if(document.childNodes[j].lastChild){ for(var i=0; i<docNodes.length; i++){ if('div' == docNodes.item(i).nodeName.toLowerCase()){ if('layer_main' == docNodes.item(i).id.toLowerCase()){ if (null != document.getElementById('bparent')) { document.getElementById('bparent').parentNode.removeChild(document.getElementById('bparent')); } _textNodeParent = document.createElementNS("http://www.w3.org/1999/xhtml", "html:b"); _textNodeParent.id = 'bparent'; docNodes.item(i).appendChild(_textNodeParent); _textNodeParent.appendChild(document.createTextNode(myText)); } } } } } 2003 var myText = "<b>Hello World</b>"; document.getElementById('layer_main').innerHTML = myText; 2008 myVp = new Ext.Viewport({ layout:'fit', autoHeight:true, id:'myVPid', items:[ new Ext.XTemplate('<tpl>', '<span id="bparent" style="width:100%;font-weight:bold">{text1}{text2}{text3}</span>', '</tpl>').overwrite(Ext.get('layer_main'),{text1:'Hello',text2:' ',text3:'World'}) ] }); 2010년에는 어떻게 될까요? 그나저나 저는 prototype으로인해 $로 줄어든걸 제외하고는 2003년이군요.. (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/21
2008/02/21 20:38
 Kvz - Techblog를 운영하고 있는 Kevin van Zonneveld는 작년 12월부터 php.js프로젝트를 공개하기 시작합니다. php.js은 이름 그대로 PHP 함수에 익숙한 사람들을 위해 자바스크립트로 PHP function들을 구현하여 공개하는 프로젝트입니다. 이미 array나 string 관련된 강력한 PHP함수들이 JavaScript로 포팅되어 100개 가까운 함수군을 가지게 되었습니다.
http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/ 에 공개된 php.js function 하지만 용량이 약 100kb가 되어서 사용하기에 부담되는것이 사실이었는데요. 지난 14일 WOWpc님 께서 주석을 제거한 버전과 압축된 버전을 공개해주셨습니다. 라이센스가 MIT 라이센스이니 문제는 없을것 같습니다. http://wow-reference.tistory.com/74 약 1/3에 해당하는 주석을 제거한 버전이 55kb 또 이 버전을 다시 압축한 버전이 37kb정도군요 감사합니다.  님~(0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/18
2007/12/21 11:48
 John Dyer는 지난주 자신의 블로그에 자바스크립트로 구현한 3D 파노라마 이펙트를 공개했습니다. 흔히 액티브엑스를 깔아서 360도의 사진을 보여주는것에서 여러개의 div를 쪼개 자바스크립트만으로 구현했군요 예제 보기
Panorama 1 - Africa (small and fast) Panorama 2 - Oregon mountains (low curvature) Panorama 3 - Garden (high curvature) Panorama 4 - Campus (fisheye look) Lines reference image (to test curvature)
추가적으로 Joonas씨가 공개한 순수 자바스크립트만을 이용해 만든 실시간 텍스트 이펙트입니다.  재미있는 가능성들이네요~ (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/11
|
Tracked from Firejune Blog | 2007/12/24 02:03 | DEL
Joonas Lehtinen씨는 플래시나 SVG, Canvas를 사용하지 않고 생짜 자바스크립트만으로 3D스타일 애니메이션을 만들었습니다. 3D로 사용할 이미지를 너비 1픽셀씩 순차적으로 잘라내고 384개 이미지 태그를 HTML에 마크업한 후, 몇몇 수학 계산식이 사용 된 아래와 같은 함수를 지속적으로 호출하여 좌측 그림처럼 나타나는 회전목마 애니메이션을 태스트 했습니다. CPU 자원을 엄청나게 차지하네요. 정말 이렇게까지 해야하나요?
[C.. |
2007/12/21 10:31
 애플의 Webkt팀은 웹상에서 자바스크립트 퍼포먼스를 측정 할 수 있는 Sunspider 0.9를 공개했습니다. http://webkit.org/blog/152/announcing-sunspider-09/ 웹 상에서 간단하게 테스트 할 수 있으니 벤치마크 할 브라우저를 띄우고 해당 주소로 접속하는것만으로도 브라우저의 자바스크립트 성능 벤치마크가 가능합니다. 아래 주소에서 테스트가 가능합니다. http://webkit.org/perf/sunspider-0.9/sunspider.html 이 벤치마크를 통해 Jeff Atwood가 자신의 벤치마크 결과를 공개했군요  출처 : http://www.codinghorror.com/blog/archives/001023.html  출처 : http://www.codinghorror.com/blog/archives/001023.html 알려진대로 오페라가 제일 빠르네요~ (0) (0) |
Trackback Address :: http://blog.phpdic.com/trackback/9
2007/12/13 22:24
훌륭한 자바스크립트 라이브러리인 Prototype.js 잘 사용하고 계신가요? 1. document.getElementById('foo') 대신 $('foo') 를 사용 할 것 2. var woot = $('bar').value 대신 var woot = $F('bar') 를 사용 할 것 3. $('footer').style.height = '100px'; $('footer').style.background = '#ffc'; 대신 $('footer').setStyle({ height: '100px', background: '#ffc' }) 를 사용 할 것 4. $('coolestWidgetEver').innerHTML = 'some nifty content' 대신 $('coolestWidgetEver').update('some nifty content') 를 사용 할 것 5. new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar') 대신 new Ajax.Request('ninja.php', { parameters: { weapon1: 'foo', weapon2: 'bar' } }) 를 사용 할 것 6. new Ajax.Request('blah.php', { method: 'POST', asynchronous: true, contentType: 'application/x-www-form-urlencoded', encoding: 'UTF-8', }) 대신 new Ajax.Request('blah.php') 사용 할 것 7. Event.observe('myContainer', 'click', doSomeMagic) 대신 $('myContainer').observe('click', doSomeMagic) 사용 할 것 8. $$('div.hidden').each(function(el){ el.show(); }) 대신 $$('div.hidden').invoke('show') (0) ( |