이번챕터 핵심: html에 자바스크립트 추가해보기
html에 css 적용하는 방식과 마찬가지로, html에 js 적용하는 두가지 방식이 있음
1. html 내부에 설정하는 방식
2. 외부파일을 가져오는 방식
첫 번째 방식부터 보자.
1. 기본 사용법
HTML 파일 내에 직접 JavaScript 코드를 작성
바디태그 안의 끝에다가 스크립트 태그 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Example</title>
</head>
<body>
<h1>안녕하세요!</h1>
<script>
console.log("안녕");
</script>
</body>
</html>
2. 외부 JavaScript 파일 사용
- script.js 파일 생성
- HTML 파일에서 외부 스크립트 불러오기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Script Example</title>
</head>
<body>
<h1>안녕하세요!</h1>
<script src="script.js"></script>
</body>
</html><script> 태그 위치는 어디에?
알아둬야할 것:
html은 기본적으로 위에서부터 순차적으로 실행된다.
스크립트 태그가 head태그 안에 있다면 아래 body를 읽어오지 못한상태에서 js가 실행되기 때문에 에러 발생 가능성이 있다.
<head> 섹션에 위치:
문서의 상단에서 로딩되지만, DOM이 완전히 생성되기 전에 실행되기 때문에 에러발생 가능성 있음
head태그 안에 스크립트를 넣으려면 아래 세가지 방법 중 하나로 작성해야한다
1) DOMContentLoaded 이벤트를 사용
: "문서 로드가 완료된 이후에 스크립트를 실행시켜줘" 하고 이벤트리스너 안에 따로 작성해주는 것
특징: HTML 파싱이 모두 끝난 후 js의 파싱이 시작된다. (이게 단점이 될 수도 있는 거임)
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("안녕");
});
</script>
</head>
2) <head>안에 async
: 스크립트를 HTML 파싱과 동시에 비동기적으로 로드하는 방식. 로드가 완료된 즉시 스크립트를 실행함
특징:
- HTML 파싱과 스크립트 로드가 동시에 이루어져 로딩 속도가 빠름
- 로드된 순서와 관계없이 로드가 끝난 스크립트부터 실행되므로 실행 순서가 보장되지 않음
- 맨처음 언급했던 head 태그안에 스크립트 넣었을 때 에러발생가능성이 여전히 있다
<script src="script.js" async></script>
3) <head>안에 defer (👍🏻)
: 스크립트를 HTML 파싱과 동시에 비동기적으로 로드하는 방식 (html과 js를 동시에 준비하고 있다가 html이 로드되면 js 를 실행시키는 것임)
HTML 파싱이 완료된 후 스크립트가 실행됨
특징:
- DOM이 완전히 생성된 이후에 스크립트가 실행되므로 DOM 조작이 안전
- HTML 파싱과 스크립트 로드가 동시에 이루어져 로딩 속도 최적화
- 실행 순서가 보장되므로 DOM 의존적인 스크립트에 적합합니다.
<script src="script.js" defer></script>
async, defer 비교
<body> 섹션의 끝에 위치: 일반적으로 이 위치가 권장되며, DOM 요소가 로드된 후 스크립트가 실행됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Script Example</title>
</head>
<body>
<script>console.log("안녕");</script>
</body>
</html>
특징: HTML 파싱이 모두 끝난 후 js의 파싱이 시작된다. (이게 단점이 될 수도 있는 거임)
'Frontend > JavaScript' 카테고리의 다른 글
| preventDefault 와 stopPropagation 차이점 (+ 이벤트 버블링, 캡쳐링) (0) | 2024.11.20 |
|---|