jQuery
- HTML의 요소들을 조작하는, 편리한 JS를 미리 작성해둔 것, 라이브러리
jQuery는 JS와 다른 특별한 S/W가 아니라 미리 작성된 JS코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다. 따라서 import 해야한다.
jQuery를 쓰지 않은 경우
document.getElementById("element").style.display = "none";
jQuery를 쓴 경우
$('#element').hide();
jQuery를 쓸려면 다음을 선언 해주어야 한다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
jQueryCDN
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
jQuery 함수중에
- show
- hide
- val
- append
- empty
과 같은 함수들을 사용하여 웹페이지가 반응이 가능하도록 만들 수 있다.
즉 기능들을 추가할 수 있게 된다.
API
api는 은행 창구와 같은 것
클라이언트가 요청할 때 타입이라는 것이 존재 한다.
GET -> 통상적으로 데이터 조회를 요청할때
POST -> 통상적으로 데이터 생성, 변경, 삭제를 요청할 때
GET 방식으로 데이터 전달
? : 여기서부터 전달할 데이터가 작성된다
& : 전달할 데이터가 더 있다는 뜻
EX) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
이 주소는 google.com의 search 창구에 다음 정보를 전달
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8(인코딩 정보)
Ajax
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.
Ajax예시
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
</style>
<script>
$(document).ready(function(){
listing();
});
function listing() {
$('#cards-box').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/web/api/movie",
data: {},
success: function(response){
let movies = response['movies']
for (let i = 0 ; i < movies.length; i++) {
let movie = movies[i]
let title = movie['title']
let desc = movie['desc']
let image = movie['image']
let comment = movie['comment']
let star = movie['star']
let star_image = '⭐'.repeat(star)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_image}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>'WEB' 카테고리의 다른 글
| FLASK, MongoDB 와 서버 구축 (0) | 2022.04.12 |
|---|---|
| Python & 크롤링, DB (0) | 2022.04.12 |
| JS 기본 문법 (0) | 2022.04.12 |
| HTML 실습 (0) | 2022.04.11 |
| WEB 개발 환경 필수 프로그램 설치 (0) | 2022.04.11 |