-
231204_Jquery 이벤트, 홈페이지 평가카테고리 없음 2023. 12. 5. 10:28
Jquery는 외워서 사용하는 것이 아닌, 사용방법을 알고 사용하고자 할 때 사용하는 것. 외우려고 하지 말자. 내가 이해 한 바로는 제이쿼리는 Html가 아니고, Html 에서 사용하는 CSS 나 이벤트 같은걸 자바스크립트 언어로 함수를 선언해 사용하는 것으로 이해하고 있다.
이하 교재에서 이벤트 등록 메서드를 위주로 실습을 진행했다.
1. 클릭 시 이벤트 실행/ 마우스 호버 시 이벤트 실행
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery.js"></script> <script> $(document).ready(function(){ $(".btn1").click(function(){ $(this).parent().next().css({"color":"#f00"}); }); $(".btn2").on({ "mouseover focus": function(){ $(this).parent().next().css({"color":"#0f0"}); }, "mouseout blur": function(){ $(this).parent().next().css({"color":"#000"}); } }); }); </script> </head> <body> <p> <button class="btn1">버튼1</button> </p> <p>내용1</p> <p> <button class="btn2">버튼2</button> </p> <p>내용2</p> </body> </html>2. 두 버튼 모두 마우스를 올렸을 때 연결된 텍스트 요소의 배경색이 변경되지만, 실행하기 위한 과정에서 차이가 있다.
버튼 1 (class="btn1")
'.on()' 메서드를 사용하며 "mouseover" 및 "mouseout" 이벤트에 대한 별도의 함수를 사용한다. "버튼 1" 위에 마우스가 있을 때(mouseover), 클래스가 "txt1"인 요소의 배경색이 노란색으로 설정되고, 마우스가 "버튼 1"에서 벗어날 때(mouseout), "txt1" 요소의 배경색이 none으로 설정되어 배경색이 제거된다.
버튼 2 (class="btn2")
'.hover()' 메서드를 사용하며 두 개의 함수를 매개변수로 사용한다. 하나는 mouseenter에 대한 것이고, 다른 하나는 mouseleave에 대한 것이다.
마우스가 "버튼 2"에 들어갈 때(mouseenter), 클래스가 "txt2"인 요소의 배경색이 아쿠아로 설정되고, 마우스가 "버튼 2"에서 떠날 때(mouseleave), "txt2" 요소의 배경색이 none으로 설정되어 배경색이 제거된다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery.js"></script> <script> $(function(){ $(".btn1").on({ "mouseover":function(){ $(".txt1").css({"background-color":"yellow"}); }, "mouseout" : function( ){ $(".txt1").css({"background":"none"}); } }); $(".btn2").hover(function( ) { $(".txt2").css({"background-color":"aqua"}); }, function(){ $(".txt2").css({"background":"none"}); }); }); </script> </head> <body> <p><button class="btn1">Mouse Over/Mouse Out</button></p> <p class="txt1">내용1</p> <p><button class="btn2">Hover</button></p> <p class="txt2">내용2</p> </body> </html>3. 가로 세로 스크롤을 화면에 출력
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery.js"></script> <script> $(window).on("scroll",function(){ var sc_top = $(this).scrollTop(); var sc_left = $(this).scrollLeft(); $(".top").text(sc_top); $(".left").text(sc_left); }); </script> <style> body{ height: 10000px; width: 5000px; } #wrap{ position: fixed; left: 10px; top: 10px; } </style> </head> <body> <div id="wrap"> <p>scrollTop:<span class="top">0</span>px</p> <p>scrollLeft:<span class="left">0</span>px</p> </div> </body> </html>4. option 으로 구글, 네이버, 다음을 선택하면 value 값을 받아서 화면에 출력
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery.js"></script> <script> $(function(){ $("#rel_site").on("change", function(){ $(".txt").text($(this).val()); }); }); </script> </head> <body> <select id="rel_site"> <option value="">사이트 선택</option> <option value="www.google.com">구글</option> <option value="www.naver.com">네이버</option> <option value="www.daum.net">다음</option> </select> <p class="txt"></p> </body> </html>5. 버튼을 마우스 포커스 하면 알람 창 띄움
다만 1번 버튼같은 경우, 경고창을 어디서 보는지 몰라서 확인을 못 했다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery.js"></script> <script> $(function(){ $(".btn_1.on").on("mouseover focus",function(){ alert("헬로우!!"); }); $(".btn_1").addClass("on"); $(document).on("mouseover focus",".btn_2.on",function(){ alert("웰컴!"); }); $(".btn_2").addClass("on"); }); </script> </head> <body> <div id="wrap"> <p><button class="btn_1">버튼1</button></p> <p><button class="btn_2">버튼2</button></p> </div> </body> </html>
오후 시간에는 Jquery 를 홈페이지에 삽입하는걸로 평가를 진행했고, 홈페이지 소스는 오픈 소스를 이용했다. 부트스트랩, 자바스크립트 등이 포함 되어 있었고 불필요한 부분을 모두 지운 뒤 작업한건 크게 3가지다.
1. 메인, 카테고리, 장바구니, 로그인 화면 페이지로 바꾸기.
2. 홈쇼핑 같아 보이게 이미지 변경. 오픈 소스 이미지와 일반 쇼핑몰 이미지를 이용했다. (차후 포트폴리오에 이미지를 넣을 땐 사진을 수정할 필요가 있다. 어자피 CSS나 디자인 요소는 평가 대상이 아니어서 비중을 크게 두지는 않았다.)
3. 각 페이지 별로 맞는 제이쿼리 이벤트 추가하기.
메인 페이지
1. 쿠폰 받기 버튼-> 쿠폰 발급 모달 창 띄우기
둘러보기 버튼을 누르면 카테고리 페이지로 이동하는 Jquery 를 추가 할 수 있었음.
<script> $(document).ready(function(){ // 버튼 클릭시 쿠폰 발행 처리 $("#couponButton").click(function(){ // 버튼을 클릭하면 모달 표시 $("#couponModal").css("display", "flex"); }); }); // 모달 창 닫기 function closeModal() { $("#couponModal").css("display", "none"); } </script>카테고리 페이지
1. 최상단으로 이동하는 top 버튼 만들기.
2. Add to Cart 버튼-> 장바구니 안내 페이지 띄우기.
3. 장바구니 안내 페이지에서 장바구니로 이동 버튼 누르면 장바구니 페이지로 이동
<script> $(document).ready(function () { // 최상단으로 이동하는 버튼 보이기/숨기기 처리 $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#scrollTopBtn').fadeIn(); } else { $('#scrollTopBtn').fadeOut(); } }); // 최상단으로 이동하는 애니메이션 처리 $('#scrollTopBtn').click(function () { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); // 장바구니에 담길 때의 처리 함수 function addToCart(productName, price, discount) { // 모달 창에 상품 정보 표시 $('#cartMessage').html('장바구니에 상품이 담겼습니다!<br>제품명: ' + productName + '<br>가격: $' + price + '<br>할인율: ' + discount + '%'); // 모달 창 띄우기 $('#cartModal').modal('show'); } $('.add-to-cart').click(function () { // 해당 상품 정보를 가져와서 addToCart 함수 호출 var productContainer = $(this).closest('.product'); var productName = productContainer.find('p:first-child').text(); var price = parseFloat(productContainer.find('p:nth-child(2)').text().replace('Price: $', '')); var discount = parseFloat(productContainer.find('p:nth-child(3)').text().replace('Sale: ', '').replace('% off', '')); addToCart(productName, price, discount); }); }); //장바구니로 이동하기 버튼을 누르면 장바구니 페이지로 이동 $(document).ready(function() { $("#goToCartBtn").on("click", function() { window.location.href = 'about.html'; }); }); </script>장바구니 페이지, 해당 페이지에서 구현하고 싶었던건 크게 3가지다.
1. 주문 조건 추가/변경 시-> 상품 주문 수량 숫자 변경하기.2. 주문하기 버튼-> 개별 상품 정보를 받아와서 주문하기 모달 창 띄우기3. 쇼핑 계속하기 버튼-> 카테고리로 이동
4. 전체 주문하기 버튼->
모든 상품 정보를 받아와서주문하기 모달 창 띄우기주문하기 모달 창 안에서 Jquery 이벤트로 구현하려고 한 것
1. 받는 사람 이름, 배송지 주소를 입력하지 않으면 입력 알람 띄우고 재 작성하게 하기
2. 받는 사람 이름, 배송지 주소를 입력했다면 주문 완료 알람을 띄우고 모달 창 닫기
정보를 받아와서 구현을 하자니 개별 상품 정보와 모든 상품 정보를 체크하기로 구분을 해야 할 것 같은데 그런 구분을 주지 못했고 정보를 받아오지 못했다. 시간이 없어서 주문 조건 추가/변경과 주문하기 버튼은 이벤트 구현하지 못했고 전체 주문하기 모달 창에 띄우는 정보는 따로 입력해서 입력된 정보를 띄워가지고 화면에 보여주었다.
<script> function showOrderModal() { // 표시할 모달 내용 생성 var modalContent = ` <h2>Product Information</h2> <img src="./images/product (13).jpg" alt=""> <p>우아한 그린</p> <p>Price: $20.99</p> `; // 모달 내용 업데이트 $("#selectedProducts").html(modalContent); // 모달 보이기 $("#orderModal").show(); } function confirmOrder() { // 이름과 배송지 주소 입력 값 가져오기 var recipientName = $("#recipientName").val(); var deliveryAddress = $("#deliveryAddress").val(); // 입력 여부 확인 if (recipientName === "" || deliveryAddress === "") { // 입력되지 않았을 경우 알림 표시 alert('이름과 배송지 주소를 입력해주세요.'); } else { // 주문 완료 알림 표시 alert('감사합니다. 주문이 완료 되었습니다!'); // 모달 숨기기 $("#orderModal").hide(); } } $(document).ready(function() { // 쇼핑 계속하기 버튼 클릭 시 service.html로 이동 $("#continueShoppingBtn").click(function() { window.location.href = "service.html"; }); // 취소 버튼 클릭 시 모달 닫기 $("#closeModal").click(function() { $("#orderModal").hide(); }); // 모달 외부 클릭 시 모달 닫기 $(window).click(function(event) { var modal = $("#orderModal"); if (event.target === modal[0]) { modal.hide(); } }); }); </script>로그인 페이지
정보를 입력해서 저장할 수 없기 때문에 user 와 0000 을 if문으로 넣어서 로그인이 되는 모달 창 조건을 주었다. 이메일 창은 만들었지만, 로그인을 첫 시도 할 땐 보이지 않게 처리하고 로그인 정보가 맞지 않아 회원가입 페이지로 넘어갈 때만 보이도록 Jquery 이벤트 효과를 주었다.
1. 로그인 시도 시, 입력되어있는 정보(User,, 0000)로 입력하면-> 로그인 성공 알람 창 띄우기.
2. 로그인 시도 시, 입력되어 있지 않은 정보로 입력하면
2-1. ID, PW 칸이 비워지고 안 보이게 설정해놓은 Email 이 자연스럽게 보이도록 변경
2-2. Login 버튼이 회원가입 버튼으로 바뀌게 변경.
2-3. ID, PW, Email 을 모두 입력하고 회원가입 버튼을 누르면 입력된 이름+님 회원가입 축하 알람 창 띄우기
3. 로그인 성공 및 회원가입 알람 창 띄운 뒤 메인 페이지로 이동하기.
<script> $(document).ready(function () { // 이메일 입력 필드를 처음에 숨김 $("input[type='email']").hide(); // 회원가입 버튼을 처음에 숨김 $("#registerButton").hide(); $("form").submit(function (event) { event.preventDefault(); var id = $("input[name='id']").val(); var pw = $("input[name='pw']").val(); // 입력된 ID와 비밀번호가 올바른지 확인 if (id === "user" && pw === "0000") { // 로그인 성공 var message = "🎉 홍길동 님! 환영합니다! 2023년 출석 쿠폰이 발급 되었습니다!"; alert(message); // 로그인 성공 시 ID와 PW 입력 필드를 비움 $("input[name='id']").val(""); $("input[name='pw']").val(""); // 이메일 입력 필드를 숨김 $("input[type='email']").slideUp(); // 로그인 성공 후 Index 페이지로 이동 window.location.href = "index.html"; } else { // 로그인 실패 시 // 이메일 입력 필드와 회원가입 버튼을 보이도록 설정 $("input[type='email']").slideDown(500); // 투명도를 1로 설정하여 자연스러운 나타나기 효과를 부여 $("input[type='email']").animate({ opacity: 1 }, 500); // 로그인 실패 시 ID와 PW 입력 필드를 비움 $("input[name='id']").val(""); $("input[name='pw']").val(""); // ID 입력 필드를 Name으로 변경 $("input[name='id']").attr("placeholder", "Name"); // 로그인 버튼을 숨기고 회원가입 버튼을 보이도록 설정 $("button[type='submit']").hide(); $("#registerButton").show(); } }); // 회원가입 버튼 클릭 시 $("#registerButton").click(function () { var id = $("input[name='id']").val(); var pw = $("input[name='pw']").val(); var email = $("input[name='email']").val(); // 회원가입 성공 메시지 alert("회원가입을 축하합니다. " + id + "님! \n[첫 가입 30% 할인 쿠폰]이 발급 되었습니다!"); window.location.href = "index.html"; }); }); </script>부디 평가가 나쁘지 않길 바람.