JavaScript-HTML 파일에 배치

HTML 문서 어디에나 JavaScript 코드를 포함 할 수있는 유연성이 있습니다. 그러나 HTML 파일에 JavaScript를 포함하는 가장 선호되는 방법은 다음과 같습니다.

<head> ... </ head> 섹션의 스크립트.
<body> ... </ body> 섹션의 스크립트.
<body> ... </ body> 및 <head> ... </ head> 섹션의 스크립트.
외부 파일에 스크립트 한 다음 <head> ... </ head> 섹션에 포함합니다.

다음 섹션에서는 다양한 방식으로 HTML 파일에 JavaScript를 배치하는 방법을 살펴 보겠습니다.

<head> ... </ head> 섹션의 자바 스크립트

사용자가 어딘가를 클릭 할 때와 같은 일부 이벤트에서 스크립트를 실행하려면 다음과 같이 해당 스크립트를 헤드에 배치합니다.

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

이 코드는 다음과 같은 결과를 생성합니다.

<body> ... </ body> 섹션의 JavaScript

페이지가로드 될 때 스크립트가 페이지에 콘텐츠를 생성하도록 스크립트를 실행해야하는 경우 스크립트는 문서의 <body> 부분에 들어갑니다. 이 경우 JavaScript를 사용하여 정의 된 함수가 없습니다. 다음 코드를 살펴보십시오.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

이 코드는 다음과 같은 결과를 생성합니다.

<body> 및 <head> 섹션의 JavaScript

다음과 같이 JavaScript 코드를 <head> 및 <body> 섹션에 모두 넣을 수 있습니다.

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

이 코드는 다음 결과를 생성합니다-

외부 파일의 JavaScript

JavaScript로 더 광범위하게 작업하기 시작하면 사이트의 여러 페이지에서 동일한 JavaScript 코드를 재사용하는 경우가있을 수 있습니다.

여러 HTML 파일에서 동일한 코드를 유지하도록 제한되지 않습니다. 그만큼script 태그는 자바 스크립트를 외부 파일에 저장 한 다음 HTML 파일에 포함 할 수있는 메커니즘을 제공합니다.

다음은 다음을 사용하여 HTML 코드에 외부 JavaScript 파일을 포함하는 방법을 보여주는 예입니다. script 태그와 src 속성.

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

외부 파일 소스에서 JavaScript를 사용하려면 확장자가 ".js"인 간단한 텍스트 파일에 모든 JavaScript 소스 코드를 작성한 다음 위에 표시된대로 해당 파일을 포함해야합니다.

예를 들어 다음 콘텐츠를 filename.js 파일을 사용하면 sayHello filename.js 파일을 포함시킨 후 HTML 파일에서 함수를 사용할 수 있습니다.

function sayHello() {
   alert("Hello World")
}