왕초보 JQuery 도전기

JQuery란?

• 미리 짜여진 Javascript!
• 전문 개발자들이 짜둔 코드 라이브러리가 있고, 거기서 가져와서(=임포트) 사용해야함
• 임포트하는 방법은 여러가지지만,
  그 중 구글에서 가져오는 방법은 아래(↓)코드를 (head)와 (/head)사이에 넣는 것.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<참고자료>
https://www.w3schools.com/jquery/jquery_get_started.asp

JQuery 기본공식

• 이름을 붙여줄 때 id 를 사용한다 (css에서는 class 사용)
• ('#_id롤 지정한이름_')._원하는 함수_();('#A').val() : A의 값을 가져온다.
  ('#A').hide() : A를 숨긴다.('#A').show() : A를 나타낸다.

JSON 이해하기

• JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식
• 서울의 미세먼지, 각 지하철역 따릉이 현황 등의 openAPI를 받아와서 쓸 수 있다
• JSON을 더 예쁘게 보려면 크롬 익스텐션 JSONView 을 설치해야 한다.

Ajax 이해하기

• Ajax(Asynchronous JavaScript and XML)
  : Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나
• Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})