스파르타 웹종합 2주차 개발일지

04. JQuery 다뤄보기

4. 태그 내 텍스트 입력하기

1) input box의 경우

$('#post-url').val('여기에 텍스트를 입력하면!');

2) 다른 것들 - 예) 버튼의 텍스트 바꾸기

// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

07. 서버-클라이언트 통신 이해하기

GET 요청

요청한 값들이 response로 들어온다. (response 이름 변경 가능)

ex) 중구 데이터 가져오기

ex) rows 가져오기

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

문법 백키( ` ) 주의!!

`<li>${gu_name} : ${gu_mise}</li>`

11. QuizAjax 연습하기(2) 고양이

소요시간 : 5분

jquery img src 변경하기

attr 함수 사용

<img id="id_img" src="first.jpg"/>
$("#id_img").attr("src", "이미지 경로");

출처: https://solbel.tistory.com/1070 [개발자의 끄적끄적:티스토리]

<script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#img-cat').empty()
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    console.log(response)
                    let img_url = response[0]['url']
                    $('#img-cat').attr("src", img_url);
                }
            })
        }
    </script>

내가 헷갈려한 부분

let img_url = response[0]['url']

[0]을 붙이지 않고 response['url']만 입력해 값이 넘어오지 않았다.

해결책

console.log(response)

console.log 를 통해 값을 어떻게 받아오는지 크롬에서 확인 한 후 코드를 작성하자!

2주차 숙제

javascript 로딩 후 실행

$(document).ready(function(){
	alert('다 로딩됐다!')
});