| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드하고 호출하는 방법은 다음과 같습니다:
외부 JavaScript 파일(functions.js)에 함수를 정의합니다:
[JavaScript]
// functions.js 파일
function myFunction() {
console.log('함수가 호출되었습니다!');
}
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
HTML 문서에서 <script> 태그를 사용하여 외부 JavaScript 파일을 로드합니다:
[HTML]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Function Load Example</title>
</head>
<body>
<!-- 외부 스크립트 로드 -->
<script src="functions.js"></script>
<!-- 스크립트 로드 후 함수 호출 -->
<script>
// DOMContentLoaded 이벤트가 발생했을 때 함수를 호출합니다.
document.addEventListener('DOMContentLoaded', function() {
myFunction(); // 외부 스크립트에 정의된 함수 호출
});
</script>
</body>
</html>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
위 예제에서는 DOMContentLoaded 이벤트 리스너를 사용하여 문서 로드가 완료되면 myFunction을 호출합니다.
이 방법은 문서의 DOM이 완전히 로드되고 준비된 후에 함수를 실행하도록 보장합니다1.
또 다른 방법으로, window.onload 이벤트를 사용할 수도 있습니다. 이 이벤트는 이미지와 스타일시트를 포함한 모든 리소스가 로드된 후에 발생합니다:
[HTML]
<script>
window.onload = function() {
myFunction(); // 모든 리소스 로드 후 함수 호출
};
</script>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
이렇게 하면 페이지의 모든 콘텐츠가 로드된 후에 함수가 호출됩니다2.
DOMContentLoaded와 window.onload 중 어느 것을 사용할지는 애플리케이션의 요구사항에 따라 결정할 수 있습니다.
DOMContentLoaded는 DOM이 준비되자마자 실행되므로 더 빠르게 함수를 호출할 수 있으며,
window.onload는 모든 리소스가 로드된 후에 실행되므로 더 늦게 함수를 호출합니다12.
