[스파르타 코딩] 웹 개발 종합반 2주차 - JQuery, 서버-클라이언트 통신(AJAX)

김동현·2022년 8월 24일
0

💡JQuery

  • 자바스크립트의 라이브러리로 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것이다.
  • 다른 사람이 만들어 온것을 가져와서 쓰는 것이기 때문에 아래 코드를 통해 import를 해야하지만, 부트스트랩 템플릿에는 기본적으로 추가가 되어있다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
  • CSS와 마찬가지로 JQuery를 통해 어떠한 값을 가져올 때 이름표가 필요하다.
  • CSS는 class를 통해 이름표를 가져오는 것과 다르게 id를 통해서 이름표를 가져올 수 있다.

input 박스의 값을 가져오기/입력하기

id가 가르킨 곳의 값 가져오기

$('#id').val();

id가 가르킨 곳의 값 입력하기

$('#id').val('입력할 값');

div(상자) 보이기/숨기기

기본으로 나오는 박스 숨긴채로 시작하기

	display: none; // CSS 부분에 작성(<style>)

보이기

$('#id').show();

숨기기

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

태그 내 html 입력하기

  • <div> </div> 내에 동적으로 html을 넣고 싶을 때

ex) 버튼을 넣어보기

let temp_html = '<button>나는 추가될 버튼이다!</button>'; // button을 감싸고 있는건 홑따옴표가 아닌 백틱이다.
$('#id').append(temp_html);

💡서버-클라이언트 통신

  • JSON(JavaScript Object Notation)이란
    - 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준으로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식이다.(데이터를 표시하는 표현 방법)
    - XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었다.


  • AJAX(Asynchronous Javascript And XML)
    • 자바스크립트를 이용해서 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.
    • JSON과 XML 서버와 브라우저가 데이터를 주고받는다.

AJAX 기본 골격

$.ajax({
  type: "GET", //GET 방식으로
  url: "여기에URL을입력", // 이 URL을 요청해서
  data: {},
  success: function(response){
    console.log(response) // response를 찍어주겠다. url에 OpenAPI 넣으면 response 해당 데이터 전체를 가져옴 
  }
})

ex)

$.ajax({
  type: "GET", //GET 방식으로
  url: "http://spartacodingclub.shop/sparta_api/seoulair", // 이 URL을 요청해서
  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) 
    }
  }
})

➕ if문을 통한 조건 별 CSS 적용

  • CSS를 적용할 class를 <style> 부분에서 꾸미기를 적용한다. (지금 단계에선 전부 다 빨간색)
.bad  {
  color: red;
}
  • if 문을 통해 CSS를 적용할 때는 class를 붙여주고 아닐 때는 class를 붙이지 않는다.
if(gu_mise > 120){ // 미세먼지가 120 초과일 때만 class를 붙여 CSS 적용!
  ...<li class="bad">...</li>
}
else{
  ...<li>...</li>
}

➕ 이미지, 텍스트 바꾸기

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

0개의 댓글