자바스크립트를 연결하는 방법은 2가지가 있다.
1. HTML 문서 안에서 자바스크립트 작성하기
- HTML 문서 내에서 <script>를 사용해 자바스크립트 코드를 직접 작성할 수 있다.
- <body>의 맨 아래에 위치시키면, HTML 요소가 렌더링된 후 자바스크립트가 실행된다.
<body>
<!--HTML 코드 -->
<script>
console.log('작성하기');
</script>
</body>2. 외부 자바스크립트 파일과 연결하기
- <script>의 src 속성으로 외부 자바스크립트 파일을 HTML과 연결할 수 있다.
- src 속성에는 연결할 자바스크립트 파일의 경로를 지정한다.
- 자바스크립트 코드를 HTML 문서와 분리하면 코드의 가독성이 향상될 수 있다.
<script src="script.js"></script>3. <script> 위치의 중요성
- <script>의 위치는 페이지 로딩 속도 및 스크립트 실행에 영향을 준다.
- 브라우저는 HTML을 위에서부터 순차적으로 읽히기 때문에 <script>의 위치가 중요하다.
- 브라우저는 HTML 파일을 해석하다가 <script>를 만나면 해석을 일시적으로 멈춘다.
- <script>의 스크립트를 모두 실행하기 전까지 HTML 해석이 진행되지 않는다.
- 스크립트 로드와 실행에 시간이 오래 걸릴 경우, 웹 페이지가 느리게 표시될 수 있다.
<head>에 배치할 경우
- 웹 페이지의 모든 리소스가 완전히 준비되기 전에 스크립트가 실행되면 페이지 로딩 속도가 느려질 수 있다.
- 스크립트가 실행될 때 필요한 HTML요소가 준비되지 않았다면 오류가 발생할 수 있다.
<body> 하단에 배치할 경우
- 모든 HTML요소가 렌더링 된 후 스크립트가 실행되기때문에 페이지가 더 빠르게 사용자에게 표시된다.
- 페이지 로딩 속도를 개선하고, 자바스크립트가 HTML 요소를 정상적으로 조작할수 있게 한다.
-> <script>는 파일 로딩이 길어지거나 코드 오작동 우려가 있어서 body테그 하단에 위치한다.
<body>
<span>위치는 중요해!</span>
<script src="script.js"></script>
</body>