스파르타코딩클럽 2주차 교육 (Ajax, API 사용법)

 

 

JavaScript는 홈페이지에 동작을 더해준다.

 

= 은 변수를 선언할 때 사용.

let count = 0
function hey(){
    count += 1
    if(count % 2 == 0)

==은 같다는 의미로 사용

 

JQuery란?

 

HTML 요소를 조작하는 편리한  Javascript를 미리 작성해둔 라이브러리.

(부트스트랩도 CSS코드를 우리가 이용한 것)

 

부트스트랩 링크.

Buttons

 

JavaScript VS JQuery 문법 비교

 

 

CSS에서는 무언가 지칭할 때 Class를 썼지만

JQuery는 ID를 쓴다.

 

 

똑같은 행동을 했는데도 3줄이나 쓰는 코딩과, 한줄로 요약되는 코딩.. 

split 함수를 제대로 쓰는 방법 기억해둘것.

특정 단어로 자르면 배열 형태로 떨어짐.

 

123@naver.com 

 

split('@') = 123[0], naver.com[1]

split('@')[1] = naver.com

split('@')[1].split('.') = naver[0], com[1]

split('@')[1].split('.')[0] = naver

let email = $('#input-q2').val()

if (email.includes('@') == true) {
    // let mail = email.split('@')
    // let domain = mail[1].split('.')
    // alert(domain[0])
  
    alert(email.split('@')[1].split('.')[0])
} else {
    alert('이메일이 아닙니다.')
}

 

 

3번째 함수는 ``(백틱)을 활용해서 li 추가되도록 할것.

append는 붙여주는 명령어 인듯.

 

        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()

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

 

착각한 것. (UL 리스트 자체를 없애는 것으로 착각. ID값이 있는 names-q3만 없애면 됨.

 

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

 

 

JSON이란? 

Key:Value로 이루어져있음.

딕셔너리형 :아이디와 값이 뭉친 하나의 정보 뭉탱이 (정말 사전처럼 정의되어 있는것)

리스트형 : row 아래 여러개의 딕셔너리가 뭉쳐있는 느낌.

 

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

JSONView

Ajax를 써보는 법을 배워야함.

 

Ajax의 기본 골격.

 

$.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)
        }
    }
})

위 방식이 무엇이냐?

URL에 들어가서 반응한 정보(API 뭉치)중에 RealtimeCityAir에서 row를 가져온 것. (Rows에는 25개의 Row정보가 있음.)

 

 

나중에 특정한 리스트를 아래에 붙이고 싶으면 쓰는 방법.

 

``(백틱)을 이용해서 문자화로 돌리고, 나중에 append를 통해서 html화 시키는 과정. (여기에 html 코드만 알고 있으면 됨)

 

<중요 코드 나중에 자주 써먹을 듯>

let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
  $('#names-q1').append(temp_html)

 

특수한 글자만 붉게 표시하고 싶을때 조건을 거는 방법. (빈 공란은 ``로 만들고, if문을 이용해서 조건을 걸고, CSS에서 새로운 클래스를 만들어 표시를 바꿔주는 것)

<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}

.bad{
  color : red;
}

</style>

 

let temp_html=``

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

}

 

 

Ajax를 통해 (API)에서 정보를 가져오는 순서.

 

1) Ajax에서 URL을 바꾼다.

2) response시 list이름과 row를 가져온다.

3) for문을 돌려서 길이만큼 반복을 해서 rows[i]번째 데이터를 가져온다.

4)이때 rows[i]번째 데이터중 자신이 원하는 데이터는 let 변수 = rows[i]['이름=station name']처럼 세트로 묶인다.

 

이후에 작업을 할 때 원하는 것들을 변경한다.

(

가져온 데이터의 조건이 다를 경우 다른 색으로 칠한다.

새로 불러올 때 기존의 데이터는 다시 삭제한다 (empty 이용)

$('#names-q1').empty()

 

이미지 바꾸는 코드와 텍스트 바꾸는 코드.

• 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
• 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

2주차 과제 

 

제출한 답.

let cel = response['temp']
$('#temp').text(cel)

 

실제 모범 답안

 

$('#temp').text(response['temp'])

 

굳이 let을 안하더라도 똑같은 동작하는 코드가 있다면 바로 써도 된다.