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

연주·2022년 6월 2일

JavaScript TIL WIL ajax html jquery 스파르타코딩클럽 웹개발종합반 팬명록

스파르타 코딩클럽_웹개발 종합반

목록 보기

2/5

2주차 수업목표🏆

Javascript 문법에 익숙해진다.
jQuery로 간단한 HTML을 조작할 수 있다.
Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

📌 JavaScript 복습

// 클릭 수가 홀수인지 짝수인지 알아본다!
// % 2로 나눈 후 나머지 값이 0이면 짝수, 0이 아니면 홀수!

let count = 0
        function hey(){
            count += 1
            if (count % 2 == 0) {
                alert('짝수입니다.')
            } else {
                alert('홀수입니다.')
            }
        }

📌 JQuery 시작하기

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

jQuery는 직관적이고 짧게!

jQuery에서는 id 값을 정해준다!
<head> 와 </head> 사이에 코드 한 줄 넣기!

📌 JQuery 다뤄보기

// 원하는 값 가져오기
$('#id값입력').val();

        function open_box(){
            $('#post-box').show()
        }
        
        // 포스트박스 보이기
        
        function close_box(){
            $('#post-box').hide()
        }
        
        // 포스트박스 숨기기

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

📌 JQuery 연습하기

function q1() {
    let value = $('#input-q1').val();
    if ( value == '') {
        alert('입력하세요!')
    } else alert(value);
}

function q2() {
    let email = $('#input-q2').val();
    if (email.includes('@') == true) {
       alert(email.split('@')[1].split('.')[0])
    } else {
        alert('이메일이 아닙니다')
    }
}

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

function q3_remove() {
    $('#names-q3').empty()
}

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

API 은행 창구 같은 것?
GET 타입 : 데이터 조회
POST 타입 : 생성, 변경, 삭제

json형식 딕셔너리가 리스트형으로 순서대로 내려오는 것

📌 Ajax 시작하기

// 서울시 미세먼지 값 가져오기
    function q1() {
      $.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)
                      }
                  }
              })
            }


// 서울시 미세먼지 값 가져오기 + 미세먼지 값이 65이상이면 빨간색으로 표현

	function 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']

                    let temp_html = ``

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

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

📌 Ajax 연습하기

// 실시간 따릉이 현황 + 5개 미만인 곳은 빨간색으로 표시

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']

                        let temp_html = ``

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

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

이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

// 르탄이 업데이트!

function q1() {
$.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                success: function (response) {
                    let url = response['url']
                    let msg = response['msg']

                    $('#img-rtan').attr('src',url)
                    $('#text-rtan').text(msg)
                }
            })
}

📗2주차 숙제

팬명록 메인 페이지에 현재 기온 표시하기!

내가 있는 대전지역에 현재 기온이 로딩될 수 있게 추가했다.

💬 오늘은 처음으로 JQuery를 배웠는데 처음이라 어색했지만 JQuery의 기능은 재밌었다.
Ajax코드를 사용해서 API를 가져와서 적용해서 나타나는 건 정말 오! 넘 신기하고 재밌다.
앞으로 어떤 것들을 가져오게 될 수 있을지도 기대되고
다음엔 따릉이말고 대전에 타슈의 현황도 데려와서 배운 것을 응용 할 수있지 않을까 기대가 된다.