목적 ajax와 같은 비동기 통신시 여러개의 동일 요청이 들어오면 가장 마지막 요청만 받아서 수행하도록 구성 비동기 통신을 구현하면서 다음과 같은 현상이 발생합니다. 게시판 페이징 처리를 했다고 가정합니다. 네트워크가 느리거나, 데이터가 많아서 로딩이 오래걸리는 경우 페이징을 1~5까지 빠르게 넘길 때 데이터가 이 속도를 따라오지 못해서 느리게 쫒아오는 경우가 있습니다. 이럴경우 로딩이 안되고 다른페이지 로드시 오류가 발생할 수도 있고, 시각적으로도 올바르지 못합니다. 이럴때 사용하는 메소드는 abort() 메소드 입니다. abort() 를 사용해서 동일한 ajax 호출시. 이전 요청을 삭제하고 지금 받은 요청을 처리하는 식으로 코드를 짜면됩니다. let ajax = null; // function no..

공식문서 :https://jqueryvalidation.org/ 프로그램을 짜면서 데이터 검증은 필수적입니다. JQuery 플러그인 중 validate 검증 플러그인을 사용했습니다. JQuery 플러그인이기 때문에 순서는 jquery부터 받아와야 합니다. 그 후에 vaildate 스크립트가 옵니다. 만약 커스텀해서 사용한다면 해당 경로를 스크립트 합니다. ※경로는 해당 파일 위치입니다. script 에서 등록버튼과 같은 이벤트 작동시 아래와 같은 양식을 사용합니다. #frmRequest => form 데이터 ($('#frmRequest').valid()) 해당 jsp 파일의 script 단 에서 바로 검증을 해서 메시지를 출력 할 수 있습니다. let validator = $('#frmRequest')...

1] Selector 1-1] html 에 id 와 동일한 값의 엘리먼트를 선택한다 $("#id") 1-2] html 에 class 와 동일한 값의 엘리먼트를 선택한다. $(".class") 1-3] html 에서 div 의 요소 중 class 이름과 같은 값의 엘리먼트를 선택한다. $("div.class") 1-4] html 에서 ul 의 자손노드인 li을 전부 선택한다 $("ul li") 1-5] html 에서 div의 자손노드중 class 와 동일한 값의 엘리먼트를 선택한다. $("div .class") 2] Filter 2-1] 기본 요소 선택 $("div"):first //선택된 요소의 첫번째 요소 $("div"):last //선택된 요소의 마지막 요소 $("div"):even //선택된 요소의..

JQuery 선택자 1. 전체 선택자 -> * $('*').attr('test',1); document 에 있는 모든 문서객체를 선택 2. 태그 선택자 -> html 태그이름 $('h2').attr('test',1); 특정한 태그를 선택한다 3. 아이디 선택자 -> #아이디이름 $('h2#item').attr('test',1); $('#id').attr('test',1); 특정한 id를 부여한 객체를 선택 4. 클래그 선택자 -> . 클래스 이름 $('h2.item').attr('test',1); $('item.test').attr('test',1); 특정한 class속성이 부여된 객체를 선택 5. 자손 선택자 -> a요소 > b요소 $('test >test2').attr('test',1); 해당 a요소..

JQuery 자바스크립트로 만들어진 라이브러리. DOM 작업을 쉽게 할 수 있게 해줍니다. JQuery는 메소드를 가지고 있는 클래스 -> 프로토타입 방식 그 중에서도 크로스 브라우징 라이브러리 라는 특성이 코드의 라인을 줄여줍니다. 크로스 브라우징 라이브러리 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 출력되게 하는 라이브러리 크로스 브라우징 라이브러리가 아니라면, 브라우저 마다 기능을 나눠서 추가해줘야한다.. ex) IE7 이전에는 attachEvent 를 사용하였다. 순기능 자바스크립트 DOM 기능 Ajax 를 손쉽게 플러그인이 많다 효과 : 애니메이션 효과 간단한 예시와 실습 1번] id 요소의 값 수정하기 페이지가 로딩되고 (html과 같은 정적 요소) 이후 script에서 onloa..

JQuery 사용을 안하려고 하다가 결국 사용을 해야할거같아서 기본 개념과 사용한 함수를 정리합니다. 제이쿼리(jQuery)란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 제이쿼리 문법] 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다. $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. html 문서가 먼저 로드되고 이후에 script 문서가 로드되야 오류가 나지 않기 때문에 하단부에 보통 아래와 같은 형식으로 선언을 한다. JS 에서는 보통 ..