스파르타 코딩 교육) 웹 개발 종합 교육 2주차 개발일지

HDev 2022. 5. 23. 23:04

GET방식을 이해하고 JQuery를 학습하며, JSON api를 가져와 ajax로 다뤄봄

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

기본적인 text타입 id안쪽의 value값을 가져올 때

let a=$('#id명').val()

기본적인 ajax코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair", //요청할 url
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value&m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },

예제1) 버튼 클릭 시 요소 보이기,숨기기

<script>

    function open_box(){
        $('#post-box').show()   // $('').show()
    }
    function close_box(){
        $('#post-box').hide()   // $('').hide()
    }
</script>

예제2) jQuery + Javascript 조합 예제

예시로 위에서 빈칸에 abc12@naver.com입력시 아래와 같이 alert 창이 뜨게 하며

이메일이 아닌경우(@가 없을경우) '이메일이 아닙니다' alert 출력

HTML

<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>

Javascript

function q2() {

    let a=$('#input-q2').val()
    if(a.includes('@') == true) {                        //includes('')는 ''안에 값이 있을 경우 true반환
        let b=a.split('@')[1].split('.')[0]              //split('')은 ''안의 값으로 문자를 나눈 뒤, 배열안에 담음
        alert(b)
    }
    else{
        alert('이메일이 아닙니다.')
    }
}

이름을 넣으면 아래와 같이 출력

HTML

<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
    <li>세종대왕</li>
    <li>임꺽정</li>
</ul>

Javascript

function q3() {

    let a=$('#input-q3').val()
    let b= `<li>${a}</li>`  // ''가아닌 ``(백틱)유의
    $('#names-q3').append(b) // 요소 추가 $('#id명').append()
}

function q3_remove() {

    $('#names-q3').empty()    // 요소 전부 삭제 $('#id명').empty()
}

예제3) Open api를 ajax로 가져온 뒤 jQuery와 함께 웹에 구현

업데이트를 누를 시 아래와 같이 구현

<script>
    function q1() {
        $('#names-q1').empty()          
        $.ajax({
            type: "GET",              	//GET방식 요청
            url: "http://spartacodingclub.shop/sparta_api/seoulair", 	
            data: {},					//요청하면서 함께 줄 데이터 (GET 요청시 비워져있음)
            success: function (response) { // 서버에서 준 결과를 response 변수에 담음
            
            	console.log(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 > 75){
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    }else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }

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

                console.log(response['RealtimeCityAir']['row'])

            }
        })
    }
</script>

<li class="bad">는 따로 css에서 color='red'로구현

<html>

<button onclick="q1()">업데이트</button>
<ul id="names-q1">
    <li>중구 : 82</li>
    <li>종로구 : 87</li>
    <li>용산구 : 84</li>
    <li>은평구 : 82</li>
</ul>

배운점

실습 과정에서 백틱(`)이아닌 '로 입력해 무엇이 잘못인지 15분동안 헤맨 기억이 남아있다. HTML요소를 가져올 땐 백틱(`)으로 가져옴을 유의하자 또한 $('#id명').val()에서 val()은 #id명의 value 값을 가져온다는 의미로 일반적인 예제로 let a='aba133@naver.com' 를 split으로 나눈다고 할 때, a.split('@') 또는 a.toString().split('@') 으로 나눌수있다. 그러나 a.split('@').val() 로 또 잘못 사용하여 10분 동안 해맸다. 간단한 문법을 잘 확인하자