Stil mit {stil}

Mai 2008

HTML-Tag script • Skriptanweisungen in HTML-Seiten einbinden

Das <script>-Tag setzt Skriptcode innerhalb des HEAD- und BODY-Elements eines HTML-Dokuments. Das Tag wird in erster Linie zur Einbindung von Javascript-Programmen innerhalb der HTML-Seite genutzt.

 +----- Anfang des Scriptbereichs
 |	   +----- Scriptsprache
 |         |
 V         V
<script type="text/javascript" charset="utf-8">
   var h = document.getElementById('hcollect');
   h.innerHTML = '<h1>Scripte Einbinden</h1>';
</script>
 ^
 |
 +----- Ende des Scriptbereichs

<script src="script.js" type="text/javascript" defer="defer"></script>
         ^
         |
         +----- Externe Scriptdatei einbinden

Das script-Tag darf sowohl im HEAD- also auch innerhalb des BODY-Elements einer Seite notiert werden. Der Übersichtlichkeit zuliebe bietet sich der Bereich innerhalb des HEAD-Elements an.

Attribute für script

charset

legt den Zeichensatz fest, der für das Skript benutzt wird.

defer

informiert den Server, dass das Skript den Inhalt der Seite nicht schon beim Laden serverseitig ändert. Wenn ein Script in eine HTML-Seite eingebunden wird, muss das Script schon beim Parsen der Seite evaluiert werden und das Laden der Seite verzögert sich. Das defer-Attribut besagt, dass das Script erst evaluiert werden muss, wenn die Seite geladen und aufgebaut ist. Damit soll die Seite schneller geladen werden.

src

die URL der Datei, die den Skriptcode enthält. Eine Auslagerung des Skriptcodes in eine separate Datei ist sinnvoll, wenn das Skript auf mehreren Seiten einer Website genutzt wird. Der Browser lädt und führt das Skript als separate Datei aus.

type

definiert die benutzte Skriptsprache. Die beiden gebräuchlichsten Werte sind text/javascript und text/vbscript.

Wo ist das language-Attribut?

Früher setzen Entwickler ein language-Attribut in das <script>-Tag, um dem Broswer die verwendete Javascript-Version mitzuteilen. In der Praxis können Browser aber mit dem language-Attribut nichts anfangen. Ob der Browser tatsächlich in der Lage ist, das Skript auszuführen, wird im Skript durch einen Mechanismus geprüft, der „Object-Detection“ – Objekterkennung – genannt wird. Das language-Attribut ist in XHTML unerwünscht, da es als unzuverläßig gilt.

Scripte in echten XHTML-Seiten

Wenn nicht HTML, sondern „echtes“ XHTML geschrieben wird, muss Script-Code als CDATA gekennzeichnet werden, da ansonsten das Kleiner- und Größerzeichen als Anfang/Ende eines fehlerhaften Tags angesehen würden.

<script type="text/Javascript">
/* <![CDATA[ */
  /* Javascript-Kommentar wird wie gewohnt in Kommentarklammern gesetzt */
  if (num < 10) {
     return false;
  }
  /** Damit der Browser <[CDATA[ ... ]]> nicht als Fehler  
      ansieht, wird die <[CDATA[ ... ]]>-Anfang- und Ende-Sektion in 
      Javascript-Kommentare eingeschlossen.  
  */
/* ]]> */
</script>

Das sind schon wahre Blüten des Formalismus, die hier hervorgebracht wurden: Alles andere als intuitiv.

Einbinden eines einfachen Javascripts

Sag Hallo

<p><button id="halloScript">Sag Hallo</button></p>
… 
<script type="text/javascript">
   var halloScript = document.getElementById("halloScript");
   halloScript.onclick = function () {
      alert ("Hallo Script");
   }
</script>

Der button-Tag ist durch ein id-Attribut halloScript eindeutig identifiziert. Das Skript liegt im HTML-Quelltext hinter dem button-Tag, so dass kein besonderer Mechanismus gebraucht wird, der feststellt, ob das Dokument bereits geladen ist. Die Platzierung im HTML-Quelltext hält das Script einfach, kann aber auch nur für derart einfache Beispiele empfohlen werden.

Zum Seitenanfang