제이쿼리 실습자료입니다. AJAX 를 이용한 경품 추첨프로그램 다음 API 를 이용해서 상품검색을 하는 프로그램 이 포함되어있습니다,

1. 처음배우는

2. 자바스크립트,

3. 제이쿼리
#4

4. AJAX

5. 를

6. 이용한

7. 쇼핑몰

8. 검색
ABCD,

9. 스노우키위

10. 한성일

11. GOAL
• AJAX 설명
• AJAX 를 이용한 쇼핑몰 검색
• AJAX 를 이용한 로또 프로그램

12. 1. 준비

13. REST CLIENT
• Rest Client 툴은 API 값을 전달하고 볼 때
편리하도록 되어있습니다.

14. REST CLIENT
1
2
3 http://abcds.kr/study/daum.php?q=가방
Advanced Rest Client
를 설치합니다.
앱을 설치합니다.
크롬 앱스토어를 실행합니다.
브라우져에 다음과 같이 입력합니다.

15. REST CLIENT
4 결과를 확인합니다.

16. 동기와 비동기
일반적으로 순차적으로 실행됩니다.
앞에게 끝나면 다음것으로 다음것으로..
동기(synchronous) 방식 이라고 합니다.
안정성 측면에서 좋지만 로딩이 완료되면
다시 통신을 하려면 전체를
다시 로드해야하며 전체 로딩을 기다려야
하기에 실행 속도가 느려집니다.
abcd.c
모듈 1
모듈 2
모듈 3

17. 동기와 비동기
모듈 1
비동기(asynchronous) 모듈 단위로 서버에 개별적
요청 합니다. 요청 결과를 callback 함수가 받아 처리합니다.
AJAX 는 일반적으로 비동기통신을 합니다..
화면전환이 없이 실행되는 경우 AJAX 일 가능성이 높습니다.
개별 서버 통신이기에 작업이 끝나는 시간을
정확하게 알 수 없습니다.
모듈 2
모듈 3
…..
abcd.js
Callback 1
서버 통신
Callback 2

18. 동기와 비동기
로드시간

19. 2. JQUERY AJAX

20. $.ajax({
url: http://www.abcds.kr/study/s3.php,
type: “GET,
dataType : “json”,
data : {
id : “사용자 아이디”,
pass : “사용자 비밀번호”
},
success : function(data) {
var obj = $.parseJSON(data);
obj.id;
obj.pass;
}
error : function (request, status, error) {
alert(request.responseText);
}
});
$.AJAX
jsonp 라는 형태도 있지만 여기서는 설명하지 않겠습니다.
* jQuery.ajax() 설명
파라미터 설명
url : 호출 URL
dataType : json, xml, jsonp
type : 서버 요청 방법 (GET, POST)
success : 성공했을때
data 형태의 return 값을 받음
error : 실패 핸들링
전달 데이터
{'id':'jamie', 'pass': '1234'}

21. 2. 추첨시간

22. 개근상 추첨시간

23. 3. 추첨프로그램 구현

24. 프로그램 구조
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title추첨 프로그램/title
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js/script
style … /style
/head
body
form … /form
script … /script
/body
lottery.html

25. CSS STYLE
body {
text-align: center;
padding-top: 50px;
}
.add_button {
width: 130px;
background-color: azure;
padding: 2px;
margin: 2px;
}
.go_button {
width: 130px;
background-color: azure;
padding: 10px;
margin: 10px;
}
.name_input {
width: 130px;
margin: 2px;
}
.message {
margin: 10px;
}
head
style
여기에 위치
/style
/head

26. FORM
form id=lotto_form
h1추첨 시간/h1
div id=main
div
div id=name_div!-- 이름입력 --/div
input class=add_button type=button id=add value=“추가”/
/div
div
input class=go_button type=button id=go value=GO! /
/div
/div
div class=message id=message!-- 결과출력 --/div
div id=loading style=display:none
img src=lotto.gif /
/div
div id=fire style=display:none
img src=fire.gif /
/div
/form
body 와 /body 사이에 위치, 사용자 입력 폼

27. 자바스크립트
script
$(document).ready(function(){
$(#add).click(function(){
$(#name_div).append(divinput class='name_input' type='text'
name=‘array[]' //div);
});
$(#go).click(function() {
if ($('#first').val() != ) {
$('#loading').show();
$('#main').hide();
}
$.ajax({
url : http://abcds.kr/study/lottery.php,
type : GET,
data : $(#lotto_form).serialize(),
success: function(data) {
var returned_data = JSON.parse(data);
// 5초후 출력 의도적인 딜레이
setTimeout(function(){complete(returned_data.message);},5000);
}
});
function complete(message) {
$('#loading').hide();
$('#message').html(message);
$('#fire').show();
}
});
});
/script

28. 설명
$(“#name_div”).append(“div.../div);
data : $(#lotto_form).serialize(),
setTimeout(function(){complete(returnedData.message);},5000);
function complete(message) {
$('#loading').hide();
$('#message').html(message);
$('#fire').show();
}
name_div엘리먼트에는 html 을 넣습니다.
동적으로 엘리먼트를 추가할 수 있습니다.
데이터로 폼 전체를 넘깁니다.
폼값을 일일이 넘기지 않아도 되니 간편합니다.
5000 (5초) 동안 멈추고 comlete 함수를 호출합니다.
이때 returned_data.message 값도 함께 넘겨줍니다.

29. 4. 다음 API 를 이용한
쇼핑 검색 프로그램 개발

30. DAUM API의 AJAX 사용 불가
!! 자바스크립트 이용이 안되더랍니다.
!!
상황은 AJAX가 콜백(callback)을 받을 수
없어 사용할 수 없었습니다.
ABCD 서버에서 json을 받아서 처리하는
방법을 사용했습니다.
덕분에 삽질을 좀 했고 가뜩이나 안좋은
우리 서버가 위기에 처했습니다.
약속을 지켜야 했기에 실행은 했습니다.
설마 잡혀가진 않겠죠.

31. DAUM 쇼핑 API
https://developers.daum.net/services/apis/shopping/search

32. 쇼핑 API 구조
…..

33. 실행 화면
이전 다음

34. 프로그램 구조
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
title상품검색/title
script src=http://ajax.googleapis.com/ajax/libs/jquery/
1.11.2/jquery.min.js/script
style … /style
/head
body
script … /script
/body
/html
shop.html

35. CSS
#progress {top: 50%; left: 50%; text-align:center; display: none}
.search-bar {float:left; width:100%; margin-left:50px;}
.contents {float:left; width:100%;}
ul.item-list {float:left; width:100%; list-style:none;}
li.item-pic {float:left; width:150px; }
.page{float:left; margin-left:50px;}
head
style
여기에 위치
/style
/head

36. HTML
div id=progress
!-- 로딩 인디케이터 --
img style=width:15px src=loader.gif / 로딩 중입니다.
/div
div class=search-bar
input type=text id=q/ !-- 검색 창 --
select id=sort
option value=pop인기도순/option
option value=min_price최저가순/option
option value=max_price최고가순/option
option value=date출시일/option
option value=review리뷰갯수순/option
/select
input type=button id=search value=검색/
/div
div class=contents
!-- 리스트 --
div id=item_list
!-- loop --
/div
/div
div class=page style=margin: 50px
span id=prev이전/span span id=next다음/span
/div
body 와 /body 사이에 입력

37. 자바스크립트
$(document).ready(function(){
var pageno=1;
var html_data = ;
$(#search).click(function(){
load();
});
function load(){
$('#progress').show();
$.ajax({
url : http://abcds.kr/study/daum.php,
type : GET,
data : {
q : $('#q').val().replace(/s/gi, ''),
result : 10,
pageno : pageno,
sort : $('#sort').val()
},
// 다음 페이지의 success 부분 여기 위치
});
}
});
body
script
여기에 위치
/script
/body

38. SUCCESS 부분
success: function(d) {
var returnedData = JSON.parse(d);
var data = returnedData.channel.item;
if ( data != null ) {
$(#item_list).empty();
$.each(data, function(index, item) {
html_data += ul class=‘item-list';
html_data += li class='item-pic';
html_data += a target='_blank' href=' + item.link + ';
html_data += img src=' + item.image_url +' /;
html_data += /a;
html_data += /li;
html_data += li class='item-text';
html_data += spanb + item.title +/b/span br/;
html_data += span + item.category_name + /span br/;
html_data += span발매일 /spanspan + item.publish_date + /spanbr/;
html_data += span가격 /spanspan + item.price_min + /spanbr/;
html_data += span리뷰 /spanspan + item.review_count + /spanbr/;
html_data += li;
html_data += /ul;
});
$(#item_list).html(html_data);
html_data = ;
$('#progress').hide();
}
}

39. 설명 1
JSON.parse(d)
if ( data != null ) {
$(#item_list).html(html_data);
리턴된 데이터(d)가 비어있지 않다면 실행합니다.
리턴된 데이터(d)가 자바스크립트가 실행할 수 있도록 변형합니다.
item_list 엘리먼트에 html_data 의 값을 넣습니다.
여기선 리스트 하나하나 겠죠.
$(#item_list).empty();
item_list 엘리먼트의 내용을 지웁니다.

40. 설명 2
* 공백제거
$.each(data, function(index, item) {
item.image_url;
});
html_data += ul class='item-list';
$('#q').val().replace(/s/gi, ''),
html_data = html_data + “문자열” 이라는 의미입니다.
q엘리먼트의 값의 빈공간을 제거 합니다.
/s/gi 는 정규식이라고 합니다.
replace 는 변환입니다. 안하면 에러발생..
for 와 비슷한 반복문인데 json array 를 처음 끝까지 확인할때 씁니다.
$.each(data, function(index, item){
});
data = json 데이터
index = 하나씩 증가
item 은 하나의 로우(row)입니다.

41. 해봅시다.
$('#prev').click(function(){
// 이전 여기를 채워 보세요
});
$(‘#next').click(function(){
// 다음 여기를 채워 보세요
});
이전, 다음 기능을 만들어 봅시다.
힌트
pageno 변수를 증가시키고
다시 로드 합니다.

42. $(document).ready(function(){
var pageno=1;
var html_data = ;
$(#search).click(function(){
load();
});
function load(){
$('#progress').show();
$.ajax({
url : http://abcds.kr/study/daum.php,
type : GET,
data : {
q : $('#q').val().replace(/s/gi, ''),
result : 10,
pageno : pageno,
sort : $('#sort').val()
},
success: function(d) {
var returnedData = JSON.parse(d);
var data = returnedData.channel.item;
if ( data != null ) {
$(#item_list).empty();
$.each(data, function(index, item) {
html_data += ul class='item-list';
html_data += li class='item-pic';
html_data += a target='_blank' href=' + item.link + ';
html_data += img src=' + item.image_url +' /;
html_data += /a;
html_data += /li;
html_data += li class='item-text';
html_data += spanb + item.title +/b/span br/;
html_data += span + item.category_name + /span br/;
html_data += span발매일 /spanspan + item.publish_date + /span br/;
html_data += span가격 /spanspan + item.price_min + /span br/;
html_data += span리뷰 /spanspan + item.review_count + /span br/;
html_data += li;
html_data += /ul;
});
$(#item_list).html(html_data);
html_data = ;
$('#progress').hide();
}
}
});
}
});
자바스크립트 분리
!DOCTYPE html
html
head lang=ko
meta charset=UTF-8
/head
body
script src=shop.js/script
/body
/html
shop.js

43. QA

44. 정말 많이 수고하셨습니다. :)
ABCD
http://abcds.kr
https://www.facebook.com/groups/562787713823026/
한성일
https://www.facebook.com/jamie.han.16
iheart79@gmail.com