먼저 ! JavaScript 를 HTML문서에 연결하는 방법!
<head></head> 태그 안에 <script src = "파일명.js"></script> 해당 코드를 삽입하면 끝!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트</title>
<link rel="stylesheet" href="css/03_이벤트.css">
<script src="js/03_이벤트.js"></script>
</head>
1) head안에 script를 포함하게 되면?
-> 사용자가 html파일을 다운받았을 때 브라우저가 한줄 한줄 씩 분석(파싱)하는데 css로 병합해서dom요소로 변환함
-> 브라우저가 한줄 씩 읽으면서,, script태그가 보이면 '와!js파일을 다운로드 해야겠다' 라고 생각함
-> 그동안 잠시 분석(파싱)을 멈추다가 js파일 다운로드가 끝나면 그 다음 파싱하는 부분으로 넘어가게 됨
==> 단점 : 만약 js파일이 엄청 크고 인터넷이 느리면, 사용자가 웹사이트를 보는데 너무 오랜 시간이 걸린다.
<body>
<h1>이벤트</h1>
<div class="container">
<img src="../../resources/grid2.jpg" alt="">
<img src="../../resources/grid3.jpg" alt="">
<img src="../../resources/grid4.jpg" alt="">
<img src="../../resources/grid5.jpg" alt="">
<img src="../../resources/grid6.jpg" alt="">
</div>
<script src="js/03_이벤트.js"></script>
</body>
- body 태그 제일 끝 부분에 js script 추가하기
-> 이렇게 하면 브라우저가 html다운받아 페이지가 다 준비된 다음 js script를 만나 실행하게 된다.
-> 그러면 사용자들에게 js를 받기전에도 페이지 컨텐츠를 볼 수 있는 방법이 생김
-> 구글 홈페이지에서도 body 태그 제일 끝 부분에 js script 추가한 것을 볼 수 있다.
==> 단점 : 웹사이트가 js에 의존적인 브라우저라면 (사용자가 의미있는 콘텐츠 보기 위해선 js가 서버에 있는 데이터를 받아와야 한다거나, dom요소를 더 예쁘게 꾸며주는 것 등..) 사용자가 정상적인 페이지를 보기 전까진 서버에서 js 다운받거나 실행하는 기다려야 한다.
- 가장 효율적이고 안전한 옵션! defer
head 안에 스크립트를 쓰고 defer속성값을 쓰면
-> 차례대로 분석(파싱)하다가 "어?defer이네? 그러면 얘를 다운로드 받자" 라고 명령만 시켜두고
-> 나머지 html을 끝까지 파싱하게 된다.(그러는 동안 js파일을 다운로드 받는다.)
-> html파싱이 완료되면 js를 바로 실행하게 된다.
==> 장점 : html 파싱하는 동안 js파일 다운로드 다 받아놓음
실행할 js파일이 많아도 우리가 정리한 순서가 지켜지기 때문에 우리가 원하는 대로 스크립트가 실행됨.
html파싱 -> defer만남(js파일 다운로드 명령) -> 나머지 html 파싱(js파일 다운로드 받음) -> 파싱해서 사용자에게 보여줌 -> 이어서 바로 js 실행
