JS가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 Object 자료형으로 정리하는 개념이다.
따라서 DOM이 생성되기전에 JS를 호출하면 에러가 난다.
p가 나중에 생성되도 에러가 나지 않는다.
<script>
$(document).ready(function(){
document.getElementById('test').innerHTML = '안녕'
});
</script>
<p id="test">임시글자</p>
이미지 등 로딩이 완료되면 뭔가 동작시켜주는 UI들을 만들 때 자주 쓰인다.
$(document).on('load', function(){
//이미지가 다 로드가 되었을 경우 실행할 코드
});
참고로 $('').load(function(){})는 다른의미이며, Ajax용으로 쓰인다.
document.addEventListener('DOMContentLoaded', function() {
//DOM생성이 완료되었을 때 실행할 코드
});
접속자가 요청을 하면 데이터를 가져다준다.
GET - URL을 입력해서 요청한다. (주로 읽기)
POST - 숨겨서 정보를 전달하거나 요청한다.(주로 쓰기)
서버에다가 GET/POST 요청을 할 수 있게 도와주는데, 새로고침없이 요청한다.
보통 jQuery를 많이 사용한다.
<상품 보여주기 전>
<상품 보여주기 후>
$('#ajax-btn').click(function() {
$.ajax({
url: 'https://mangyun.github.io/data.json',
type: 'GET'
}).done(function(data) { //요청에 성공하면, 실행
$('.card-title').html(data.model);
$('.card-text').html(data.price);
$('.card-img-top').attr('src', data.img); //경로변경 attr 호출
}).fail(function() {}) //요청에 실패하면, 실행
}).always(function() {}) //항상 실행
done, fail, always 이외로 세부기능이 더 많다.
url을 어디로 요청하는지는 서버개발자에게 물어보자.
스크롤 높이에 따라 opacity와 size를 서서히 변하게 해보자.
<위로 스크롤 전>
<위로 스크롤 후>
.card-box {
position: sticky;
top: 400px;
margin-top: 200px;
transition: transform .2s;
}
$(window).scroll(function() {
let height = $(window).scrollTop();
let y = (-1 / 500) * height + (115 / 50); //좌표로 구한 opacity 함수
$('.card-box').eq(0).css('opacity', y);
let z = (-1 / 5000) * height + 565 / 500; //좌표로 구한 scale 함수
$('.card-box').eq(0).css('transform', `scale(${z})`);
});