Websiteentwicklung: JavaScript: Der script-Tag

Aus Wikibooks
Wechseln zu: Navigation, Suche

<< Grundsätzliches | Inhaltsverzeichnis | Index | Das erste Programm (Hallo Welt) >>

WikiBookTitel JavaScript.png
Wikipedia-logo-v2-de.svg
Wikipedia hat einen Artikel zum Thema:
JavaScript



Codierung[Bearbeiten]

JavaScript-Programme sind nicht allein ablauffähig. JavaScript-Code wird über Einbettung in eine HTML-Datei zum ablauffähigen Programm.

Der script-Tag[Bearbeiten]

Damit der Browser erkennt, dass es sich nicht um HTML handelt, sondern um JavaScript, muss der Code zwischen script-Tags eingeschlossen werden.

<script type="text/javascript">
  ...JavaScriptCode;
  ...JavaScriptCode;
  ...JavaScriptCode;
</script>

Benutzt man XHTML, dann muss man, um Fehlinterpretationen zu vermeiden, schreiben:[1]

<script type="text/javascript">
  // <![CDATA[
    ...JavaScriptCode;
    ...JavaScriptCode;
    ...JavaScriptCode;
  // ]]>
</script>

Auslagern von JavaScript[Bearbeiten]

Alternativ ist es möglich, den JavaScript-Code in eine gesonderte Datei auszulagern – beispielsweise als „JsFunction.js“. Es gibt praktische Gründe, (X)HTML (= die Architektur einer Seite), CSS (= das Design der Seite) und Script (= die dynamischen Anteile der Seite) möglichst weitgehend voneinander zu trennen, und Puristen würden diese niemals in einem einzigen Dokument vermengen. Aber für Gelegenheitsprogrammierer, die dynamische Webseiten nur in kleiner Stückzahl schreiben und deren Scripte klein und von einfachem Anspruch sind, eignen sich beide Vorgehensweisen gleich gut.

Wenn für das JavaScript eine eigene Datei angelegt wird, muss das (X)HTML-Dokument auf diese JS-Datei verweisen. Dies geschieht durch ein Attribut des Script-Tags:

<script src="JsFunction.js" type="text/javascript"></script>

Bei dieser Lösung ist zu beachten, dass weiterer JavaScript-Code zwischen den beiden Script-Tags ignoriert wird. Wenn man also nur ein paar allgemeine Funktionen einbinden möchte und zusätzlich seitenspezifische Programmierung benötigt, muss man zusätzlich ein zweites Script-Tag-Paar einsetzen und darin den individuellen Code unterbringen.

Beispiel:

<script src="JsFunction.js" type="text/javascript"></script>
<script type="text/javascript">
   ...individueller JavaScriptCode;
   ...individueller JavaScriptCode;
   ...individueller JavaScriptCode;
</script>

Script-Tags, die auf eine separate JavaScript-Datei verweisen, können grundsätzlich ebenso im Head wie an jeder beliebigen Stelle im Body stehen. Bei ihrer Platzierung muss man jedoch dieselben Überlegungen anstellen, die auch für die Platzierung von Scripts innerhalb einer HTML-Datei gelten. In beiden Fällen nämlich kann falsche Platzierung (z.B. Platzierung im Head, wenn das Script Text in ein Formular ausgeben soll, das erst im Body definiert ist) dazu führen, dass das Script nicht oder nicht wie erwartet läuft.

Platzierung von JavaScript im HTML-Dokument[Bearbeiten]

Grundsätzlich kann man JavaScript im <head>...</head> oder im <body>...</body> eines HTML-Dokumentes unterbringen. Meistens, aber nicht notwendigerweise, findet man das JavaScript im Head.

<html>
  <head>
    <title>Seiten-Titel</title>
      <script src="JsFunction.js" type="text/javascript"></script>
      <script type="text/javascript">
          ...// Hier steht der Kommentar zu JavaScript
          ...individueller JavaScriptCode;
          ...individueller JavaScriptCode;
          ...individueller JavaScriptCode;
          ...// Hier steht der Kommentar zu JavaScript
      </script>
  </head>
  <body>
    ...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt
  </body>
</html>

Die Einrückungen im HTML/JavaScript-Code haben keinerlei syntaktische Funktion. Sie machen den Code allerdings übersichtlicher und erleichtern es, die JavaScripte später zu verändern oder zu erweitern. Geizen Sie – im eigenen Interesse – nicht mit Kommentaren! Mancher Code, der dem Programmierer während der Codierung unmittelbar verständlich und selbsterklärend erscheint, wird sogar für ihn selber Monate oder Jahre später rätselhaft oder missverständlich, sofern er es unterlassen hat, sein JavaScript mit knappen, aber klaren Kommentaren zu beschreiben.

Kommentare können auf zwei verschiedene Arten im Dokument hinterlegt werden:

  • // erklärt alle ihm folgenden Zeichen bis zum Zeilenende zu einem Kommentar. Solch ein einzeiliger Kommentar kann auch hinter einer Anweisung stehen, um diese zu erläutern.
Beispiel:
<script type="text/javascript">
    //Hier steht der Kommentar zum Script (als separate, einzelne Zeile)
    //...individueller JavaScriptCode;
    var MwSt1 = 19; //Volle Mehrwertsteuer - (Kommentar hinter einer Anweisung)
    var MwSt2 = 7;  // verringerte MWSt: Lebensmittel, Buecher
    // ...individueller JavaScriptCode;
</script>
  • zwischen /* und */ kann ein mehrzeiliger Kommentar stehen.
Beispiel:
<script type="text/javascript">
    /* -----------------------------
       Dies ist ein mehrzeiliger
       Kommentar, mit dessen Hilfe
       auch umfassende Erläuterungen
       zum Programm hinterlegt
       werden können.
       ----------------------------- */
</script>

noscript-Tag[Bearbeiten]

Zwischen <noscript> und </noscript> können Sie noch Hinweise für Internet-User unterbringen, die in ihrem Web-Browser die JavaScript-Interpretation abgeschaltet haben oder deren Browser gar kein JavaScript versteht.

<noscript>
   Diese Seite wird nur mit JavaScript
   korrekt dargestellt. Bitte schalten
   Sie JavaScript in Ihrem Browser ein!
</noscript>

Kompletter HTML-Rahmen inkl. HTML-Formular-Teil[Bearbeiten]

JavaScript dient häufig dazu, Formulareingaben zu bearbeiten. Ein komplettes Gerüst für ein solches Dokument könnte so aussehen:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
   <head>
      <title>HTML / Java-Script Rahmen-Dokument für Formular</title>
      <meta name="description"
      content="Rahmen fuer HTML-Dokumente mit Formular + JavaScript">
      <meta name="author" content="Administrator">
      <meta name="keywords" content="HTML, JavaScript">
      <script type="text/javascript">
         /* Hier stehen eine
            oder mehrere
            JavaScript-Deklarationen
            und Functions
         */
      </script>
      <noscript>
         <!-- Hier steht der Text für Browser
              mit abgeschaltetem JavaScript
         -->
      </noscript>
   </head>
   <body>
      <!--
      Hier befinden sich die HTML-Gestaltungselemente wie
       - Texte
       - Bilder
       - Links
       - ...
      -->
      <form action="" method="" target="">
         <!--
         Hier befinden sich die HTML-Formularelemente wie
          - Textfelder
          - Buttons
          - Checkboxen
          - Radio-Buttons
          - ...
         -->
      </form>
   </body>
</html>

Anzumerken ist, dass "<!-- Kommentar...Kommentar -->" ein HTML-Kommentar ist.

Aufgaben + Lösungen[Bearbeiten]


  1. XHTML™ 1.0 4.8. Script and Style elements http://www.w3.org/TR/xhtml1/#h-4.8