본 포스팅은 작성자의 기억을 되새김질하기 위해 작성되었습니다.
앞의 포스팅 'HTML,CSS,Javascript'에 이어 이번 포스팅에서는 JQuery와 Ajax에 대해 알아보자.
JQuery
JQuery 란 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해 둔 라이브러리이다. Javascript로도 모든 기능을 구현할 수 있지만, 코드가 복잡해지고 브라우저 간 호환성의 문제도 발생하기 때문에 JQuery라는 라이브러리가 등장하게 되었다.
[Javascript와 JQuery의 코드 비교]
Javascript 코드document.getElementById("element").style.display = "none";Jquery 코드
$('#element').hide();
JQuery 사용하기
JQuery를 사용하기 위해서는 '임포트'가 필요한데, 미리 작성된 Javascript 코드를 가져오는 것이다. 아래의 주소에서 [Google CDN:]란에 있는 코드를 가져오면 된다.
주소 : https://www.w3schools.com/jquery/jquery_get_started.asp
주소에서 가져온 코드는 아래의 코드와 같이 head태그 안에 넣어주면 임포트가 완료된다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>CSS에서 우리가 변화시킬 대상을 가리킬때 class를 사용했다면, JQuery에서는 id를 사용한다. jquery와 id사용 방법은 아래 코드와 같다.
<input id="post-box">아이디 값이 위와 같을 때, 콘솔창에 아래와 같이 작성하면 input박스에 값을 알 수 있다.
$('#post-box').val();
JQuery 기본사용
- input 박스의 값 가져오기
<input id="post-box">
//console
$('#post-box').val(); //input 박스의 값 출력
$('#post-box').val("내용"); //"내용"을 input 박스에 입력 - div 보이기 / 숨기기
<div id="post=box">
<input>
</div>
//console
$('#post-box').hide(); //div 숨기기(css의 display값이 none으로 바뀐다)
$('#post-box').show(); //div 보이기(css의 display값이 block으로 바뀐다)
- css값 가져오기(display 속성)
$('#post-box').hide();
$('#post-box').css('display'); //none 출력
$('#post-box').show();
$('#post-box').css('display'); //block 출력- 태그 내 텍스트 입력하기
$('#btn-posting-box').text('내용'); //해당 id의 태그안에 내용이 '내용'으로 변경됨- 태그 내 html입력하기
//<div> ~ </div>내에 동적으로 html을 넣고 싶을 때!
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>
//1.버튼 넣기
let temp_html = `<button>나는 추가될 버튼입니다!</button>`;
$('#cards-box').append(temp_html);
//주의 : 홀따음표(')가 아니라 backtick(`)을 입력해야 한다.
//2.버튼 말고, 카드 넣기
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
//주의 : html에 변수를 넣을때는 ${변수}의 형태로 넣는다.<주의>
1. backtick(`) 을 사용하면 문자 중간에 Javascript 변수를 삽입 할 수 있다.
2. html에 변수를 넣을때는 ${변수}의 형태로 넣는다.
Ajax
Ajax을 시작하기 앞서 JSON을 이해해야하는데, JSON이란 경량의 데이터 교환 형식이다. 아래와 같은 코드형식을 JSON이라고 한다.
RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202107231600",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 35,
PM25: 22,
O3: 0.081,
NO2: 0.018,
CO: 0.5,
SO2: 0.004,
IDEX_NM: "보통",
IDEX_MVL: 93,
ARPLT_MAIN: "O3"위 형태는 미세먼지OpenAPI로 이러한 형태의 JSON을 보기 위해서는 크롬익스텐션의 JSONView를 설치가 필요하다.
이때, API는 은행 창구와 같은 것으로 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.
GET - 통상적으로 데이터 조회(Read)를 요청할 때
POST - 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데 "?"기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 이다.
- 서버 주소 : https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보 : code=161967
이때, code라는 이름으로 영화번호 주자!는 것은 누가 정한것이냐
바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속이다.
& : 전달할 데이터가 더 있다는 뜻이다.
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보
Ajax 기본 사용
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})Ajax는 기본적으로 위의 골격을 이용하여 사용한다.
- 미세먼지 OpenAPI 값 출력하기
미세먼지 OpenAPI를 통해 아래와 같은 폼으로 값이 나오도록 하시오.
예) 마포구 : 75
미세먼지 OpenAPI : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function q1() {
//버튼을 누를때마다 새로고침 된다.
$('#mise').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
//rows는 리스트이기 때문에 반복문을 통해 값을 나열
for (let i = 0; i < rows.length; i++) {
let mise_gu = rows[i]['MSRSTE_NM'];
let mise_val = rows[i]['IDEX_MVL'];
let temp_html = `<li>${mise_gu} : ${mise_val}</li>`
$('#mise').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<button onclick="q1()">버튼</button>
<ul id="mise">
</ul>
</body>