WEB 32

[Javascript] DOMContentLoaded와 onload의 차이

웹 문서를 만들때, '문서가 로드되는 시점'에 발생하는 이벤트로 주로DOMContentLoaded와 onload를 사용한다. 두 이벤트의 차이는 간략하게 요약하면 1. DOMContentLoaded는 DOM 트리를 완성하는 즉시 발생한다. 2. onload는 문서의 모든 콘텐츠(images, script, css, etc)가 로드되었을 때 실행된다. 따라서, DOMContentLoaded가 onload보다 먼저 실행된다. 아래는 사용 예시이다. document.addEventListener("DOMContentLoaded", function () { //실행할 코드 }); window.onload = function () { //실행할 코드 }

WEB/💡 Javascript 2022.07.14

[Javascript] setTimeout을 setInterval처럼 주기적으로 불러오기

타임아웃 코드 반복 호출하는 코드로 setInterval()을 사용하는것이 일반적이지만, 이번에는 setTimeout()을 이용하여 setInterval()과 같은 역할을 수행하는 코드를 작성해보기로 한다. 먼저, setInterval()을 이용한 코드를 확인해보자, 10밀리초(=1초) 주기로 changeTime()을 호출하여 현재 시간을 표시하는 간단한 예시이다. setTimeout()을 이용하여 이와 동일한 결과물을 만들어 내는 것은 간단하다. 바로 setTimeout()을 재귀적으로 사용하면 된다. 아래는 재귀적으로 setTimeout()을 사용하여 위의 코드와 동일한 결과물을 만드는 코드이다. 이와같이 재귀를 사용하면 setTimeout()도 주기적으로 불러와서 사용할 수 있다. 특정 횟수만 반복..

WEB/💡 Javascript 2022.06.16