이미지는 3개로 구분되어있고, 클릭하면 원본 이미지를 확인할 수 있다.

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지
신고

'Developer > JavaScript' 카테고리의 다른 글

ASCII Character Codes Table & Cheat Sheet  (0) 2008.10.20
Prototype 1.6.0 rc0 Map  (0) 2008.05.30
How well do you know prototype  (0) 2008.05.06
AJAX의 javascript에서 한글 깨짐 현상 방지  (0) 2008.05.02
Posted by marga
Prototype 은 우리에게 보다 빠르고 현명하게(?) JavaScript를 사용할 수 있도록 도와준다.
하지만, 익숙치 않을때는 훌륭한 Framework의 기능을 충분히 끌어내지 못하는 경우가 많다.

이를 상기 시키기 위한 지침 'How well do you know prototype' 가 있다.
Prototype 초보 사용자 들에겐 유익한 포스트라 할 수 있겠다.

How well do you know prototype (part I)

How well do you know prototype (part II)
//바르지 못한 방법:
document.getElementById("foo ")
//적당한 방법: 놀랍게도 어떤 사람들은 이것에 대해 잘 모른다.
$("foo ")

//바르지 못한 방법:
var woot = document.getElementById("bar").value
var woot = $("bar").value
//적당한 방법: 폼 값의 편리하고 빠른 호출
var woot = $F("bar")

//바르지 못한 방법:
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';
//적당한 방법: 모든 브라우저가 W3C의 권고를 따르고 있지 않다.
$('footer').setStyle({
height: '100px',
background: '#ffc'
})

//바르지 못한 방법:
$('coolestWidgetEver').innerHTML = 'some nifty content'
//적당한 방법:
$('coolestWidgetEver').update('some nifty content')
// 아래와 같은 문법 구사가 가능해 지므로
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

//바르지 못한 방법:
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
//적당한 방법: 보기 좋으며 보다 나은 파라메터 구조 사용
new Ajax.Request('ninja.php', {
parameters: {
weapon1: 'foo',
weapon2: 'bar'
}
})

//바르지 못한 방법:
new Ajax.Request('blah.php', {
method: 'POST',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
})
//적당한 방법: 기본옵션은 생략하라!
new Ajax.Request('blah.php')

//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic)
//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic)

//바르지 못한 방법:
$$('div.hidden').each(function(el){
el.show();
})
//적당한 방법: 슬프게도 이 사용법을 아는 사람들이 많지 않다는 사실.
$$('div.hidden').invoke('show')

//바르지 못한 방법:
$$('div.collapsed').each(function(el){
el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)

//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

//바르지 못한 방법:
$('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
rowTemplate.evaluate({
id: productId,
name: productName,
price: productPrice
}))
)
신고
Posted by marga
사용자 삽입 이미지

원본 이미지를 좀 더 선명하게 수정했다.

원본 이미지는 좀 연해서 보고 있으면 눈이 뿌해진다.. =_=;;

프린터 출력은 '커닝페이퍼 PDF 파일' 로 하는 것이 깔끔하다.

관련 내용은 '여기' 를 참조..
신고
Posted by marga
Fire June 님이 웹어플리케이션 컨퍼런스 2007에서 발표한 JavaScript Library 의 종류와 특징이라는 주제의 발표 자료다.
Ajax를 사용하기 위해서는 JavaScript Library 거의 필수가 되버린 상황에 여러 Library 중 무엇을 써야 하는가를 선택하는 것은 성능과 직결되는 문제.
프리젠테이션 발표자료 인지라 대표적 Library 들을 간략하게 설명하고 있지만, 주옥같은 자료라고 할 수있다.. ㅜ_ㅜ)b


위 파워포인트 자료에는 각 라이브러리 배포사이트의 스크린샷에 링크가 있으며, 슬라이드 노트에 발표내용을 포함하고 있다.

원문 : http://firejune.com/1109
신고

'Developer > JavaScript' 카테고리의 다른 글

팝업창 스크롤바 자동 생성  (0) 2007.06.28
자바스크립트 라이브러리의 종류와 특징  (0) 2007.06.22
웹표준에 맞는 form 코딩법  (0) 2007.05.25
5가지 시계 표기 법  (0) 2007.05.25
Posted by marga
최근 Ajax의 활용범위가 확대되면서 슬라이더, 드래그앤 드롭, 소테이블, 백그라운드 업로더, 드래그 선택영역, 오토 컴플리케이션 등 부수적인 웹 인터페이스가 자바스크립트로 속속들이 구현되고 있다. 마우스 버튼은 물론 키보드까지 DHTML로 제어하는 이 시점에서 마우스 인풋없는 웹서핑은 상상조차 할 수 없게 되었다. 이러한 가운데 Adomas Paltanavicius자바스크립트를 이용하여 휠을 제어하는 자바스크립트 코드까지 공개하였다. IE와 파이어폭스 등의 브라우저에서 작동하며 테스트 페이지에서 작동하는 모습을 확인할 수 있다.(뭔가 재미있는 생각이 떠오르지 않는가?)

/* This is high-level function.  */
function handle(delta) {
   var s = delta + ": ";
   if (delta < 0)  s += "down";
   else s += "up";
   document.getElementById('delta').innerHTML = s;
}

/* Event handler for mouse wheel event. */
function wheel(event){
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {
       delta = event.wheelDelta/120;
       if (window.opera) delta = -delta;
   } else if (event.detail) delta = -event.detail/3;
   if (delta) handle(delta);
}

/* Initialization code. */
if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

출처 : http://firejune.com/922&ct1=8&ct2=42
신고
Posted by marga
Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

/**
* ResizingTextArea Component
* Richard McMahon(http://jroller.com)
*/

var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
   defaultRows: 1,
   initialize: function(field) {
       this.defaultRows = Math.max(field.rows, 1);
       this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
       Event.observe(field, "click", this.resizeNeeded);
       Event.observe(field, "keyup", this.resizeNeeded);
   },
   resizeNeeded: function(event) {
       var t = Event.element(event);
       var lines = t.value.split('\n');
       var newRows = lines.length + 1;
       var oldRows = t.rows;
       for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
       }
       if (newRows > t.rows) t.rows = newRows;
       if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
   }
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

출처 : http://firejune.com/1026&ct1=8&ct2=42
신고
Posted by marga

출처 : http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Ajax Image Galleries & Lightboxes

CSS-Based Image Galleries

JavaScript + CSS-based Galleries & DHTML-Galleries


신고
Posted by marga
Binny V A씨는 많은 자바스크립트 라이브러리가 있음에도 단축키를 지원하는 라이브러리는 발견하지 못했다면서 구글의 웹 애플리케이션인 Gmail이나 Reader처럼 보다 쉽게 웹 애플리케이션에 단축키를 사용할 수 있도록 함수를 만들어 배포했습니다.

아래의 예제를 보면 첫번째 아규먼트로 키를 지정하고, 두번째로 콜백 함수를 넣습니다. 마지막 세번째에는 옵션을 지정할 수 있습니다. 지원 되는 키에는 "Ctrl+X"와 같은 형식으로 작성하여 매우 직관적이며 Tab, Space, Return, Enter, Backspace, Scroll_lock, Caps_lock, Num_lock, Pause, Insert, Home, Delete, End, Page_up, Page_down, Left, Up, Right, Down, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12 키를 지원합니다.

옵션으로는 'type'에 'keydown','keyup','keypress' 이벤트를 변경할 수 있으며 'target'에 이벤트가 작동할 DOM단위의 영역을 설정할 수 있고 'propagate' 증식옵션(event.stop 또는 return false?)을 Boolean형태로 사용할 수 있습니다.

다운로드 자바스크립트 : shortcuts.js

예제 코드
shortcut("Ctrl+Shift+X",function() {
   alert("Hi there!");
});

shortcut("Ctrl+B",function() {
   alert("The bookmarks of your browser will show up after this alert...");
},{
   'type':'keydown',
   'propagate':true,
   'target':document
});
신고
Posted by marga
자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정)

download JS : http://firejune.com/javascripts/multiselect.js
download CSS : http://firejune.com/stylesheets/multiselect.css

사용방법


적용대상이 되는 엘리먼트는 리스트 아이템(UL)의 부모이며, 부모 엘리먼트는 다중선택 활성화 영역(parent)이 됩니다. 리스트 아이탬은 고유한 ID값를 지니고 있어야 합니다.(수정됨) 드래그 사용여부와 스타일 시트에서 지정한 스타일을 별도로 설정 할 수도 있습니다, 자세한 사용방법은 아래와 같습니다.(슬라이드 바는 포지션 리셋 테스트용 입니다.)
new MultiSelect('testElement');

// CSS 시각효과 설정
new MultiSelect('testElement', {
  dragSelect: false, // 드래그 사용 여부
  rectangleCN: 'MS-rectangle', // 선택영역 스타일 이름
  selectCN: 'MS-select', // 선택된 아이탬 스타일 이름
  unselectCN: 'MS-unselect', // 선택되지 않은 아이탬 스타일 이름
}});

// 예제에 사용한 코드
var selector = new MultiSelect('testElement', {
  // 변화가 생기면 이벤트 발생
  onChange: function(){
  var debug = $('debug2'), point = '';
  debug .innerHTML = 'Selected : ';
  selector.items.each(function(a){
    if(a.success) {
       debug .innerHTML += point + a.element.innerHTML;
       point = ', ';
    }
  });
}});

selector.setOffset(true); // 포지션 다시 계산하기
selector.selectAll(true); // 모두 선택하기
selector.selectAll(false); // 모두 선택 해제하기


추후 추가될 기능


- 윈도우 컨벤션을 따르는 UI 모드 추가(컨트롤 키 조합)
- 메모리 릭현상 제거
- 더블 클릭 이벤트 추가
- 아이템의 ID값 없이도 사용할 수 있도록 수정(수정됨)
- form 엘리먼트 지원

출처 : FireJune's Blog
신고
Posted by marga
John-David Dalton씨는 Prototype.js를 압축하여 용량을 1/3 이하로 줄였습니다. 그의 패키지에는 1.4버전부터 1.5.1_rc2까지(1.5 파이널 포함) 버전별 압축파일이 각각 들어있습니다. 특히, 최근 배포된 1.5.1_rc2의 용량은 94kb로 무시못할 크기가 되어버렸습니다. 1.5.1_rc2의 압축된 버전(ultraCompressed) 용량은 26kb입니다. 압축된 파일을 인클루드하려면 아래와 같이 캐릭터셋을 "iso-8859-1"로 설정해야 합니다.

예제:
<script type="text/javascript" charset="iso-8859-1" src="prototype.js"></script>

패키지 다운로드는 구글 그룹스에서 하세요. 특정 브라우저에서 문제가 있을수 있다고 하는데, 무시하고 1.5.1_rc2의 ultraCompressed버전을 인클루드 해 보았습니다. 보시다시피 오류없이 잘 돌아갑니다.

출처 : http://firejune.com/1061
신고
Posted by marga