[JavaScript] window.onload

프론트엔드/JavaScript

[JavaScript] window.onload

an_apricot__ 2021. 5. 20. 12:51

자바 스크립트는 맨 윗 줄부터 차례로 실행되기 때문에

<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 불러오려 할 경우 에러가 발생한다.

이를 해결하기 위해 window.onload 함수를 사용할 수 있다.

window.onload 함수 안의 요소는 페이지의 모든 요소가 실행된 뒤 가장 마지막에 실행되기 때문에

<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 사용할 수 있게 된다.

< 에러 발생 코드 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var list1 = ["apple", "banana", "kiwi"];
	document.getElementById("demo").innerHTML = list1[2];
    
   	var list2 = new Array("red", "yellow", "green");
	document.getElementById("demo2").innerHTML = list2[0];
</script>
</head>
<body>
	<p id="demo"></p>
	<p id="demo2"></p>
</body>
</html>

< 정상 실행 코드 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		var list1 = [ "apple", "banana", "kiwi" ];
		document.getElementById("demo").innerHTML = list1[2];

		var list2 = new Array("red", "yellow", "green");
		document.getElementById("demo2").innerHTML = list2[0];
	}
</script>
</head>
<body>
	<p id="demo"></p>
	<p id="demo2"></p>
</body>
</html>