js파일을 쓰다보면 html 파일과 분리 시킬 경우가 있고 또 외부에 있는 js 파일을 불러와서 실행시키는 경우가 있을 것이다.
그렇다면 html 파일과 js 파일을 따로 분리시킨 후 html내에서 script 파일의 위치가 어떻게 되는지 알아보자.
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <script src="script2.js"></script> </head> <body> <input type="button" id="hw" value="Hello world" /> </body> </html> | cs |
<new02.html>
1 2 3 4 | var hw = document.getElementById('hw'); hw.addEventListener('click', function(){ alert('Hello world'); }) | cs |
<script2.js>
위와 같이 파일이 존재한다고 해보자. 이를 실행시켜 버튼을 클릭해도 alert창이 뜨지 않는다. 개발자 도구를 통해 진행상황을 보자면
이와같이 에러가 발생하게 된다.
그렇다면 왜? 에러가 발생하는 것일까?
html파일은 위에서부터 아래로 순차적으로 읽으며 실행을 하는데 <script>태그를 만나게 되면 js코드로 인식하게 되고 script02.js파일을 다운로드 한다.
그런 후 script02.js파일을 실행시키는데 js파일에서 id값이 hw인 element를 찾게된다.
하지만 <body> 태그까지 실행시키지 않은 상황에서 hw element는 null로 뜨게되고 이로인해 에러가 발생하게 된다.
이를 해결하는 방법은 js 파일을 아래와 같이 수정하면된다.
1 2 3 4 5 6 | window.onload = function(){ var hw = document.getElementById('hw'); hw.addEventListener('click', function(){ alert('Hello world'); }) } | cs |
<script2.js>
앞과 차이점은 window.onload = function(){} 인데 onload함수를 살펴보자
마찬가지로 html파일은 위에서 아래로 순차적으로 읽고 js파일을 실행시킨다.
하지만 window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.
(이를 이벤트라 한다.)
이렇게된다면 hw는 null로 뜨지 않을 것이고 정상 작동하게된다.
애초에 이런일을 막는 방법이 있는데 바로 script 파일을 head태그에 두는 것보다 페이지 하단에 위치시키는 방법이 더 낫다.
---------------------------------------------
알고가기!
학습할 때엔 head태그 내에 script로 작성하는 것으로 알고있었는데 하단에 위치하면 좋은 구체적이고 확실한 이유가 무엇인가요?
Q.
<script> 의 위치는 웬만하면 head 안에... <script> <link> <style> 순으로 위치하는것을 권장한다
라고 알고있었는데요.
요즘 문득 다시 공부하면서 보면 아에 다르더라구요?
제일 맨 하단에 정의하는게 성능상으로나 문제없는거로나.... 이것저것 하단이 좋다고....
하단에 위치하는게 왜 좋은건가요?
대강은 알고있는데,
왜 저는 여태것 head 안에 위치하는걸 권장한다 라고 알고있었고,
하단에 위치하면 좋은 구체적이고 확실한 이유를 알고싶네요.
A.
님 잘못이 아닙니다.
많은 이들이 그렇게 말해왔으니까요.
잘 팔린다는 어느 책에는 '우리나라 개발자 대부분은 헤드 태그 안에 넣고, 이게 우리나라 개발 환경'이라고 써 있기도 하네요.
하지만 바디 하단에 외부 파일로 넣는 것이 좋은 것 맞습니다.
로딩부하, 자원 관리, 코드 가독성, 코드 재사용 등등 잇점이 많으니까요.
출처 : 생활코딩[https://opentutorials.org/course/1375/6620] 댓글
'Web > HTML_JS_CSS' 카테고리의 다른 글
| [Javascript] Location 객체야 넌 뭐하는 아이니??? (0) | 2019.01.14 |
|---|---|
| [Javascript] BOM_Browser Object Model (0) | 2019.01.14 |
| [Javascript] Javascript 사용 방법 (0) | 2019.01.08 |
| [css] 선택자 (0) | 2019.01.07 |
| [JS] 회원가입 유효성 검사 (1) | 2018.08.17 |