애먹었던 2주차 수업이 끝났다. 나는 명령문 구글검색을 해도 왜그렇게 검색 결과에 신뢰를 갖지 못하는지...코딩 사전이 있다면 책이라도 한 권 사야하나 싶다...(에휴) 그래도 열심히 잘 좇아왔다.

jQuery는 미리 작성된 자바스크립트 (라이브러리) / Ajax는 "비동기식 자바스크립트 XML"의 약자로 화면상 개체를 움직이기 위한 방식이다.

사용하기 위해서는 사이에 jQuery CDN을 집어 넣는 것이 전제다.

pycham에서 class=""를 주듯 id=""를 주고 크롬 console에서

$('#id').val()/.append()/.text()/.hide()/.show() 등

으로 조작 가능하다.

개인적으로 가장 오래 시간이 걸렸던 실습을 남긴다.
어려웠던 점 3가지
1) -

2) if (gu_mise > 70) {
temp_html = <li class="bad">${gu_name} : ${gu_mise}</li>
} else ... 여기서 나는 ${g_name : gu_mise}로 넣었다가 오류나서 다시 ${'gu_name' : 'gu_mise'}를 넣었다가 별짓을 다했는데 정답은 ${}을 두 개에 각각 쓰는 것이었다.

3) $('#names-q1').empty() 를 function q1() { 윗줄에 넣어버린 실수를 했었다.

jQuery 연습하고 가기!

<!-- 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;
    }
    .normal {
        color: lawngreen;
    }
    .good {
        color: dodgerblue;
    }
</style>

<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 = ``
                    if (gu_mise > 70) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else if (gu_mise > 50) {
                        temp_html = `<li class="normal">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li class="good">${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                }
            }
        })
    }
</script>

jQuery+Ajax의 조합을 연습하자!

<hr />

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