HTML 파일에 외부 JavaScript 파일을 로드하는 가장 좋은 방법 ✅
2696 단어 beginnersjavascriptwebdev
불행하게도 JavaScript의 시대로 인해 웹에 외부 파일을 포함하는 많은 기술이 있습니다. 그 중 대부분은 구식입니다.
그렇다면 선호하는 방법은 무엇입니까?
지연 속성 💪
defer
속성을 소개하겠습니다. 이는 HTML<script>
태그에서 유효하며 대부분의 시나리오에 완벽한 솔루션입니다.<script>
태그가 <head>
에 배치되고 defer
속성이 있는 경우 외부 스크립트는 페이지의 나머지 부분과 비동기식으로 로드되며 문서가 구문 분석된 후에만 실행됩니다.여기에는 3가지 주요 이점이 있습니다.
<script>
끝에 <body>
를 넣는 것과 비교하여 내가 말하는 오류는 무엇입니까?
요소를 찾을 수 없는(또는
null
) 요소입니다.문서가 구문 분석되기 전에 HTML 요소를 선택하려고 시도하여 "cannot access X of
null
"라는 오류 메시지가 나타납니다.과거에 이에 대한 솔루션은
onload
이벤트 또는 더 나은 방법인 DOMContentLoaded
이벤트를 사용하는 것이었습니다. 이제 defer
속성이 있습니다.다음은 사용법의 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<script src="js/main.js" defer></script>
</head>
</html>
// src/main.js
// Only executes once the DOM has been parsed - no errors! 😏
const myInput = document.getElementById("myInput");
defer
속성이 도움이 되길 바랍니다 💪지금 등록하세요 👉 JavaScript DOM 단기집중과정
아래 링크에서 이 게시물에서 다루는 주제 중 일부를 다루는 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다. 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
즐기다!
Reference
이 문제에 관하여(HTML 파일에 외부 JavaScript 파일을 로드하는 가장 좋은 방법 ✅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dcodeyt/the-best-way-to-load-external-javascript-files-into-your-html-file-3o5d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)