스파르타코딩 웹개발 2주차

스파르타코딩 웹개발 2주차
쉽게 가르쳐주시고 깊게 배우게 하지 않는 느낌.
수박 겉핥기 느낌이 있다. 부정적이지는 않다 패캠에서 도망친 기억이 있기 때문에 계속 킾고잉 하게 해줘서 좋음!!
나는 이 강의가 맞는것같다. 완강하고, 다시 한번 전체적으로 궁금했던 부분 구글링해서 공부해봐야할것같다.

Jquery

• HTML을 조작하는 편리한 자바스크립 코드를 누가 대신 짜놓은것!!

CSS 는 class 로 지칭 jQuery는 ID로 값을 지칭해서 코드 진행

ex)

바디에 이렇게 들어가있음 
<input id="url" ></input>

그러면 스크립트에는 
$('#URL).value() 
아이디값 넣어주고 value는 비워두면 값을 불러오고 넣으면 값을 보여줌 
value 에 특정 값을 세팅해두면 해당 값이 들어가게됨 

OPEN API 통해서 Ajax 활용하는 법

json 형식(딕셔너리와 라이브러리가 합쳐진 모습)으로 나와있는 오픈 API.
크롬에서 JSONView 확장자 설치하면 깔끔하게 볼 수 있다.
;회사에서 들어본적 있어서 월요일에 해당 부분 확인해봐야지)

기본 골격으로 이것 저것 응용 진행

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

복습 할 부분 코드

<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"]; let 별표 다섯개 나는 선언하는 걸로 이해함 
                    for (let i = 0; i < rows.length; i++) {
                        let rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        } else {
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>