javascript & jQuery

구구절절 자바스크립트
document.getElementById("element").style.display = "none";

짧고 직관적 제이쿼리
$('#element').hide();

※ jQuery 사용 시 ★★★★임포트★★★★

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

JSON

keyword : API, client, server

-API : 정보, 은행창구과 같은 역할 / 서버 -> 클라이언트
-클라이언트 -> 서버

• GET : 데이터 조회 요청
• POST : 데이터 생성, 변경, 삭제 요청
  -JSONview : 크롬 익스텐션 설치, API를 보기 쉽게 만들어 줌

Ajax

ajax 기본 골격

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

console.log(response) : 크롬 개발자 도구 - 검사에서 적요이 잘 되는 지 확인하기 위해

$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});

let mise_list = response["RealtimeCityAir"]["row"];
: let(지정) (mise_list라고 함수명) = response(불러오다)["RealtimeCityAir"]["row"]; //['']['']경로는 전부 쳐야 됨

for (let i = 0; i < mise_list.length; i++) : 반복문
첫 번째부터 mise_list.length(mise_list의 길이(개수))보다 작으면 1씩 더해라

let mise = mise_list[i];
mise_list의 i번째
let gu_name = mise["MSRSTE_NM"];
gu_name이라고 함수명 지정 =
let gu_mise = mise["IDEX_MVL"];
gu_name이라고 함수명 지정 =

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


<script>
    function q1() {
        // 여기에 코드를 입력하세요
        $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            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 = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html);
                }
            }
        })
    }
</script>

function q1() : ajax를 먹일 곳. q1자리

$('#names-q1').empty(); : 불러온 정보를 덧붙이지 않기

$('#names-q1').append(temp_html); : 새로운 정보를 계속 추가하기

let temp_html = <li>${gu_name} : ${gu_mise}</li>
백팁 사용 `` / 불러올 때 : ${ }

let temp_html = '' //빈 칸으로 놔두기

if (gu_mise > 70) { //만약 70 초과라면
temp_html = <li class="bad">${gu_name} : ${gu_mise}</li> //.bad를 줘라
} else { //그렇지 않으면
temp_html = <li>${gu_name} : ${gu_mise}</li> //그냥 불러와라
}

}

img src

< script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function(response){
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}
< /script>

$("#img-cat").attr("src", imgurl); : 이미지 주소를 새로고침 하기
이미지 코드에 id='img-cat' 줘야 함

homework

$(document).ready(function () {   //로딩 후 호출하기
        get_rate();
    });

function get_rate(){
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {
            let now_rate = response['rate'];
            $('#now-rate').text(now_rate);  //.text((let 함수명))
         }
     })
 }