[JavaScript] #0. html파일과 js파일 연결방법
JavaScript문법에 대해 알아보기 전에 html파일에 js파일을 연결하는 법에 대해 알아본다.
html파일의 <head>태그 또는 <body>태그 안에 아래와 같은 코드를 넣으면 XXX.js 파일과 연결된다.
<head>
<script src="XXX.js"></script>
</head>
<body>
<script src="XXX.js"></script>
</body>
위 경우는 웹이 코드를 위에서부터 아래로 순차적으로 읽으면서 html파일을 로딩하는 도중,
<script src="XXX.js"></script>코드를 만나게 되면 html파일 로딩을 중단하고 js파일을 다운받는다.
그리고 js파일 다운이 완료된 후에 다시 html파일을 로딩한다.
하지만 이는 웹페이지 로딩시간이 오래 걸리게 된다.
이를 해결해주는 것이 바로 <script>태그 속성인 asyn과 defer이다.
<head>
<script asyn src="XXX.js"></script>
</head>
asyn속성은 html파일을 로딩하는 동시에 js파일을 다운하고, js파일이 다운되면 즉시 웹페이지에 적용한다.
페이지 로딩 시간은 줄었으나 단점은 html파일이 로딩되기도 전에 js파일이 적용되었기 때문에 아직 정의되지 않은 태그에 js파일이 접근하여 문제가 발생한다.
이를 해결한 것이 defer속성이다.
<head>
<script defer src="XXX.js"></script>
</head>
defer속성은 html파일을 로딩하는 동시에 js파일을 다운하고, html파일 로딩이 완료된 후에 js파일을 적용한다.
따라서 html파일에 js파일을 연결시키는 방법으로는 위 방법을 추천한다.
+참고
js파일 맨 위에 'use strict'를 쓰길 권고한다.
이 명령어를 통해 사용자의 코드 실수를 방지해주기 때문이다.
결론
XXX.html
<head>
<script defer src="XXX.js"></script>
</head>
XXX.js
'use strict'
위처럼 파일을 셋팅하는 것을 추천한다.