1k DHTML API – document를 handling하는 여러가지 경우에 수에 대한 API를 제공한다.
종류로는…
등이 있다.
제목처럼 1k로 용량도 작은데다가, 개발자가 element handling에 있어 시간을 들여 cross browsing을 크게 신경쓰지 않아도 되니 여러모로 좋을 것 같다. :)
우리는 흔히 <script type="text/javascript"> 안의 내용을 다 자바스크립트(이하 JS)라고 생각한다. Document Object Model(이하 DOM)이라는 말 자체가 생소하게 느껴진다는 것이다.
어떤게 JS고 DOM인게 무슨 소용인가? 아니다. 활성화된 커뮤니티에서 문제를 해결할 수도 있겠지만, 그렇지 못할 때에는 매뉴얼을 보아야한다. 에러가 난 부분이 JS인지 DOM인지 알아야 매뉴얼을 찾아볼 수 있지 않겠는가?
분류는 쉽다! html element를 가리키면 DOM이고 아니면 JS다. frame등을 가리키는 것도 DOM이다.
이제 DOM인지 JS인지 알았다면, 매뉴얼을 잘 찾아보는 일만 남았다.
DOM은 W3C DOM Technical Reports (HTML 접근 부분은 DOM Level2 HTML)에서 볼 수 있다.
JS는 Syncro.net의 Core JavaScript Reference (devedge.netscape.com이 좋은 reference 사이트였으나 없어졌다. ㅠㅠ)를 보면 되겠다.
JavaScript/DOM은 웹이라는 녀석에 기본적으로 포함되는 것이 아니다. 이 말인즉슨, 포함이 안될 경우도 있다는 것이다. 따라서, JavaScript/DOM 사용에 있어서, 포함이 안될 경우에는 어떻게 될것인가에 대한 고찰이 필요하다. 이렇게 얘기해서는 너무 복잡하게 생각될 수도 있겠다. 예를 한번 들어보자. 버튼을 누르면 폼을 서브밋하고 싶다.. 는 예를 들어보겠다. 편의상 일부 필수 태그는 누락시킨 점.. 이해해주시길.. :)
<html>
<head>
<script type="text/javascript">
function checkForm(form) {
if (form.elements["title"].value == "") {
alert("제목을 입력해주세요");
return;
}
form.submit();
};
</script>
</head>
<body>
<form action="someaction">
<p>
제목 <input type="text" name="title" />
<input type="submit" value="전송" />
<a href="javascript:checkForm(document.forms['someaction'])">전송</a>
</p>
</form>
</body>
</html><html>
<head>
<script type="text/javascript">
function checkForm(form) {
if (form.elements["title"].value == "") {
alert("제목을 입력해주세요");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="someaction" onsubmit="return checkForm(this)">
<p>
제목 <input type="text" name="title" />
<input type="submit" value="전송" />
</p>
</form>
</body>
</html>위는 나쁜 녀석이고, 아래는 좋은 녀석이다. -_-;;
위의 코드가 무엇이 나쁜고 하니.. JavaScript가 인식되지 않는 브라우저에서는 "javascript:checkForm()" 식의 링크가 어떤 지시를 내리는지 알 수가 없다. "checkForm()" 자체가 JavaScript니까… 따라서 폼 체크를 할 수 없고 서브밋은 꿈도 못꾸게 된다.
반대로 아래의 코드는 기본적으로 HTML에서 폼 서브밋에 사용되는 submit button이 있어 서브밋에 지장이 없다. 폼 체크의 경우에는 JavaScript엔진이 있으면 onsubmit 메소드가 호출되어 checkForm function을 탈 것이고 없다면 onsubmit 메소드가 무시되어 아무런 에러없이 서브밋이 될 것이다.
form 값을 받은 action page에서 해당 값들을 체크하는 센스는 당연히 가지고 있을 것으로 생각한다. :)
아! 근데 이런식이라면 text로 폼 전송을 못하지 않는가? 그렇다. -_-; 안타깝게도 HTML만으로는 단순한 text가 폼 전송의 역할을 할 수 없다.
우리나라 웹시장의 웹디자인 마인드로는 심각한 일이지만, 웹이라는 녀석의 기본 목적 상 큰 문제가 될 것이 없다는 것으로 결론을 내린다! 무책임하다고 하신다면 죄송할 따름.. ㅠㅠ
다음 시간에 계속 쓰겠습니다.. :)