[Javascript] Script 태그 위치

CloudCoke

|2022. 11. 11. 21:47

HTML 문서에서 Javascript 파일을 연결하기 위해서 script 태그를 사용한다. HTML 문서에서 어느 곳에든 사용해도 되는데 위치에 따라 동작의 차이가 발생할 수 있다. 이는 브라우저의 동작 방식과 연관이 있다.

브라우저의 동작 방식

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="public/js/test.js"></script>
  </head>
  <body>
    <div class="box" style="background: orange">1</div>
  </body>
</html>

const box = document.querySelector(".box");
console.log(box);

브라우저는 다음과 같이 HTML 파일을 읽게 된다.

브라우저는 HTML 파일을 위에서부터 아래로 읽게 되는데 코드를 읽는 도중 script 태그를 만나게 되면 Javascript 파일을 불러와 읽고 실행한 다음에 다시 나머지 HTML 파일을 읽게 된다. Javascript를 읽을 당시에는 class 명이 box인 요소를 찾을 수 없기 때문에 null 값이 콘솔에 출력되게 된다.

그래서 script 태그는 body 태그의 맨 아래쪽에 적어주는 것이 좋다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box" style="background: orange">1</div>
    <script src="public/js/test.js"></script>
  </body>
</html>

const box = document.querySelector(".box");
console.log(box);

그렇다면 HTML 파일을 다 읽고 Javascript 파일을 실행할 수 없을까?

DomContentLoaded

Javasript에는 DOMContentLoaded라는 이벤트가 존재한다. 이 이벤트는 HTML 파일을 브라우저가 다 읽었을 때 실행이 되게 된다. 위에 작성한 코드를 DOMContentLoaded 이벤트를 활용해 바꿔보자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="public/js/test.js"></script>
  </head>
  <body>
    <div class="box" style="background: orange">1</div>
  </body>
</html>

function init() {
  const box = document.querySelector(".box");
  console.log(box);
}

document.addEventListener("DOMContentLoaded", init);

DOMContentLoaded 이벤트를 사용할 때 주의해야 할 점이 있다. DOMContentLoaded 이벤트는 맨 마지막에 발생한다는 점이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="public/js/test.js"></script>
  </head>
  <body>
    <div class="box" style="background: orange">1</div>
    <script>
      console.log("왜 이게 먼저 실행돼?");
    </script>
  </body>
</html>

function init() {
  const box = document.querySelector(".box");
  console.log(box);
}

document.addEventListener("DOMContentLoaded", init);

DOMContentLoaded 이벤트는 모든 script가 실행이 된 후에 마지막에 발생되기 때문에 하단에 작성한 script 코드가 먼저 출력이 된 것이다. DOMContentLoaded 이벤트는 맨 마지막에 발생된다는 점을 꼭 기억하자!

script 코드는 어디에 적는게 가장 좋을까?

script 코드를 HTML 문서 상단에 작성했을 경우 script가 적은 경우에는 문제가 되지 않지만 script가 많은 경우 script가 끝날 때까지 html 로드가 끝나지 않게 된다. 이렇게 되면 아마 사용자는 화를 내면서 떠날 것이다.

script 코드를 HTML 문서 하단에 작성했을 경우에는 어떨까?

script 코드를 HTML 문서 하단에 작성하게 되면 HTML 문서가 모두 로드가 된 이후에 script 코드가 실행이 된다. 그러면 사용자는 script 코드의 실행 여부에 상관 없이 일단 사이트가 보이게 되니 script 코드가 실행되지 않았다는 사실을 알지 못할 것이다. 결론을 말하면 script 코드는 HTML 문서 하단에 작성하자! 만약 상단에 작성하였다면 DOMContentLoaded 이벤트라도 걸어주자!!!

'Javascript' 카테고리의 다른 글

[Javascript] 댓글 구현하기 (Create, Read) (2)	2022.11.16
[Javascript] 로또 번호 생성기 - 버블 정렬 [+전체 코드 수정] (0)	2022.11.15
[Javascript] Event Object (0)	2022.11.10
[Javascript] Event (Add, Remove) (0)	2022.11.09
[Javascript] 로또 번호 생성기 (0)	2022.11.08