jQuery 연습장 jQueryPad jsFiddle 활용하기

jQuery 연습장 jQueryPad jsFiddle 활용하기

jQuery 연습장 하나쯤 있으면 좋겠다고 생각하신분 있을겁니다. 그런 용도로 사용되는 프로그램과 사이트를 하나 소개해드리죠. jQueryPad 와 jsFiddle 인데요. 하나는 웹에서 동작하는 jQuery 연습장이고 또하나는 프로그램으로 동작합니다. 각각 장단점이 좀 있어서 따로 설명드리죠. 물론 편한것으로 사용하시면 됩니다.

참고로 티스토리에서도 그리고 사이트에서도 jQuery는 참 많이 사용하죠. 물론 그냥 자바스크립트이긴 하지만 너무 편리하게 만들어둔터라 책까지 따로 있고 메뉴얼도 있으니까요. jquery.com 사이트에 가면 참 많은 예시들이 있죠. 잘 만들면 정말 동적인 사이트를 만들수도 있구요.

이 프로그램은 jQueryPad 입니다.

http://www.paulstovell.com/jquerypad

위 링크를 누르고 들어가서 다운로드를 할 수 있습니다.

왼쪽에는 구조를 넣고 오른쪽에는 jquery를 넣어서 실행하는 구조 입니다. Run을 누르면 아래에 바로 결과를 보여주며, 크롬, 파이어폭스, IE로 브라우저로 직접 출력할 수 도 있습니다.

jsFiddle 입니다.

http://jsfiddle.net/r7MgY/

위 사이트에 직접 접속 후 바로 사용하면 됩니다. 왼쪽에 메뉴에서 jQuery의 버전도 선택이 가능하며 구조, 스타일 , 코딩이 모두 분리가 되어있어 좀 더 체계적으로 테스트가 가능합니다. 예시로 들어가 있는 것중에 쓸만한것들도 있으니 바로 수정하여 테스트를 해볼 수 있습니다.

개인적으로는 이게 더 맘에 드네요.

jQuery로 이미지 갤러리를 돌려본 것입니다. 예시로 있는것인데 잘 돌아가네요. 제이쿼리 연습장이 필요한 분들은 유용하게 사용하세요.