자바스크립트 window.onload()란 무엇인가요?
javaScript는 html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식으로 주로 사용합니다.
위로부터 차례차례 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 자바스크립트는 작성 위치에 따라 오작동을 일으키기도 합니다.
예를 들어
<script>
var a = document.getElementById( 'hi' ).innerHTML = "hello";
</script>
<span id = "hi">hi</span>
위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'hi' ); 가 html 내부 id가 hi이란 태그가 생성되기도 전에 실행됨으로 문제가 일어납니다.
그러므로 아래처럼 자바스크립트 문서를 뒤로 옮겨야만 합니다.
하지만 자바스크립트가 아래쪽에 놓여 있고 길게 늘어지게 된다면 가독성이 떨어져 보기에도 안 좋아집니다.
<span id = "hi">hi</span>
<script>
var a = document.getElementById( 'hi' ).innerHTML = "hello";
</script>
이러한 불편을 해결하기 위해서 자바스크립트가 문서가 준비된 상황 이후에 발동하도록만 한다면 문서 앞에 선언해도 상관없게 되는데 이것이 바로 window.onload입니다.
window.onload 사용방법
아래와 같이 window.onload라는 함수를 오버 라이딩(재정의) 해주면 되는데 해당 함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야 실행이 되도록 할 수 있습니다.
(웹브라우저 자체를 담당하는 window라는 객체가, 웹 문서를 불러올 때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 내가 다시 재정의 한다는 개념이다.)
<script>
window.onload = function(){
var a = document.getElementById( 'hi' ).innerHTML = "hello";
}
</script>
<span id = "hi">hi</span>
window.onload 와 <body onload="">
페이지의 모든 요소들이 로드되어야 호출되며 한 페이지에 하나의 window.onload() 함수만 적용됩니다.
그리고 추가로 window.onload와 <body onload="">는 동시에 사용을 할 수 없습니다.
<body onload="">가 실행이 되면 window.onload는 실행이 되지 않는 문제가 있습니다.
동시에 사용하려면 window::onload() 이렇게 하면 됩니다.
사용법: function window::onload(){
시작 시 실행될 내용
}
실행 순서는 <body onload="">가 먼저 실행되고, 이어서 window::onload()가 실행됩니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [javascript] 자바스크립트 submit할때 파라미터 안넘어가게 막는 방법 (0) | 2021.05.12 |
|---|---|
| [javascript/jQuery]자바스크립트 제이쿼리 id, class, name 으로 value 값 가져오기 (0) | 2021.04.23 |
| [javascript] 자바스크립트 현재 시간과 다른시간의 분 차이 계산 (0) | 2021.03.26 |
| [javascript] 자바스크립트 날짜 차이계산 (0) | 2021.03.24 |
| 자바스크립트 데이터 Null check, 빈값 체크 방법 (0) | 2021.02.15 |
댓글