[Prototype] 달러 명령어 :: $(~) 와 $$(~).each 사용하기
코덕질/해탈내역들 2009/05/17 18:47
히야.. 전부터 계속 계획해 왔던 포스트, 1달여가 지나서야 이제야 씁니다 =ㅅ=;. 자바스크립트 관련 글 쓰는것도 거의 2달 가까이 됬네요.
그리고 몰랐는데, 도서관에서 우연히 프로토타입 관련 서적을 읽게 되었습니다. 찾아보니까 상당히 많더라고요... 이번 삽질의 결과물도, 요것의 도움을 크게 받았답니다 (!)
먼저 달러 메서드부터 시작합니다. 물론, 이 자바스크립트들을 사용하기 전에 프로토타입을 꼭 넣어 주셔야 한다는 것 잊지 마세요!
$(달러) 명령어
달러 메서드는 보통 요런 식으로 이용합니다
이해 되셨나요? 간단하게 예제를 하나 만들어서 이해해 보면 좋겠네요.
대충 HTML 파일 하나 만들고, 다음과 같이 입력합니다.
보시면 아시겠지만, 단지 달러 명령어 하나만으로 손쉽게 Element를 구하고, 수정할 수가 있습니다. 만약 달러 명령어가 없었더라면,
그리고 이런 식으로 객체에 접근할 시 프로토타입객체에서 지원하는 Previous(), Next(), Up(), Down()과 같은 DOM 트리 명령어를 사용할 수 있습니다. 이것 또한 프로토타입만의 상당한 강점이죠.
여기까지만 해도 상당히 괜찮은 명령어지만, 프로토타입 달러 명령어의 진수는 $$명령어에서 드러납니다.
$$(더블달러) 명령어
더블달러도 사용 그 자체에는 특별한 것은 없습니다.
$$ 메서드는 이렇게도 이용할 수가 있습니다.
그리고 이 메서드가 each 명령어랑 합해질 경우, 위력은 더욱 강력해 집니다.
샘플로 위와 같은 소스를 여러분의 블로그에서 실행해 보세요.
클릭하신 후에, 원래 사진이 있던 곳을 한번 눈여겨 봐 주세요!
이미 눈치 채신 분들도 있겠지만, 이것은 imageblock 클래스를 가진 레이어에 문자열을 집어넣는 명령어입니다. 원래 한 줄로 쓸수도 있지만 편의를 위해서 여러 줄로 갈라서 넣었답니다.
하지만 프로토타입 프레임워크 없이 이 소스코드를 쓴다면 몇줄이 될까요? 상상만 해도 끔찍합니다 -_-;
이처럼 프로토타입은, 자바스크립트를 가볍게 해줄 뿐만 아니라 W3C 기준의 통일, 또한 코드를 명료하게 하여 디버깅에도 큰 도움을 줍니다. 자바스크립트의 큰 혁명을 불러가지고 온 프레임워크라고 해도 과언이 아니죠 ^^.
부족한 글 이해하신 분이 몇이나 되실지 모르겠습니다(;;). 내부적인 중요한 문법을 알아봤으니, 다음에는 이쁘장한 효과로 무장한 Effect 클래스에 대해서 적어볼게요. 읽어주신 분들 감사합니다 ^^
그리고 몰랐는데, 도서관에서 우연히 프로토타입 관련 서적을 읽게 되었습니다. 찾아보니까 상당히 많더라고요... 이번 삽질의 결과물도, 요것의 도움을 크게 받았답니다 (!)
먼저 달러 메서드부터 시작합니다. 물론, 이 자바스크립트들을 사용하기 전에 프로토타입을 꼭 넣어 주셔야 한다는 것 잊지 마세요!
$(달러) 명령어
달러 메서드는 보통 요런 식으로 이용합니다
var obj = $('divLoading');var(선언한다) obj(를) = $('test');[test라는 객체로]
이해 되셨나요? 간단하게 예제를 하나 만들어서 이해해 보면 좋겠네요.
대충 HTML 파일 하나 만들고, 다음과 같이 입력합니다.
<html>
<head>
<script type="text/javascript">
function showLayer()
{
$('test').style.display="";
}
function hideLayer()
{
$('test').style.display="none";
}
</script>
</head>
<body>
<div id="test">테스트입니다</div>
<a href="#" onclick="showLayer()">보여주기</a>
<a href="#" onclick="hideLayer()">숨기기</a>
</body>
</html>
샘플 보기
보시면 아시겠지만, 단지 달러 명령어 하나만으로 손쉽게 Element를 구하고, 수정할 수가 있습니다. 만약 달러 명령어가 없었더라면,
$('test').style.display="none";부분을document.getElementById('test').style.display="none";
라고 입력해야 할 것입니다. 코딩량이 2배로 늘어나는 셈이죠!그리고 이런 식으로 객체에 접근할 시 프로토타입객체에서 지원하는 Previous(), Next(), Up(), Down()과 같은 DOM 트리 명령어를 사용할 수 있습니다. 이것 또한 프로토타입만의 상당한 강점이죠.
여기까지만 해도 상당히 괜찮은 명령어지만, 프로토타입 달러 명령어의 진수는 $$명령어에서 드러납니다.
$$(더블달러) 명령어
더블달러도 사용 그 자체에는 특별한 것은 없습니다.
var obj = $$('태그이름');
var obj = $$('태그이름.클래스이름');
하지만, 더블달러 명령어의 '태그이름' 속성은 CSS3를 지원합니다. 이것은 $$('태그이름.클래스이름');과 같은 명령어를 지원하도록 하게 합니다. 이것을 프로토타입 자바스크립트 프레임워크 없이 다시 코딩하면,var obj = document.getElementByTagName("태그이름");
var res_obj:Array = new Array();
for (i=0; i<obj.length; i++)
{
if (obj.className.indexOf("클래스이름") != -1)
{
res_obj.push(obj);
}
}
이렇게 입력해야만 합니다. 코딩량이 졸지에 몇배가 늘어나 버렸군요 -_-;$$ 메서드는 이렇게도 이용할 수가 있습니다.
$$('#container span[title]')
// ID가 container인 엘리먼트 안에, title이라는 속성을 가진 SPAN태그를 모두 가지고 온다
$$('#a[href="#"]')
// href 속성값이 #인 모든 링크
$$('li', 'span')
// li 태그와 span 태그를 모두 구한다
$$('div:[className~=clear]')
// 클래스명에 clear을 포함하는 div를 모두 가져온다
$$('div:not([className~=clear]')
// 클래스명에 clear을 포함하지 않는 div를 모두 가져온다
$$('div:empty')
// 내용이 없는 div를 가져온다
(이 내용의 일부는 위쪽 사진의 책에서 참조했음을 미리 알려드립니다 ^^;)그리고 이 메서드가 each 명령어랑 합해질 경우, 위력은 더욱 강력해 집니다.
샘플로 위와 같은 소스를 여러분의 블로그에서 실행해 보세요.
$$('div.imageblock').each(
function (e) {
e.innerHTML = "<span style='background:#000000; color:#ffffff;'>여기에는 원래 사진이 들어가야 되는데 내가 접수하도록 하겠다!! 우하하!</span>";
} );
클릭하신 후에, 원래 사진이 있던 곳을 한번 눈여겨 봐 주세요!
이미 눈치 채신 분들도 있겠지만, 이것은 imageblock 클래스를 가진 레이어에 문자열을 집어넣는 명령어입니다. 원래 한 줄로 쓸수도 있지만 편의를 위해서 여러 줄로 갈라서 넣었답니다.
하지만 프로토타입 프레임워크 없이 이 소스코드를 쓴다면 몇줄이 될까요? 상상만 해도 끔찍합니다 -_-;
이처럼 프로토타입은, 자바스크립트를 가볍게 해줄 뿐만 아니라 W3C 기준의 통일, 또한 코드를 명료하게 하여 디버깅에도 큰 도움을 줍니다. 자바스크립트의 큰 혁명을 불러가지고 온 프레임워크라고 해도 과언이 아니죠 ^^.
부족한 글 이해하신 분이 몇이나 되실지 모르겠습니다(;;). 내부적인 중요한 문법을 알아봤으니, 다음에는 이쁘장한 효과로 무장한 Effect 클래스에 대해서 적어볼게요. 읽어주신 분들 감사합니다 ^^
댓글을 달아 주세요
우오~~!!
뭔지는 모르겠습니다만, 뭔가 대단하군요... <- 어이
원래 프로토타입은 위대한 겁니.. <<
어렵네... 내분야가 아니라서 그런지 =_=ㅋ
여기 많이 뜯으시다 보면 알게 됩니다 ㅋㅋ
이 포스트를 읽으며 느낀건데,
자바를 알아야 할것 같습니다.
그런데, 난 자바를 할 줄 모릅니다.
전 안되겠죠?ㅋㅋ
헛, 여기서도 난 안되겠죠 시리즈를 보다니 =ㅂ=b
음. 자바스크립트였군요. 하지만 전 자바를 싫어한다는(야)
자바랑 C 비베 같이하니까 지난번의 대참사같이 C++에
비베코드를 -_-;;;
... 아... 그 현상.. (..)
덕택에 이제 VB 할때 자꾸 끝에 문장마침(;)을 찍는 [털썩]
ㄷㄷㄷㄷㄷㄷ
^^;
프로토타입 좋죠 ㅋㅋ
요즘 Ajax 독학하면서 프로토타입의 진가를 맛보고있는 Bardisch군
오호오호 드디어 프로토타입 배우시는 분이 생기는구나 ㅋㅋ
저 역시 뭐지는 모르겟지만 대단하네요 ㅇㅂㅇ
냄. 뭔지 모르는 아주 심오한 거죠 데헷.
ㅠ_ㅠ 역시 이런쪽 글은 안되는건가 [털썩]
진리는 자바임..;
C? C++?
자바쓰니 자바가 짱임..
자바가 진리, 자바 만세..
C++도 쓸만한데
C는 근데 답이 없던..;
C나 C++이나 거기서 거기죠 뭐 ㅋㅋㅋ
자바는 진짜 웹프로그래밍 언어중에선 최고인듯. 프로토타입은 그걸 또 패키지와 시켜주니까 대단한 것 같고 =ㅅ=;
저기..
자바랑 자바 스크립트는 엄연히 다른데..
나님은 이런데 태클 걸면 마음아파하는데 흑흑 ㅠㅠ.
뭐 틀린 말은 아니니까 수정하도록 할게요 ㅋㅋ
자바라니 아니 자바라니
이젠 완전히 모르겠음 ㄳㄳ
으엥 ㅠㅠ
간지나는 자바군요..ㅇㅅㅇ
(.... 뭐지!)
공부해볼 필요가 있는 스크립트로 보입니다. ㅎㅎ
하지만 프로토타입이 간단하긴 해도 2중으로 함수(본인함수, Prototype 내장함수)를 돌리기 때문에 컴퓨터에 부담이 좀 갈 거 같네요;;
본인함수라기 보다는 함수를 씀으로서 프로토타입에서 호출을 하는 거죠 ^^;... 굳이 프로토타입이 아니더라도 요즘에는 jQuery등 수많은 자바스크립트 프레임워크가 나오고 있으니 사용자 입맛에 맞게 쓰면 된다고 생각합니다 :p
그러니까 프로토타입 같은 범용함수는 비효율적일 수 있다는 말을 하려고 했어요.
프로토타입은 사용자를 편하게 만들기 위한 스크립트지만 컴퓨터를 배려하진 않는다고 봅니다 :)
ㅎㅎ.. 맞는 소리죠.
그런데 제가 한가지 빼먹은게 있네요;.. 프로토타입 책에서 나온 거지만 인용 좀 하자면 Prototype 메서드는 객체를 노드화시킬때 브라우저 렌더링 엔진이 Gecko엔진(ex:사파리, 크롬, 파이어폭스, etc)일때는 DOM3엔진을 이용하여 최적화한다고 들었습니다. [뭐 그래봐야 결국은 거기서 거기려나요]
저는 자바는 뭔가 빠진듯한 느낌때문에 별로더군요. 뭔가 10%이상 부족한 느낌 -_-
C++가 역시 진리......
웹 프로그래밍에서는 뭐가 객첸지 도무지 모르겠음..... OTL
뭐가 객첸지 햇갈리는 이유가 그놈의 IE 때문입니다. 메서드를 요상하게 만들어놔서 W3C 기준안을 무력하게 만들어놨어요 -_-.. 그래서 prototype을 쓰면 훨씬 깔끔하게 이용할수가 있다는 겁니다 [저도 그래서 자바스크립트 입문한지 얼마 되지도 않았는데 요정도까지 구현이 되더라고요.. 신기신기 =_=a]
좋은 팁감사합니다 퍼가요~^^
워우 옆에.. 페이트? 맞나..ㅎㅎ
부족한 정보 도움되셨다면 저야 감사할 따름이죠 ^^;
/ 댓글창에 페이트 맞아요.. 만은, 아무것도 없이 비우기에는 그냥 왠지 허전해서 넣긴 한건데 (...)
var objs = document.getElementsByTagName('div');
for(var i = 0 ; i < objs.length ; i++)
{
if(objs[i].className=='imageblock')
objs[i].innerHTML = '내가 접수한다';
}
이것도 몇줄 안되는데... ㅎㅎ