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 3 years ago

Was this helpful?

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 3 years ago

Was this helpful?