안녕하세요!
HTML/CSS도 어느 정도 정리가 끝나서 슬슬 자바스크립트 공부를 시작하려 합니다.
자바스크립트 파일(.js)을 HTML에 연결하는 방법을 정리해보겠습니다.
자바스크립트는 CSS와 비슷하게 <script>를 사용하여 html 파일에 직접 적을 수도 있고,
따로 .js파일을 연결시킬 수도 있습니다.
여기서는 다른 폴더(js라는 이름의 폴더)에 .js파일을 만든 후 <script>를 이용하여 연결하는 법을 정리해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="./js/main.js"></script>
</head>
<body>
<div id="my-name">Donghoon!</div>
</body>
</html>여기에 아래와 같은 자바스크립트 파일을 연결했다고 가정해보겠습니다.
const myName = document.getElementById('my-name');
console.log(myName.innerText);
위의 html 파일을 열어 개발자 모드에서 콘솔을 보면 아래와 같은 에러 문구를 확인하실 수 있습니다.
이건 <script src="./js/main.js"></script>가 body안의 <div>를 읽기 전에 실행되어 id를 못 찾아 나오는 문구입니다.
<script src="./js/main.js"></script>를 body의 마지막에 두면 정상적으로 글자를 읽어올 것입니다. (물리적 방법)
또는 위치는 그대로 head안에 두면서 <script src="./js/main.js" defer></script>처럼 defer를 추가하면 해결이 됩니다.
defer는 html문서를 전부 분석(파싱)한 후에 <script> 내의 src안의 파일을 작동하라는 의미를 가집니다.(defer 속성)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div id="my-name">Donghoon!</div>
</body>
</html><script> 위치를 그대로 두며 defer를 추가하게 되면 아래와 같이 정상적으로 출력되는 것을 확인할 수 있습니다!
+) 직접 html에 <script>를 이용해 자바스크립트 작성한 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script>
console.log('안녕하세요');
</script>
</body>
</html>
'Web 개발 > JS' 카테고리의 다른 글
| Javascript - class(1) (0) | 2021.06.19 |
|---|---|
| Javascript - object (0) | 2021.06.17 |
| Javascript - function (0) | 2021.06.16 |
| Javascript - operator (0) | 2021.06.15 |
| Javascript - Variable (0) | 2021.06.14 |
댓글