jQuery 이후에 더 배울 것

출처: jQuery 이후에 더 배울 것 jQuery를 배운 것을 축하합니다! 이제 오늘날 웹에서 가장 유명한 JS 라이브러리를 배웠습니다. 여러분은 jQuery를 이용해 웹 사이트를 만들 수 있을 뿐만 아니라, 다른 웹 개발자들이 작성한 코드와 새로운 JS 라이브러리를 사용하는 코드를 더 쉽게 이해할 수 있게 되었습니다. jQuery 보충 학습 칸아카데미는 현재 jQuery의 모든 것을 다루지 않습니다. 여기서 다루었던 내용보다 더 많은 함수와 그리고 더 많은 함수 내 옵션들이 있습니다. 여러분이 사용하는 모든 함수를 제대로 활용하는 법을 전부 배우려면 이 페이지를 열어보세요. 또 다른 수업도 한 번 둘러보세요. 이 수업 중 많은 부분이 여기서 배운 내용과 겹칠지도 모르지만, 때에 따라 여러 번 듣는 것이 도움이 될 수도 있습니다: jQuery 학습 센터 jQFundamentals jQuery 플러그인 […]

복습: jQuery의 DOM 애니메이션

출처: 복습: jQuery의 DOM 애니메이션 jQuery는 수많은 애니메이션과 효과와 관련된 함수를 제공합니다. 해당 목록은 해당 문서에 나와있습니다. 가시성 변경하기 단순히 물체의 가시 여부를 바꿀 때는 hide()와 show()를 사용할 수 있습니다: $(“#pic”).hide(); $(“#pic”).show(); (예제 보기) 또한 현재 상태에 따라서 보여줄 것인지 보여주지 않을 것인지 결정하는 toggle()을 사용할 수 있습니다: $(“#pic”).toggle(); (예제 보기) 위 모든 함수에 지속시간을 전달할 수 있으며, 그다음 jQuery가 가시성 변화를 실제로 나타냅니다. $(“#pic”).toggle(1000); 또 슬라이딩 효과는 slideDown(), slideUp() , slideToggle()을 사용하거나 (예제 보기) 페이딩 효과는 fadeIn(), fadeOut() , fadeToggle()을 사용할 수 있습니다 (예제 보기). 위 모든 함수에 콜백 함수를 두 번째 매개변수로 전달할 수 있고, 해당 애니메이션이 완료되었을 때 jQuery가 전달된 콜백 함수를 호출할 것입니다: $(“#pic”).toggle(1000, function() { $(“body”).append(“It’s here!”); }); 또 여러 효과를 연속적으로 나타낼 수 있고 각 효과 사이의 시간을 지연시키고 싶다면 delay()를 호출할 수 있습니다: […]

jQuery로 numeric properties 애내매니션하기

Animating numeric properties with jQuery #croc-pic { border: 1px solid green; width: 200px; } 출처: jQuery로 numeric properties 애내매니션하기 American Crocodile $(“#croc-pic”).animate({ width: “400px”, marginLeft: “30px”, borderWidth: “10px” }, 1500); $(“#croc-text”).animate({ marginLeft: “30px”, fontSize: “3em” }); Animating numeric properties with jQuery #croc-pic { border: 1px solid green; width: 200px; } American Crocodile $(“#croc-pic”).animate({ width: “400px”, marginLeft: “30px”, borderWidth: “10px” }, 1500); $(“#croc-text”).animate({ marginLeft: “30px”, fontSize: “3em” });

jQuery로 애니매이션 적용하기

Animating visibility with jQuery #croc-pic { border: 1px solid green; width: 200px; } #snake-pic { border: 1px solid green; width: 400px; } 출처: jQuery로 애니매이션 적용하기 American Crocodile $(“#croc-pic”).hide(); $(“#croc-text”).hide(); $(“#croc-pic”).slideDown(1000, function() { $(“#croc-text”).fadeIn(3000); }); Animating visibility with jQuery #croc-pic { border: 1px solid green; width: 200px; } /style> American Crocodile $(“#croc-pic”).hide(); $(“#croc-text”).hide(); $(“#croc-pic”).slideDown(1000, function() { $(“#croc-text”).fadeIn(); }); 응용: 미끄러지는 뱀 var $pic = $(“#snake-pic”); $pic.hide(); $(“#pic-text”).hide(); $pic.slideDown(3000, function() { $(“#pic-text”).text(“It’s a snake”); $(“#pic-text”).slideDown(3000); }); var $pic = $(“#snake-pic”); $pic.hide(); $(“#pic-text”).hide(); $pic.slideDown(3000, function() { $(“#pic-text”).text(“It’s a snake”); $(“#pic-text”).slideDown(3000); });

복습: jQuery를 이용하여 form 처리하기

출처: 복습: jQuery를 이용하여 form 처리하기 jQuery를 이용해서 폼을 처리하기 위해서는, ‘submit’ 이벤트를 위해 이벤트 리스너를 form 요소에 추가해야 합니다: $(“form”).on(“submit”, function() { // process form }); 만약 폼 처리를 완전히 jQuery 내에서 한다면, 페이지를 다시 불러오는 것을 방지하기 위해 preventDefault()를 호출해야 합니다: $(“form”).on(“submit”, function(event) { event.preventDefault(); // process form }); 사용자가 폼 내부의 input에 무엇을 입력했는지 알고싶을 때, 일반적으로 val()을 사용합니다: var answer = $(“#answer”).val(); 콜백 함수 내부에서, this 키워드를 사용해서 폼 요소를 참조할 수 있습니다. 흔한 패턴은 폼 요소 내부의 입력값만을 찾기 위해서 폼 요소에서 find()를 호출하는 것입니다: $(“form”).on(“submit”, function() { // 입력란에 name=’age’ 값을 저장합니다 var age = $(this).find(‘[name=age]’).val(); }); (예제 전체는 여기서 볼 수 있습니다)

jQuery로 폼 처리하기 – 심화

출처: jQuery로 폼 처리하기 – 심화 Crocodile order form Crocodile order form Species? Freshwater crocodile Saltwater crocodile American crocodile Order script> // Maps croc species to image URLs var crocImages = { “american”: “https://upload.wikimedia.org/wikipedia/commons/f/f2/Crocodylus_acutus_mexico_02-edit1.jpg”, “saltwater”: “https://upload.wikimedia.org/wikipedia/commons/c/ca/Crocodylus_porosus_4.jpg”, “freshwater”: “https://upload.wikimedia.org/wikipedia/commons/c/ce/Australia_Cairns_18.jpg” }; // When the user submits the form, // Check what species they ordered // and display an image of it $(“#croc-form”).on(“submit”, function(event) { event.preventDefault(); var $crocSpecies = $(this).find(“[name=species]”); // scoped var crocSpecies = $crocSpecies.val(); var $img = $(“”); $img.width(100); $img.attr(“src”, crocImages[crocSpecies]); $img.appendTo(“body”); }); 응용: 도넛 계산기 Donut Calculator Winston eats 3 donuts a day. How many donuts will he eat in his lifetime? Winston’s final age: Calculate var calcDonuts = function(years) […]

jQuery로 퀴즈 처리하기

Challenge: jQuery trivia quiz #result { background: rgb(255, 246, 204); border: 2px dotted gold; font-size: 24px; height: 60px; margin-top: 10px; } #result2 { background: rgb(255, 246, 204); border: 2px dotted gold; font-size: 24px; height: 60px; margin-top: 10px; } 출처: jQuery로 퀴즈 처리하기 Reptile quiz What is this? Crocodile Alligator Caiman Check Answer // When the user submits the form, // Check what answer they picked // And tell them if they’re correct // submit $(“#quiz-form”).on(“submit”, function(event) { event.preventDefault(); var $answer = $(“#quiz-answer”); var answer = $answer.val(); console.log(answer); if (answer === “crocodile”) { $(“#result”).text(“Woweeee! You got it! WOOO PARTY!”); } else { $(“#result”).text(“Try again!”); } }); Reptile quiz What is this? […]

폼 처리에 왜 jQuery를 이용할까요?

출처: 폼 처리에 왜 jQuery를 이용할까요? 사용자로부터 입력을 받기 위해서 웹 상에서 폼(form)을 사용합니다. 때때로 입력값을 저장하기 위해 서버로 보내고, 브라우저 내에서 입력값에 따른 무언가를 수행하기도 합니다. 서버로 전송하기 전이나 서버를 대신하는 폼을 수월하게 하기 위해 종종 jQuery를 이용합니다. 폼 “유효성 검사”를 수행하기 위해서(전화번호가 유효한지, 그 길이가 맞는지 등의 입력된 값이 올바른 형식인지 확인하는 과정) 그리고 그 결과를 서버에 전송하기 위해서 jQuery를 사용할 수 있습니다. 폼 유효성 검사는 칸아카데미 설정 페이지 몇 군데에서도 수행합니다: 설정 페이지에서 사용자 이름을 변경하고 잘못된 문자에 대한 오류를 받는 스크린샷 또한 칸아카데미에 있는 연습문제같은, 브라우저 내장 퀴즈나 게임을 만들기 위해서 jQuery를 사용할 수도 있습니다: 올바른 답을 선택하고 정답을 확인하는 스크린샷 여러분도 이런 비슷한 기술을 사용할 것이며 이제부터 […]

복습: jQuery 내의 DOM event

출처: 복습: jQuery 내의 DOM event 이벤트 리스너 추가하기 You can add an event listener using on(): $(“#save-button”).on(“click”, function() { // handle click event }); 만약 이벤트에 대한 세부정보에 접근할 필요가 있다면, 이를 콜백 함수 내부로 전달된 jQuery 이벤트 객체 내부에서 찾을 수 있습니다: $(“#face-pic”).on(“click”, function(event) { var mouseX = event.pageX; var mouseY = event.pageY; }); 이벤트 유발하기 JavaScript에서 trigger를 이용해 수동으로 객체에 이벤트를 유발할 수 있습니다: $(“#save-button”).trigger(“click”); 새로운 기능을 테스트하거나, 페이지가 로드되었을 때나 특정한 이벤트 후에 코드를 실행하고 싶을 때 유용할 수 있습니다. DOM이 준비되었는지 확인하기 만약 브라우저가 DOM이 완전히 불려지고 준비될 때까지 JS 코드를 실행하지 않는지 확실히 하고싶다면, 코드를 ready()에 전달할 수 있습니다: $(document).ready(function() { $(“h1”).text(“Y’all ready for this?”); }); 이것을 짧게 […]

jQuery로 DOM이 준비되었는지 확인하기

출처: jQuery로 DOM이 준비되었는지 확인하기 Checking DOM readiness with jQuery .crocodile { color: green; font-family: fantasy; } var crocodilize = function() { $(“h2”).text(“CROCODILE ATTACK!”); $(“p”).html(“The crocodiles are coming – oh noess!!”); $(“p”).css(“color”, “green”); $(“h2”).addClass(“crocodile”); $(“a”).attr(“href”, “https://en.wikipedia.org/wiki/Crocodile”); $(“img”).attr(“src”, “https://www.kasandbox.org/programming-images/animals/crocodiles.png”); }; $(document).ready(function() { crocodilize(); }); Cats are cute! Cats are widely known to be one of the cutest animals. It has long been rumored that they have put all of humanity under a hypnosis, so that they can achieve their goals of getting fed while also getting to do whatever they darn want around our houses. This cat is exhibiting what’s known as the “so-cute-now-feed-me” face: Common cat activities (Cat-ivities) Cats enjoy […]