jQuery 란? : 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는
오픈소스 기반의 자바스크립트 라이브러리입니다.
jQuery 사용법 : head 태그에 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>입력할때 : $('#url').val('이렇게 하면 입력이 가능하지만!');
가져올때 : $('#url').val();
숨기기 : $('#post-box').hide();
보이기 : $('#post-box').show();
이미지 바꾸기 : $("#아이디값").attr("값의 이름", 값);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
로딩 후 호출하기 : $(document).ready(function(){});```$(document).ready(function(){ $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/weather/seoul", data: {}, success: function(response){ $('#temp').text(response['temp']) } }) });```
태그 내에 html 삽입하기
// 주의: 홑따옴표(')가 아닌 backtick으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="card h-100"> <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">**${title}**</h5> <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p> <p>⭐⭐⭐</p> <p class="mycomment">나의 한줄 평을 씁니다</p> </div> </div> </div>`;$('#cards-box').append(temp_html);
JSON 란? : - JavaScript Object Notation라는 의미의 축약어로 데이터를
저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
- Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이
작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에
많이 사용한다.
- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍
문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
AJAX 란? : JavaScript의 라이브러리중 하나이며 Asynchronous
Javascript And Xml(비동기식자바스크립트와 xml)의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체
페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를
로드하는 기법 이며 JavaScript를 사용한 비동기 통신,
클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를
요청하는 것이다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
기본골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
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 = ''
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>