02_Step : jQuery & ajax

#01. jQuery

jQuery = 자바스크립트의 코드 라이브러리입니다.
jQuery는 부트스트랩 같이 미리 작성된 자바스크립트 코드입니다. 때문에 import를 꼭 해야합니다.
jQuery는 복잡하고 호환성에 문제가 생길 수도 있어 자바스크립트 대신 유용하게 사용됩니다.

 

예제1)

입력칸(id값=input-q1)이 공백일 경우 '입력하세요!' 팝업창이 나옵니다.

입력칸(id값=input-q1)이 공백이 아닐 경우 입력된 문자가 팝업창에 나옵니다.

 

예제2)

입력칸(id값=input-q2)에 '@'이 포함되어 있는지 먼저 찾아냅니다.

포함되어 있을 경우 '@'을 기준으로 문자열을 자르고, 잘라진 문자열의 1번째 index를 다시 한 번

'.'을 기준으로 자르고 0번째 index를 선택합니다.

 

예제3)

input-q3의 입력된 내용을 temp_html li에 저장합니다.

저장된 temp)html의 li값은 names-q3에 더해집니다.

내용을 모두 지우고 싶다면 .empty() 함수를 이용합니다.

#02.ajax

ajax는 jquery를 import한 페이지에서만 구동됩니다.

 

 

ajax는 기본적으로 get타입이며 골격은 위의 이미지와 같습니다.

 

위 이미지의 rows는 api url에서 getStationList의 row값을 가져와 for문을 구동시켰습니다.

그 결과 station, rackTo, park 값을 정의하였고, park < 5 인 값에 대하여 빨강색으로 구분하여 정리할 수 있었습니다.

빨강색으로 구분하기 위해서는 class값을 정해주고, style에 가서 class를 꾸며주는 red값을 설정해 줍니다.