728x90
반응형
JavaScript 코드를 HTML 문서에서 사용하기 위해 <script> 태그를 사용합니다.
JavaScript에서 <script> 태그를 사용할 때 코드가 길어지면 '외부 자바스크립트 파일'을 로드하는 방법이 좋다.
예를 들어
<!DOCTYPE html>
<html>
<head>
<title>내 문서</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="파일명.js"></script>
</body>
</html>
<script> 태그 내부에 src 속성을 사용하여 JavaScript 파일의 경로를 지정할 수 있다.
이렇게 하면 HTML 문서와 분리된 JavaScript 파일을 만들어 수정이 용이하고 편리하다.
이렇게 사용했을 때의 장단점
장점
- 코드 재사용성: 여러 페이지에서 동일한 자바스크립트 코드를 사용할 수 있음.
- 유지보수 용이성: 자바스크립트 파일을 수정하면 해당 파일을 로드한 모든 HTML 파일에서 변경 내용이 적용됨.
- 로딩 속도 향상: HTML 파일에서 자바스크립트 코드를 분리하면 HTML 파일의 크기가 줄어들어 로딩 속도가 향상됨.
단점
- 외부 파일 로딩 시 추가적인 HTTP 요청이 필요하므로 로딩 시간이 늘어날 수 있음.
-파일을 로드하지 않았을 경우에는 스크립트가 동작하지 않으므로 해당 기능을 사용하지 못할 수 있음.
자바스크립트 코드의 크기가 작은 경우에는 인라인 스크립트를 사용하는 것이 좋을 수 있다.
그러나 자바스크립트 코드의 크기가 크거나 여러 페이지에서 재사용할 경우에는 외부 파일을 사용하는 것이 효율적이다.
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 웹 출력하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.15 |
|---|---|
| [JavaScript] 자바스크립트 심볼(Symbol)이란? | 민민의 하드디스크 - 티스토리 (0) | 2023.05.14 |
| HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
| [JavaScript] JavaScript에서 그래프 그리기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.11 |
| [JavaScript] JavaScript에서 Map과 Object | 민민의 하드디스크 - 티스토리 (0) | 2023.05.09 |
