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 : 캐쉬를 통해서 속도의 향상, 전송량의 경량화
Front-End Designer