웹 페이지가 로드된 후 JavaScript 코드 실행
-
JavaScript의
body태그 끝에script태그 추가 -
JavaScript에서
onload이벤트 사용 -
JavaScript의
body태그에onload이벤트 사용 -
JavaScript 파일 내부의
window개체에서onload이벤트 사용
JavaScript 코드를 실행하기 전에 항상 모든 HTML 요소가 브라우저에서 먼저 렌더링되는지 확인해야 합니다. JavaScript 코드 내에서 이러한 HTML 요소를 참조하므로 해당 요소는 웹페이지보다 먼저 로드되어야 합니다.
head 태그 안에 script 태그를 작성하는 것은 좋은 생각이 아닙니다(이는 코드에 타사 스크립트를 로드할 때만 의미가 있음). HTML 문서는 위에서 아래로 실행되고 head 태그는 body 태그 앞에 표시됩니다. 따라서 먼저 실행된 다음 body 태그가 실행됩니다.
모든 웹페이지 콘텐츠는 body 태그 안에 있고 body 태그는 head 태그 뒤에 있기 때문에 HTML 요소를 찾을 수 없기 때문에 head 내부에 JavaScript 코드를 추가하지 않습니다. 이 시점까지는 요소가 아직 생성되지 않았습니다.
웹페이지의 모든 콘텐츠가 화면에 완전히 렌더링된 후 JavaScript를 로드하는 방법에는 여러 가지가 있습니다. 다음은 웹 페이지가 완전히 로드된 후 JavaScript 코드를 실행하기 위해 따를 수 있는 몇 가지 잘 알려진 방법입니다.
JavaScript의 body 태그 끝에 script 태그 추가
body 태그 끝에 script 태그를 추가하는 것은 JavaScript 코드를 로드하는 일반적인 방법입니다. 여기까지는 웹 페이지의 모든 내용이 화면에 제대로 렌더링됩니다. 따라서 프로세스에서 오류가 발생하지 않으면서 JavaScript 코드 내에서 이러한 HTML 요소를 쉽게 찾거나 참조할 수 있습니다.
아래의 다음 프로그램은 수행 방법을 보여줍니다.
<body>
<script></script>
</body>
JavaScript에서 onload 이벤트 사용
페이지가 로드된 후 JavaScript를 실행하는 또 다른 방법은 onload 메서드를 사용하는 것입니다. onload 메소드는 페이지가 로드될 때까지 기다립니다. 실행되자마자 이 프로세스는 JavaScript 코드를 실행합니다.
JavaScript 코드를 작성하는 방법에는 두 가지가 있습니다. 한 가지 방법은 body 태그 아래의 script 태그 안에 JavaScript 코드를 작성한 다음 onload 메서드 내부에서 함수를 호출하는 것입니다. JavaScript 코드를 작성하기 위한 별도의 파일을 만들고 body 태그 끝에 있는 HTML 내부의 해당 파일을 링크한 다음 onload 메서드 내부에서 해당 함수를 호출할 수도 있습니다.
JavaScript의 body 태그에 onload 이벤트 사용
onload 메소드에는 target 변수가 필요합니다. 이 경우 body 태그에 onload 메소드를 사용하여 target이 되도록 합니다.
onload 메소드 내에서 함수를 전달하기만 하면 됩니다. 이제 이 기능은 웹 페이지의 모든 내용이 완전히 로드된 후에만 실행됩니다.
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
출력:
function called...
body 태그에는 h1 태그와 script 태그만 있습니다. script 태그에는 function called... 콘솔 창에 메시지를 인쇄하는 myFunction() 함수가 있습니다. 페이지가 로드된 후 이 함수를 실행하려면 onload 메소드 내부에 전달하기만 하면 됩니다.
JavaScript 파일 내부의 window 개체에서 onload 이벤트 사용
onload 메소드를 사용하는 또 다른 방법은 window 객체에 있습니다. window 객체는 전체 브라우저 창을 나타냅니다. 브라우저 창 내부의 요소가 완전히 실행된 후 onload 메서드를 사용하여 JavaScript 코드를 실행할 수 있습니다.
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
여기에는 이전 코드와 동일한 코드가 있습니다. 여기서 유일한 차이점은 현재 대상이 된 window 개체에서 onload 메서드를 사용하고 있다는 것입니다. 프로그램은 결국 함수를 호출하고 function called... 메시지가 콘솔 창에 인쇄됩니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn