웹개발 종합반 2주차 수강일지

한번에 코딩다해놓고 수정하지말고 한줄한줄 차근히 되는지 확인해가면서 진행

• count+= 1은 count = count + 1과 같음  ( =+ 라는 연산자는 없음)
• jQuery 란?👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, **j**Query라는 라이브러리가 등장하게 되었답니다.

• jQuery와 Javascript - 코드 비교해보기 👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다! -> google CDN script를 head안에 붙여넣기)

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)

$('#element').hide();

• JSON : 서버가 클라이언트에게 데이터를 전달해주는 포맷(dictionary, list의 조합)
• API : 데이터를 요청하는 창구(은행창구)
  Get(데이터조회)/post(데이터생성,변경,삭제)타입으로 나뉨

Ajax : API로 서버에서 자료를 받아볼수 있는 방법
( Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면,
jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
Uncaught TypeError: $.ajax is not a function
→ 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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

ajax예시

$.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 = `<li>${gu_name} : ${gu_mise}</li>`
                        $('names-q1').append(temp_html)
                    }
                }
            })

let temp_html = `<li>${gu_name} : ${gu_mise}</li>`  →   `(백틱) 안의 내용은 문자열로 취급
$('names-q1').append(temp_html)    →    {변수}, (#id) 차이 확인

 

 

*ajax 설명추가

<script>
    function q1() {
        $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",   ▶위url에서 api를 받아와 response에 들어감
            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 = `` ▶temp_html의 내용을 일단 비워놓기위해 사용
                    if (gu_mise > 70) {
                        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> 

* 해석: temp_html에 저장한내용을 names-q1 id를 가지고있는 곳에 추가해서
버튼을누르면(body에있는내용) <li>${gu_name} : ${gu_mise}</li> 형태로 출력되게 하는 코드
.append 자리에 text(입력한글자), empty(비우기) 등등 사용가능

 

 

로딩되자마자 자동으로 실행 되게하는 jquery
  
$(document).ready(function () {
        alert('다 로딩됐다!')
      });