개발하는 체대생

웹 개발 종합반 - 2주차 본문

카테고리 없음

웹 개발 종합반 - 2주차

개발하는체대생

[2주차 수업목표]

1. Javascript 문법에 익숙해진다.

2. jQuery로 간단한 HTML을 조작할 수 있다.(html 추가, 삭제 등)

3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

 

Javascript 복습

<!-- 짝/ 홀수 onclik 함수 -->

	<script>
        let count = 1;
        function hey() {
            if (count % 2 == 0) {
                alert('짝수');
            } else {
                alert('홀수');
            }
						count += 1;//클릭 할 때마다 1씩 증가 시킨다.
        }
    </script>

 

1. JQuery

JQuery란?

JQuery는 Javascript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 Javascript 라이브러리다.

즉, JQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드다.(그렇기 때문에 쓰기 전에 "import"를 해야한다.)

 

예시

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";
//document안에 element라는 ID를 가져와라, 그리고 style의 display를 none(없음)으로 해라

 

jQuery로 보다 직관적으로 쓸 수 있다.

$('#element').hide();
//id 가 element 인 것을 hide(숨김)해라

 

1) JQuery 사용하기

<head> 와 </head> 사이에 아래 <script>를 추가해야함

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

그리고 css에서는 선택자로 class를 사용했던 것 처럼

jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킴

 

1-1) input 박스의 값을 가져와보기▼

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

 

1-2) div 보이기 / 숨기기▼

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

 

1-3) 태그 내 html 입력하기▼

  • <div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
  • 카드가 붙는 div 에 id를 추가해주는 것이 핵심!
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

버튼 넣기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

카드 넣기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

++

이미지 바꾸기

//attr을 사용하면 해당 태그의 속성을 바꿀 수 있다.
$("#아이디값").attr("src", 이미지URL);

텍스트 바꾸기

// text를 사용하면 해당 태그 안에 있는 텍스트를 바꿀 수 있다.
$("#아이디값").text("바꾸고 싶은 텍스트");

2) JQuery 적용하기(문제풀기)

<!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;
        }
    </style>

    <script>
        function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기

            /*정답*/
            let q1_val = $('#input-q1').val();

            if (q1_val == '') {
                q1_val = '입력하세요!';
            }

            alert(q1_val);

            /////////////////////////////////
            //선생님 정답
            // let txt = $('#input-q1').val();
            // if(txt == ''){
            //   alert('빈칸입니다.');
            // }else{
            //   alert(txt);
            // }


        }

        function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

            /*정답*/
            let q2_val = $('#input-q2').val();
            let msg = null;
            if (q2_val.includes('@')) {
                let email = null;
                email = q2_val.split('@');
                msg = email[1];
            } else {
                msg = '이메일이 아닙니다.';
            }

            alert(msg);

            /////////////////////////////
            //선생님 정답
            // let txt = $('#input-q2').val();
            // if (txt.includes('@') == true){
            //   alert(txt.split('@')[1].split('.')[0]);
            // }else {
            //   alert('이메일이 아닙니다.');
            // }

        }

        function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

            /*정답*/
            let txt = $('#input-q3').val();
            //alert(q3_val);
            let temp_html = `<li>${txt}</li>`;
            $('#names-q3').append(temp_html);


            //////////////////////////////
            //선생님 정답
            // let txt = $('#input-q3').val();
            // let temp_html = `<li>${txt}</li>`;
            // $('#names-q3').append(temp_html);

        }

        function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)

            /*정답*/
            $('#names-q3').empty();
            $('#input-q3').val('');
            alert('지우기');

            ////////////////////////
            //선생님 정답
            // $('#names-q3').empty();

        }

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>
    
    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text"/>
        <button onclick="q1()">클릭</button>
    </div>
    <hr/>
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text"/>
        <button onclick="q2()">클릭</button>
    </div>
    <hr/>
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

 

2.  Ajax

1) 서버-클라이언트 통신 이해하기

 

1-1) 서버→클라이언트 : "JSON"을 이해하기

*서울시 OpenAPI 접속하기

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

* 'JSON'을 좀 더 편하게 보기 위한 크롬 익스텐션 JSONView를 설치

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSON이란?

JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식

(단, JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.)

 

JSON의 구조?

JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 아주- 유사하다.

(아래 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다.)

1-2) 클라이언트→  서버 : GET 요청 이해하기

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

* GET        →      통상적으로! 데이터 조회(Read)를 요청할 때
                           예) 영화 목록 조회

* POST     →      통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
                           예) 회원가입, 회원탈퇴, 비밀번호 수정

이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967
GET 방식으로 데이터를 전달하는 방법

?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
         q=아이폰                        (검색어)
         sourceid=chrome        (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)
여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

2) Ajax 시작하기

 

Ajax 시작 전 참고 사항

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, 
jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

 

Ajax 기본 골격

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

Ajax 코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
  • $ajax 코드 설명
    • type: "GET" → GET 방식으로 요청한다.
    • url: 요청할 url
    • success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
    • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value&param2=value2 

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

 

3) Ajax 활용하기

 

OpenAPI 활용시 순서 예시

▼미세먼지 openAPI

http://spartacodingclub.shop/sparta_api/seoulair

모든 구의 미세먼지 값을 찍어보기

(1) 미세먼지 데이터가 어디에 있는지 찾기

위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있다. 이걸 꺼내보자

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
		console.log(mise_list);
  }
})

(2) 반복문으로 구 데이터를 출력해보기

row의 값을 mise_list에 담았으니, 반복문을 이용보자!

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      console.log(mise);
    }
  },
});

(3) 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기

구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  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);
    }
  }
});

 

3-1) 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기

Ajax 기본 골격

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

미세먼지 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulair

문제) 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하여

(1) 모든 구의 미세먼지를 표기

(2) 업데이트 버튼을 누를 때마다 지웠다 새로 써져야함

(3) 미세먼지 수치가 70이상인 곳은 빨간 글씨로 표기

    <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() {
            ////id가 names-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'];

                        //console.log(gu_name, gu_mise);
                        let temp_html = '';

                        //미세 먼지의 수치가 35가 넘으면 class="bad"를 줘서 빨간 글씨로 출력
                        if (gu_mise > 35){
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                        }else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                        }

                        $('#names-q1').append(temp_html);//id가 names-q1 인 태그 안에 붙이기

              }
              //console.log(response['RealtimeCityAir']['row']);
            }
          })
        }
    </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>

3-2) 서울시 OpenAPI(실시간 따릉이 현황)을 이용하기

Ajax 기본 골격

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

따릉이 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulbike

문제) 서울시 OpenAPI(실시간 따릉이 현황)를 이용하여

(1) 모든 위치의 따릉이를 보여준다. (거치대 위치, 거치대 수, 현재 거치된 따릉이 수)

(2) 업데이트 버튼이 클릭 될때 마다 지웠다 새로 보여지게 한다.

(3) 따릉이 수가 5대 미만이 곳은 빨갛게 보여준다.

<!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;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }
        .urgent {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();

            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {

                    let rows = response['getStationList']['row'];
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName'];
                        let rack = rows[i]['rackTotCnt'];
                        let bike = rows[i]['parkingBikeTotCnt'];
                        //console.log(name, rack, bike);

                        let temp_html = '';


                        if (bike >= 5) {
                            temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                        }else {
                            temp_html = `<tr class="urgent">
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                        }

                        $('#names-q1').append(temp_html);

                    }
                    //console.log(response['getStationList']['row']);
                }
            })
        }
    </script>

</head>

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

<hr/>

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
        <tr>
            <td>102. 망원역 1번출구 앞</td>
            <td>22</td>
            <td>0</td>
        </tr>
        <tr>
            <td>103. 망원역 2번출구 앞</td>
            <td>16</td>
            <td>0</td>
        </tr>
        <tr>
            <td>104. 합정역 1번출구 앞</td>
            <td>16</td>
            <td>0</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

</html>

3-3) 랜덤 르탄이 API를 이용하여 이미지와 텍스트 바꾸기

Ajax 기본 골격

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

르탄이 API

http://spartacodingclub.shop/sparta_api/rtan

문제)랜덤 르탄이 API를 이용하여

(1)업데이트를 클릭할 때마다 랜덤 르탄이 사진을 바꿔준다.

(2)업데이트를 클릭할 때마다 지웠다 새로 써져야 한다.

(3)업데이트를 클릭할 때마다 랜덤 르탄이 텍스트를 바꿔준다.

<!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;
        }

        div.question-box > div {
            margin-top: 30px;
        }

    </style>

    <script>
        function q1() {

            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                success: function (response) {
                  //console.log(response);
                  let url = response['url'];
                  let msg = response['msg'];
                  //console.log(url, msg);
                  $('#img-rtan').attr('src', url);
                  $('#img-rtan').text(msg);

                }
            })

        }
    </script>

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

<hr/>

<div class="question-box">
    <h2>3. 르탄이 API를 이용하기!</h2>
    <p>아래를 르탄이 사진으로 바꿔주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">르탄이 나와</button>
    <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
    </div>
</div>
</body>
</html>

3-3) 기존에 만들어 뒀던 팬명록에 서울시 날씨 API를 추가하기(로딩 돨 때 마다 실시간 업데이트)

    <script>
        //로딩 후 호출하기
        //document가 준비(로딩)되면 실행해라
        $(document).ready(function () {
            //왜?? 일정 시간 딜레이 됬다가 로딩이 될까??
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                  //console.log(response['temp']);
                  let temp = response['temp'];
                  $('#temp').text(temp);

                }
            })
        });


    </script>



<body>
    <div class="mytitle">
        <h1>로이킴 팬명록</h1>
        <p>현재 기온 : <span id="temp"></span>도</p>
    </div>
</body>

 

Comments