[JS] window.onload = function() 란?

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

bom's happy life

[JS] window.onload = function() 란? 본문

Deveolpment Study🗂️/Javascript

[JS] window.onload = function() 란?

bompeach 2023. 9. 20. 10:10

window.onload = function()란?

- 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수

- 페이지의 모든 요소들이 로드되어야 호출된다.

- 한 페이지에서 하나의 window.onload() 함수만 적용된다.

html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식 때 javascript를 사용한다.

위로부터 차례대로 읽어들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고 실행하는 인터프리터 언어적 특성으로 인해 자바스크립트 작성 위치에 따라 오작동을 일으키기도 한다.

바로 이때 window.onload() 함수를 이용하여 이러한 오작동을 방지할 수 있다.

사용방법 예시!

head 부분에 작성된 스크립트문이 있다고 가정해보자.

<script>
   var B = document.getElementById('book');
   B.style.color = "blue"
</script>

<body>
   <p id="book">hello</p>
</body>

라고 작성되어 있을 때, 스크립트문을 만나면 자바스크립트 엔진이 스크립트문을 파싱하므로 아직 바디는 파싱되기 전이라 id 값을 인식하지 못하게 된다.

이러한 오작동을 방지하기 위해서 해당 동작을 onload() 함수 안에 넣는다.

<script>
window.onload = function() {
   var B = document.getElementById('book');
   B.style.color = "blue"
}
</script>

<body>
   <p id="book">hello</p>
</body>

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

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

window.onload 와 <body onload="">

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

그리고 추가로 window.onload와 <body onload="">는 동시에 사용 할 수 없다.

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

+ 동시에 사용하려면 window::onload() 이렇게 하면 된다.

function window::onload() {
	시작 시 실행될 내용
}

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

저작자표시

'Deveolpment Study🗂️ > Javascript' 카테고리의 다른 글

[javascript] push( ), Object.fromEntries( )메서드 (0)	2023.10.26
[JS] 예쁜 alert만들기 : toastAlert 라이브러리 (0)	2023.10.26
[JS] 엑셀 다운로드 형식(내보내기 시 표형식 지정하기) (0)	2023.07.18
[JS] 필수 동의항목 체크시 submit( )되게 하기 (0)	2023.07.01
[JS] 만 나이 계산하기 (0)	2023.06.21

'Deveolpment Study🗂️/Javascript' Related Articles

bom's happy life

[JS] window.onload = function() 란? 본문

[JS] window.onload = function() 란?

window.onload = function()란?

'Deveolpment Study🗂️ > Javascript' 카테고리의 다른 글

티스토리툴바