Websiteentwicklung: JavaScript: Der script-Tag

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

Kodierung

JavaScript-Programme sind nicht allein ablauffähig. JavaScript-Quelltext wird über Einbettung in eine (X)HTML-Datei oder SVG-Datei zum ablauffähigen Programm.

Das Element script

Damit das Darstellungsprogramm erkennt, dass es sich nicht um (X)HTML oder SVG handelt, sondern um JavaScript, muss der Quelltext in ein Element script notiert werden, also zwischen script-Markierungen (englisch: tags) eingeschlossen werden.

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

Benutzt man XHTML oder SVG, dann kann man, um Fehlinterpretationen zu vermeiden, schreiben:

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

Im Unterschied zu HTML wird der Inhalt des Elementes script ansonsten interpretiert, was insbesondere bei der Verwendung der Zeichen < und & zu Unterschieden zwischen SVG und XHTML einerseits und HTML andererseits führt. Bei SVG und XHTML wird < als Beginn einer Markierung interpretiert, & als Beginn einer Entität/Abkürzung. Obige Notation bewirkt, dass der Inhalt des Elementes als CDATA angesehen wird und damit nicht interpretiert wird. Ohne die Notation sind also für XML problematische Zeichen, insbesondere < und & auch in diesem Element zu maskieren, mit der Notation oder bei HTML hingegen nicht. Bei HTML wird der Inhalt von script aus historischen Gründen gleich als CDATA interpretiert. Problematisch ist dies insbesondere, wenn der Inhalt unverändert manchmal als HTML verwendet wird, manchmal als XHTML. Obige Notation läßt diese flexible Verwendung zu.

Während das Element script bei XML-Formaten wie XHTML oder SVG ferner immer exakt mit der Endmarkierung endet, endet es bei HTML bereits, sobald die Zeichenfolge </ gefunden wird, von daher ist auch diese Zeichenfolge bei HTML innerhalb des Elementes zu vermeiden. Ist es aber notwendig, diese Zeichenfolge innerhalb eines Skriptes zu verwenden, so empfiehlt es sich primär, einfach auf eine externe Skriptdatei zu verweisen, was auch die pauschale Methode ist, wenn man ein Dokument manchmal als HTML aussenden will und manchmal als XHTML. Allerdings kann man auch einen Teil der Zeichenfolge maskieren, wie man das macht, hängt von der verwendeten Skriptsprache ab. Bei JavaScript kann man statt </ einfach <\/ notieren. Aus Sicht von HTML ist das keine Endmarkierung. Aus Sicht von JavaScript ist \/ nur ein maskierter Schrägstrich, der dann entsprechend als Schrägstrich interpretiert wird.

Siehe auch: Anmerkungen zu CDATA in HTML4

Auslagern von JavaScript

Alternativ ist es möglich, den JavaScript-Quelltext in eine gesonderte Datei auszulagern – beispielsweise als „JsFunction.js“. Es gibt praktische Gründe, SVG oder (X)HTML (= der eigentliche Inhalt einer Seite), CSS (= das Design der Seite) und Script (= die dynamische Dekoration 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 Dokumente nur in kleiner Stückzahl schreiben und deren Skripte klein und von einfachem Anspruch sind, eignen sich beide Vorgehensweisen gleich gut. Die strikte Trennung in verschiedene Dateien erleichtert ferner die Einhaltung des Schichtenmodells, also die Trennung von Inhalt ((X)HTML) und Dekoration (CSS, JavaScript). Dies kann es dann auch erleichtern, barrierefreie und zugängliche Projekte zu realisieren, die die Information unabhängig davon zugänglich anbieten, ob die Interpretation von JavaScript aktiviert ist oder nicht.

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

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

Bei dieser Lösung ist zu beachten, dass weiterer JavaScript-Quelltext im Element script 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 Element script einsetzen und darin den individuellen Quelltext unterbringen.

Beispiel:

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

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

Platzierung von JavaScript im (X)HTML-Dokument

Grundsätzlich kann man JavaScript im Element head oder im Element body eines (X)HTML-Dokumentes unterbringen. Meistens, aber nicht notwendigerweise, findet man das JavaScript im Element 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>
    <p>...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt
    ...Seiteninhalt</p>
  </body>
</html>

Die Einrückungen im (X)HTML/JavaScript-Quelltext haben keinerlei syntaktische Funktion. Sie machen den Quelltext allerdings übersichtlicher und erleichtern es, den Quelltext später zu verändern oder zu erweitern. Geizen Sie – im eigenen Interesse – nicht mit Kommentaren! Mancher Quelltext, der dem Programmierer während des Schreibens 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>

Element noscript

Im Element noscript können Sie noch Hinweise für Nutzer unterbringen, die in ihrem Darstellungsprogramm die JavaScript-Interpretation abgeschaltet haben oder deren Darstellungsprogramm gar kein JavaScript versteht. Dies wird zumeist aber dann gar nicht notwendig sein, wenn die Seite ohnehin bereits nach dem Konzept von Barrierefreiheit und Zugänglichkeit gestaltet wurde, also der Inhalt unabhängig davon bereitgestellt wird, ob nun die Interpretation von JavaScript aktiviert ist oder nicht.

Hilfreich kann das Element allerdings sein, wenn man sich gleich zu Beginn eines Projektes entschieden hat, den Leser zwischen einer Skript-Version und einer Skript-freien Version wählen zu lassen. Gelangt dann ein Nutzer etwa per Suchmaschine versehentlich auf eine Unterseite mit Skript, so kann einfach ein Verweis auf die Skript-freie Version angeboten werden, um den Eindruck eines defekten Projektes zu vermeiden:

<noscript>
   <p>Diese Seiten-Variante erfordert die Interpretation von JavaScript!
   Ohne Interpretation von JavaScript ist der gleiche Inhalt auf der 
   <a href="index.php">Skript-freien Seite</a> verfügbar.</p>
</noscript>

Es ist allerdings deutlich eleganter, sich konsequent an das Schichtenmodell zu halten und den kompletten Inhalt ohne Skript verfügbar und funktionsfähig zu machen und dann nach der Dekoration mit CSS im Bedarfsfalle in einer weiteren, davon unabhängigen Schicht eine dynamische Alternativansicht per JavaScript hinzuzufügen.

Für HTML5 ist zudem in der Empfehlung angemerkt, dass noscript nicht bei Verwendung von XML-Syntax verwendet werden soll. In der Sprachvariante sollte das Skript also immer so gestaltet sein, dass die Verwendung nicht notwendig ist. Da per Voraussetzung der komplette Inhalt sowieso immer ohne Skriptinterpretation zugänglich sein muß, ist folglich lediglich auf eine Gestaltung zu achten, bei welcher alle für die Skript-Alternative relevanten Änderungen über das Skript nachgeliefert werden. Es ist also grundsätzlich nach dem Schichtenmodell vorzugehen, um Barrieren durch das Skript zu vermeiden.

Kompletter (X)HTML-Rahmen inkl. (X)HTML-Formular-Teil

JavaScript dient gelegentlich dazu, Formulareingaben noch während des Ausfüllens zu kontrollieren. 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>(X)HTML / Java-Script Rahmen-Dokument für Formular</title>
      <script type="text/javascript">
         /* Hier stehen eine
            oder mehrere
            JavaScript-Deklarationen
            und Funktionen
         */
      </script>
   </head>
   <body>
      <noscript>
         <!-- Hier steht in Blockelementen zusätzlicher Inhalt für Programme
              mit abgeschalteter Interpretation von JavaScript
         -->
      </noscript>
      <!--
      Hier befinden sich Blockelemente von (X)HTML und darin etwa
       - Texte
       - Bilder
       - Links
       - ...
      -->
      <form action="ziel.php" method="post" target="">
         <!--
         Hier befinden sich in Elementen fieldset oder in Blockelementen
         (X)HTML-Formularelemente wie
          - Textfelder
          - Buttons
          - Checkboxen
          - Radio-Buttons
          - ...
         -->
      </form>
   </body>
</html>

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

Ferner ist darauf zu achten, dass das Formular immer auch ohne Skript absendbar und auswertbar ist. Es ist zudem bei der Auswertung auf dem Dienstrechner stets davon auszugehen, dass die Kontrolle per JavaScript nicht funktioniert hat oder deaktiviert war.

HTML5 bietet außerdem zahlreiche neue Formularfunktionen, um eine Kontrolle von typischen Eingaben durch das Darstellungsprogramm vornehmen zu lassen, was dafür derartige Skripte redundant oder überflüssig macht.

Aufgaben + Lösungen

• Aufgaben
• Lösungen

---