문의하기
자바스크립트 HTML 추가 및 작성 위치 (async, defer)
자바스크립트 코드를 HTML 문서에 추가하는 방법에는 내부 스크립트와 외부 스크립트 두 가지가 있습니다. 그리고 HTML 문서에서 자바스크립트 코드를 작성하는 위치도 중요하고 자바스크립트 파일을 HTML 문서에 추가할 때 ‘async’와 ‘defer’ 속성을 사용할 수도 있습니다.
그럼 자바스크립트 코드를 HTML 문서에 추가하는 방법에 대해서 알아보겠습니다.
▼ 목차
- 자바스크립트 코드를 HTML 문서에 추가하는 방법
- HTML 문서에서 자바스크립트 코드 작성 위치
- async, defer 속성 차이점
1. 자바스크립트 코드를 HTML 문서에 추가하는 방법
1. 내부 스크립트 방법
☞ 내부 스크립트는 HTML 문서 내부에서 자바스크립트 코드를 작성합니다.
① 장점 : 간단하고 빠르게 자바스크립트 코드를 작성할 수 있습니다.
② 단점 : 여러 페이지에서 같은 코드를 사용할 경우 코드를 반복해서 작성해야 하므로 코드의 재사용성이 떨어집니다.
▼ <script> 태그를 사용하여 자바스크립트 코드를 작성한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>내부 스크립트 예제</title>
<script>
// 자바스크립트 코드를 작성합니다.
alert("내부 스크립트입니다.");
</script>
</head>
<body>
<h1>내부 스크립트 예제</h1>
</body>
</html>2. 외부 스크립트 방법
☞ 외부 스크립트는 자바스크립트 코드를 별도의 파일로 작성하고, HTML 문서에서 해당 파일을 연결하여 사용하는 방법입니다.
① 장점 : 코드의 재사용성을 높일 수 있으며, 여러 페이지에서 동일한 자바스크립트 파일을 사용할 수 있습니다.
2.1. 외부 스크립트 파일 작성
자바스크립트 코드를 연결할 파일을 미리 만듭니다. 파일 확장자는. js로 저장합니다.
▼. js 파일 작성한 예시입니다.
// base.js 파일
// 자바스크립트 코드를 작성합니다.
alert("외부 스크립트입니다.");
2.2. 외부 스크립트 파일 연결하기
HTML 문서에서 해당 파일을 연결합니다. <script> 태그의 src 속성에 외부 스크립트 파일 경로를 지정합니다.
▼ 외부 스크립트 파일을 연결한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>외부 스크립트 예제</title>
<script src="js/base.js"></script>
</head>
<body>
<h1>외부 스크립트 예제</h1>
</body>
</html>2. HTML 문서에서 자바스크립트 코드 작성 위치
☞ 일반적인 <head> 태그 내부에 자바스크립트 코드를 작성하는 방법과 <body> 태그 내부 중에서 특히 마지막 부분에 작성하는 방법 두 가지가 있습니다.
1. <head> 태그 내부에 작성
<head> 태그 내부에 자바스크립트 코드를 작성하면 <body> 태그 보다 먼저 실행이 됩니다.
① 장점 : HTML과 CSS를 로드 전에 자바스크립트 코드에서 제어를 할 수 있습니다.
② 단점 : 스크립트 코드가 로드된 이후에 <body> 태그가 로드되기 때문에 페이지 로딩 속도가 느립니다.
▼ <head> 태그 내부에 작성한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 코드 위치 예제</title>
<script>
// 자바스크립트 코드를 작성합니다.
alert("head 태그 내부입니다.");
</script>
</head>
<body>
<h1>자바스크립트 코드 위치 예제</h1>
</body>
</html>2. <body> 태그 내부에 작성
<body> 태그 내부 마지막에 작성하면 페이지 로드된 후 자바스크립트 코드가 실행이 됩니다.
① 장점 : 페이지 로딩 속도가 빠릅니다.
② 단점 : HTML과 CSS를 로드 전에 자바스크립트 코드에서 제어할 수 없습니다.
▼ <body> 태그 내부에 작성한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 코드 위치 예제</title>
</head>
<body>
<h1>자바스크립트 코드 위치 예제</h1>
<script>
// 자바스크립트 코드를 작성합니다.
alert("body 태그 내부입니다.");
</script>
</body>
</html>
☞ 웹 페이지를 로드할 때 반드시 실행이 필요 없는 경우에는 <body> 태그 마지막 부분에 추가하는 게 좋습니다.
3. async, defer 속성 차이점
1. async 속성
async 속성은 자바스크립트 파일을 비동기적으로 로드합니다.
① 장점 : HTML 문서와 자바스크립트 파일이 동시에 로드될 수 있으므로 페이지 로딩 속도를 높일 수 있습니다.
② 단점 : 자바스크립트 파일의 실행 순서가 보장되지 않아 자바스크립트 파일이 HTML 문서의 다른 요소에 의존하지 않는 경우에만 사용하는 것이 좋습니다.
▼ async 속성을 사용한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>async 속성 예제</title>
<script async src="js_1.js"></script>
<script async src="js_2.js"></script>
<script async src="js_3.js"></script>
</head>
<body>
<h1>async 속성 예제</h1>
</body>
</html>2. defer 속성
defer 속성은 자바스크립트 파일을 HTML 문서가 로드된 후에 실행됩니다.
① 장점 : 자바스크립트 파일이 HTML 문서의 요소에 의존하는 경우에 적합합니다. defer 속성을 사용하면 자바스크립트 파일의 실행 순서를 보장할 수 있습니다.
▼ defer 속성을 사용한 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>defer 속성 예제</title>
<script defer src="js_1.js"></script>
<script defer src="js_2.js"></script>
<script defer src="js_3.js"></script> </head>
<body>
<h1>defer 속성 예제</h1>
</body>
</html>
☞ 자바스크립트 파일의 실행 순서가 중요하지 않은 경우에는 async 속성을 사용하여 HTML 문서의 로딩 속도를 높이는 것이 좋고, 자바스크립트 파일의 실행 순서가 중요한 경우에는 defer 속성을 사용하여 실행 순서를 보장하는 것이 좋습니다.
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
