JQuery 생활코딩 - jQuery saenghwalkoding

2013-02-01 10:06:12 | 공개

목차 Show

이런 분들에게 특히 도움이 됩니다
먼저 공부하셔야 할 것들입니다
라이브러리
jQuery의 사용
라이브러리란?(library)
Hello world - 첫번째 jQuery
POST 방식
JSON 처리

jQuery란

jQuery는 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리 입니다.

라이브러리란 자주 사용되는 로직들을 재활용,유통 가능하도록 만든 로직들의 묶음을 의미합니다.
자바스크립트의 세계에는 많은 라이브러리들이 있습니다.
prototype, jQuery, YUI 등등
구글트랜드로 검색을 해보니 현재는 jQuery가 가장 많은 사용자를 가지고 있는 것 같습니다.
jQuery를 이용하면 순수한 자바스크립트로 코딩하는 것 보다 10배 이상 생산성을 높일 수 있습니다.

또 jQuery는 파생된 라이브러리들을 가지고 있는데요.
jQuery UI는 jQuery기반의 GUI 라이브러리입니다.
이것을 이용해서 윈도우 에플리케이션과 같은 기능성의 UI를 만들 수 있습니다.

최근에는 jQuery Mobile라는 이름의 모바일 라이브러리를 출시해서
모바일용 웹에플리케이션을 만드는데도 많은 도움을 주고 있습니다.

이런 분들에게 특히 도움이 됩니다

프로그래머
웹디자이너

먼저 공부하셔야 할 것들입니다

HTML
CSS
javascript

라이브러리

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery의 효용은 후속 수업을 통해서 살펴보자.

jQuery의 사용

jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 아래는 jQuery를 로드하는 방법이다.

<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
	jQuery( document ).ready(function( $ ) {
	  $('body').prepend('<h2>Hello world</h2>');
	});
	</script>
</body>
</html>

결과는 Body 태그 아래에 <h2>Hello world</h2> 코드가 만들어진다.

아래와 같이 jQuery( document ).ready(function( $ ) {}로 감싸는 것이 이상적이다.

jQuery( document ).ready(function( $ ) {
  $('body').prepend('<h2>Hello world</h2>');
});

하지만 필자는 코드의 양을 줄이기 위해서 그냥 예제 코드만 작성하겠다.

$('body').prepend('<h2>Hello world</h2>');

참조

jQuery 홈페이지

2011-06-29 08:44:37

라이브러리란?(library)

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들

jQuery란?

엘리먼트를 선택하는 강력한 방법과
선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
자바스크립트 라이브러리

Hello world - 첫번째 jQuery

사용방법

직접 서비스 하는 경우
1. http://jquery.org 에서 jquery 소스코드를 다운로드 한다.
2. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.
구글의 자바스크립트 라이브러리를 사용하는 경우
1. http://code.google.com/intl/ko-KR/apis/libraries/devguide.html#jquery

<html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>

jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중의 하나가 크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것이다. 뿐만 아니라 여러가지 편리한 기능들을 제공한다. 이번 시간에는 jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자.

jQuery는 Ajax와 관련해서 많은 API를 제공한다.

http://api.jquery.com/category/ajax/

그 중에서 가장 중요한 API는 $.ajax이다.

$.ajax

http://api.jquery.com/jQuery.ajax/

$.ajax의 문법은 아래와 같다.

jQuery.ajax( [settings ] )

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 열거해보면 아래와 같다.

data
서버로 데이터를 전송할 때 이 옵션을 사용한다.
dataType
서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
success
성공했을 때 호출할 콜백을 지정한다.
Function( PlainObject data, String textStatus, jqXHR jqXHR )
type
데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.

위의 내용을 바탕으로 Ajax 통신을 해보자. 다음 예제는 Ajax 수업의 예제를 JQuery화한 것이다.

time.php

<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>

demo1.html

<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#execute').click(function(){
		$.ajax({
			url:'./time.php',
			success:function(data){
				$('#time').append(data);
			}
		})
	})
</script>

XMLHttpRequest에 비해서 코드가 훨씬 간결해졌다.

POST 방식

POST 방식으로 통신을 할 때는 아래와 같이 처리한다. 다음 예제는 Ajax 수업의 예제를 JQuery화한 것이다.

time2.php

<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>

demo2.html

<p>time : <span id="time"></span></p>
<form>
	<select name="timezone">
		<option value="Asia/Seoul">asia/seoul</option>
		<option value="America/New_York">America/New_York</option>
	</select>
	<select name="format">
		<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
		<option value="Y-m-d">Y-m-d</option>
	</select>
</form>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#execute').click(function(){
		$.ajax({
			url:'./time2.php',
			type:'post',
			data:$('form').serialize(),
			success:function(data){
				$('#time').text(data);
			}
		})
	})
</script>

아래 코드는 form 태그의 정보를 값의이름=값의내용&값 의 형식으로 바꿔준다.

data:$('form').serialize(),

JSON 처리

$.ajax를 이용해서 JSON을 처리하는 방법을 알아보자.

time3.php

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo json_encode($timezones);
?>

demo3.html

<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$('#execute').click(function(){
		$.ajax({
			url:'./time3.php',
			dataType:'json',
			success:function(data){
				var str = '';
				for(var name in data){
					str += '<li>'+data[name]+'</li>';
				}
				$('#timezones').html('<ul>'+str+'</ul>');
			}
		})
	})
</script>