이 글에서는 자바스크립트 삽입 방식과 위치에 대해 설명합니다. 기본적인 내용의 이 글은 W3Schools의 JavaScript Where To 문서를 참고하여 정리한 것입니다.
<script> 태그
HTML에서 자바스크립트 코드는 <script>와 </script> 태그 사이에 삽입됩니다.
<script>
document.getElementById("demo").innerHTML = "나의 첫 번째 JavaScript";
</script>오래 된 자바스크립트 예시에서는 타입 속성을 사용할 수 있습니다: <script type="text/javascript">
하지만 type 속성은 필요하지 않습니다. 자바스크립트는 HTML에서 기본 스크립팅 언어입니다.
JavaScript 함수와 이벤트
자바스크립트 함수(JavaScript function)는 자바스크립트 코드 블록으로 "호출"될 때 실행됩니다.
예를 들어, 사용자가 버튼을 클릭할 때와 같이 어떤 이벤트(event)가 발생할 때 함수가 호출될 수 있습니다.
<head> 또는 <body>에 자스크립트 삽입
개수에 관계 없이 HTML 문서에 스크립트를 배치할 수 있습니다.
스크립트는 HTML 페이지의 <head> 또는 <body> 섹션 또는 둘 모두에 삽입할 수 있습니다.
<head>에 자바스크립트 삽입하기
아래 예제에서는 자바스크립트 함수가 HTML의 <head> 섹션에 삽입됩니다.
단추를 클릭하면 함수가 호출됩니다.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "단락 바뀜.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">단락</p>
<button type="button" onclick="myFunction()">시도하기</button>
</body>
</html>예시:
<body>에 자바스크립트 삽입하기
아래 예제에서는 자바스크립트 함수가 HTML의 <body> 섹션에 배치됩니다.
버튼을 클릭할 때 함수가 호출됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">문단</p>
<button type="button" onclick="myFunction()">시도하기</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "문단이 바뀜.";
}
</script>
</body>
</html>예시:
스크립트 해석 때문에 표시 속도가 느려질 수 있으므로 스크립트를 요소의 하단에 배치하면 표시 속도를 향상시킬 수 있습니다.
외부 자바스크립트
스크립트를 또한 외부 파일에 배치할 수도 있습니다.
외부 파일: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}동일한 코드를 여러 웹 페이지에서 사용할 때 외부 스크립트가 실용적입니다.
JavaScript 파일의 확장자는 .js입니다.
외부 스크립트를 사용하려면 <script> 태그의 src(source) 속성에 스크립트 파일명을 입력합니다.
예시:
<script src="myScript.js"></script>외부 스크립트 레퍼런스를 <head> 또는 <body>에 위치시킬 수 있습니다.
해당 스크립트는 <script> 태그가 위치한 곳에 있는 것처럼 작동합니다.
외부 스크립트는 <script> 태그를 포함할 수 없습니다.
외부 자바스크립트의 장점
스크립트를 외부 파일에 배치하면 몇 가지 장점이 있습니다.
- HTML과 코드를 분리합니다.
- HTML과 자바스크립트를 더 쉽게 읽고 유지 관리할 수 있습니다.
- 캐싱된 자바스크립트 파일은 페이지 로드 속도를 향상시킬 수 있습니다.
여러 개의 스크립트 파일을 한 페이지에 추가하려면 여러 개의 스크립트 태그를 사용하십시오.
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>외부 참조
외부 스크립트는 3가지 방식으로 참조될 수 있습니다.
- 전체 URL로 (전체 웹 주소)
- 파일 경로 (예: /js/)
- 경로 없이
myScript.js의 전체 경로:
<script src="https://www.w3schools.com/js/myScript.js"></script>myScript.js의 파일 경로:
<script src="/js/myScript.js"></script>myScript.js에 대한 링크 경로 없이:
<script src="myScript.js"></script>