1. <script> 스크립트 태그
HTML에서 자바스크립트를 사용하려면 어떻게 해야할까?
일단, <script> 태그를 사용한다.
이 태그를 아래 html의 기본 골격인 <body> 또는 <head>에 넣는 것부터 시작이 된다.
<!DOCTYPE html> --> html로 작성된 문서라는 뜻
<html> --> html은 head와 body로 구분된다
<head> --> head는 문서 전체에 공통적으로 적용되어야 할 내용이 들어간다
<meta charset="utf-8" /> --> 한국어를 브라우저 상에서 볼 수 있게끔 한다.
<title>Practice</title> --> 웹페이지의 이름으로 크롬에서는 탭에 명시된다.
</head> --> 닫는 태그
<body> --> body에는 웹페이지에 보여질 내용이 들어간다
</body> --> 닫는 태그
</html> --> 닫는 태그 2. <body> 속 <script>
첫번째 경우 : type = "text/javascript"
▶️ 간단한 자바스크립트 작성
👇예시👇
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type = "text/javascript"> --> 이런식으로 추가하고 내용으로 자바스크립트 작성
console.log('JS here');
</script>
</body>
</html>두번째 경우 : src = "main.js"
▶️ body 태그 최하단에
👇예시👇
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
...
<script src = "main.js"></script>
</body>
</html>[동작순서]
- html 파일 분석 완료 (사용자에게 웹페이지 화면이 보여짐)
- js 파일 불러옴
- 불러온 js 파일 실행 (자바스크립트 기반 웹페이지 동작 가능)
이미지 출처 : youtube 드림코딩 by 엘리 [자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)]
[특징]
js가 준비되기 전에 웹사이트의 컨텐츠를 사용자가 미리 볼 수 있음. 단, 정상적으로 구동하는 웹사이트를 보기 위해서는 시간이 걸린다.
3. <head> 속 <script>
첫번째 경우 : src = "main.js"
▶️ head 태그 내부에
👇예시👇
<!DOCTYPE html>
<html>
<head>
<script src = "main.js"></script>
</head>
<body>
</body>
</html>[동작순서]
- html 파일 분석 시작
- js 파일 불러옴 (html 파일 분석 중단)
- 불러온 js 파일 실행 (html 파일 분석 중단)
- html 파일 분석 완료 (사용자에게 웹페이지 화면이 보여짐과 동시에 동작 가능)
이미지 출처 : youtube 드림코딩 by 엘리 [자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)]
[특징]
html분석을 먼저 시작하고 도중에 js가 필요하다는 것을 알고 서버에서 스크립트 파일을 다운로드 받고 실행시킨 후에 다시 html분석으로 돌아감. 웹사이트를 사용자가 보기까지 비교적 시간이 오래 걸린다.
두번째 경우 : async src = "main.js"
▶️ head 태그 내부에, js 파일이 여러개 있을 경우
👇예시👇
<!DOCTYPE html>
<html>
<head>
<script async src = "a.js"></script>
<script async src = "b.js"></script>
<script async src = "c.js"></script>
</head>
<body>
</body>
</html>[동작순서]
- html 파일 분석 시작
- 여러개의 js 파일 동시에 불러오기 시작
- 먼저 불러와진 js 파일부터 실행 (html 파일 분석 중단)
- 모든 js파일이 실행되어진 후에 html 파일 분석 재시작
- html 파일 분석 완료 (사용자에게 웹페이지 화면이 보여짐과 동시에 동작 가능)
이미지 출처 : youtube 드림코딩 by 엘리 [자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)]
[특징]
1. asyn라는 script 태그 속성값을 사용. 불린타입의 속성값으로 선언하는 것만으로도 true로 간주되어 async기능 사용 가능.
2. html파일을 분석함과 동시에 js파일을 불러옴(병렬 실행 가능)
3. js파일을 불러오는 시간을 절약할 수 있지만 html 파일이 모두 분석되기 전에 js 파일을 실행하게 되므로 웹사이트가 정확하게 구동되지 않을 수도 있음.
4. 사용자는 여전히 완전한 웹사이트를 보는데 비교적 시간이 많이 걸림
5. 여러개의 js파일이 실행 순서가 있어야 한다면 async는 절대 사용하면 안됨.
세번째 경우 : defer src = "main.js"
▶️ head 태그 내부에, js 파일이 여러개 있을 경우
👇예시👇
<!DOCTYPE html>
<html>
<head>
<script defer src = "a.js"></script>
<script defer src = "b.js"></script>
<script defer src = "c.js"></script>
</head>
<body>
</body>
</html>[동작순서]
- html 파일 분석 시작
- 여러개의 js 파일 동시에 불러오기 시작
- html 분석 완료 및 js 파일 모두 불러와진 후에 (사용자에게 웹페이지 화면 보여짐)
- js 파일 순서대로 실행 (웹페이지 동작 가능)
이미지 출처 : youtube 드림코딩 by 엘리 [자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)]
[특징]
1. defer라는 script 태그 속성값을 사용. 불린타입의 속성값으로 선언하는 것만으로도 true로 간주되어 defer기능 사용 가능.
2. html파일을 분석함과 동시에 js파일을 불러옴(병렬 실행 가능)
3. 모든 fetching 과 parsing 이 완료된 후에 executing 시작
4. 선언한 순서대로 js파일을 실행하기 때문에 순서를 잘 지킬 수 있음
결론
현재까지는 script 속성 defer 값을 쓰면서 head 태그 내부에 쓰는 것이 가장 효율적임을 알 수 있다.
참고
- 코드스테이츠 소프트웨어엔지니어 과정 수업자료
- youtube 드림코딩 by 엘리
