[JS]5. JQuery 실습

 

1. Element 조작 메소드

 

 

• prepend(): 대상 태그 안에서 앞에 추가

 

• append():대상 태그 안에서 뒤에 추가

 

 

 

• after(): 대상 태그 뒤에 추가

 

 

2. Element 접근 메소드

 

[실습1]입력값에 따라 관련 이미지 출력하기

3. 애니메이션 효과: animate({css 속성: 값}), 애니메이션 실행시간, 이징종류);

-애니메이션 실행시간: ms(밀리세컨드) 단위 예)1초=1000;

-이징(easing): 애니메이션 효과의 변화 속도

 

 

[AJAX]

1. AJAX(Asynchronous JavaScript and XML)

-필요한 데이터만 웹서버에 요청해서 받은 후 

-비동기 통신: 요청을 처리하는 중에도 다른 작업 처리 가능

-동기 통신: client가 서버에 요청하고 서버의 응답이 올 때까지 다른 작업 불가

                                                           

          

 

2. AJAX 기본구조

 $.ajax({ 

url=”데이터를 요청할 서버의 주소”

type=”전송방식”

data: “전송할 데이터”

success: 성공 callback 함수

error: 실패 callback 함수

}

 

데이터형식

csv: 데이터를 쉼표를 구분 (용량은 작지만 가독성 낮음)

xml: 태그를 사용해 가독성이 좋지만 용량이 크다

 

 

3. JSON

 

4. Open API(Open Application Programming Interface): 누구나 데이터를 사용할 수 있도록 공개된 API

 

[실습]영화 진흥위원회 Open API

 

영화 진흥위원회 Open API 홈페이지 주소

https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do

 

 

JSON 주소 복사

http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101

 

                                                         

영화진흥위원회 일별 박스 오피스 데이터

 

[실습2]카카오 지도API

https://apis.map.kakao.com/

 

카카오 개발자 사이트

https://developers.kakao.com/

Kakao Developers

 

 

앱 추가