겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다.
웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. 어플리케이션 레벨이 아닌 마크업이 잘 되어 정상적인 기능을 하는 HTML 문서에 부가적인 사용자 편의성의 증대를 목적으로 사용하는 자바스크립트라면 <script> 태그가 동작하지 않을 경우 자바스크립트가 없는 HTML 문서와 같이 작동하게 되므로 굳이 <noscript> 태그가 필요하지 않을 것이다.
다음의 두 코드를 보자. 직업을 입력하지 않았을 때 오류메시지를 표시하는 스크립트를 삽입한 폼이다.
<form action="insert" id="f">
<fieldset>
<label for="yourjob">당신의 직업</label>
<input type="text" name="job" id="yourjob" />
<a href="javascript:checkForm();">전송</a>
</fieldset>
</form>
<script type="text/javascript">
// <![CDATA[
function checkForm() {
var form = document.getElementById("f");
if (form.elements["job"].value == "") {
alert("직업을 입력해주세요.");
} else {
form.submit();
};
};
// ]]>
</script>
<form action="insert" id="f">
<fieldset>
<label for="yourjob">당신의 직업</label>
<input type="text" name="job" id="yourjob" />
<input type="submit" value="전송" />
</fieldset>
</form>
<script type="text/javascript">
// <![CDATA[
if (document.getElementById && document.getElementById("f")) {
var form = document.getElementById("f");
form.onsubmit = function() {
if (this.elements["job"].value == "") {
alert("직업을 입력해주세요.");
return false;
};
};
};
// ]]>
</script>
전자는 자바스크립트를 제거하였을 때 아무런 동작을 하지 않는 예제이고 후자는 HTML에 선언된 링크로 이동할 수 있는 예제이다. 어떤 코드를 작성하던 비슷한 시간이 소요되겠지만 – 학습에 필요한 시간은 제외한다. - 전자의 경우 문서의 가치가 훨씬 떨어진다.
모든 사용자가 당신의 자바스크립트 코드를 실행할 수 있을 것이라고 기대하지 말아야 한다. 또, 어떤 사용자는 당신의 자바스크립트 코드 중 어떤 부분을 제대로 해석하지 못한다는 것을 알아야 한다.
자바스크립트는 플래시, ActiveX와 같은 외부 플러그인과 개념 상 다르지 않다. 오히려 언급한 것처럼 사용자에 따라 불완전하게 실행될 가능성이 있기 때문에 더 다루기 어려운 기술임을 인식하여야 한다.
참고 링크
- Unobtrusive JavaScript – wikipedia
- Behavior Seperation – A List Apart
- 자바스크립트를 올바르게 사용하기 – Sangini World
- 접근성을 해치지 않는 자바스크립트의 사용 – 신현석
마지막 업데이트: 2008년 4월 25일 04시 30분
“겸손한 자바스크립트의 기본” - 1개의 코멘트/트랙백
[...] 이런 설계 기법을 겸손한 자바스크립트(Unobtrusive Javasript)라고 합니다. 겸손한 자바스크립트 관련글 하나, 겸손한 자바스크립트 관련글 둘. 이런 개념을 탑재하고 나서 [...]
- » jQuery 입문: 정규 표현식을 이용한 form 데이터 유효성 검사. - NARADESIGN:BLOG코멘트 남기기