Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 03:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

jQuery 기본기 : JavaScript

written by Seok Kyun. Choi. 최석균


벼루고 벼루던 jQuery 대하여 포스팅하려고 한다. 주 내용은 실무에서 사용될만한 기능만 소개하려고 한다.
자바스크립트를 제대로 몰라도 되지만, 웹언어에 기본이며, html을 동적으로 구현시켜주는 강력한 클라이언트 스크립트 언어이다. 나중에라도 꼭 공부하지 않으면 안될 언어이다.
그리고 어떤 프레임워크를 쓰느냐?? 고민하시는 사람... 그냥 jQuery 쓰라고 권하고 싶다. 최신정보나 기술을 쉽게 득할 수 있는 것부터 하나하나 배우는 게 여러므로 빠르고 안정적일 것이다. 포럼도 가장 활발하지 않을 까 싶다. 서포터는 구글에서 하고있다.

라이센스는 GPL 이다. jQuery로 개발된 2차 생산물은 영리 및 비영리 목적으로 사용이 가능하다. 단 소스는 모두 오픈되어 전달하여야 한다. 그리고 GPL 혹은 MIT 라이센스를 부여하면, 제약조건에 위배되지 않는 다. ( 맞나요?? ㅡ.ㅡ;; 솔직히 법이란 참... 교묘하다는 것; )

jQuery 에 대한 개념적 이론은 생략한다.

++ jQuery 공식 사이트 : http://jquery.com/

1. 내려받기

우선 jQuery 접속하면, 2가지 버전이 있다. 개발자를 위한 소스와 웹서비스를 위한 압축된 소스. 당연히 개발자 소스를 받아야 한다. 상단메뉴 다운로드를 클릭하여, Uncompressed 다운로드하면 된다.
** 자세한 도움말은 Documentation 을 참고하면 매우 유용하다.

posted syaku blog


2. 준비하기

<html>
  <head>
    <!-- ① JS 로더 -->
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
      // ② jQuery 시작
      $(function() {

        // ③ 스크립트 작성 영역

      });
      
      // ④ 별칭 $ 를 사용하지 않을 때.
      if(jQuery) jQuery.noConflict();

      // ② jQuery 시작
      jQuery(function() {
        // ③ 스크립트 작성 영역
      });

    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>


① jQuery 를 호출한다.
② jQuery 를 준비한다. 자바스크립트의 단점중에 하나가 바로 html 소스가 모두 로딩되어야만 자바스크립트를 사용할 수 있었다. 그래서 html 소스 맨 하단에 자바스크립트를 삽입하여 사용하면 문제가 발생하지 않았다. 하지만 jQuery를 사용하면 이런 문제점이 해결된다.
③ 자바스크립트를 코딩하며는 영역이다.
④ $ 별칭은 프로토타입이나 진도와 같은 프레임워크와 충돌을 발생시킬 수도 있다. 보다 안정적인 작업을 위해 사용하지 않을 것을 권한다.

** 아래의 3가지는 모두 동일하다.
$(document).ready(function(){});
$(function() {});
jQuery(function() {});

http://syaku.tistory.com

  • yiabb at 2009.09.15 15:00 신고

    안녕하세요. 웹기획하다가 jquery 달력을 만나는데. 버그해결을 못해서 무례하나마 글 남깁니다. 1페이지에서 달력 2개 이상 띄울때 요일이 맘대로 되는 버그(일 수 토 월 화..) 어떻게 해결할까요?..

    • 샤쿠 syaku at 2009.09.15 15:59 신고

      질문만 보고 답하기는 어렵네요~~~

      한페이지에 2개 이상의 달력을 뛰운다는 거죠???
      jQuery('#id-name,#id-name2').datepicker({
      // 소스
      });
      이럼 2개를 한꺼번에 셋팅이돼죠~

      jquery-ui-i18n.js <-- 달력언어셋들이 있습니다. 한국어 요일표시가 정확한지 확인해보시구요.

      저도 jQuery-ui 로 개발하고 있지만 문제점은 없어서요;;; 답할 수 있게 도움이 될만한 소스나 화면을 봐야할 듯하네요~

  • yiabb at 2009.09.15 16:24 신고

    답변 감사합니다~ 그런데..

    Calendar.DAY_NAMES = new Array(
    '일', '월', '화', '수', '목', '금', '토'
    );

    $J('#date-input-1').calendar({ // ´달력
    triggerElement: '#date-input-1-trigger',
    firstDayOfWeek: '0'
    });
    $J('#date-input-2').calendar({ // ´달력
    triggerElement: '#date-input-2-trigger',
    firstDayOfWeek: '0'
    });
    $J('#date-input-3').calendar({ // ´달력
    triggerElement: '#date-input-3-trigger',
    firstDayOfWeek: '0'
    });

    이렇게 했는데요. 2번째 달력부터 요일이 변하네요..
    해결방법이 있을지..

    • 샤쿠 syaku at 2009.09.23 09:08 신고

      jQuery 플러그인인가요??? ui에서 제공하는 캘린더랑은 다르네요...

      전 ui 만 사용해서, 이건 사용안해봐서 잘 모르겠네요;;

      답변이 늦어서 지송해요 ^^;;

댓글 남기기
◀ PREV 1···1011121314 NEXT ▶