DOM Validation Code - 검증 코드 작성

제레미 키스의 "DOM 스크립팅" 내용 중 검증 코드 작성 예시

아래의 내용은 검증 코드 작성을 어떻게 하는지에 관해서 다루는 내용을 실었습니다.

검증 코드 작성

showPic 함수를 좀더 살펴봐야 하겠습니다. 아직 이 함수에서 어떠한 체크나 테스트도 수행하고 있지 않기 때문입니다.
prepareGallery가 이 함수를 호출하는 데 현재 웹 브라우저가 이 코드를 실행할 수 있는지 getElementById나 getElementsByTagName 같은 DOM 메서드 사용가능 여부를 확인했습니다.

내용상 이전에 객체 판별법에 관한 내용을 다루었습니다. if(!document.getElementById) return false; 와 같은 검증 코드를 prepareGallery 함수에 삽입하여 window가 로드 될 때 이런한 객체판별법을 적용해 현재 페이지를 구형하는 브라우저가 getElementById 와 같은 메서드를 가지고 있는 경우에만 스크립트를 계속 수행하도록 하는 내용이었습니다.

사실 우리는 이 밖에도 더 많은 안정성 확인을 해야 합니다. 소스코드에는 placeholder와 description이라는 요소를 사용한다고 되어 있지만 실제로 이것들이 문서상에 존재하는 지도 확인해야 합니다 (프로그램은 되도록 완전 무결해서 오류가 나오지 않도록 여러 가지를 고려해야 합니다).

							function showPic (whichpic) {
								var source = whichpic.getAttribute("href");
								var placeholder = document.getElementById("placeholder");
								placeholder.setAttribute("src", source);
								var text = whichpic.getAttribute("title");
								var description = document.getElementById("description");
								description.firstChild.nodeValue = text;
							}							
						

이들 요소들에 대해 몇 가지 확인 사항들을 논해볼 필요가 있겠습니다.

우선 두 요소 모두 이 함수에서 어떻게 사용되는지 볼까요? placeholder라는 이미지는 src 속성이 변경됩니다. description이라는 요소는 firstChild의 nodeValue가 바뀌게 되죠. 첫 번째는 함수의 주요 기능이고 두 번째는 부가 기능입니다. 이 때문에 우리는 두 개를 나눠 테스트해 보겠습니다. 만약 placeholder라는 이미지는 있지만 description 요소가 없으면 이미지 변경은 가능해야 합니다.

스크립트 내 코드 실행 부분 중에 어떤 것이 주요하게 필수적으로 들어가야 하는지, 즉 스크립트의 주요 목적과 관련해서 평가해 볼때 빠져서는 안되는 요소와 적용상 없어도 불편하지만 스크립트의 목적에 부합하는 요소 부가기능을 나눠서 다루고 있습니다.
참고로 앞으로 나오게 되는 내용 중에 prepageGallery 함수라는 것은 링크를 순회하면서 각각의 링크에 대해서 showPic() 함수를 호출하는 함수를 말합니다.

prepareGallery 함수에서 특정 요소가 존재하는지 여부를 확인하는 건 간단합니다.

if (!document.getElementById("placeholder")) return false;

그 다음에 이미지 변경 작업을 할 수 있죠.

var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);

이제 주요 작업을 수행했습니다. 이 시점에서 description이라는 요소가 존재하는지 여부를 확인해 보겠습니다.

if (!document.getElementById("description")) return false;

우리가 해야 할 작업은 텍스트를 바꿔주는 것입니다.

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;

몇 가지 점검을 마친 함수를 완성시켜 보겠습니다.

							function showPic (whichpic) {
								if (!document.getElementById("placeholder")) return false; // 검증 코드
								var source = whichpic.getAttribute("href");
								var placeholder = document.getElementById("placeholder");
								placeholder.setAttribute("src", source);
								if (!document.getElementById("description")) return false; // 검증 코드
								var text = whichpic.getAttribute("title");
								var description = document.getElementById("description");
								description.firstChild.nodeValue = text;
							}					
						

자바스크립트 코드가 더 완벽해졌습니다. 코드상에서 더 이상 문서 내 특정 요소가 존재하는지 여부를 확인하지 않아도 됩니다. placeholder 이미지가 문서 내에 없더라도 자바스크립트가 오류를 내지 않게 됩니다.

그러나 문제가 하나 있습니다. placeholder 이미지 마크업을 문서에서 지우고 웹 브라우저를 새로고침 후, imagegallery내 링크를 클릭해 보세요. 아무런 동작도 일어나지 않을 겁니다.

검증코드에서 placeholder 요소가 있는지 없는지 확인했습니다. 만약에 없다면 어떻게 될까요? 스크립트는 작동을 중단하고 호출된 곳으로 빠져나갈 겁니다. 그러 후에는 a link의 기본 기능이 작동하면 스크립트로 향상된 기능이 중단되더라도 기본적인 html의 hyperlink 기능은 그대로 작동하는 것이 아예 작동하지 않는 것 보다는 사용성이 높아지는 것입니다. 참고로 아래에 prepareGallery 함수를 보여드립니다. prepareGallery 함수와 showPic 함수의 관계를 잘 살펴 보기 바랍니다.

							function prepareGallery () {
								if (!document.getElementsByTagName) return false;
								if (!document.getElementById) return false;
								if (!document.getElementById("imagegallery")) return false;
								var gallery  = document.getElementById("imagegallery");
								var links = gallery.getElementsByTagName("a");
								for (var i=0; i<links.length; i++) {
									links[i].onlick = function () {
										showPic(this);
										return false;
									}
								}							
							}				
						

이것은 우리가 짠 코드에서 단계적 기능 축소가 작동하지 않는다는 이야기입니다. 이런 경우 아무 동작도 없는 것보다는 링크를 따라서 그림을 표시해주는 것이 훨씬 나을 것입니다.

이 문제는 prepareaGallery 함수에서 해결할 수 있습니다. showPic 함수가 잘 동작하면 기본 동작은 취소를 해야 한다고 가정하겠습니다.

							links[i].onlick = function () {
								showPic(this);
								return false;	
							}	
						

이렇게 거짓을 반환해보겠습니다(이로써 브라우저에서 링크를 따라가는 기본 동작을 취소합니다). 하지만 이 기능은 showPic 함수 내에 있어야 할 거 같군요. 좀 직관적이지 못하니까요.

아래는 showPic 함수에서 해야 될 일을 생각해 보겠습니다.

▶ 이미지가 잘 바뀌게 되면 함수는 거짓을 반환해야 한다.
▶ 함수가 제대로 실행되지 않으면 참을 반환해야 한다.

이를 위해 첫 테스트를 바꿀 필요가 있습니다. placeholder 이미지가 없으면 거짓 대신 참을 반환해야 합니다.

if (!document.getElementById("placeholder")) return true;

이제 두 번째 테스트를 보겠습니다. description 요소의 내용이 바뀌지 않으면 기본 동작은 취소하겠습니다.

if (!document.getElementById("description")) return false;

제일 중요한 것은 함수 실행이 완료되면 기본 동작을 취소하는 것입니다. 이를 위해 showPic 함수의 마지막에 한 줄을 추가해 보겠습니다.

return false;

showPic 함수가 제대로 실행되지 않으면 참을 반환합니다. 만약 함수가 주요 기능을 모두 수행하면 거짓을 반환하게 되겠지요.

							function showPic (whichpic) {
								if (!document.getElementById("placeholder")) return true; // 검증 코드, 함수 중단점
								var source = whichpic.getAttribute("href");
								var placeholder = document.getElementById("placeholder");
								placeholder.setAttribute("src", source);
								if (!document.getElementById("description")) return false; // 검증 코드, 함수 중단점
								var text = whichpic.getAttribute("title");
								var description = document.getElementById("description");
								description.firstChild.nodeValue = text;
								return false; //  함수 중단점
							}					
						

반환된 불린 값을 사용하기 위해 prepareGallery 함수를 업데이트해야 합니다.

							links[i].onlick = function () {
								return showPic(this);
							}	
						

showPic 함수가 거짓을 반환하면, 링크를 클릭할 때 기본 동작을 취소하고 링크를 따라가지 않게 돕니다. 만약 showPic이 참을 반환하면 브라우저는 링크를 따라가게 됩니다.

이제 완성된 prepareGallery를 한 번 살펴보겠습니다.

							function prepareGallery () {
								if (!document.getElementsByTagName) return false;
								if (!document.getElementById) return false;
								if (!document.getElementById("imagegallery")) return false;
								var gallery  = document.getElementById("imagegallery");
								var links = gallery.getElementsByTagName("a");
								for (var i=0; i<links.length; i++) {
									links[i].onlick = function () {
										return showPic(this);
									}
								}							
							}				
						

이제 오류를 일으킬 만한 여러 가지 상황에 대한 분제를 해결했습니다. placeholder 마크업이 없으면 브라우저는 링크에 걸린 이미지를 표시하게 됩니다. 물론 placeholder 마그업을 추가하면 우리가 처음 원했던 동작도 수행하게 됩니다.