한눈에 보는 HTML에서 자바스크립트 사용법

Seobtudy·2021년 1월 30일
1

JavaScript

목록 보기
1/1
post-thumbnail

JavaScript의 작성 방식 3가지

아래의 모든 방식에 대한 결과 화면은 동일합니다.


1. Inline - 인라인 자바스크립트

<body>
  <h1 onclick="alert('seobtudy');">click</h1>
</body>
  • 태그 내에 직접 자바스크립트 명령어를 작성하는 방법

장점 : 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리

단점 : 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직 하지못한 방법


2. Internal- 내부 자바스크립트

<body>
  <h1 id="internal">click</h1>
  <script>
    var internal = document.getElementById("internal");
    internal.onclick = function () {
      alert("seobtudy");
    };
  </script>
</body>
  • 태그 내에 직접 자바스크립트 명령어를 작성하는 방식
  • <script> 태그 내에 작성, <body> 영역에 작성

장점 : HTML 태그와 JavaScript의 코드를 분리할 수있다.


3. External - 외부 자바스크립트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="./main.js"></script>
  </head>
  <body>
    <h1 id="external">click</h1>
    <!-- <script></script>가 여기에 위치해도 동일합니다 -->
  </body>
</html>
// main.js
var internal = document.getElementById("external");
internal.onclick = function () {
    alert("seobtudy");
};
  • HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식
  • HTML 문서에 불러올 때 <script> 태그에 src 속성에 자바스크립트 파일의 경로와 파일명을 입력

장점 : 엄격하게 정보와 제어를 분리할 수 있다.
장점2 : 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다.
장점3 : 캐쉬를 통해서 속도의 향상, 전송량의 경량화

profile
Front-End Designer

0개의 댓글