JavaScript 사용처

<script> 태그

HTML에서는 JavaScript 코드가 <script> 태그와 </script> 태그 사이에 삽입됩니다.

예제 1
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

이전 JavaScript 예제에서는 type 속성을 사용할 수 있습니다. <script type="text/javascript">
type 속성은 필요하지 않습니다. JavaScript는 HTML의 기본 스크립트 언어입니다.

JavaScript 함수 및 이벤트

JavaScript 함수는 JavaScript 코드 블록으로 호출되었을 때 실행될 수 있습니다.

예를 들어 사용자가 버튼을 클릭할 때와 같이 이벤트가 발생했을 때 함수를 호출할 수 있습니다.

<head> 또는 <body>의 JavaScript

HTML 문서에는 스크립트를 배치할 수 있습니다.

스크립트는 HTML 페이지의 <body>, <head>섹션, 또는 양쪽 모두에 배치할 수 있습니다.

<head>의 JavaScript

이 예에서는 JavaScript 함수가 HTML 페이지의 <head> 섹션에 배치되어 있습니다.

이 함수는 버튼을 클릭하면 호출됩니다.

예제 2
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

<body>의 JavaScript

이 예에서는 JavaScript 함수가 HTML 페이지의 <body> 섹션에 배치되어 있습니다.

이 함수는 버튼을 클릭하면 호출됩니다.

예제 3
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

스크립트 해석으로 인해 표시 속도가 느려지기 때문에 스크립트를 <body> 요소의 하단에 배치하면 표시 속도가 향상됩니다.

외부 JavaScript

스크립트는 외부 파일에도 배치할 수 있습니다.

myScript.js
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

외부 스크립트는 많은 웹 페이지에서 동일한 코드를 사용하는 경우 유용합니다.

JavaScript 파일의 확장자는 .js 입니다.

외부 스크립트를 사용하려면 스크립트파일 이름을 <script> 태그의 src 속성에 넣습니다.

예제 3
<script src="myScript.js"></script>

외부 스크립트 참조는 필요에 따라서 <head> 또는 <body> 에 배치할 수 있습니다.

스크립트는 <script> 태그가 있는 장소와 동일하게 동작합니다.

외부 스크립트에는 <script> 태그를 포함할 수 없습니다.

외부 JavaScript의 장점

스크립트를 외부 파일에 배치하면 다음과 같은 이점이 있습니다.

  • HTML과 코드를 구분합니다.
  • HTML 및 JavaScript 읽기 및 유지보수가 용이합니다.
  • 캐시된 JavaScript 파일을 통해 페이지 로드 속도를 향상시킬 수 있습니다.

여러 개의 스크립트 파일을 한 페이지에 추가하려면 여러 개의 스크립트 태그를 사용합니다.

예제 4
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

외부 참조

외부 스크립트는 다음 3가지 방법으로 참조할 수 있습니다.

  • 전체 URL (풀 웹 주소)
  • 파일 경로 포함(/js/ 등)
  • 경로 없음

다음 예제에서는 전체 URL을 사용하여 myScript.js에 링크합니다.

예제 5
<script src="https://www.w3schools.com/js/myScript.js"></script>

다음 예제에서는 파일 경로를 사용하여 myScript.js에 링크합니다.

예제 6
<script src="/js/myScript.js"></script>
예제 7

다음 예제에서는 myScript.js에 링크하기 위해 경로를 사용하지 않습니다.

<script src="myScript.js"></script>