HTML 문서에서 다음 세 가지 방법으로 자바스크립트 코드를 연결할 수 있습니다.
1. script 태그 내에 직접 작성
<script> 태그를 사용하면 다음과 같이 자바스크립트 코드를 문서 내에 직접 삽입할 수 있습니다.
<script>
document.getElementById("demo").innerText = "My First JavaScript"
</script>이때, HTML 4.x 버전의 경우 아래와 같이 <script> 태그에 속성을 지정해줘야 합니다. 이는 text/javasciprt, text/ecmascript, text/vbscript 등이 될 수 있습니다. 따라서, HTML 4.x 버전에 자바스크립트 코드를 삽입하는 경우 다음과 같이 속성을 추가해줘야 합니다.
<script type="text/javascript">
document.getElementById("demo").innerText = "My First Javascript"
</script>그러나 HTML 5의 경우에는 자바스크립트가 기본 언어로 지정되어 있기 때문에 이러한 속성을 부여해 주지 않아도 됩니다.
2. 외부 파일 추가
HTML 파일 내에 직접 코드를 작성하지 않고 싶다면, 다음과 같이 별도의 외부 파일로 자바스크립트를 삽입할 수 있습니다.
<script src="myScript.js"></script>이처럼 외부 파일을 통해 자바스크립트를 추가할 경우, HTML과 코드가 분리되어 관리가 용이하며, 내부에 직접 자바스크립트를 추가하는 것보다 페이지 로딩 속도가 빨라질 수 있습니다.
<script> 태그는 HTML 페이지 어디에나 삽입할 수 있습니다. 이를 <head> 태그에 삽입할 경우, <body>가 로딩되기 전에 자바스크립트가 실행됩니다. 그러나 보통은 </body> 태그 직전에 자바스크립트를 삽입합니다. 이는 HTML 문서가 모두 로딩된 다음, DOM을 통해 보다 안전하게 이와 상호작용할 수 있기 때문입니다.
3. 외부 주소를 통해 추가
다음과 같이 외부 주소를 통해서도 자바스크립트 코드를 삽입할 수 있습니다.
<script src="https://www.w3schools.com/js/myScript1.js"></script>
<script src="/js/myScript1.js"></script>
참고 자료
'개발 > HTML' 카테고리의 다른 글
| HTML이란? HTML 뜻 설명 ✔️ (0) | 2021.05.07 |
|---|---|
| HTML 라디오 버튼 설명 (0) | 2020.10.21 |
| 메타 태그란 무엇이며 왜 사용할까? (0) | 2020.09.28 |
