HTML: JavaScript einbinden

JavaScript , VBScript und andere Skriptsprachen können dazu beitragen, die Interaktivität zwischen User und Seite zu fördern. Sie sind meist keineswegs mit HTML zu vergleichen und setzten größtenteils da an, wo HTML aufhört: Aktivität. So ist es z.B. möglich aktiv in HTML-Dokumente mittels ( Java )Script einzugreifen, Dokumente können personalisiert werden oder andere Dinge können geschehen. Da diese Sprachen einen sehr großen Umfang haben, wird hier lediglich auf die Verwednung in HTML eingegangen werden.

Skripte definieren

Skripte werden ähnlich wie CSS in HTML eingebunden. Sie können entweder in den head oder in den body notiert werden. Hierzu wird das script-Element verwendet. Auch hier wird wieder alles was nicht HTML ist in einem Kommentar eingeschlossen. Beispiel:

<script language="JavaScript">
<!--
... JavaScript Code ...
//-->
</script> 

Das language-Attribut bezeichnet dabei die Programmiersprache um die es sich handelt. Die häufigsten sind z.B.:

• JavaScript - definiert den Code als JavaScript -Code
• JavaScript 1.0 - definiert den Code als JavaScript -Code Version 1.0
• JavaScript 1.1 - definiert den Code als JavaScript -Code Version 1.1
• JavaScript 1.2 - definiert den Code als JavaScript -Code Version 1.2
• JavaScript 1.3 - definiert den Code als JavaScript -Code Version 1.3
• JavaScript 1.4 - definiert den Code als JavaScript -Code Version 1.4
• JavaScript 1.5 - definiert den Code als JavaScript -Code Version 1.5
• JScript - definiert den Code als JScript-Code (Microsoft)
• VBScript - definiert den Code als VBScript-Code (Microsoft)

Externe Scripte

Mit dem src-Attribut können Sie externe Scripte einbinden. Als Wert notieren Sie hier die URL/Pfad der Script-Datei. Beispiel:

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

Hierbei müssen nicht unbedingt die Kommentarzeilen eingefügt werden, es ist aber nicht falsch, wenn man es dennoch tut.

Im Beispiel wurde zusätzlich das type-Attribut notiert. Dieses dient dazu, dem Browser zu sagen, um welche Art von Datei es sich bei der eingebundenen handelt. Für die Sprache JavaScript ist dies im allgemeinen mit dem Wert text/javascript ausreichend definiert. VBScript wird allgemein mit text/vbscript und JScript mit text/jscript definiert.

defer und async

Im Normalfall wartet der Browser an der Stelle solange, bis das Script heruntergeladen und ausgeführt wurde. Das kann dazu führen, dass die Seite sich etwas verzögert aufbaut.

Um das zu verhindern gibt es die Attribute async und defer:

• async Das externe Script wird asynchron, also nebenbei, heruntergeladen und ausgeführt, sobald es geladen wurde
• defer Das Script wird erst ausgeführt, wenn die Seite komplett aufgebaut wurde.

Wenn das JavaScript direkt wichtige Elemente im Layout verändert, ist async eine gute Wahl. Sollte das Script nur auf verschiedene Ereignisse reagieren, sollte defer genutzt werden.

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

Reagieren und Events

Zustäzlich können Sie bestimmen, bei welchem Event/Ereignis das Script gestartet werden soll (es reagiert). Dazu sind in JavaScript und JScript sogenannte Event-Handler definiert. Einige davon wären z.B.: onload, onclick, onmouseover oder onsubmit (siehe Dokumentation JavaScript).

Diese können zum Einen selbst ein Attribut darstellen, zum Anderen können sie als Wert für das event-Attribut des script-Elements gelten. Bei beiden Varianten sagen sie aus, bei welchem Ereignis etwas bestimmtes geschehen soll.

Eigenes Attribut

Werden diese Events als eigenständiges Attribut verwendet (z.B. onsubmit als Attribut des form-Elements), muss als Attributwert eine oder mehrere Funktion/en notiert werden (mehrere durch Semikolon (;) voneinander getrennt). Bei Eintritt des Ereignisses werden diese dann ausgeführt. Beispiel:

<script language="JavaScript">
<!--
 function abc(){alert('Formular wird abgeschickt!');}
//-->
</script>
...
<form ... onsubmit="abc()" >
 <input type="submit">
</form>

Event-Attribut

Werden diese Events als Werte für das event-Attribut des script-Elements verwendet, so wird bei Eintritt des bestimmten Ereignisses der Code innerhalb des Skriptbereiches ausgeführt. Beispiel:

<script for="document" event="onkeypress" language="JScript">
<!--
 alert('Taste gedrückt');
//-->
</script> 

Bitte beachten Sie dabei, dass das event-Attribut nur bei JScript Anwendungen verwendet werden kann. Zusätzlich sollte dazu das Objekt bestimmt werden.

Objekt bestimmen

Mit dem for-Attribut bestimmen Sie, für welches Objekt ein bestimmtes Script bestimmt sein soll. (Dies macht allerdings nur im Zusammenhang mit dem event-Attribut Sinn.) Als Wert kann hier jedes Objekt definiert werden, welches laut (Script-)Sprache im aktuellen Dokument bzw. Fenster existiert. Im allgemeinen könnten das beispielsweise document (für das Dokument selbst) oder ein Element sein (Die Beziehung zum Element wird allgemein über seine ID hergestellt.). Beispiel:

<script for="Formular1" event="onsubmit" language="JScript">
<!--
alert('Formular abgeschickt!');
//-->
</script>
...
<form id="Formular1" ... >
... 

Bitte beachten Sie dabei, dass das for-Attribut nur bei JScript Anwendungen verwendet werden kann.

Schreiben verhindern

Mit dem defer-Attribut können Sie verhindern, dass das jeweilige Script in das Dokumentfenster schreibt. Damit werden Funktionen wie etwa document.write() oder document.writeln() blockiert. Beispiel:

<script defer language="JavaScript">
<!--
... 
//-->
</script> 

Beachten Sie dabei, dass das defer-Attribut keinen Wert erhält.

NoScript Bereich

Für Browser, die diese Funktionen nicht unterstützen, kann man zusätzlich einen NoScript Bereich notieren. Dieser wird ausgeblendet, wenn der Browser das Script interpretieren kann und angezeigt, wenn er dies nicht kann. Im NoScript Bereich können z.B. alternative Inhalte definiert werden, um auch den "benachteiligten" Besuchern einige Inhalte zu präsentieren.
Den NoScript Bereich definiert man mit dem noscript-Element. Es sollte möglichst direkt nach dem script-Element folgen, kann aber auch anderweitig notiert werden. Beispiel:

<script language="JavaScript">
<!--
...
//-->
</script>
<noscript>
...
<img ... >
Text
...
</noscript> 

Server-Side-JavaScript

Netscape hat, zusätzlich zum Client-Side- JavaScript , noch das Server-Side- JavaScript entwickelt. Dieses wird, anders als client-seitiges JavaScript mit dem server-Element eingebunden. Kommentare müssen dabei nicht unbedingt den Code umschließen, weitere Attribute werden nicht benötigt. Beispiel:

<p> Ihre IP-Adresse ist <server>write(request.ip);</server>.</p> 

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Image-Map

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project