HTML에서 JavaScript 로드하기

HTML에서 JavaScript를 로드하는 다양한 방법에 대해서 학습

inline 방식

  • 태그에 직접 자바스크립트를 기술하는 방식

  • 장점 : 태그에 연관된 스크립트가 분명하게 드러남

  • 단점 : 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어짐(HTML : 정보전달, Javascript : 제어를 명확히 구분하는 것이 좋)

  • onclick, onchange, onkeydown 등

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <!-- onclick 속성에 자바스크립트 기 -->
  <input type="button" value="Hello world" onclick="alert('Hello world')" />
</body>
</html>

script 태그를 이용한 방식

  • <script></scrip> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식

  • 장점 : html 태그와 자바스크립트 코드를 분리할 수 있음(정보와 제어의 분)

  • 단점 : 코드는 분리 되었지만 아직은 한 개의 html 파일 안에서 관리

<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <input type="button" id="hw" value="Hello world" />
  <!-- 스크립트 코드 내부에 작성 -->
  <script>
    //여기서 부터 자바스크립트로 해
    var hw = document.getElementById('hw');
    hw.addEventListener('click', function() {
      alert('Hello world');
    })
  </script>
  <!-- html로 복 -->
</body>
</html>

외부 파일로 분리

  • 자바스크립트를 외부의 .js파일로 분리하여 작성하고, HTML 파일 내에서 script 태그의 src 경로 속성으로 불러와 사용

  • js파일을 여러 웹페이지에서 로드함으로서 코드의 재사용성이 증가하고 캐쉬(웹 사이트에 첫 접속시 필요한 파일들을 받아 저장해놓음 다음 접속시 받지 않고 사용)를 통해 속도의 향상과 전송량의 경량화를 도모할 수 있음

  • 각 페이지의 중복 코드를 제거하여 유지보수가 용이함

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<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></title>
</head>
<body>
  <input type="button" id="hw" value="Hello world" />
  <!-- 외부 스크립트를 불러옴 -->
  <script src="./script.js"></script>
</body>
</html>
// script.js
var hw = document.getElementById('hw');

hw.addEventListener('click', function() {
  alert('Hello world');
});

script 태그의 위치

  • body가 끝나는 지점에 위치해야 html이 전부 로드된 후에 script태그가 로드되기 때문에 원하는대로 동작함

  • head 태그에 위치 시킬경우 아직 dom이 생성되지 않았기 때문에 dom에 접근하는 기능 사용시 에러가 발생할 수 있음(window.onload로 해결 가능하지만 body태그 마지막에 사용하는 것을 권장)

  • 브라우저가 html 파일을 해석할때 위에서 아래로 순서대로 실행하다가 script태그를 만나면 읽던것을 멈추고 script를 먼저 해석

PreviousJAVASCRIPT&BROWSER(생활코딩)NextObject Model

Last updated

Was this helpful?