웹표준화에 대해 요즘 관심들이 많습니다. 다행히 CSS와 XHTML에 관한 내용들은 어느 정도 공감대가 퍼지고 많은 이들이 좋은 이야기를 해주고
계신데요, 이제 슬슬 다음 단계도 이야기해봐야겠죠?
바로 javascript입니다.
사실, javascript라는 용어부터가 매우 애매합니다. JAVA와 별 관련도 없고, JScript라는 것과 헷갈리기도 하며, 심지어는 VBScript를 javascript처럼 잘못 사용하는 경우도...
정확하게는, 웹표준에는 javascript가 포함되지 않습니다. javascript는 브라우저/기계 종속적인 내용이 되기 때문에, "웹문서"와는 관련이 없지요. javascript가 하는 일은 "웹문서"가 "웹브라우저등의 해석기"에서 실행될 때 어떤 식으로 post-process를 할 것인가 하는 부분입니다.
예를 들어, 어떤 HTML문서가 PDA용 브라우저에서 이용될 때와 웹 브라우저에서 이용될 때 javascript는 다를 수 밖에 없습니다. onmouseover같은 이벤트를 사용할 수 없기 때문에, 이를 처리하는 javascript코드가 있다면 문제가 되겠죠. (대개의 경우, 이런 경우는 브라우저의 스크립트엔진이 "무시"를 함으로써, 스크립트의 실행으로 문제가 생기는 것을 막고 있긴 합니다.)
그렇다면, 할 일은 명확해집니다. 최대한 기본 HTML이 javascript에 critical하게 의존적이지 않게 만드는 것이라 할 수 있죠.
이부분은 좀 문제가 있을 수 있는 것이, DHTML이나 AJAX등의 구현시에 지장이 있을 수 있습니다. 단, 이런 경우는 처음부터 특정상황을 염두에 두고 사용하는 기법이니 적절한 fallback을 줄 수 있으면 되겠지요.
여튼, CSS도, XHTML도 대충 알아먹겠다하시는 분들은 javascript에 대해 공부하셔야할 겁니다.
우선 들어가기 전에, 표준 javascript란 ECMA-262 3rd에 정의된 내용으로 현재 javascript버전으로는 1.5에 해당하며, 아시는 분이 많지 않겠지만, Flash에서 사용하는 ActionScript 역시 ECMA-262에 기반합니다. 따라서 javascript와 ActionScript는 문법적구성이 거의 같습니다. 하나를 잘 알아두시면, 나머지 하나는 뽀나스로 배우실 수 있는 좋은 기회입니다. ^^; (요즘 상급 ActionScripter 일당이 30만원이래요. 때려치고 저도 ActionScripter나 할까... 진지하게 고민. -_-a)
1. language가 아닌, type입니다.
기존에 사용해왔던, <script language="JavaScript 1.2">는 잊어버리세요. XHTML에서 javascript의 지정은 <script type="text/javascript">입니다.
가끔, 아주 옛날 브라우저에서는 문제가 있을 수도 있으니까 꼭 하위호환성을 담보하시고 싶다면 두가지를 다 써주시는 센스를.
2. script는 반드시! <head>~</head>안에 있어야합니다.
body안에 script는 전부 빼주세요.
왜 head안에 있어야 하느냐. body안에 있으면 안되냐...
물론 똑똑한 브라우저들은 상관없지만, 멍청한 브라우저들은 body안에 뭔가 이상한 것 - 자기가 못처리하는 것 - 이 있으면 오동작을 일으킬 수 있습니다. head안에 있으면 그건 출력대상이 아니므로 안전하게 body의 컨텐츠만 출력하면 되거든요.
3. <a onclick="javascript:..."> 이런 형식도 쓰지마세요.
2번과 연관되는 건데, 어쨌든 javascript요소가 body안에 사용되는 것은 권장하지 않습니다.
자, 그럼 어떻게 각 엘리먼트의 이벤트(예를 들어 onclick같은)와 javascript를 바인딩하느냐...
W3C DOM의 EventListener 를 써서, 엘리먼트.addEventListener(...)처럼 표현해야합니다. 단, MS IE의 경우는 뭐가 잘났다고 자기들만의 DOM을 쓰므로, 엘리먼트.attatchEvent(...)라는 메쏘드를 써야하지요.
이에 대한 예는 다음시간에. 오늘은 이런 게 있다는 정도로만.
4. getElementById()를 쓰세요.
예를 들어, abcd라는 id를 갖는 form이 있고, efgh라는 id를 갖는 input 태그가 있다고 할 때,
abcd.efgh.value = "이름을 입력하세요.";
라는 코딩은 잘못된 코딩입니다.
document.getElementById("efgh").value = "이름을 입력하세요.";
가 맞는 코딩입니다.
이와 관련해 해당하는 selector를 이용한 객체를 받아오는 몇가지 방법에 대해서도 다음 시간에 소개. :)
5. Firefox를 까세요.
Firefox를 까신 후, Tools>JavaScript Console 메뉴를 눌러주세요. 에러가 후두둑 떨어지는 페이지를 보실 수 있으실 겁니다. (이 페이지도 사실 그래요. 옛날에 제가 잘 몰랐을 때 만든 템플릿이라. 언제 시간내서 제 블로그도 고쳐야할텐데요.)
거기에 나오는 에러들을 전부 잡으시면, 표준에 맞는 javascript가 됩니다.
실제 자주 쓰이는 스크립트 기법과 표준에 맞는 예에 대해서는 다음 시간에 설명하도록 할께요. 오늘은 여기까지만.
출처 : http://blog.daum.net/rani-sunflower/6129819
바로 javascript입니다.
사실, javascript라는 용어부터가 매우 애매합니다. JAVA와 별 관련도 없고, JScript라는 것과 헷갈리기도 하며, 심지어는 VBScript를 javascript처럼 잘못 사용하는 경우도...
정확하게는, 웹표준에는 javascript가 포함되지 않습니다. javascript는 브라우저/기계 종속적인 내용이 되기 때문에, "웹문서"와는 관련이 없지요. javascript가 하는 일은 "웹문서"가 "웹브라우저등의 해석기"에서 실행될 때 어떤 식으로 post-process를 할 것인가 하는 부분입니다.
예를 들어, 어떤 HTML문서가 PDA용 브라우저에서 이용될 때와 웹 브라우저에서 이용될 때 javascript는 다를 수 밖에 없습니다. onmouseover같은 이벤트를 사용할 수 없기 때문에, 이를 처리하는 javascript코드가 있다면 문제가 되겠죠. (대개의 경우, 이런 경우는 브라우저의 스크립트엔진이 "무시"를 함으로써, 스크립트의 실행으로 문제가 생기는 것을 막고 있긴 합니다.)
그렇다면, 할 일은 명확해집니다. 최대한 기본 HTML이 javascript에 critical하게 의존적이지 않게 만드는 것이라 할 수 있죠.
이부분은 좀 문제가 있을 수 있는 것이, DHTML이나 AJAX등의 구현시에 지장이 있을 수 있습니다. 단, 이런 경우는 처음부터 특정상황을 염두에 두고 사용하는 기법이니 적절한 fallback을 줄 수 있으면 되겠지요.
여튼, CSS도, XHTML도 대충 알아먹겠다하시는 분들은 javascript에 대해 공부하셔야할 겁니다.
우선 들어가기 전에, 표준 javascript란 ECMA-262 3rd에 정의된 내용으로 현재 javascript버전으로는 1.5에 해당하며, 아시는 분이 많지 않겠지만, Flash에서 사용하는 ActionScript 역시 ECMA-262에 기반합니다. 따라서 javascript와 ActionScript는 문법적구성이 거의 같습니다. 하나를 잘 알아두시면, 나머지 하나는 뽀나스로 배우실 수 있는 좋은 기회입니다. ^^; (요즘 상급 ActionScripter 일당이 30만원이래요. 때려치고 저도 ActionScripter나 할까... 진지하게 고민. -_-a)
1. language가 아닌, type입니다.
기존에 사용해왔던, <script language="JavaScript 1.2">는 잊어버리세요. XHTML에서 javascript의 지정은 <script type="text/javascript">입니다.
가끔, 아주 옛날 브라우저에서는 문제가 있을 수도 있으니까 꼭 하위호환성을 담보하시고 싶다면 두가지를 다 써주시는 센스를.
2. script는 반드시! <head>~</head>안에 있어야합니다.
body안에 script는 전부 빼주세요.
왜 head안에 있어야 하느냐. body안에 있으면 안되냐...
물론 똑똑한 브라우저들은 상관없지만, 멍청한 브라우저들은 body안에 뭔가 이상한 것 - 자기가 못처리하는 것 - 이 있으면 오동작을 일으킬 수 있습니다. head안에 있으면 그건 출력대상이 아니므로 안전하게 body의 컨텐츠만 출력하면 되거든요.
3. <a onclick="javascript:..."> 이런 형식도 쓰지마세요.
2번과 연관되는 건데, 어쨌든 javascript요소가 body안에 사용되는 것은 권장하지 않습니다.
자, 그럼 어떻게 각 엘리먼트의 이벤트(예를 들어 onclick같은)와 javascript를 바인딩하느냐...
W3C DOM의 EventListener 를 써서, 엘리먼트.addEventListener(...)처럼 표현해야합니다. 단, MS IE의 경우는 뭐가 잘났다고 자기들만의 DOM을 쓰므로, 엘리먼트.attatchEvent(...)라는 메쏘드를 써야하지요.
이에 대한 예는 다음시간에. 오늘은 이런 게 있다는 정도로만.
4. getElementById()를 쓰세요.
예를 들어, abcd라는 id를 갖는 form이 있고, efgh라는 id를 갖는 input 태그가 있다고 할 때,
abcd.efgh.value = "이름을 입력하세요.";
라는 코딩은 잘못된 코딩입니다.
document.getElementById("efgh").value = "이름을 입력하세요.";
가 맞는 코딩입니다.
이와 관련해 해당하는 selector를 이용한 객체를 받아오는 몇가지 방법에 대해서도 다음 시간에 소개. :)
5. Firefox를 까세요.
Firefox를 까신 후, Tools>JavaScript Console 메뉴를 눌러주세요. 에러가 후두둑 떨어지는 페이지를 보실 수 있으실 겁니다. (이 페이지도 사실 그래요. 옛날에 제가 잘 몰랐을 때 만든 템플릿이라. 언제 시간내서 제 블로그도 고쳐야할텐데요.)
거기에 나오는 에러들을 전부 잡으시면, 표준에 맞는 javascript가 됩니다.
실제 자주 쓰이는 스크립트 기법과 표준에 맞는 예에 대해서는 다음 시간에 설명하도록 할께요. 오늘은 여기까지만.
출처 : http://blog.daum.net/rani-sunflower/6129819
반응형
'lang > js' 카테고리의 다른 글
| nicEditor 사용 (0) | 2008.02.25 |
|---|---|
| JavaScript 없이 AJAX 구현하기 (0) | 2007.05.23 |
| 자바스크립트 패커(JavaScript Packer), 자바스크립트 압축/암호화 (1) | 2007.05.04 |
| javascript 브라우즈 확인 (0) | 2007.04.10 |
| javascript framework (0) | 2007.04.05 |