JavaScript - Platzierung in HTML-Datei

Es besteht die Flexibilität, JavaScript-Code an einer beliebigen Stelle in ein HTML-Dokument aufzunehmen. Die am meisten bevorzugten Möglichkeiten, JavaScript in eine HTML-Datei aufzunehmen, sind jedoch folgende:

Skript im Abschnitt <head> ... </ head>.
Skript im Abschnitt <body> ... </ body>.
Skript in den Abschnitten <body> ... </ body> und <head> ... </ head>.
Schreiben Sie ein Skript in eine externe Datei und fügen Sie es dann in den Abschnitt <head> ... </ head> ein.

Im folgenden Abschnitt werden wir sehen, wie wir JavaScript auf verschiedene Arten in eine HTML-Datei einfügen können.

JavaScript im Abschnitt <head> ... </ head>

Wenn Sie möchten, dass ein Skript für ein Ereignis ausgeführt wird, z. B. wenn ein Benutzer irgendwo klickt, platzieren Sie dieses Skript wie folgt im Kopf:

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

Dieser Code führt zu folgenden Ergebnissen:

JavaScript im Abschnitt <body> ... </ body>

Wenn zum Laden der Seite ein Skript ausgeführt werden muss, damit das Skript Inhalte auf der Seite generiert, wird das Skript in den <body> -Teil des Dokuments verschoben. In diesem Fall hätten Sie keine mit JavaScript definierte Funktion. Schauen Sie sich den folgenden Code an.

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

Dieser Code führt zu folgenden Ergebnissen:

JavaScript in den Abschnitten <body> und <head>

Sie können Ihren JavaScript-Code wie folgt in die Abschnitte <head> und <body> einfügen:

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

Dieser Code erzeugt das folgende Ergebnis:

JavaScript in externer Datei

Wenn Sie anfangen, intensiver mit JavaScript zu arbeiten, werden Sie wahrscheinlich feststellen, dass es Fälle gibt, in denen Sie identischen JavaScript-Code auf mehreren Seiten einer Site wiederverwenden.

Sie sind nicht darauf beschränkt, identischen Code in mehreren HTML-Dateien zu verwalten. Dasscript Tag bietet einen Mechanismus, mit dem Sie JavaScript in einer externen Datei speichern und dann in Ihre HTML-Dateien aufnehmen können.

Hier ist ein Beispiel, um zu zeigen, wie Sie mithilfe von eine externe JavaScript-Datei in Ihren HTML-Code aufnehmen können script Tag und seine src Attribut.

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

Um JavaScript aus einer externen Dateiquelle zu verwenden, müssen Sie Ihren gesamten JavaScript-Quellcode in eine einfache Textdatei mit der Erweiterung ".js" schreiben und diese Datei dann wie oben gezeigt einschließen.

Beispielsweise können Sie den folgenden Inhalt behalten filename.js Datei und dann können Sie verwenden sayHello Funktion in Ihrer HTML-Datei nach dem Einfügen der Datei filename.js.

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