Chapter_12 Example
autofocus.html
frameanimataion.html
gallery.html
gallery_body.html
gallery_complete.html
gallery_css.html
gallery_event.html
gallery_ready.html
gallery_style.html
infinityScroll.html
jQuery Masonry.html
jqueryCreate.html
jqueryCreateAppend_1.html
jqueryCreateAppend_2.html
lightbox.html
lightbox_ready.html
masonry.html
reference_keyCode.html
autofocus.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Event</title> <script> // 이벤트를 연결합니다. 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.onkeydown = function (event) { // 이벤트 객체를 추출합니다. var event = event || window.event; // 사용자의 입력이 '백 스페이스'이고 입력된 글자가 없는 경우 if (event.keyCode == 8 && input_2.value.length == 0) { input_1.focus(); } }; }; </script> </head> <body> <input type="text" maxlength="6" /> <span>-</span> <input type="text" maxlength="7" /> </body> </html>
frameanimataion.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Frame Animation</title> <script> 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> <img id="image" /> </body> </html>
gallery.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> div.item:nth-child(1) { background: blueviolet; } div.item:nth-child(2) { background: pink; } div.item:nth-child(3) { background-color: burlywood; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> $(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> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur </p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur </p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur </p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
gallery_body.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 ready 이벤트 */ $(document).ready(function () { }); /* 두 번째 ready 이벤트 */ $(document).ready(function () { }); </script> </head> <body> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
gallery_complete.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> div.item:nth-child(1) { background: blueviolet; } div.item:nth-child(2) { background: pink; } div.item:nth-child(3) { background-color: burlywood; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 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' }); }); /* 두 번째 ready 이벤트 */ $(document).ready(function () { // 변수를 선언합니다. 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> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
gallery_css.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> div.item:nth-child(1) { background: blueviolet; } div.item:nth-child(2) { background: pink; } div.item:nth-child(3) { background-color: burlywood; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 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' }); }); /* 두 번째 ready 이벤트 */ $(document).ready(function () { }); </script> </head> <body> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
gallery_event.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> div.item:nth-child(1) { background: blueviolet; } div.item:nth-child(2) { background: pink; } div.item:nth-child(3) { background-color: burlywood; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 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' }); }); /* 두 번째 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 () { }); }); </script> </head> <body> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
gallery_ready.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 ready 이벤트 */ $(document).ready(function () { }); /* 두 번째 ready 이벤트 */ $(document).ready(function () { }); </script> </head> <body> </body> </html>
gallery_style.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Slider</title> <style> div.item:nth-child(1) { background: blueviolet; } div.item:nth-child(2) { background: pink; } div.item:nth-child(3) { background-color: burlywood; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> /* 첫 번째 ready 이벤트 */ $(document).ready(function () { }); /* 두 번째 ready 이벤트 */ $(document).ready(function () { }); </script> </head> <body> <div data-role="slider" data-width="500" data-height="300"> <div class="container"> <div class="item"> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Proin in urna turpis.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> <div class="item"> <h1>Duis malesuada lorem neque.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere odio quis lectus congue ullamcorper blandit leo feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed magna sed turpis egestas ultrices ac ut enim. Curabitur at est ac nisi tincidunt accumsan in nec turpis. Maecenas lobortis felis dictum magna aliquet sagittis. Integer metus ipsum, vehicula at ultrices a, dictum eu metus.</p> </div> </div> </div> <button id="left-button">←</button> <button id="right-button">→</button> </body> </html>
infinityScroll.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Infinity Scroll</title> <script src="http://code.jquery.com/jquery-3.1.0.js"> </script> <script> // 이벤트를 연결합니다. $(document).ready(function () { // 문서 객체 추가 함수 var appendDocument = 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>
jQuery Masonry.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Masonry</title> <style> * { margin: 0; padding: 0; } .box { background: black; margin: 5px; } </style> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> <script> // 이벤트를 연결합니다. $(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({ columnWidth: 110 }); }); </script> </head> <body> </body> </html>
jqueryCreate.html
Full Screen
<!DOCTYPE html> <html> <head> <title>jQuery Create</title> <script src="http://code.jquery.com/jquery-3.1.0.js"> </script> <script> // 이벤트를 연결합니다. $(document).ready(function () { // 문서 객체를 생성합니다. $('<h1>Create Document Object By jQuery</h1>') }); </script> </head> <body> </body> </html>
jqueryCreateAppend_1.html
Full Screen
<!DOCTYPE html> <html> <head> <title>jQuery DOM</title> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <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>
jqueryCreateAppend_2.html
Full Screen
<!DOCTYPE html> <html> <head> <title>jQuery DOM</title> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script> // 이벤트를 연결합니다. $(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> </head> <body> </body> </html>
lightbox.html
Full Screen
<!DOCTYPE html> <html> <head> <title>LightBox</title> <link rel="stylesheet" href="jquery.lightbox-0.5.css" / > <script src="http://code.jquery.com/jquery-3.1.0.js"> </script> <script src="jquery.lightbox-0.5.js"> </script> <script> // 이벤트를 연결합니다. $(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>
lightbox_ready.html
Full Screen
<!DOCTYPE html> <html> <head> <title>LightBox</title> <link rel="stylesheet" href="jquery.lightbox-0.5.css" /> <script src="http://code.jquery.com/jquery-3.1.0.js"></script> <script src="jquery.lightbox-0.5.js"></script> </head> <body> </body> </html>
reference_keyCode.html
Run
<!DOCTYPE html> <html> <head> <title>Event</title> <script> window.onload = function () { window.onkeydown = function (event) { alert(event.keyCode); }; }; </script> </head> <body> </body> </html>