1. jQuery UI 소개

jQuery UI는 jQuery를 이용해서 웹에서 필요한 동적인 움직임들을 구현하기 쉽게 만들어놓은 소스 창고와도 같습니다. 인터넷에서 단순하지만 동적으로 보이는 동작들은 실제로 구현하기에 굉장히 많은 노력이 필요합니다. 그러나 jQuery UI를 사용한다면 여러가지 동적인 기능들을 쉽게 쓸 수 있습니다. 부트스트랩과도 비슷한 역할입니다.

jQuery UI : https://jqueryui.com/

에서 확인할 수 있습니다. jQuery 처럼 다운받아서 사용할 수도 있고 CDN으로 사용할 수도 있습니다.

홈페이지에 들어가시면 종류별로 상세하게 설명되어 있습니다. 전 몇 가지만 살펴보도록 하겠습니다.


2. jQuery UI 예제

    • 아코디언 예제

<script>
  $( function() {
    $( "#accord" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accord">
  <h3>1번</h3>
  <div>
    <p>
1번 섹션입니다.
    </p>
  </div>
  <h3>2번</h3>
  <div>
    <p>
2번 섹션입니다.
    </p>
  </div>
  <h3>3번</h3>
  <div>
    <p>
3번 섹션입니다 
   </p>
    <ul>
      <li>아이템1</li>
      <li>아이템2</li>
    </ul>
  </div>
</div>
 
 
</body>
cs


조금 길지만 아코디언은 클릭하면 악기 아코디언처럼 늘어났다 줄어드는 동작을 말합니다. 


그 다음은 jQuery로 동작할 수 있는 여러가지 effect에 대한 것입니다.


    • addClass와 removeClass

클래스를 더하거나 뺄 수 있습니다.


  $( function() {
    $( "#btn" ).on( "click", function() {
      $( "#target" ).addClass( "got-class", 3000, callback );
    });
 
    function callback() {
      setTimeout(function() {
        $( "#target" ).removeClass( "got-class" );
      }, 3000 );
    }
  } );
cs


위 코드는 id값이 btn인 요소를 클릭하면 id값이 target인 요소에 got-class라는 클래스를 더하고 3초 후에 got-class라는 클래스를 제거하는 코드입니다. addClass의 두 번째 인자로 시간값을 지정해 줄 수 있습니다.


    • color Animation

색깔 애니메이션도 jQueryUI를 이용해 할 수 있습니다.


  $( function() {
    var value_save = true;
    $( "#btn" ).on( "click", function() {
      if ( value_save ) {
        $( "#target" ).animate({
          backgroundColor: "#aa0000",
        }, 2000 );
      } else {
        $( "#btn" ).animate({
          backgroundColor: "#fffeee",
        }, 3000 );
      }
      value_save = !value_save;
    });
  } );
cs


#btn을 누르면 #target 에 animate 함수가 호출됩니다. 이 함수는 css 요소를 변경시킬 수 있습니다. 실제로 실행해보시면 #target의 css 요소가 변경됨을 알 수 있습니다. 전 backgroundColor 만을 변경시켰습니다. 그러나 너무 빠른 변경을 피하기 위해 시간 인자를 2000과 3000으로 주어서 그 시간동안 변경되게 했습니다. 마지막에 value_save 요소를 true와 false로 값을 다르게 함으로써 같은 애니메이션의 반복을 피합니다.


    • toggleClass

말 그대로 클래스가 있다면 없애고 없다면 부여하는 함수입니다. 소스코드는 다음과 같습니다.

  $( function() {
    $( "#btn" ).on( "click", function() {
      $( "#target" ).toggleClass( "got-class", 2000 );
    });
  } );
cs


#btn을 누르면 #target의 클래스가 변합니다. 만약 'got-class' 클래스가 있다면 'got-class' 클래스가 제거되고 'got-class' 클래스가 없다면 'got-class' 클래스가 부여됩니다.



저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery] ajax 통신 예제  (0) 2018.02.11
[jQuery] jQuery 설치  (0) 2018.02.11

1. ajax 서론

ajax는 Asynchronous JavaScript and XML의 줄임말로 비동기통신을 의미합니다. 

ajax Wikipedia : https://ko.wikipedia.org/wiki/Ajax


예를 들어 설명하겠습니다. 무언가를 form에서 post요청으로 서버에 보내는 작업을 생각해 보겠습니다. ajax가 없다면 post요청 후에 서버로부터 데이터를 받아 브라우저의 화면이나 상태가 변할 것입니다. 이렇게 되면 최근 인터넷에서 좋아요 버튼을 누르더라도 화면이 변경되거나 필요하지 않은 새로고침 효과까지 사용자가 경험하게 됩니다. 하지만 많은 인터넷 페이지에서 그런 경우가 발생한다면 사람들이 많이 실망할 것입니다. 


이런 경우 ajax를 사용하면 다른 브라우저 구성요소의 변동 없이 서버와 통신할 수 있습니다. 좋아요 버튼을 누르더라도 누른 버튼만 변경될 뿐 브라우저 전체의 변동은 없게 되는 것입니다. 물론 iframe등의 방법을 통해서도 이런 동작을 가능하게 할 순 있습니다. 하지만 ajax가 주는 안정성과 편리성은 따라갈 수 없습니다.


ajax통신을 하기 위해선 javascript만으로도 가능할 것입니다. 그러나 jQuery는 ajax통신을 획기적으로 편하게 해줍니다.


2. ajax 예제

저는 jQuery를 이용한 ajax를 구현해 보겠습니다. 


$("#submitBtn").click(function () {
  var getText = $("#submitTextarea").val();
  $.ajax({
    url:"/someurl/",
    type:"post",
    data:{
      c : getText,
    },
    dataType:"json",
    cache : false,
    success : function (data) {
      $.each(data, function (index, value) {
        do something
      });
 
    }
  });
});
cs


위 코드는 id 값이 submitBtn 인 버튼을 클릭했을 시에 ajax 통신이 발생하도록 만든 코드입니다.

클릭이 발생하면 id 값이 submitTextarea인 Textarea로부터 값을 가져옵니다. val(); 은 jQuery에서 제공하는 값을 가져오는 함수입니다.

그 다음 ajax 통신이 발생합니다. $.ajax 이 부분입니다. jQuery는 이런식으로 ajax를 호출합니다. 그 후 인자별로 설명해보겠습니다.


1. 먼저 url입니다. url에는 현재 호스트 주소에 url에 전달된 값을 붙여 서버의 어떤 url 담당 부분과 통신하게 될지 결정합니다.

저같은 경우는 example.com/someurl/과 통신하게 될 것입니다.

2. 그 다음 type입니다. http 통신의 타입인 get, post 중 post를 사용한다고 생각하시면 됩니다.

3. data입니다. data는 request.POST에 dict 형식으로 전송됩니다. 서버에서 request body에서 데이터를 가져오게 하고 싶을 때 설정하시면 됩니다. 

4. dataType입니다. 서버로부터 받게 될 데이터의 타입을 결정합니다. json 말고도 html 타입을 사용할 수 있습니다.

5. cache는 통신후 캐시할지에 대한 여부입니다. false로 하겠습니다. true일 경우 다른 통신에 지장을 주기도 하는 것 같았습니다.

6. success입니다. 통신이 성공한 후 처리하게 되는 부분입니다. function 의 인자인 data는 서버로부터 받게 되는 데이터를 의미합니다. 물론 data_get 같이 이름을 변경해도 상관 없습니다.

7. $.each() 함수는 jQuery에서 json 같은 데이터를 다룰 때 유용하게 쓰입니다. for문 대용으로 편리하게 인덱스의 수만큼 작업을 하게 도와줍니다.


이상으로 ajax에 대해 알아보았습니다. 요즘같이 동적인 웹을 필요로 할 땐 ajax가 아주 유용하게 사용됩니다. 

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery UI] jQuery UI 소개 및 예제  (0) 2018.02.12
[jQuery] jQuery 설치  (0) 2018.02.11

1. jQuery 소개

jQuery는 javascript를 브라우저에서 편리하게 사용할 수 있게 도와줍니다. javascript는 그 자체로 브라우저안에서 역동적으로 동작하지만 jQuery를 이용하면 복잡한 코드를 매우 간편하게 이용할 수 있습니다.

jQuery : https://jquery.com/


2. jQuery 설치 또는 준비

jQuery는 cdn형태로도 이용할 수 있고 직접 파일을 다운받아 사용할 수도 있습니다. html 코드 내에서 동작하므로 html 코드 내에 jQuery 내용을 불러올 수 있는 링크를 작성하면 됩니다. 

jQuery Download : http://jquery.com/download/

여기선 jQuery를 파일 형태로 다운받을 수 있습니다.


jQuery CDN : https://code.jquery.com/

여기에 들어가면 여러가지 버전의 CDN이 제공됩니다. 만약 jQuery 1.12.4 버전을 CDN 형태로 이용하고자 한다면 다음을 html 파일 내에 작성합니다.

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
cs


이렇게 html 파일 안에 작성한다면 그 다음부턴 html파일에서 다음과 같이 사용할 수 있습니다.


<script>
 
    $(document).ready(function () {
 
        $('#btn').click(function () {
            var text = $('#textarea').val();
            $.ajax({
                url:'/someurl/',
                type:'post',
                dataType:'json',
                cache:false,
                data:{
                },
                success:function (data) {
                    console.log('success!')
                }
            });
        });
 
 
    });
</script>
cs


<script></script> 처럼 script 태그 안에서 얼마든지 이용할 수 있게 됩니다. 

<script>
    $(document).ready(function () {
    });
</script>
cs


이 부분은 문서의 로드가 완료되어 준비가 된다면 중괄호 안의 코드를 실행한다는 뜻입니다. 문서가 로드되지도 않았을 때 코드가 실행된다면 예기치 못한 오류를 발생할 수 있을 때 사용합니다. 반드시 사용해야만 하는 코드는 아닙니다.

console.log('success!') 이 코드는 javascript의 브라우저 콘솔에서 메시지를 출력하는 코드입니다. jQuery 코드와 javascript 코드는 자유롭게 연동되어 사용될 수 있습니다. 콘솔은 크롬의 경우 f12를 눌러 열리는 개발자 도구에서 콘솔 창을 의미합니다.


3. jQuery의 선택자

jQuery는 html의 id값이나 class값을 굉장히 편리하게 선택할 수 있게 도와줍니다.

다음과 같은 코드가 있다고 하겠습니다.

<div class="div_class" id="div_id">이건 div입니다.</div>
cs


이 코드의 div를 선택하기 위해 자바스크립트에선 getElementById 나 getElementByClass 를 사용해야 했습니다. 그러나 jQuery는 아주 쉽게 할 수 있도록 해줍니다.


$(".div_class")
$("#div_id")
cs


이 두가지 jQuery 선택자는 모두 저 div를 지칭합니다. javascript를 사용할 때보다 훨씬 더 단순하고 쉽게 선택할 수 있게 도와줍니다.

나머지 javasciprt의 코드들도 jQuery를 선택한 후에 사용할 수 있으니 매우 쉽고 편리할 것입니다. 

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery UI] jQuery UI 소개 및 예제  (0) 2018.02.12
[jQuery] ajax 통신 예제  (0) 2018.02.11

+ Recent posts

티스토리툴바