[스파르타코딩클럽] 웹개발 종합반-2주차

console 창이 등장!

-변수 

-함수

-반복문(오타작렬)

$('#post-box').hide();
$('#post-box').show();
$('#post-box').css('display')

-jquery란?

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

display: none;

function openclose() {
            let status = $('#post-box').css('display')
            if (status == 'block') {
                $('#post-box').hide()
                $('#btn-posting-box').text('포스팅박스 열기')
            }else{
                $('#post-box').show()
                $('#btn-posting-box').text('포스팅박스 닫기')
            }
        }

 

Q2. 도메인만 띄우기

*if문에 let 넣어서 도메인 잘라내기

콘솔 사용---txt.split('@')[1].split('.')[0]

 

Q3. <li>${txt}</li> 여기에 id를 $('#id') 넣어서 활용.

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

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

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

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

 

 

-Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

-Ajax 코드 해설

$.ajax({ type: "GET", // GET 방식으로 요청한다.

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

data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음

console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성

}

})

 

-미세먼지 OPENAPI

 

<script>
        function q1() {
            $('#names-q1').empty()
            $.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']

                        let temp_html = ``
                        if (gu_mise > 50){
                            temp_html =`<li class="bad">${gu_name} : ${gu_mise}</li>`
                        }else{
                            temp_html =`<li>${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function (response) {
            let img = response[0]['url']
            for (let i = 0; i < img.length; i++) {
            $('#img-cat').attr("src", img)
            }
          }
        })
      }

-콘솔 창의 작업은 오타와 괄호를 정리하기 어렵다. 아무래도 쉽게 해주는 파이참이 사용하기 쉬움...

 

-1주차 보다는 따라 할 만하다. 그렇다는 의미는 1주차는 "뭐야? 엉?? 뭐라고??? "숙제 할 때 전혀 감이 안옴. "어디서 시작할지 모르겠음"의 느낌이라면 2주 차는 따라하기는 한다. 근데 아직 응용이나 숙제할 때 "이렇게 하는 거 아닌가????? "의 궁금증이 생기기 시작.

 

++복습복습복습

 

 

***5만원 할인 링크 클릭!***

https://spartacodingclub.kr/?f_name=%EA%B9%80%EB%B3%B4%EC%9B%90&f_uid=6110d79e50065eacde984bab 

스파르타코딩클럽