💡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
를 통해서 이름표를 가져올 수 있다.
id가 가르킨 곳의 값 가져오기
$('#id').val();
id가 가르킨 곳의 값 입력하기
$('#id').val('입력할 값');
div(상자) 보이기/숨기기
기본으로 나오는 박스 숨긴채로 시작하기
display: none;
보이기
$('#id').show();
숨기기
$('#id').hide();
태그 내 html 입력하기
<div> </div>
내에 동적으로 html을 넣고 싶을 때
ex) 버튼을 넣어보기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#id').append(temp_html);
💡서버-클라이언트 통신
- JSON(JavaScript Object Notation)이란
- 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준으로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식이다.(데이터를 표시하는 표현 방법)
- XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었다.
- AJAX(Asynchronous Javascript And XML)
- 자바스크립트를 이용해서 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.
- JSON과 XML 서버와 브라우저가 데이터를 주고받는다.
AJAX 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
ex)
$.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)
}
}
})
➕ if문을 통한 조건 별 CSS 적용
- CSS를 적용할 class를
<style>
부분에서 꾸미기를 적용한다. (지금 단계에선 전부 다 빨간색)
.bad {
color: red;
}
- if 문을 통해 CSS를 적용할 때는 class를 붙여주고 아닐 때는 class를 붙이지 않는다.
if(gu_mise > 120){
...<li class="bad">...</li>
}
else{
...<li>...</li>
}
➕ 이미지, 텍스트 바꾸기
$("#아이디값").attr("src", 이미지URL);
$("#아이디값").text("바꾸고 싶은 텍스트");