jquery selector

 

this는 선택 대상

 

event 

 

on 메소드, 특정 사건이 발생하는 시점에 실행할 명령을 실행하는 메소드

 

 

이벤트 종류

 

jss

click() 이라고 함수를 만들 경우, 사용 불가

왜냐하면 중복된 이름이기 때문에,

하지만 에러가 안뜬다.

 

디버깅하는데 에로사항

 

Ajas

Asynchronous Javascript and XML

 

h1태그, a태그등을 쓰면 글자의 모양이 바뀔 것이다.

<형> 이라고 태그를 새롭게 만들면 이것은 사용X

하지만, XML 은 태그를 정할 수 있다.

 

 

jsp 와 ajax 차이점

 

 

해당 부분에 대한 내용만 새롭게 정보를 가져다준다

이것을 비동기라 하고, 중복된 코드가 발생하지 않고, 네트워크 대역폭 지원 낭비를 막을 수 있다

만약 jsp처럼 처리를 하면, 화면 전체가 깜빡 거린다

서버가 많은 부하를 느낄 것이다.

= 돈이 많이 든다

= 서버 한대 몇 십억

스티브 잡스가 선택한 방법!!

 

비동기적 웹 앱 예시

아이디 중복검사)

라이브 검색어)

 

jsp tomcat 으로 진행 및 python 크롤링 연동시

flask 서버 파이선 기반으로 시행

tomcat으로 flask에 요청하면 python의 데이터를 가져온다

local 8080

인 jsp와

python의 로컬 호스트는 서로  다르다

이렇게에 요청 서버와 받는 서버의 도메인 주소가 다르면, 에러가 뜬다..

 

이클립스에 python py를 만들면 렉이 걸리지 않을 것이다.

 

 

ajax 실습

function data()

서버에게 데이터를 비동기로 요청하는 부분

요청할 내용

기능이 작동하는 공간이며

URL을 가져와야한다

넘겨줄 데이터를 정하기(필요한 경우에!)

넘겨줄 데이터가 없는 경우 생략 가능!

 

응답 실패시 , 에러 페이지를 보여줘야 한다

성공과 실패에 대해서, 다음과 같이 변수에 넣어줘야한다

 

API 활용법

영화 진흥 위원회 ~~ 같은 특정 사이트 접속

회원가입

내가 필요한 API 찾기

키값 발급

내 서버주소를 등록

API 샘플코드를 분석

샘플 코드가 없는 경우, 무슨 내용인지 모를때는 공개 되있는 문서doc 열어보기!

API를 나에게 맞게 수정

 

1.데이터 API 데이터파일을 받아서 출력

2. 기능 API (카카오맵) 활용!!

 

로컬호스트 . 뒤에 포트 번호

 

json형태로

 

원래있던 예제 주소

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

 

발급받은 키 :

발급받은키와 특정 날짜로 url 변경해주기

 

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

내부 코드를 콘솔창에 찍어서 내용 확인을 해보자

 

접속이 성공했다

 

모든 데이터는 res에 있음

res 구조를 뜯어보면 영화 이름을 가져오기 위해서는 array 배열에서 인덱싱이 필요함을 느낀다

 

 

 

alert("성공했습니다!");

                    for(let i=0;i<res.boxOfficeResult.dailyBoxOfficeList.length();i++){

                        console.log(res.boxOfficeResult.dailyBoxOfficeList.movieNm[i]);

                    }

 

 

 

---

카카오맵 api 사용하기

접근

 

app 키 발급

 

 

웹 도메인 설정

자바스크립트키

 

왜 카카오맵 실행안될까

복붙하고 키값만 변경하면 되는건데;

 

---

공부 로드맵