항해99 (웹개발 종합반 2주차)

2주차에는 동작을 쉽게 사용할 수 있는 Jquery에 대해 배우게된다.

jQuery 란

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리라고 한다.

 

---

그래서 jQuery를 사용하기 위해서는 아래 스크립트를 작성해주면 된다.

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

 

jQury에서는 상태값을 가져오기위해 val() 이라는걸 사용하면 되는데

    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="Url" placeholder="name@example.com">
        <label for="Url">영화URL</label>
    </div>

 

이런식으로 html 코드가 되어있다면 그 아이디값을 지정해 val()을 아래와같이 써주면 된다.

$('#url').val();

라이브러리는 모두 외워서 사용 할 필요없고 필요한 부분을 찾아서 사용하면된다.

https://api.jquery.com/

jQuery API Documentation

 

 

---

그 다음으로는 Ajax를 배우게되는데

기본골격으로는 아래와같다.

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

 

ajax를 사용해서 서울시 미세먼지 OpenAPI를 사용해봤다.

    <script>
        $.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'];
                    console.log(gu_name, gu_mise);
                }
            }
        })
    </script>

결과는 아래와 같이 지정한 구의 이름, 미세먼지가 나오게 됐다!