가카리의 공부방

jQuery.ajax (options) HTTP 통신에서 페이지를로드합니다. 이 함수는 jQuery의 AJAX 통신의 기본 부분에서 실제로 $. get및 $. post 같은 함수를 사용하는 것이 쉽게 구현할 수 있습니다. 그러나 이러한 추상화된 함수는 구현의 용이성과 교환에 오류시 콜백과 같은 복잡한 기능을 잃고 있습니다. 그런 처리를 구현하려면, 역시 핵심이다이 함수를 사용해야합니다. $. ajax 함수는 반환값으로 XMLHttpRequest 객체를 반환합니다. 대부분의 경우이 개체를 직접 조작하는 것은 없다고 생각되지만, 예를 들어 던져 버린 요청을 중단하는 경우 등, 필요하면 이용하십시오. 이 함수는 인수를 하나만 취하지만, 실제로는 해시에서 키 - 값 조합은 많은 옵션을받습니다. 다음에 그 목록을..

클라이언트 소스(브라우저) 1 2 3 4 5 6 7 8 9 $.ajax({ url : "192.168.48.123/api/client", type : "POST", cache : false, dataType:"json", success: function(data) { console.log(data); }, }); 오류메세지 XMLHttpRequest cannot load http://192.168.48.123/api/client. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '192.168.48.456' is therefore not allowed access. 해결방법(서버 Node.js 소스 수..

If you are using the bodyParser middleware for handling forms, you must be getting this warning message in your Express app. 만약 bodyParser 미들웨어를 사용하면 다음의 경고 메시지를 받는다. connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 Why this warning and how do you resolve it? 이 경고 메시지를 없..

경고 : 2008년도 글입니다. 시대가 많이 달라졌어요. OKJSP에 자주 가서 요즘 자바 개발자들이 어떻게 살아가나를 보는 편인데, 아주 많이 반복적으로 올라오는 질문이 "대체 뭘 공부해야 하나요? 프레임워크는 Spring을 해야 할까요? iBATIS를 해야 할까요?" 하는 식의 질문들이다(이 질문은 사실 말이 안된다. 왜 그런지 읽다보면 나온다). Java는 웹 관련 프레임워크들이 너무 다양하고, Ruby나 Python 같은 경우에는 RubyOnRails나 Django 처럼 하나의 프레임워크 안에 기능별 프레임워크들도 모두 다 All in one 형태로 들어 있어서 혼란을 주지 않는 반면, Java는 각 영역별로 프레임워크가 모두 다르고, 또한 각 영역별로 존재하는 프레임워크들의 종류도 많아서 초보 ..

라인같은 사이트를 보면 다음과 같은 이미지 슬라이더가 있습니다. 흰색 버튼을 누르면 화면이 전환됩니다. 이러한 기능을 이번에 구현해봅시다. 화면 구성을 먼저 html의 div 태그로 나누게 되는데 1. slider_panel : 실제 이미지가 들어가는 곳 2. slider_text_panel : 텍스트가 들어가는 곳 3. control_panel : 버튼이 들어가서 클릭시 이미지가 슬라이드됨. 위와같이 div태그로 화면을 구성하였습니다. 소스중에서 css에서 left 속성을 –300으로 보내는 것이 있는데 –300이면 화면 밖이므로 즉, 화면 밖으로 보내서 실제 유저의 화면에는 안보이게 하는 것입니다. 여기서 가장 주의해야 할 점은 제일 상위 css클래스인 animation_canvas(캔버스)는 ove..

jquery UI Effect 플러그인을 다운 http://jqueryui.com 에서 download에서 받을 수 있습니다. 기본적으로 addClass메소드로 애니메이션을 추가하고 removeClass메소드로 애니메이션을 삭제 할 수 있습니다. 이를 사용하기 위해서는 과 이부분을 추가해줘야 플러그인을 사용할 수 있습니다. 소스 DOCTYPE html> .reverse{ color: white; background-color: black; } $(document).ready(function(){ $('div').hover(function(){ $(this).addClass('reverse', 1000); }, function(){ $(this).removeClass('reverse', 1000); });..

애니메이션를 지연하고 싶다면 delay 메소드를 이용하면 됩니다. 사용 방법은 소스를 보시면 바로 알 수 있습니다.(첫번째 파라미터가 delay 되는 시간 ms단위) 아래 소스중 each 메소드는 요소만큼 반복하는 메소드입니다. 각 인덱스는 index 파라미터에 의해서 알수있구요. 소스 DOCTYPE html> div{ width: 100px; height: 100px; background-color: orange; position: relative; } $(document).ready(function(){ $('div').each(function (index){ //(index * 500)초 후 animate() 메서드를 실행합니다. $(this).delay(index * 500).animate({ l..

stop 메소드는 효과 및 애니메이션을 정지하는 메소드입니다. 그리고 다음 2가지 파라미터를 가집니다. clearQueue와 goToEnd인데 첫 번째 파라미터를 true로 설정하면 clearQueue 메소드를 실행하는 것과 같은 효과를 냅니다. 두 번째 파라미터 인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춥니다. 소스코드 DOCTYPE html> div{ width: 100px; height: 100px; background-color: orange; position: relative; } $(document).ready(function(){ //이벤트를 연결합니다. $('button').click(function(){ //변수 선언 var html =..

애니메이션 큐에 대해서 알아봅시다. jquery 효과는 먼저 실행된 순서대로 실행하게됩니다. 다음 소스를 보고 어떤 애니메이션부터 실행될지 예상해봅시다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; position: relative; } $(document).ready(function(){ //클릭시 animate 메소드를 체이닝으로 연결했습니다. //큐에 들어가서 차례로 실행이 됩니다. $('div').click(function(){ $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' },..

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드 를 사용해 동적으로 애니메이션을 적용하는 예제입니다. 간단하므로 소스코드를 바로 보시면 이해가 되실겁니다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; } $(document).ready(function (){ $('div').click(function(){ //변수를 선언합니다. var width = $(this).css('width'); var height = $(this).css('height'); //animate 메소드를 사용합니다. //즉 클릭시 다음 animate 메소드 효과가 적용됩니다. $(this).animate({ ..