코딩 개발

코딩 개발/Javascript

jQuery 4탄 (ajax 통신 text방식, json방식)

1탄 : https://pabeba.tistory.com/175 2탄 : https://pabeba.tistory.com/176 3탄 : https://pabeba.tistory.com/178 어쩌다 보니 4탄까지 작성하게 되었네요. 어떤 영화를 보면 계속 후속작이 나오는데 솔직히 뒤로 갈수록 흥미가 떨어지더라고요. 아 근데 스파이더맨이랑 범죄도시는 재밌었습니다. 그래서 여러분들이 지루해하실까봐 이번 편을 마무리로 jQuery를 잠깐 보내주려고 합니다. 물론 다른 코드에서 나올 수도 있어요 ㅎㅎ 그래서 오늘은 중요한 Ajax 통신에 대하여 알아보도록 합시다. Ajax 통신 두가지를 알아보도록 하겠습니다. 텍스트만 받아오는 방식과 json을 받아오는 방식을 해보겠습니다. 텍스트 방식 1. script 를 ..

코딩 개발/Javascript

jQuery 3탄(요소선택 응용, mouseenter, mouseleave, hover, prop)

어쩌다 보니 3탄까지 가게 되었습니다. 1탄 : https://pabeba.tistory.com/175 2탄 : https://pabeba.tistory.com/176 slideToggle html에 작성된 내용이 스르륵 내려오는 형태를 보여줍니다. 정보 더보기 호소세 출생 2000년 13월 36일, 서울특별시 국적 대한민국파일:대한민국 본관 호소 호씨[3] 신체 185.7cm 80kg 가족 부모님, 남동생, 형, 누나, 언니, 오빠 이번에 새로 추가된 내용입니다. document ready를 작성하지 않아도 저렇게만 작성하여도 dom이 생성되고 함수를 사용할 수 있게 되었습니다. 코드가 줄었네요 ㅎㅎ 그래서 아이디가 toggleSpan 인 태그를 누르면 숨겨진 내용이 나오게 됩니다. 직접 코드를 옮겨서..

코딩 개발/Java

Pagination (페이지 매기기)

Pagination이란? 콘텐츠를 여러 페이지로 나누는 기술입니다. 웹 페이지에서 일반적으로 볼 수 있는 이전, 다음 버튼이나 숫자로 된 페이지 번호를 클릭하여 다른 페이지로 이동할 수 있는 기능을 의미합니다. Pagination 생각해 보기 코드를 생성하기 전에 어떤 것이 필요할지에 대한 생각을 먼저 하면 좋을 것 같습니다. 1. 현재 페이지 번호 2. 한 페이지당 게시물의 개수 3. 한 페이지 그룹당 페이지 수 -> 페이지 그룹당 페이지 수가 4개고 페이지 수가 10개면 페이지 그룹은 3개가 생깁니다. 1,2,3,4 / 5,6,7,8 / 9,10 4. 총 게시물 수 5. 현재 페이지의 게시물 시작 번호 6. 현재 페이지의 게시물 끝 번호 7. 총 페이지 수 8. 총 페이지 그룹 수 9. 현재 페이지 ..

코딩 개발/Javascript

jQuery 1탄 (ready, click, text, $(요소 선택) )

jQuery란? jQuery는 JavaScript 기반의 오픈 소스 프론트엔드 라이브러리입니다. 웹 개발을 위한 도구로 사용되며, HTML 문서의 요소를 선택하고 조작하는 데 특히 유용합니다. jQuery는 단순하고 직관적인 API를 제공하여, 복잡한 JavaScript 코드를 간결하게 작성할 수 있도록 도와줍니다. 웹 페이지의 동적인 요소를 조작하고 애니메이션 효과를 적용하며, 서버와의 데이터 통신을 쉽게 처리하는 등 다양한 기능을 제공합니다. jQuery는 여러 가지 기능을 갖춘 다양한 모듈로 구성되어 있으며, 기본적인 선택자, 이벤트 처리, 애니메이션, AJAX와 같은 웹 개발에 필요한 다양한 기능을 포함하고 있습니다. 하지만 최근 웹 개발의 발전과 JavaScript의 표준화로 인해 jQuery의..

코딩 개발/Java

JSTL - Layout으로 import 하기(header, section, nav, aside, footer)

이전에 있는 Front Controller 글을 읽고 오시는 것을 추천드립니다! https://pabeba.tistory.com/164 이런 식으로 웹페이지를 생성한다고 생각했을 때 모든 페이지에 JSTL을 이용하여 Header, Footer, Left Navigation을 해야 한다고 생각하니 너무나도 두렵지 않습니까? 페이지가 20개면 20번을 3번씩 import 해와야합니다. 60번의 막일을 해야 하는데, 다 고쳐놨더니 제목을 바꾸거나 파일이 저장된 디렉터리를 변경하게 된다면 또! 또! 또! 고쳐야 합니다. 그래서 선조들은 이러한 귀찮음을 해결하기 위해 Layout을 제작하게 됩니다. Spring에서는 Thymeleaf?를 이용한다고 합니다. (아직 사용 전입니다.) 아무튼 Content의 내용만 ..

코딩 개발/Java

게시판 만들기 (프로젝트 맛보기)

먼저 애플리케이션을 만들기에 앞서 요구사항을 확인해 봅니다. 요구사항 확인 1. 비로그인 상태에서는 게시판의 리스트 정보만 제공합니다. 2. 메인 화면 상단부에는 로그인할 수 있는 폼이 제공됩니다. 3. 리스트에서는 게시물번호, 제목, 작성자명, 작성일, 조회수가 제공됩니다. 4. 리스트의 게시물은 최신 등록순으로 정렬되어 제공됩니다. 5. 사용자가 로그인하면 상단부 영역에는 로그인 폼 대신 홈(링크) 글쓰기(링크) 회원이름 로그아웃(링크)이 제공됩니다. 6. 상세 게시물 정보는 게시물번호, 제목, 작성자, 작성일시(리스트에서는 작성일까지 보여줌) , 조회수, 게시물 본문내용이 제공됩니다. 7. 회원 자신이 작성한 게시물에 대해서는 상세 게시물 정보 하단에 삭제와 수정버튼이 제공됩니다. 8. 상단부의 로..

호소세
'코딩 개발' 카테고리의 글 목록 (12 Page)