한빛출판네트워크

By 권원상(zooba@hanmail.net) JavaScript Clinic - 자바스크립트 이럴 땐 이렇게! #1 오랜만에 병원문을 연다(^^). 그 동안 바쁜 척하고 잠수 중이었는데, 편집자의 협박이 무섭고, 회유에 속아 넘어가서 다시 글을 쓰게 되었다. 이번 호에서는 FESI 프로젝트에 대해서 정말 간단하게 소개하고, 간단한 자바스크립트로 긴 이야기를 해 보고자 한다. FESI ?! 한글은 씌여 있는 대로 읽으면 되는데, 영어는 그렇지 않아 필자 같은 영어 까막눈한테는 발음조차 어렵게 느껴질 때가 한두번이 아니다. 그래서 작명을 한 사람이 자신의 이름은 이렇게 불러주었으면 좋겠노라고 여기 저기 알리는 경우가 많다. 필자가 대단히 존경해 마지 않는 The Art of Computer Programming 의 저자 고덕납(高德納) 교수는 영어식 이름이 Donald E. Knuth 인데, 홈페이지에 직접 자신의 이름을 카누쓰(Ka-NOOTH)라고 불러달라고 커다랗게 써놓고 있다(^^). 누쓰가 맞다 크누쓰가 맞는 발음이다를 가지고 친구와 싸운던 기억이 새록새록 하다. 군소리가 길었는데, 오늘 소개하고 싶은 FESI도 마찬가지이다. 필자의 회사 후배가 컴퓨터에 설치하려고 아둥바둥 대는 걸 우연히 발견하고 "페씨가 뭐냐?" 고 했다가 거의 일자무식자 취급을 받았다. 아무튼 FESI 홈페이지의 설명을 보고서야 "퍼지"라고 발음된다는 애매한(fuzzy) 사실을 알게 되었다. FESI는 Free ECMAScript Interpreter의 약자로, 말그대로 ECMAScript를 구현한, LGPL을 따르는 인터프리터이다. ECMAScript가 자바스크립트와 거의 유사하다는 건 주지의 사실이고 보면, 공개 자바스크립트 인터프리터쯤 될 것 같다. 아뿔사, 그러고 보니 Wrox에서 나온 Professional JavaScript에서 한 장을 할애하여 소개한 프로젝트였다. 대부분의 자바스크립트 책을 보면 "자바스크립트와 자바는 기차와 소나무 관계입니다(관련이 없다)"라고 나와 있는데, FESI 프로젝트는 이런 설명을 무색하게 만드는 프로젝트이다. FESI는 ECMAScript의 문법을 통해서 자바 VM 위에서 수행되는 애플리케이션을 만든다거나, 자바로 만든 코드를 호출한다거나, 자바 라이브러리를 호출할 수 있도록 하는 기능을 제공한다. FESI를 설치하면 자바스크립트 문법만으로 JDBC를 통해 데이터베이스를 액세스하고, AWT나 스윙을 불러 쓰고, 파일 입출력을 직접 처리할 수 있다. FESI 자체가 자바 클래스로 구현된 것이어서 가능한 일이기도 하지만, 이쯤 되면 자바스크립트와 자바는 전혀 상관없다는 말이 꼭 맞는 것은 아니게 되었다. 궁금한 분은 직접 설치해서 테스트해 보기 바란다. JDK가 설치되어 있으면 간단하게 설치하고 테스트 해볼 수 있을 것이다. 마우스 롤오버 서설이 길었는데, 오늘 이야기할 내용은 마우스 롤오버에 관한 내용이다. 자바스크립트를 처음 공부할 때 만나게 되는 코드인데 혹시 모르는 사람을 위해 간단히 설명하면, 마우스가 위로 올라가면(정확히는 마우스 포인터가) 다른 이미지로 바뀌고, 이미지 밖으로 마우스를 옮기면 원래대로 돌아오는 것을 이미지 롤오버(Rollover), 또는 마우스 롤오버라고 한다. 마우스 롤오버는 웹 페이지를 만들 때 많이 사용되므로 코드에 대해서는 많이 익숙할 것이다. 게다가, 이렇게 자주 사용되는 코드이다 보니 많이 정형화되어 있어, 대개는 다음과 같은 코드를 사용하게 된다.

// 이미지를 미리 읽어 두는 코드 function preload(imgObj,imgSrc){ if (document.images) { eval(imgObj+" = new Image()"); eval(imgObj+".src = ""+imgSrc+"""); } } // 마우스가 이미지 위로 올라 갔을 때 function imgMouseover(imgName){ imgOn = eval(imgName + "on.src"); document[imgName].src = imgOn; } // 마우스가 이미지 밖으로 나갔을 때 function imgMouseout(imgName){ imgOff = eval(imgName + "off.src"); document[imgName].src = imgOff; } // preload 함수로 이미지를 미리 읽어둠 preload("menu5off","img/img02.gif"); preload("menu5on","img/img02_r.gif"); ... ... ...

위에서 preload, imgMouseout, imgMouseover 함수를 별도의 자바스크립트 파일(xxx.js)로 두고 사용하는 경우도 있을 수 있다. 아무튼 위와 같은 코드는 아주 정형화된 코드라 더 이상 손대기가 어려울 정도이다. 그래도 고칠 곳이 있을까? 앞서 설명했듯이 마우스 롤오버는 이미 정형화된 코드가 사용된다. 그런데도 손을 댈 부분이 있을까? 물론 고칠 곳이 있다. 그래야 명색이 자바스크립트 클리닉이라는 게 존재할 테니까(^^). 위와 같은 경우 preload, imgMouseout, imgMouseover 함수 자체는 어떻게 손댈 수 있는 부분이 아니다. 최소한의 기능을 구현하는 함수이기 때문이다. 다만, 태그에서 onMouseOver="imgMouseover(this.name);" onMouseOut= "imgMouseout(this.name);" 부분은 어떻게 해볼 수 있을 것 같다. 디자이너들과 같이 작업을 하다 보면, 사실 위와 같은 간단한 이벤트 핸들러도 어려워하는 경우를 많이 만나게 된다. 누구 탓을 할 수는 없겠지만, 디자이너나 웹 페이지에 자바스크립트 코드를 붙이는 사람이나 서로 편하게 작업을 할 수 있으면 좋지 않을까? 그래서 생각해본 방법(실제로 필자가 쓰는 방법이기도 하다)은 전역 이벤트 핸들러를 설정하고, 여기에서 이미지 롤오버를 몽땅 처리하여 태그에 있는 이벤트 핸들러를 몰아내는 방법이다. 위의 코드에 다음과 같은 코드를 추가해 넣어보자.

// 전역 이벤트 핸들러 추가 document.onmouseover = mymouseover; document.onmouseout = mymouseout; // mouseover handler function mymouseover (){ var strElmName = event.srcElement.name; if ("undefined" != typeof(strElmName)) { if ( "__" == strElmName.substr(0, 2)) { imgMouseover(strElmName); } } } // mouseout handler function mymouseout (){ var strElmName = event.srcElement.name; if ("undefined" != typeof(strElmName)) { if ( "__" == strElmName.substr(0, 2)) { imgMouseout(strElmName); } } }

위와 같은 코드를 추가하면, 태그에서 써야 할 코드가 다음과 같이 바뀌게 된다. 물론, preload도 이미지를 읽어오는 코드도 다음과 같이 바뀌어야 한다.

preload("__menu5off","img/img02.gif"); preload("__menu5on","img/img02_r.gif");

뭘 어떻게 했길래? 사실 이렇게 전역 이벤트 핸들러를 추가하는 방법에서 잡고 있는 포인트는 다음과 같이 두가지 이다.

• 마우스 롤오버는 전역 이벤트 핸들러를 통해서 처리한다.
• 마우스 롤오버를 적용해야 할 태그와 그렇지 않은 태그는 name 속성으로 구별한다.

실제 코드에 대해 설명하면, 우선 페이지 안에서 발생하는 mouseover 이벤트와 mouseout 이벤트는 모두 mymouseover 이벤트 핸들러와 mymouseout 이벤트 핸들러로 보낸다. 그 다음 mymouseover 이벤트 핸들러와 mymouseout 이벤트 핸들러에서는 이벤트가 발생한 태그의 이름을 확인해서 앞의 두 글자가 "__"(언더스코어 두 개)인 경우에는 롤오버를 수행하고, 그렇지 않은 경우에는 그냥 아무 일도 하지 않는 것이다. 이와 같은 방법으로 웹 페이지 내에서 발생하는 모든 마우스 롤오버를 이름 하나로 처리할 수 있게 된다. 물론, preload하는 부분까지는 기존의 방법과 동일하지만, 태그에서 name의 속성값만 잘 적어주면, 마우스 롤오버는 신경을 쓰지 않아도 된다. 조금 편리하지 않은가? (^^) 마우스 롤오버는 위와 같이 처리하면 조금 편하다고 치고, 실제로 필자가 주목해 주었으면 하는 부분은 event에 관련된 내용이다. 위에서는 event.srcElement.name; 이라고 하는 부분이 event인데, 이 코드에서는 단순히 mouseover와 mouseout 이벤트를 처리했지만, 여기에 필요에 따라 여러가지 이벤트를 추가할 수도 있다. 일종의 "이벤트 핸들러" 처리기를 만드는 것도 가능할 것이다. 남이 자바스크립트를 보고 이해하기 어려운 이유에 여기 저기에 꼭꼭 숨어 있는 이벤트 핸들러가 한몫을 한다고 보면, 위와 같이 이벤트 핸들러를 한데 모아서 처리하는 것도 괜찮은 방법일 듯 하다. 여러분들의 생각은 어떠신가? 다음 시간에는 이벤트 핸들러에 대해 좀 더 자세하게 살펴보기로 하자.