http://goo.gl/b4qHK 에서 직접 확인 가능!
소스보기를 해보면 알겠지만 어떤 크기의 네모로직도 문제없도록 만들었다.
var Cookies = {}; Cookies.set = function(name, value){ var argv = arguments; var argc = arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : '/'; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); }; Cookies.get = function(name){ var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; var j = 0; while(i < clen){ j = i + alen; if (document.cookie.substring(i, j) == arg) return Cookies.getCookieVal(j); i = document.cookie.indexOf(" ", i) + 1; if(i == 0) break; } return null; }; Cookies.clear = function(name) { if(Cookies.get(name)){ var today = new Date(); today.setFullYear(today.getFullYear()-1); Cookies.set(name, "", today); } }; Cookies.getCookieVal = function(offset){ var endstr = document.cookie.indexOf(";", offset); if(endstr == -1){ endstr = document.cookie.length; } return unescape(document.cookie.substring(offset, endstr)); };
//바르지 못한 방법:
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
}))
)
저는 이런 분야는 잘 모르지만,
웹프로그래머들이든 그와 관련된 업체에게 하고 싶은 말이라면
"제발 액티브X좀 쓰지마삼"
..정말 싫어요 액티브X..
변경 전
변경 후
스크롤 전
스크롤 후
저도 동적으로 생성할 때 property가 제대로 안들어가는 경우가 있었습니다.
왜 안되는지 한참 고민했었는데 ^^;;
제 경우는 table에 자식들을 생성할 때였는데,
어느 외국 블로그에 IE에선 부모에 삽입 해주고 속성들을 바꿔야 해결된다고 나와 있더라구요..
이 문제도 그거와 비슷한 것 같네요.
먼저 부모에 삽입해주고 하시는게 ^^
난 처음엔 시멘틱 웹이라는게 뭔지 몰랐다..
존재자체도 몰랐다
어느날 인터넷 여기저기서 웹 2.0이다 뭐다 하고 떠들어대고 난 후에 AJAX를 알았고
웹2.0에 대에 조사를 하기 시작했다.
AJAX를 코딩해보니 AJAX는 그냥 javascript라는걸 알게 되었다.
그리고 웹2.0에 대해 알면 알수록,
시멘틱웹에 대해 알면 알수록,
다 개소리라는걸 알았다.
그렇다.. 다 개소리다..
시맨틱웹? 웹2,0?
뜬구름잡는 이야기다.
그냥 웹이 발전될 뿐 웹2.0이라는 패러다임은 없다.
웹은 웹이다.
말씀대로 2.0은 별 의미가 없죠.
웹2.0하면서 예를 들은 서비스들을 보면 이미 한국에선 서비스하던 것들이 많고, 사실 외국이야기를 우리나라에도 들먹이는 듯한 느낌이 어느정도 있습니다.
하지만, Ajax와 시멘틱웹은 다릅니다.
개인적으로도 이름만 섞어놓은 Ajax라는 단어를 그렇게 긍정적으로 보는건 아니지만, 예전같으면 그냥 찔끔찔끔 DHTML이나 끄적여야 했던 자바스크립트들이 비동기통신을 만나면서 하나의 어플리케이션이 이뤄질 수 있는 수준까지 됨에 대한 파급효과는 상당하죠. 예전엔 ActiveX나 플래시나 자바어플릿이 아니면 죽어도 못할것이라 하는걸 웹브라우저 자체 해석엔진만 가지고도 전부 해낼 수 있게 됐습니다. 이정도라면 상징적 의미로 Ajax라는 단어를 쓰는데 큰 문제는 없다고 생각합니다.
시멘틱웹도 마찬가지인데, 이 단어는 꼭 쓰지 않으면 안된다고 생각합니다. 아시다시핀 아직까지 보편적으로 사용되는 html코딩은 테이블기반의 야매코딩이 대부분이죠. 화면구성에만 신경을 쓰고 html문서 자체의 문서로써의 가치는 너무 떨어집니다. 그래서 사람들이 xhtml 표준코딩 해라 시멘틱한 코딩 해라 하는거죠. 제목은 <h1>태그해서 강조해주고! 디자인요소는 문서랑 큰 연관없으니 <div>하고 등등 식으로 적절하게 써주고 디자인은 css로 따로 빼버리는거죠. 그렇게 하면 html파일이 문서로써의 가치를 발휘할 수 있죠. 그래서 의미있는 웹인 시멘틱웹이라고 부르는 겁니다. 또, 이렇게 코딩하면 시각장애인분들도 손쉽게 사이트를 돌아다니실 수 있습니다. 이래저래 좋은거죠.