자바스크립트를 HTML에 추가하는 방법
1. 자바스크립트 파일 없이 HTML에 직접 작성
<script>태그 안에 자바스크립트 코드를 넣으면, HTML 파일 내부에서 동작한다.<head>와<body>태그 내부 어디에나 작성할 수 있다.
<!DOCTYPE HTML>
<html>
<head>
<script>
console.log("Head에서 실행");
</script>
</head>
<body>
<script>
console.log("Body에서 실행");
</script>
</body>
</html>설명:
<head>에서 작성된 스크립트는 HTML 구조를 로드하기 전에 실행된다.<body>에서 작성된 스크립트는 해당 스크립트의 이전까지 HTML이 로드된 후 실행된다.
2. 별도의 자바스크립트 파일을 불러오기
- 자바스크립트 파일을 별도로 생성한 후,
<script>태그의src속성을 사용해 불러온다. <head>태그에defer속성을 추가하면 HTML 파싱이 끝난 후 스크립트를 실행한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script defer src="./main.js"></script>
</head>
<body>
<h1>HTML과 JS 연결</h1>
</body>
</html>설명:
main.js파일에 자바스크립트 코드를 작성하면 HTML과 분리된 구조로 관리할 수 있다.defer속성을 사용하면 DOM 조작과 관련된 스크립트를 안전하게 실행할 수 있다.
3. src 속성과 내부 코드 혼용 금지
src속성과 내부 코드가 동시에 있을 경우, 내부 코드는 무시된다.
<script src="file.js">
console.log("이 코드는 실행되지 않습니다.");
</script>설명:
src속성이 있을 때는 외부 파일만 참조하므로 내부 코드는 삭제하거나 분리해야 한다.
4. <script> 옵션
<script> 태그는 기본적으로 HTML을 파싱하는 동안 실행된다. 추가 속성을 통해 실행 방식을 제어할 수 있다.
1) defer 속성
- HTML 파싱이 완료된 후 스크립트를 실행한다.
- DOM 조작이 필요한 경우에 사용한다.
- 여러 개의 스크립트를 작성하면 HTML 순서대로 실행된다.
<script defer src="./main.js"></script>
<script defer src="./utils.js"></script>설명:
- 두 개의 스크립트가 각각 순서대로 실행된다.
- HTML 파싱이 완료된 후 실행되므로 DOM과의 충돌이 없다.
2) async 속성
- HTML 다운로드와 병렬로 스크립트를 다운로드하고 실행한다.
- 여러 스크립트를 작성하면 다운로드 완료 순서대로 실행된다.
- HTML과 독립적으로 동작하는 스크립트에 적합하다.
<script async src="./analytics.js"></script>
<script async src="./ads.js"></script>설명:
- 두 스크립트는 다운로드 완료된 순서대로 실행되며, HTML 파싱과 상관없이 독립적으로 작동한다.
5. 실무에서의 defer와 async 비교
| 속성 | 스크립트 실행 순서 | HTML과의 관계 |
| async | 다운로드 완료 순서 | HTML 파싱과 독립적으로 실행. DOMContentLoaded 이벤트 이후 실행될 수도 있음. |
| defer | HTML 문서 순서 | HTML 다운로드와 파싱이 완료된 후 DOMContentLoaded 이벤트 이전에 실행. |
6. 정리 및 실무 팁
- DOM 조작이 필요한 경우:
defer를 사용해 안전하게 HTML 파싱이 끝난 후 실행. - 독립적인 서드파티 스크립트:
광고나 방문자 수 카운터 등 HTML과 연관성이 적은 스크립트에는async사용. - 파일 분리:
자바스크립트 코드는 외부 파일로 분리해 관리하는 것이 유지보수에 유리하다.
7. 동적 스크립트 로딩
document.createElement('script')를 사용해 스크립트를 동적으로 추가할 수 있다. 이 방식은 스크립트가 필요할 때만 로드하도록 구현할 때 유용하다.
( 지금 단계에서는 이런 게 있구나 정도만 기억하고 넘어가면 됨)
1) 기본 동적 로딩 코드
// 동적 스크립트 추가
let script = document.createElement('script');
script.src = './dynamicScript.js'; // 불러올 스크립트 파일 경로
script.async = true; // 비동기로 로드
document.body.append(script); // 스크립트를 <body>에 추가설명:
document.createElement('script'): 스크립트 태그를 생성한다.script.src: 로드할 외부 자바스크립트 파일의 경로를 지정한다.script.async: 스크립트를 비동기로 로드하도록 설정. 필요하지 않으면 설정하지 않아도 된다.document.body.append(script): 생성한 스크립트를<body>태그에 추가하여 로드 및 실행을 시작한다.
추가 학습
- MDN 문서: document.createElement()
'바닐라 코드 > Java Script' 카테고리의 다른 글
| 5. 변수와 상수 (3) | 2024.12.05 |
|---|---|
| 4. use strict (1) | 2024.12.04 |
| 3. 문과 식 (2) | 2024.12.03 |
| 1. 자바스크립트란? (0) | 2024.12.02 |
| 0. 자바스크립트 용어 (3) | 2024.12.01 |
