Prototype 기초
Prototype을 처음으로 시작하시는 분들에게는 좋은 아티클이 있어 소개합니다. 매뉴얼 문서들이 부실해서 아래를 살펴 본다면 기본으로 Prototype을 사용하는데 조금이나마 도움이 될 것입니다. 흔히 사용 방식과 비교를 했으니 이해하는데 도움이 더 되겠죠.
첫번째
- 흔히 사용 방식:
document.getElementById('foo')
- 올바른 사용 방식:
$('foo')
두번째
- 흔히 사용 방식:
var woot = document.getElementById('bar').valuevar woot = $('bar').value
- 올바른 사용 방식:
var woot = $F('bar')
세번째
- 흔히 사용 방식:
$('footer').style.height = '100px'; $('footer').style.background = '#ffc';
- 올바른 사용 방식:
$('footer').setStyle({
height: '100px',
background: '#ffc'
})
네번째
- 흔히 사용 방식:
$('coolestWidgetEver').innerHTML = 'some nifty content'
- 올바른 사용 방식:
$('coolestWidgetEver').update('some nifty content')
다섯번째
- 흔히 사용 방식:
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);
})
- 올바른 사용 방식:
$$('div.collapsed').invoke('observe', 'click', expand)
열번째
- 흔히 사용 방식:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
- 올바른 사용 방식:
$$('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>'
- 올바른 사용 방식:
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
}))
)
- 참조 사이트 : http://thinkweb2.com/projects/prototype-checklist/