<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="C:\Users\klmjiho\Desktop\호출순서.js">
</script>
<html>
<h1 class="TEST">하이</h1>
</html>'하이'의 색이 변하지않음
왜? DOM 객체를 읽었는데 아직 하이 객체가 생기지않았기 때문이다.
이때 window.onload를 사용하거나
제이쿼리의 .ready 함수 사용 시 해결OO
이 함수들은 웹브라우저 내에 모든 요소가 준비되어야 실행된다.
: 웹브라우저 자체를 담당하는 window라는 객체가 웹 문서를 불러올때, 문서가 사용되는 시점에 실행되는 함수 onload를 재정의해 사용하는 것
$(document).ready(function(){
$(".TEST").css('background', 'blue');
})onload? 웹 페이지 로딩이 완료된 후에 실행
: 이미지같은 크기가 큰 리소스 있는 경우 로딩이 오래 걸림
: 여러번 선언되면 재정의 의미로 사용하는 것이므로 마지막 함수만 실행 됨
다른 외부 리소스에서 onload 함수가 선언되어있으면 겹칠 수 있음
-> 이때는 기존 onload 함수에 이벤트를 붙여서 사용할 수 있다.
ready? DOM 객체를 모두 로딩 한 후에 실행
: 여러번 선언되면 다 실행 됨
