JavaScript - umieszczenie w pliku HTML

Istnieje możliwość umieszczenia kodu JavaScript w dowolnym miejscu dokumentu HTML. Jednak najbardziej preferowanymi sposobami włączenia JavaScript do pliku HTML są:

Skrypt w sekcji <head> ... </head>.
Skrypt w sekcji <body> ... </body>.
Skrypt w sekcjach <body> ... </body> i <head> ... </head>.
Skrypt w zewnętrznym pliku, a następnie umieść go w sekcji <head> ... </head>.

W następnej sekcji zobaczymy, jak na różne sposoby możemy umieścić JavaScript w pliku HTML.

JavaScript w sekcji <head> ... </head>

Jeśli chcesz, aby skrypt był uruchamiany na jakimś zdarzeniu, na przykład gdy użytkownik gdzieś kliknie, umieść ten skrypt w głowie w następujący sposób -

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

Ten kod da następujące wyniki -

JavaScript w sekcji <body> ... </body>

Jeśli potrzebujesz skryptu do uruchomienia podczas ładowania strony, tak aby skrypt generował zawartość strony, skrypt trafia do części <body> dokumentu. W takim przypadku nie miałbyś żadnej funkcji zdefiniowanej za pomocą JavaScript. Spójrz na poniższy kod.

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

Ten kod da następujące wyniki -

JavaScript w sekcjach <body> i <head>

Możesz umieścić swój kod JavaScript w sekcjach <head> i <body> w następujący sposób -

<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>

Ten kod da następujący wynik -

JavaScript w pliku zewnętrznym

Gdy zaczniesz intensywniej pracować z JavaScript, prawdopodobnie okaże się, że są przypadki, w których ponownie używasz identycznego kodu JavaScript na wielu stronach witryny.

Nie jesteś ograniczony do utrzymywania identycznego kodu w wielu plikach HTML. Plikscript tag zapewnia mechanizm umożliwiający przechowywanie kodu JavaScript w zewnętrznym pliku, a następnie umieszczanie go w plikach HTML.

Oto przykład pokazujący, jak możesz dołączyć zewnętrzny plik JavaScript do kodu HTML za pomocą script tag i jego src atrybut.

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

Aby używać JavaScript z zewnętrznego źródła plików, musisz napisać cały kod źródłowy JavaScript w prostym pliku tekstowym z rozszerzeniem „.js”, a następnie dołączyć ten plik, jak pokazano powyżej.

Na przykład możesz zachować następującą zawartość w formacie filename.js plik, a następnie możesz użyć sayHello funkcji w pliku HTML po dołączeniu pliku filename.js.

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