JQuery란?
Jquery란 쉽게 말하여 자주쓰이는 Javascript 구문들을 미리 작성해놓은 라이브러리이다.
예를들어, Javascript로는 다음처럼 쓰일 구문이
document.getElementById("element").style.display = "none";Jquery를 사용하면
$('#element').hide();이렇게 짧고 직관적이게 사용할 수 있다.
JQuery는 HTML의 <head> 부분에 다음과 같은 CDN을 삽입해 주면 된다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
AJax란?
Ajax란 서버와 통신하여 데이터를 JSON(Key와 Value로 이루어진 딕셔너리 형식의 데이터 타입)으로 받아오게하는 JQuery 구문을 말하며, 다음과 같은 형태로 사용한다.
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
2주차 숙제
1주차 팬명록에 날씨 정보를 AJax로 받아와 HTML에 적용시키는 것이다.
<script>
$(document).ready(function(){
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
let temp = response['temp'];
$("#temp").text(temp);
}
})
alert('다 로딩됐다!')
});
</script>위에서 말한 Ajax 사용법에 맞추어 설명하면,
http://spartacodingclub.shop/sparta_api/weather/seoul 라는 Url에 Get으로 Data를 요청하여 받아온 데이터 중,
Key값이 temp인 것을 id가 temp인 태그에 text로 설정하는 구문이다.
'교육 > 스파르타코딩클럽 - 내일배움단' 카테고리의 다른 글
| [5주차] AWS로 웹서비스 배포하기 (0) | 2022.11.16 |
|---|---|
| [4주차] 파이썬 Flask (0) | 2022.11.16 |
| [3주차] Python 크롤링 (0) | 2022.11.16 |
| [1주차] HTML, CSS, JS 기본 (0) | 2022.10.19 |