[JS]prototype.js사용시 $에서 변수 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

prototype.js에서 가장 대표되는게 축약형 함수 $이다. 아주 간단한 거이긴 하지만 이런걸 생각했다는 것 자체가 천재이다.

$는 자바스크립트에서 엘리먼트를 다룰때 많이 사용하는 document.getElementById("엘리먼트 ID")를 축약해서 $("엘리먼트 ID")로 편하게 쓰도록 하는 것이다. 자주 쓰는 것이기 때문에 그 편리함을 이루 말할 수 없다. 물론 이걸 알기 전에는 getElementById는 알지도 못했고 보통은 document.form.Element ID를 사용했다. 다른 소스를 봐도 이게 더 많이 쓰는듯.... (근데 쓰다보면 getElementById가 오류가 생길일이 훨씬 적은 것 같다. 자연히 엘리먼트에도 id를 주는게 습관되어버리고...)

어쨌든 엘레먼트ID에 변수를 쓰고 싶은 경우가 있다. 간단히 예를 들자면 파일첨부같은거 fileup1~9까지 9개를 만들었으니 이결 for문을 돌리던지 아니면 아규먼트로 날려서 $("fileup" + num)같은 형태를 바란 것이다.(물론 저런 안 돌아간다.) 쌍따옴표 안에가 스트링이 아니기 때문에 따로 변수를 이어붙힐수도 없고 미리 이어붙혀서 저곳에 넣을 수도 없었다. 그래서 울며겨자먹기로 function을 여러개 만드는 수밖에 없었다.
좋은 해결책인지 모르지만 어쨌든 저걸 할 수 있는 방법을 알아냈다.

eval("$('fileup" + num + "').style.display = 'block'");

이렇게 하면 된다.
실행할 스크립트를 문자열로으로 이어붙히면서 중간에 변수를 넣어서 문자열을 완성한 것이다. 그리고 eval()로 감싸 주면 eval안에 들어있는 문자열을 그대로 찍어주기 때문에 결과적으론 그냥 실행이 되어버리는 것이다.


덧) 이 당시에 뭘 착각했는지 잘못된 내용을 적었다. $("fileup" + num)이나 getElementById("fileup" + num)이나 모두 이상없이 사용가능하다. 허위사실을 유포하여 죄송합니다. 꾸벅(이걸 발견하게 해준 J군에게 감사한다. ㅋ)
(2008-03-17)