Jaegool_'s log

웹개발 종합반 2주차 내용 [스파르타 코딩] <jQuery, Ajax> 본문

Development Log/Web Development

웹개발 종합반 2주차 내용 [스파르타 코딩] <jQuery, Ajax>

Jaegool 2022. 5. 9. 22:10

https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d#5b49e4f975794b91842170362701b9e9

 

[스파르타코딩클럽] 웹개발 종합반 - 2주차

매 주차 강의노트 시작에 PDF파일을 올려두었어요!

www.notion.so

 

<Ajax 기본 구조>

$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})

 

<계속 기억하기>

* CSS는 class로 명명해주고 jQuery는 id로 명명해준다.

* CSS는 style에서 꾸며주고 jQuery는 script에서 설정해준다.

* jQuery에서

let temp_html = `<li>${txt}</li>`

위와 같은 문장을 쓸 때 Backtick(`)과 작은 따옴표(')를 잘 구분해서 사용하기.

 

 

< jQuery + Ajax 연습 >

- 서울시의 미세먼지 OpenAPI를 이용하여 웹에 구별로 미세먼지 농도 로그 남기기.

- 짙은 곳은 빨간색으로 표시.

<!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;
        }
    </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 > 80) {
                        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>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
    </ul>
</div>
</body>

</html>

 

Problem

- 위의 jQuery + Ajax를 연습할 때 예시에서는 미세먼지 수치가 120이상을 빨간색으로 표시하라고 했으나 연습할 당시에 서울에서 120이 넘어가는 구가 없었다. 그럼에도 빨간색으로 변하지 않아서 수치를 보지 않고 코드가 어디가 잘 못되었나 한참을 확인하고 있는 나를 발견했다... 실제 수치를 간과하지 말자.

 

Questions

- console.log() : 콘솔에다가 별도의 설치없이 출력해줌으로 코드문제를 해결하거나 데이터 흐름을 추적할 때 자주 쓰임.

 

'Development Log > Web Development' 카테고리의 다른 글

What is AJAX?  (0) 2023.08.06
웹개발 종합반 5주차 내용 [스파르타 코딩] <bucket-list(toDoList), deploy a web with AWS & FileZilla & 가비아>  (0) 2022.05.31
웹개발 종합반 4주차 내용 [스파르타 코딩] <Flask, POST, GET>  (0) 2022.05.23
웹개발 종합반 3주차 내용 [스파르타 코딩] <Python, crawling, mongoDB>  (0) 2022.05.21
웹개발 종합반 1주차 내용 [스파르타코딩클럽] <HTML, CSS, JAVASCRIPT>  (0) 2022.05.04
'Development Log/Web Development' Related Articles more