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



Kodierung[Bearbeiten]

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[Bearbeiten]

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:[1]

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

Auslagern von JavaScript[Bearbeiten]

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 zwischen 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[Bearbeiten]

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[Bearbeiten]

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 zu wählen. 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 mit in einer weiteren, davon unabhängigen Schicht eine dynamisch Alternativansicht per JavaScript hinzuzufügen.

Kompletter (X)HTML-Rahmen inkl. (X)HTML-Formular-Teil[Bearbeiten]

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 Blockelemente von (X)HTML und darin etwa
       - Texte
       - Bilder
       - Links
       - ...
      -->
      <form action="ziel.php" method="post" target="">
         <!--
         Hier befinden sich die 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.

Aufgaben + Lösungen[Bearbeiten]


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