언어/javascript (19) 썸네일형 리스트형 Ajax A> Ajax 란 Asynchronous Javascript And XML xml을 이용하여 비동기로 통신을 처리하기 위한 기술이다. XMLHttpRequest(줄여서 XHR) 객체로 구현한다. 자바스크립트를 이용한 비동기 통신을 위한 기술이라 생각하자 A-A>사용하는 이유? 웹페이지의 속도가 빨라진다. 서버에서 완료가 다 되지 않아도 처리가 가능하다. 데이터만 가지고 오면 되므로 코드의 양도 줄어든다. 비동기 통신으로 UI를 좋게 할 수 있다. A-B> 단점 히스토리 관리가 안된다. 연속적인 데이터 통신은 서버에 부담을 준다. 디버깅이 잘 안된다. CORS 문제도 있다. B>동기, 비동기 방식 통신 동기 동기 통신 환경에서는 송 수신측은 데이터를 전달받을 때 , 데이터를 전달받을 준비를 상시 하고 있어.. jQuery 10 - jQuery 모바일 A>jQuery moblie 모바일에서 보여지는 웹 페이지를 마치 휴대폰 앱 처럼 보여주는 jQuery 기반의 라이브러리 1. 앱의 종류 -- 네이티브 앱 : = 안드로이드 앱(apk 파일들) -- 웹 앱 : = 웹 기반의 어플리케이션 -- 하이브리드 앱 : =웹 + 네이티브 --폰 갭 : 잘 사용하진 않지만, 하이브리드 앱 만드는 툴 2.cdn --min 의 의미는 minimize == 압축했다는 뜻 3.data-role -- 보여줄 페이지를 설정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 jQuery Mobile 첫 번째 페이지 ! 두 번째 페이지로 전환하기 ! copyright 2012 syj jQ.. jQuery 9 -- 유저 인터페이스(UI) A>날짜에 대한 UI http://jqueryui.com/demos/datepicker 에서 얻을 수 있다. B> jQuery UI는 플러그인 패턴을 기반으로 구축되어 있다. http://jqueryui.com/download에 가서 jquery-ui-1.8.16.zip 파일을 다운 받는다. 압축을 푼 후 jquery-ui-1.8.16.custom\js\jquery-ui-1.8.16.custom.min.js 파일을 js 폴더에 복사한다. 스타일시트를 적용 받으려면 jquery-ui-1.8.15.custom\css 폴더도 복사해 둔다 C> 드래그 앤 드롭 기능 구현 1 2 3 4 5 6 7 8 $("#draggable").draggable({opacity:"0.3"}); $("#droppable").dro.. jQuery8 --플러그 인 (plug in) A> 플러그 인이란 jQuery 자체를 확장해서 사용하기 위한 jQuery 라이브러리의 형태 speckyboy.com/free-jquery-plugins/ 50 Most Useful jQuery Plugins for Frontend Development As jQuery is extendable, there are many plugins freely available for almost every functionality you can possibly think of. We highlight the top 50 for you. speckyboy.com jQuery7 - 유틸리티(utility) A> 컬렉션 처리 메서드 1.$.each $.each(object, callback(indexInArray, valueOfElement) 2.$.grep $.grep( array, function(elementOfArray, indexInArray) [, invert] ) 3.$.makeArray() $.makeArray( obj ) --반복 구조를 갖은 배열 형태의 객체를 Array 객체로 변형한다. 4. $.inArray() -- $.inArray( value, array [, fromIndex] ) -- 배열에 value가 몇 번째 index에 존재하는지 알려준다. -- index는 0부터 시작하고 value가 존재 하지 않을 경우에는 -1를 리턴한다. 5. $.map() -- $.map( arra.. jQuery6 --이벤트(event) A> bind('이벤트', 기능) 형태1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //1. 객체를 만들고 그 안에 이벤트: 기능 형태로 bind $(function(){ $('img').bind({ mouseout : function(){ $("img").attr("src", "../images/but1.gif"); }, mouseover : function(){ $("img").attr("src", "../images/but2.gif"); }, click : function(){ alert("클릭"); } }); }); //2 click 이벤트와 function(event)를 바인딩 $(function(){ $('img').bind('click',.. jQuery5 --이펙트(effect) A> hide() : 숨긴다. hide(속도, 기능) : 속도 만큼의 속도로 숨겨짐 show() : 보이게 한다. show(속도,기능) :속도만큼의 속도로 보여줌, B> fadeIn(속도) : 서서히 보이게 한다. fadeOut(속도) : 서서히 없어지게 한다. fadeToggle(속도) : 안보이면 보이게, 보이면 안보이게 한다. 서서히 fadeTo( 속도,투명도): 투명도까지 변화시킨다. C> slideDown(속도): 슬라이드 되어 내려간다. slidUp(속도): 슬라이드 되어 올라간다. slideToggle(속도) : 슬라이드 되 있으면 올리고, 올려져 있으면 내린다. D> animate({방향: 거리}) -- 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .. jQuery4 --DOM 조작하기 A> append('내용'[,내용]) --선택한 엘리먼트의 마지막에 자식 엘리먼트로 추가 $(내용).appendTo('대상(선택자 혹은 태그)') --선택한 엘리먼트를 선택한 위치에 자식 엘리먼트로 추가 B> prepend(새로운 엘리먼트) --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가 $(내용).prependTo(' 대상(선택자 혹은 태그) ') --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가 C> $(내용).insertafter( 대상 ) --대상 뒷 부분에 요소를 삽입 한다. $(대상).after($(내용)) -- 대상 뒷 부분에 요소를 삽입 한다. D> $(내용).insertbefore( 대상 ) -- 특정 대상 앞부분에 요소 삽입 $(대상).befor.. 이전 1 2 3 다음