HTML 문서에 자바스크립트 넣기 3가지 방법

1. HTML 내에서 <head>태그 안에서 <script> 태그 사용해서 작성하기

<!DOCTYPE html>
...
  <head>
    <script>
      document.write("1. 이거는 HTML내에서 script 태그에서 작성<br>");
    </script>
  </head>
...
  <body>
  </body>
</html>

 

2. HTML 내에서 <body> 닫는 태그 바로 직전 앞에서 <script> 태그 작성하기

요즘에는 요 방법을 더 선호함

<!DOCTYPE html>
...
  <head>
  </head>
...
  <body>
  ...
    <script>
      document.write("1. 이거는 HTML내에서 script 태그에서 작성<br>");
    </script>
  </body>
</html>

 

왜 요즘에는 2번 방법으로 js를 넣는가

1번과 같이 head 태그 안에다가 작성 시 html이 완전히 로딩 되기 전에 js를 먼저 로딩시킨다. 근데 파일이 커져버리면 읽을게 많아져서 html이 로딩이 매우 느려진다. 그것을 예방하기 위해서 일단 html을 다 로딩시켜놓고 마지막에 js를 로딩시키는 방법을 요즘에는 더 선호하고 있다. 

 

3. HTML에 외부 JS 파일 연결하기

<!DOCTYPE html>
...
  <head>
    <script src="01_001.js"></script>
  </head>
...
  <body>
  </body>
</html>
// 01_001.js

document.write("2. 외부 Js 파일에서 불러오기<br>");