슬기로운 개발자 생활

기타 유틸리티 메소드jQuery는 타입 검사 메소드뿐만 아니라 편리한 기능을 제공하는 다수의 유틸리티 메소드를 제공한다.$.each() 메소드$.each() 메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)이다.length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행한다. 객체의 경우에는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행한다.다음 예제는 $.each() 메소드에 배열을 인수로 전달하여, 각 배열 요소를 출력하는 예제이다.var arr = ["a", "b", "c"]; $.each(arr, function(index, value) { $("#text").append("index=" ..

유틸리티 메소드jQuery는 프로그래밍을 하는 데 도움이 되는 다수의 유틸리티 메소드를 제공한다.타입 검사 메소드jQuery는 인수로 전달받은 값의 타입을 손쉽게 확인해 주는 다음과 같은 메소드를 제공한다.메소드설명$.type()전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공함.$.isArray()전달받은 값이 배열인지 아닌지를 검사함.$.isFunction()전달받은 값이 자바스크립트 함수 객체인지 아닌지를 검사함.$.isNumeric()전달받은 값이 자바스크립트 Number 객체인지 아닌지를 검사함.$.isEmptyObject()전달받은 값이 비어있는 객체(열거할 수 있는 프로퍼티를 가지고 있지 않은 객체)인지 아닌지를 검사함.$.isPlainObject()전달받은..

Ajax와 Form 요소Ajax에서는 서버와의 비동기식 통신을 위해 form 요소를 통해 입력받은 데이터를 직렬화(serialization)하여 전송한다.이때 직렬화(serialization)란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는 것을 의미한다. 이렇게 함으로써 form 요소를 통해 입력받은 데이터를 한 번에 서버로 보낼 수 있게 된다.직렬화(serialization)jQuery에서는 HTML form 요소를 통해 입력된 데이터의 직렬화 작업을 매우 간단하게 수행할 수 있다. .serialize() 메소드와 .serializeArray() 메소드를 이용하여 손쉽게 데이터를 직렬화할 수 있다. .serialize() 메소드는 HTML form 요소를 통해 입력된 데이터를 쿼리 문자열로 변환..

Ajax 메소드메소드설명$.ajax()비동기식 Ajax를 이용하여 HTTP 요청을 전송함.$.get()전달받은 주소로 GET 방식의 HTTP 요청을 전송함.$.post()전달받은 주소로 POST 방식의 HTTP 요청을 전송함.$.getScript()웹 페이지에 스크립트를 추가함.$.getJSON()전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음..load()서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.$.ajax() 메소드jQuery는 Ajax와 관련된 다양하고 편리한 많은 메소드를 제공한다.그중에서도 $.ajax() 메소드는 모든 jQuery Ajax 메소드의 핵심이 되는 통합적인 메소드이다 . $.ajax() 메소드는 HTTP..

HTTP 요청 메소드(Method)클라이언트인 브라우저가 서버에 HTTP 요청을 보낼 때는 다음 메소드 중 하나를 사용한다.GET 메소드POST 메소드PUT 메소드DELETE 메소드이외에 HEAD, OPTIONS, TRACE, CONNECT가 있고, 주로 사용하는 것은 위에 4가지 이다. 특히, GET, POST가 2가지는 제일 많이 사용된다.GET 메소드GET 메소드은 주소에 데이터(data)를 추가하여 전달하는 방식이다.GET 메소드의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장된다. 또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있다. 따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋..

jQuery를 사용하면 Ajax를 손쉽게 개발할 수 있다. Ajax란?Ajax란 Asynchronous JavaScript and XML을 의미한다. Ajax는 프로그램 언어가 아니다. Ajax는 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시 및 데이터를 로딩해 준다.아래 예제는 jQuery에서 제공하는 .load() 메소드를 이용하여 데이터를 로딩하고 있다.$("#btnLoad").on("click", function() { $("#text").load("/rest/1/pages/244"); }); 코드 실행A..

jQuery.fx 객체jQuery의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있다.프로퍼티설명jQeury.fx.speeds밀리초에 해당하는 "slow", "fast" 등의 값을 가지고 이펙트 효과의 속도를 나타낸다.jQeury.fx.interval이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타낸다.jQeury.fx.off모든 이펙트 효과를 사용할 수 없도록 비활성화시킨다.jQuery.fx.speeds 프로퍼티jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타낸다.jQuery에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같다.프로퍼티 값밀리초(mili..

이펙트 효과의 제어jQuery에서는 다음 메소드를 사용하여 사용자가 직접 이펙트 효과를 제어할 수 있다.메소드설명.delay()실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다..stop()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다..finish()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.이펙트 효과의 지연 시간 설정.delay() 메소드는 실행 중인 큐(Queue) 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.다음 예제는 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제이다.아래와 같이 HTML 요소가 있을 ..