1. jQuery
엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리
2. jQuery 문법
$ = Jquery
$(제어대상).method1().method2().~~
주어. 동사
3. jQuery 적용
1. Ajax (Asynchronous javascript and xml)
JavaScript를 이용한 비동기 통신 기술로 클라이언트와 서버간에 XML, Json 파일 형식의 데이터를 주고받는 기술로써 전체 페이지를 새로 고치지 않고 페이지 일부만을 위해 데이터를 로드하는 기법
2. Ajax 동작 원리
① 프론트엔드에서 jQuery 등으로 정의된 Ajax 선정 태그에 특정 이벤트가 발생
② 클라이언트는 백그라운드상에서 서버에게 지정된 요청을 보냄
③ 서버는 해당 요청에 대한 비지니스 로직을 수행하고 요청에 대한 결과를 응답함
④ Json 파일 형식으로 HTML 파일 전체가 아닌 일부분의 데이터만을 요청하고 응답 (RESTful API)
⑤ 프론트엔드는 jQuery(javascript)로 해당 데이터를 이용해 동적으로 웹 페이지 업데이트
⑥ 이 때 다른 작업들은 계속 수행됨
3. Ajax 예시
① 포털 사이트 검색창의 자동 검색 및 추천 검색, 그리고 검색 기록 출력 기능
② 특정 컨텐츠에 마우스를 가져다 대면 디테일한 설명 창 출력 기능
③ 게시판이나 댓글 입력 시 해당 글 출력 기능 등등
4. Ajax 구현
1. 상품 Popover
2. 상품 목록 Template 수정
function product_detail(id){ # 상품의 id(pk) 값을 매개변수로 받음
$.ajax({ # ajax를 이용한 요청과 응답 처리 관련 jQuery
url: "/api/product/" + id, # /api/product/product_id 형태로 GET 요청을 받음
success: function( result ) { # 요청에 대한 응답을 성공적으로 받을 시 result로 받고, 이를 매개변수로 함수 실행
$("#product-" + id).popover({ # id = product-product_id인 태그 요소에 popover 수행
html: true, # popover 내용에 html 태그가 들어감을 의미
content: result.name + "<br/>" + result.price # 응답의 result에서 name과 price를 출력
}).popover('show'); # popover show
}
});
}
function product_leave(id) # 상품의 id(pk) 값을 매개변수로 받음
$("#product-" + id).popover('hide'); # popover hide
}
id="product-{{ product.id }}" # 위에 지정한 jQuery script로 인식될 id 지정
onmouseover="product_detail({{ product.id }})" # mouseover event 발생 시 product_detail 함수에 product.id를 인자로 보내서 수행
onmouseout="product_leave({{ product.id }});" # mouseout event 발생 시 product_leave 함수에 product.id를 인자로 보내서 수행
2. 상품 Popover 결과 화면