웹개발 종합반 -2주차

jQuery 란?

 

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.

 

jQuery와 Javascript - 코드 비교

 

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

 

Javascript)

document.getElementById("element").style.display = "none";

jQuery)

$('#element').hide();

 

참 쉽죠 ?

 

"JSON" 이란 ?

서울시 미세먼지 OpenAPI

따릉이 현황 OpenAPI

등을 배열에 담아 key:Value 로 이루어서 제공하는 것

 

👉 API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

Ajax 란?

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

 

탭으로 정렬이 안되는군요..

복+붙으로 ajax 기본뼈대 불러와서 GET방식으로 open api의 url을 통해 json data를 얻어온다..

console에 띄워 데이터 확인후 사용할 데이터만 추출하여 정의한 뒤 ajax 를 이용하여 append로 추가

 

let rows = response["RealtimeCityAir"]["row"];

for (let i = 0; i < rows.length; i++) {

let gu_name = rows[i]['MSRSTE_NM'];

let gu_mise = rows[i]['IDEX_MVL'];

let temp_html = `<li>${gu_name} : ${gu_mise}</li>` $('#names-q1').append(temp_html);

$('#names-q1').append(temp_html);

}

 

ajax 를 이용하여 이미지 및 텍스트값 변수 변경

.attr의 경우 이미지 뿐만아니라 다른 변수값도 변경 가능한 함수인것 같다..

 

• 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
• 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

근데.. 왜 여기에는 세미콜론이 있는데, 파이참에서는 필요없는거지 ??