자바스크립트와 jQuery 라이브러리 응용

프로그래밍/Javascript

자바스크립트와 jQuery 라이브러리 응용

학습목표

- 자바스크립트의 타이머 함수를 알아봅니다.

- 자바스크립트와 jQuery 라이브러리의 이벤트를 활용하는 방법을 알아봅니다.

- jQuery 플러그인을 사용하는 방법을 알아봅니다.

- jQuery 라이브러리르 사용해 갤러리를 만드는 방법을 알아봅니다.

Preview

자바스크립트와 jQuery 라이브러리는 응용할 수 있는 분야가 많습니다. 이전 장에서는 기본적인 내용만 다루었다면 이 장에서는 실제 웹 페이지 개발에 바로 활용할 수 있는 것들을 살펴보겠습니다.

자바스크립트와 jQuery 라이브러리를 사용해 다음 웹 페이지를 만들 수 있습니다.

7장에서 CSS3를 어떻게 활용하는지 살펴본 것처럼 12장에서도 자바스크립트와 jQuery 라이브러리를 어떻게 활용할 수 있는지 응용 예제로 살펴보겠습니다. 이해가 되지 않는 부분이 있다면 9~11장에서 다룬 내용을 참고합니다.

응용 예제 12-1 입력 양식 자동 초점 설정

인터넷 웹 사이트의 회원가입 양식에서 주민등록번호를 입력할 때 앞자리르 입력하자마자 자동으로 뒷자리를 입력하는 칸으로 이동하는 것을 많이 보았었죠? 이는 첫 번째 입력 양식에 여섯 번째 글자를 입력하면 자동으로 두 번째 입력 양식에 초점이 맞추어지도록 자바스크립트를 사용했기 때문입니다. 이 기능은 다음 코드처럼 구현할 수 있습니다.

코드를 실행하면 주민등록번호를 입력할 수 있는 입력 양식이 나옵니다. 첫 번째 입력 칸을 선택하고 글자를 입력하다 보면 커서가 자동으로 두 번재 입력 칸으로 이동합니다. 또 두 번째 입력 칸에서 숫자를 지우다 보면 커서가 자동으로 첫 번째 입력 칸으로 넘어갑니다.

<코드 12-1> 입력 양식 자동 초점 설정

<!DOCTYPE html>

<html>

<head>

// 이벤트를 연결합니다.

window.onload - function () {

// 문서 객체를 선택합니다.

var input_1 = document.querySelectorAll('input')[0];

var input_2 = document.querySelectorAll('input')[1];

// input_1

input_1.onkeydown = function () {

// 글자 개수가 여섯 개 이상일 때

if (6 <= input_1.value.length) {

// input_2 문서 객체로 초점을 이동합니다.

input_2.focus();

}

};

// input_2

input_2.oinkeydown = function () {

// 이벤트 객체를 추출합니다.

var event = event ll window.event;

// 사용자의 입력이 '백 스페이스'이고 입력된 글자가 없을 때

if (event.keyCode == 8 && input_2.value.length == 0) {

input_1.focus();

}

};

</script>

</head>

<body>

</body>

</html>

회원가입ㅈ 양식은 물론 제품키 입력, 결재 정보 입력 페이지 등에서 흔히 볼 수 있는 형태입니다.

"이렇게 간단한 것을 만드는 데도 자바스크립트를 사용하네요?"

간단한 것을 만들 때는 간단한 자바스크립트 코드를 사용합니다.

NOTE_ keyCode 확인

[코드 12-1]에서 백 스페이스의 keycode 속성을 8과 비교했습니다. keyCode 속성은 [코드 12-2]를 실행해 확인할 수 있습니다. 알고 싶은 키를 누르면 경고창에 keyCode 값이 나타납니다.

<코드 12-2> keyCode 확인

window.onload = function () {

window.onkeydown = function (event) {

alert(event.keyCode);

};

응용 예제 12-2 프레임 애니메이션 만들기

자바스크립트의 타이머 함수를 사용하면 특정 시간마다 코드를 실행신킬 수 있습니다.

[표 12-1] 타이머 함수

함수	설명
setInterval(함수, 시간)	특정한 시간마다 함수 실행
settimeout(함수, 시간)	특정한 시간 후에 함수 실행
clearInterval(식별번호)	setInterval() 함수로 설정한 타이머 제거
clearTimeout(식별번호)	setTimeout() 함수로 설정한 타이머 제거

[표 12-1]의 타이머 함수 중 setInterval() 함수를 사용하면 다양한 기능을 구현할 수 있습니다. setInterval() 함수를 사용해 프레임 애니메이션을 간단하게 만들어 보겠습니다. 우선 폴더를 [그림 12-1]처럼 구성합니다.

이어서 다음 코드처럼 HTMLpage.html을 작성합니다. 코드를 실행하면 이미지가 1초에 20번 전환되며 사람이 달리는 애니메이션을 확인할 수 있습니다.

<코드 12-3> 프레임 애니메이션

<!DOCTYPE html>

<html>

<head>

window.onload = function () {

// 변수를 선언합니다.

var count = 0;

var image = document.getElementById('image');

var frames = [

'0.png', '1.png', '2.png', '3.png', '4.png',

'5.png', '6.png', '7.png', '8.png', '9.png',

'10.png', '11.png', '12.png', '13.png', '14.png',

];

// 타이머 반복을 시작합니다.

setInterval(function () {

image.src = frames[count % frames.length];

count = count + 1;

}, 1000 / 20);

};

</script>

</head>

<body>

</body>

</html>

setInterval() 함수는 이외에도 다양한 곳에사양됩니다. 포털 사이트 메인 페이지에서 [그림 12-2]처럼 실시간 검색어를 본 적이 있을 것입니다. 이러한 실시간 검색어는 일정 시간마다 서버에 데이터를 요청해서 사용자에게 보여주는 것입니다.

응용 예제 12-3 문서 객체 생성

순수하게 자바스크립트만 사용해 문서 객체를 생성하면 매우 복잡합니다. 하지만 jQuery 라이브러리를 사용하면 문서 객체를 쉽게 생성할 수 있습니다. 다음 코드처럼 jQuery 라이브러리를 사용해 문서 객체를 생성합니다.

<코드 12-4> 문서 객체 생성

<!DOCTYPE html>

<html>

<head>

</script>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 문서 객체를 생성합니다.

$('<h1>Create Document Object By jQuery</h1>')

});

</script>

</head>

<body>

</body>

</html>

이렇게 생성한 문서 객체는 [표 12-2]의 메소드를 사용해 화면에 추가합니다.

[표 12-2] jQuery 문서 객체 추가 메소드(1)

메소드	설명
$(객체),prependTo(대상)	객체를 대상의 앞부분에 추가
$(객체).appendTo(대상)	객체를 대상의 뒷부분에 추가
$(객체).beforeTo(대상)	객체를 대상의 앞쪽에 추가
$(객체).afterTo(대상)	객체를 대상의 뒤쪽에 추가

각 메소드를 사용해 생성한 태그를 원하는 위치에 추가합니다. prependTo() 메소드와 appendTo() 메소드는 대상의 내부에 추가되며, beforeTo() 메소드와 afterTo() 메소드는 대상의 외부에 추가된다는 것에 유의하세요.

우선 간단하게 appendTo() 메소드를 사용해 문서 객체를 body 태그에 추가해 보겠습니다. 생성된 문서 객체가 화면에 표시됩니다.

<코드 12-5> 문서 객체 추가(1)

<!DOCTYPE html>

<html>

<head>

</script>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 10회 반복합니다.

for (var i = 0; i < 10; i++) {

// 문서 객체를 생성합니다.

$('<h1>Create Document Object + ' + i + '</h1>').css({

backgroundColor: 'black',

color: 'red'

}).appendTo('body');

}

});

</script>

</head>

<body>

</body>

</html>

jquery 라이브러리에는 [표 12-2]의 추가 메소드 외에 [표 12-3]의 추가 메소드도 있습니다.

[표 12-3] jQuery 문서 객체 추가 메소드(2)

메소드	설명
$(대상).prepend(객체)	객체를 대상의 앞부분에 추가
$(대상).append(객체)	객체를 대상의 뒷부분에 추가
$(대상).before(객체)	객체를 대상의 앞쪽에 추가
$(대상).after(객체)	객체를 대상의 뒤쪽에 추가

[표 12-3]의 메소드는 [표 12-2]에서 살펴본 메소드와 전후 관계가 다릅니다. 사용하려면 다음 코드처럼 문서 객체를 추가해야 합니다.

<코드 12-6> 문서 객체 추가 (2)

// 이벤트를 연결합니다.

$(document).ready(function () {

// 10회 반복합니다.

for (var i = 0; i < 10; i++) {

// 문서 객체를 생성합니다.

var $dynamic = $('<h1>Create Document Object + ' + i + '</h1>')

.css({

backgroundColor: 'black',

color: 'red'

});

// 문서 객체를 추가합니다.

$('body').append($dynamic);

}

});

</script>

실행 결과는 [코드 12-5]와 같습니다. 참고로 [코드 12-6]에서는 $dynamic 형태의 변수를 사용했습니다. 일반적으로 jQuery 객체를 변수에 저장할 때는 변수 앞에 식별자 $를 붙여 사용합니다.

응용 예제 12-4 무한 스크롤 기능 구현

페이스북, 핀터레스트, 쿠팡 등 웹 사이트를 살펴보면 스크롤을 맨 아래쪽까지 내려도 무한 스크롤을 활용해 정보를 계속 제공합니다. 무한 스크롤은 사용자가 스크롤을 끝까지 내리면 자동으로 데이터를 추가해 스크롤이 끝나지 않게 만들어 주는 기능으로 현대 웹 사이트에서 다양하게 활용됩니다.

무한 스크롤은 스크롤 이벤트가 발생할 때 전체 문서의 높이가 스크롤 높이와 웹 브라우저 창의 높이를 더한 값과 같은지 조건을 확인합니다. 이 조건을 충족할 때만 데이터를 추가하는 단순한 코드를 갖습니다.

다음 코드는 위와 같은 변수를 사용해 무한 스크롤을 구현합니다.

<코드 12-7> 무한 스크롤

<!DOCTYPE html>

<html>

<head>

</script>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 문서 객체 추가 함수

var append Document = function () {

for (var i = 0; i < 20; i++) {

// 문서 객체를 생성합니다.

$('<h1>Infinity Scroll</h1>').appendTo('body');

}

};

// 초기에 문서 객체를 추가합니다.

appendDocument();

// 이벤트를 연결합니다.

$(window).scroll(function () {

// 변수를 선언합니다.

var scrollHeight = $(window).scrollTop() + $(window).height();

var documentHeight = $(document).height();

// 검사합니다.

if (scrollHeight == documentHeight) {

appendDocument();

}

});

</script>

</head>

<body>

</body>

</html>

코드를 실행하고 스크롤을 내려 보세요. 스크롤이 끝에 도달하는 순간 문서 객체가 새롭게 추가 됩니다.

변수를 조금만 조작하면 끝에 도달하기 전에 데이터를 추가하는 기능도 만들 수 있습니다. 다양하게 활용할 수 있는 기능이므로 기억합니다. 단, 모바일 장치는 평균 60px에서 200px의 오차가 발생하므로 반드시 테스트하고 적용하세요.

응용 예제 12-5 LightBox 플러그인 사용

플러그인은 별도의 자바스크립트 파일로 jQuery에 기능을 추가합니다. jQuery 라이브러리는 사용자 수가 많고 플러그인을 만들기도 쉽습니다. 현재 jQuery 라이브러리에는 공식적으로 약 6000개의 플러그인이 있으며, 비공식 플러그인은 헤아릴 수 없을 정도로 많습니다. 참고로 플러그인을 공부할 때는 절대 외우려고 하지 마세요. 플러그인마다 사용 방법이 모두 다르므로 각 플러그인 웹 사이트를 참고해서 만들어야 합니다.

이번에는 라이트박스 기능과 관련된 플러그인을 사용해 보겠습니다. 라이트박스는 웹 페이지 내부에서 특정한 정보를 보여 주려고 배경은 어둡게 하고 정보는 밝게 보여 주는 플러그인으로 많은 웹 사이트에서 사용합니다.

라이트박스는 굉장히 유용한 기능이므로 수십 개의 플러그인이 널리 사용되고 있습니다. 이 책에서는 라이트박스 플러그인 중에서 가장 간단한 jQuery LightBox 플러그인을 사용해 보겠습니다.

jQuery Lightbox 플러그인(http://avioli.github.io/jquery-lightbox)

jQuery LightBox 플러그인의 웹 사이트에서 플러그인 압축 파일을 다운로드합니다. 파일의 압축을 해제하면 폴더가 구성됩니다.

여기서 CSS 폴더 내부의 CSS 파일과 images 폴더, js 폴더 내부의 슼느립트 파일, photos 폴더 내부의 이미지를 가져와 폴더를 구성합니다.

이것으로 jQuery Lightbox 플러그인을 사용할 준비가 모두 끝났습니다. jQuery LightBox 플러그인 웹 사이트에 적혀 있는대로 head 태그를 구성합니다.

<코드 12-8> jQuery LightBox 플러그인 설정

<head>

<title>LightBox</title>

</head>

jQuery 플러그인의 스크립트 파일은 모두 [코드 12-8]처럼 jQuery 라이브러리 파일을 추가한 후 입력해야 합니다.

이어서 [코드 12-9]처럼 body 태그를 구성하고 script 태그를 작성합니다. 이러한 사용 방법은 모두 jQuery LightBox 플러그인의 웹 사이트에서 확인할 수 있습니다.

<코드 12-9> jQuery LightBox 플러그인 사용

<!DOCTYPE html>

<html>

<head>

// 이벤트를 연결합니다.

$(document).ready(function () {

$('a.light').lightBox();

});

</script>

</head>

<body>

<a class="light" href="image1.jpg">LightBox</a>

<a class="light" href="image2.jpg">LightBox</a>

<a class="light" href="image3.jpg">LightBox</a>

</body>

</html>

모든 jQuery 플러그인은 사용 방법이 다 다르므로 일일이 외우려고 하지마세요. 플러그인의 웹 사이트에서 친절하게 사용 방법을 알려 줍니다. 영어를 몰라도 코드만 보고 쓸 수 있습니다.

NOTE_ 직접 라이트 박스를 만드는 것도 어렵지 않습니다. 별도의 공간을 만들어 화면의 중앙에 위치시키고 display 속성을 적당하게 조절해 문서 객체를 보여주면 됩니다. LightBox 플러그인의 실행 결과를 살펴보면서 직접 만들어 보는 것도 좋은 연습이 될 것입니다.

응용 예제 12-6 measonry 플러그인 사용

Masonry 플러그인은 핀터레스트처럼 타일형 웹 페이지를 만들 때 사용합니다.

Masonry 플러그인의 공식 사이트는 http://masonry.desandro.com/입니다. 공식 사이트에서 플러그인을 다운로드해서 HTML 페이지와 같은 폴더에 넣어 폴더를 구성합니다..

Masonry 플러그인 (http://masonry.desandro.com/)

이 책에서는 간단하게 Masonry 플러그인의 CDN을 사용하겠습니다. 다음 코드처럼 작성합니다.

<코드 12-10> 플러그인

<!DOCTYPE html>

<html>

<head>

<style>

* { margin: 0; padding: 0; }

.box {

background: black;

margin: 5px;

}

</style>

// 이벤트를 연결합니다.

$(document).ready(function () {

// 문서 객체를 생성합니다.

for (var i = 0; i < 100; i++) {

$('<div></div>.addClass('box').css({

width: 100,

height: Math.floor(Math.random() * 100) + 50

}).appendTo('body');

}

// Masonry 플러그인을 적용합니다.

$('body').masonry({

columWidth: 110

});

</script>

</head>

<body>

</body>

</html>

코드를 실행하면 검은색 사각형 모양의 타일이 웹 페이지를 빈틈없이 채웁니다. 실질적으로 Masonry 플러그인과 관련된 코드는 3행밖에 없습니다. 다른 부분은 쉽게 이해할 수 있을 것입니다. masonry 플러그인의 사용 방법도 역시 공식 사이트에 잘 나와 있습니다.

columnWidth 속성을 110px로 지정한 이유만 다루고 넘어가겠습니다. 현재 스타일시트에서는 .box 선택자의 margin 속성을 5px로 지정합니다. 그리고 script 내부에서 div 태그의 width 속성을 100px로 지정합니다. margin 속성은 사방에 적용되므로 '100 + (5 x 2)'px이 사각형의 너비입니다. 따라서 columnWidth 속성에 110px을 적용했습니다.

플러그인 부분의 설명을 너무 대충한다고 화를 내는 독자도 있을 것입니다. 하지만 플러그인을 잘 사용하는 방법은 책의 설명을 잘 읽는 것이 아니라 공식 사이트를 참고하는 능력을 기르는 것입니다. 공식 사이트에서 어떻게 사용하는지 직접 살펴보세요.(프로그래밍 실습이니까요!).

이 내용에서는 두 가지 플러그인만 다루었습니다. 수많은 플러그인이 있으므로 직접 찾아보기 바랍니다. 구글에서 검색하면 '유용한 jQuery 플러그인 50가지'와 같은 제목의 포스트가 많습니다.

응용 예제 12-7 jQuery 라이브러리로 갤러리 구현

이번 예제에서는 jQuery 라이브러리를 사용해 갤러리를 만들어 보겠습니다. 어떠한 것을 만드는지 실행 결과를 예측해 보세요.

1. HTML 페이지 만들기 다음 코드처럼 기본 HTML 페이지를 만듭니다. 코드를 분리해서 설명하려고 ready 이벤트를 2개로 나누었습니다.

<코드 12-11> 기본 HTML 페이지 생성

<!DOCTYPE html>

<html>

<head>

<style>

// 첫 번째 ready 이벤트

$(document).ready(function () {

});

// 두 번째 ready 이벤트

$(document).ready(function () {

});

</script>

</style>

</head>

<body>

</body>

</html>

2. body 태그 구성하기 body 태그 내부에 다음 코드를 작성합니다.

<코드 12-12> 태구 구성

<body>

<div data-role="slider" data-width="500" data-height="300"

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

<h1>Proin in urna turpis.</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

<h1>Duis malesuada lorem neque.</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

</body>

3. 갤러리 구분 색상 적용하기 각 div,item 태그를 구분하려고 다음 코드처럼 스타일을 적용합니다.

<코드 12-13> 갤러리 구분 색상 적용

<style>

div.item:nth-child(1) { background: blueviolet; }

div.item:nth-child(2) { background: pink; }

div.item:nth-child(3) { background-color: burlywood; }

</style>

4. 갤러리 스타일 적용하기 다음 코드처럼 첫 번째 ready 이벤트에 스타일 적용 코드를 작성합니다. 태그에서 data-width 속성과 data-height 속성, div.item 태그의 개수를 추출해 스타일을 적용합니다.

<코드 12-14> 갤러리 스타일 적용

// 첫 번째 ready 이벤트

$(document).ready(function () {

// 변수를 선언합니다.

var width = $('[data-role="slider"]').attr('data-width');

var height = $('[data-role="slider"]').attr('data-height');

var count = $('[data-role="slider"] div.item').length;

// 스타일을 적용합니다.

$('[data-role="slider"]').css({

position: 'relative',

overflow: 'hidden',

width: width,

height: height

}).find('.container').css({

position: 'absolute',

width: count * width,

overflow: 'hidden'

}).find(',item').css({

width: width,

height: height,

float: 'left'

});

5. 갤러리 이벤트 연결하기 두 번째 ready 이벤트에는 다음 코드처럼 작서앟ㅂ니다. 현재 위치를 저장할 변수 currentPage를 생성하고, 버튼에 click 이벤트를 적용합니다. changePage() 함수는 div.container 태그를 이동시켜 줍니다.

<코드 12-15> 갤러리 이벤트 연결

// 두 번째 ready 이벤트

$(document).ready(function () {

// 변수를 선언합니다.

var currentPage = 0;

var changePage = function () {

$('[data-role="slider"] > .container').animate({

left: -currentPage * width

}, 500);

};

// 이벤트를 연결합니다.

$('#left-button').click(function () { });

$(#right-button'),click(function () [ });

});

6. 갤러리 클릭 이벤트 구현하기 버튼의 click 이벤트 리스너에 다음 코드처럼 작성합니다. 맨 왼쪽과 오른쪽(시작과 끝)에서는 페이지를 이동하지 않게 만들어 줍니다.

<코드 12-16> 갤러리 클릭 이벤트 구현

// 이벤트를 연결합니다.

$('#left-button').click(function () {

if (currentPage > 0) {

// 왼쪽으로 이동

currentPage = currentPage - 1;

changePage();

}

});

$('#right-button').click(function () {

if (currentpage < count - 1) {

// 오른쪽으로 이동

currentPage = currentPage + 1;

changePage();

}

});

7 실행하기 코드를 실행한 후 버튼을 클릭하면 갤러리가 자연스럽게 움직입니다.

8. 전체 코드 확인하기 순수하게 자바스크립트만 사용해서 구현하기란 만만치 않습니다. 하지만 jQuery 라이브러리를 사용하면 이러한 기능도 손쉽게 구현할 수 있습니다. 다음 코드는 앞에서 나누어 다룬 코드를 합친 것입니다.

코드를 읽으며 간단하게 예제를 정리해 보세요.

<코드 12-17> 갤러리 전체 코드

<!DOCTYPE html>

<html>

<head>

<style>

div.item:nth-child(1) { background: blueviolet; }

div.item:nth-child(2) { background: pink; }

div.item:nth-child(3) { background-color: burlywood; }

</style>

$(document).ready(function () {

// 변수를 선언합니다.

var width = $('[data-role="slider"]').attr('data-width');

var height = $('[data-role="slider"]').attr('data-height');

var count = $('[data-role="slider"]').div.item').length;

// 스타일을 적용합니다.

$('[data-role="slider"]').css({

position: 'relative',

overflow: 'hidden',

width: width,

height: height

}).find('.container').css({

position: 'absolute',

width: count * width,

overflow: 'hidden'

}).find('.item').css({

width: width,

height: height,

float: 'left'

});

// 변수를 선언합니다.

var currentpage = 0;

var changepage = function () {

$('[data-role="slider"] > .container').animate({

left: -currentPage * width

}, 500;

};

// 이벤트를 연ㄷ결합니다.

$('#left-button').click(function () {

if (currentPage > 0) {

// 왼쪽으로 이동

currentPage = currentPage - 1;

changePage();

}

});

$('#right-button').click(function () {

if (currentPage < count - 1) {

// 오른쪽으로 이동

currentPage = currentPage + 1;

changePage();

}

});

</script>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

<h1>Proin in urna turpis.</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

<h1>duis malesuada lorem neque.</h1>

<p>Lorem ipsum dolor sit amet, consectetur </p>

</div>

</body>

</html>

'프로그래밍 > Javascript' 카테고리의 다른 글

jQuery 효과 (0)	2017.08.17
jQuery 이벤트 (0)	2017.08.16
jQuery 문서 객체 조작 (0)	2017.08.14
jQuery 문서 객체 선택 (0)	2017.08.14
jQuery 라이브러리 설정 (0)	2017.08.14

TAGS.

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

호기심 많은 개발자의 보물창고

블로그소개

블로그소개

블로그소개

Brand Information

호기심 많은 개발자의 보물창고