[항해99 사전준비] 웹개발 종합반 - 2주차 개발일지

2주 차 목표

• Javascript 문법에 익히기
• jQuery로 사용하기.
• Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아오기.

2주 차 실습

 

화면

1주 차 실습에 제작하였던 페이지에 이어서 ajax로 서울 날씨 API를 사용하여 서울 현재 기온 실시간 데이터를 받아온다.

페이지가 로딩되었을 때 자동으로 업데이트해주는 코드를 넣어준다.

 

코드1

 <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response['temp']
                    $('#temp').text(temp)
                }
            })
        });
</script>

코드 2

<div class="mytitle">
    <h1>10CM</h1>
    <p>현재기온 : <span id="temp">00.0</span>도</p>
</div>

body 태그 안에서 p 태그를 추가하고 현재 기온을 나타내는 부분만 span 태그를 사용해준다.

 

서울 현재 기온이 변화가 있다면 페이지 새로 고침 시 표시되는 데이터도 바뀌는 걸 알 수 있다.