- 단계적 기능 축소 : 스크립트를 사용하지 않더라도 동작 가능한 웹문서 만들기
(자바스크립트를 정확하게 사용하여, 자바스크립트 기능이 없는 브라우저 사용자들도 웹사이트를 이용할 수 있게 하는 것.)
- 스크립트 분리 : 웹 문서 구조에서 동작 분리하기
- 하위 호환성 : 구 웹브라우저에서도 동작 가능하도록 학인하기
javascript:슈도 프로토콜
프로토콜이란 http://, ftp:// 와 같이 인터넷상의 컴퓨터들 간에 데이터를 주고받기 위한 일종의 약속으로 슈도 프로토콜은 이런 아이디어에서 출발한 비표준임.
javascript:슈도 프로토콜은 하이퍼링크에서 자바스크립트를 부르기 위해 만들었음.
제작할때 흔히 쓰던 코딩방식에서 슈도 프로토콜 이용 예를 볼수 있다.
<script type="text/javascript">
function pop(url,name,w,h) {
window.open(url,name,'width='+w+',height='+h+',scrollbars=no,status=1')
}
</script>
<a href="javascript:pop('팝업주소.html','PopupName',300,400)">가로300*세로400 팝업 띄우기</a>
위 예제는 javascript:슈도 프로토콜을 지원하는 브라우저에서만 작동함.
마크업에서 슈도 프로토콜을 이용해 자바스크립트 기능을 참조하는 것은 나쁜 방법 임.
Upgrade1 - 자바스크립트 기능을 끄더라도 href 속성 값이 제대로 작동하게 변경
<a href="팝업주소.html" onclick="pop('팝업주소.html','PopupName',300,400); return false;">가로300*세로400 팝업 띄우기</a>
<a href="팝업주소.html" onclick="pop(this.getAttribute('href'),'PopupName',300,400); return false;">가로300*세로400 팝업 띄우기</a>
Upgrade2 - 마크업과 스크립트 분리
onclick과 같은 이벤트 핸들러의 경우 기능 부여를 위해 마크업에 넣어서 표현했었는데, 아래의 마크업만으로도 기능 부여가 가능함
<a href="팝업주소.html" class="popup">가로300*세로400 팝업 띄우기</a>
getElementById(id).event = action
getElementsByTagName("a").event = action
- 문서 내 모든 링크의 배열을 만든다.
- 배열을 반복해 각 링크들을 검사한다.
- 링크가 popup 이라는 클래스를 가지고 있으면 링크의 클릭 여부를 검사한다.
A. 클릭되면, 링크의 href 속성 값을 popup 함수로 처리한다.
B. 링크가 원래 창에서 작동하지 않도록 기본 동작은 처리하지 않는다.
<script type="text/javascript">
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
if(links[i].className == "popup") {
links[i].onclick = function() {
pop(this.getAttribute('href'),'PopupName',300,400)
return false;
}
}
}
</script>
위 스크립트를 외부 파일로 빼냈을경우 스크립트 링크선언을 마크업 상단 <head> 태그에
<script type="text/javascript" src="외부파일.js"></script> 태그로 넣기때문에, 그 아래 문서들을 다 불러오기 전에
호출하게 되므로, getElementsByTagName 와 같은 메소드가 동작하지 않게됨
문서를 다 불러온다음 이벤트 핸들러를 처리 하게 해야 하므로,
onload 이벤트를 사용해서 함수를 동작하게 해야 함
window.onload = prepareLinks;
function prepareLinks() {
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
if(links[i].className == "popup") {
links[i].onclick = function() {
pop(this.getAttribute('href'),'PopupName',300,400)
return false;
}
}
}
}
function pop(url,name,w,h) {
window.open(url,name,'width='+w+',height='+h+',scrollbars=no,status=1')
}
Upgrade3 - 하위 호환성 부여하기
if(!method) {
return false;
}
해당 메소드를 지원하지 않는다면 실행하지 않게 하기
if(!getElementById) {
return false;
}
if(!getElementById) return false;
if(!getElementById || !getElementsByTagName) return false;
[최종 코드]
window.onload = function() {
if(!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
if(links[i].className == "popup") {
links[i].onclick = function() {
pop(this.getAttribute('href'),'PopupName',300,400)
return false;
}
}
}
}
function pop(url,name,w,h) {
window.open(url,name,'width='+w+',height='+h+',scrollbars=no,status=1')
}
이상, 다이내믹한 웹 표준 사이트를 위한 DOM 스크립트 5장 내용을 정리해 보았습니다.
