HTML 외부 스크립트

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="경로"></script>

스크립트 태그는 제이쿼리 태그 아래에 배치합니다.

---

헤드에 스크립트 작성

헤드에 스크립트를 작성하면 메타데이터를 정확하게 인지시킬수 있다는 장점을 가지고 있지만, 스크립트가 바디 위에 있으면 요소를 작성되기 전에 처리가 되어 구동되지 않게 됩니다. 그래서 헤드에 스크립트 작성시 추가적인 메소드가 필요합니다.

.ready() 와.onload()

해당 메소드는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다.

.onload()

/* 최신버전 스크립트 ready 적용 메소드*/
<script>
$(function(){

});
</script>

/* 3.x.x 버전 이하는 ready 사용 */

/*<script>
$(document).ready(function(){

});
</script>*/

.ready()

<script>
window.onload = function(){
};
</script>

---

.ready() .onload() 차이

$(document).ready - DOM Tree 생성이 완료된 후 호출

$(window).onload - 웹 페이지가 다 구성된 후 호출

두개의 동일한 요소에 메소드가 있을 때는 onload 가 마지막으로 처리되므로 우선순위를 가진다.

---

💡 출처

• hahahoho5915