window.onload()

JS는 코드를 순차적으로 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 여러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 작성 위치에 따라 에러를 발생시키기도 한다.

<script>
var a = document.getElementById('hi').innerHTML = "hello";
</script>

<span id = "hi>hi</span>

위의 코드는 document.getElementById('hi'); 가 html상에서 태그가 생성되기도 전에 실행됨으로써 문제가 일어난다.

위의 문제를 해결하려면 스크립트를 태그 뒤로 옮기면 된다.

<span id = "hi>hi</span>

<script>
var a = document.getElementById('hi').innerHTML = "hello";
</script>

하지만 가독성이 떨어지므로 사용하는게 window.onload이다.

<script>
window.onload = function() {
	var a = document.getElenemtById('hi').innerHTML = "hello";
}
</script>

<span id = "hi">hi</span>

위의 코드와 같이 window.onload 함수를 오버라이딩(재정의)해주면 onload함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야만 실행이 되도록 할 수 있다.

(웹브라우저 자체를 담당하는 window라는 객체가 웹 문서를 불러올 때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 다시 재정의 한다는 개념이다.)

페이지의 모든요소들이 로드되어야 window.onload가 호출되며 한 페이지에 하나의 window.onload() 함수만 적용된다.

또한 window.onload와 <body onload="">는 동시에 사용을 할 수 없다.

<body onload="">가 실행되면 window.onload는 실행이 되지 않는다.

동시에 사용하려면 window::onload() 를 사용해야한다.

실행 순서는 <body onload="">가 먼저 실행되고 이어서 window::onload()가 실행된다.

보노의 프로그래밍 공장