JavaScript in HTML einbinden

0 | 44277 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "JavaScript in HTML einbinden" mit Ihrem Wissen!

Anzeige Hier werben

Code direkt in HTML-Datei schreiben

Am Einfachsten bindet man Javascript mit dem <script> Tag ein und schreibt in dessen Inhalt direkt die Javascript Befehle.

 
HTML
1
2
3
<script type="text/javascript">
    // der JavaScript Code
</script>

Das Attribut type muss auf den Wert text/javascript gesetzt werden, damit der Browser weiss um was für ein Script es sich hierbei handelt. Sonst muss kein weiteres Attribut, wie etwa language gesetzt werden, da allen Browsern seit mehr als 10 Jahren das type-Attribut genügt.

<script> muss nicht im head der Seite stehen, sondern kann auch irgendwo im body liegen.

Über externe Datei

Die direkte Einbindung empfiehlt sich nur zu Testzwecken und für kleinere Scripte. Will man in mehreren Dateien den gleichen Code benutzen sollte man das Javascript in einer externen Datei Speichern (Dateiendung .js).

 
HTML
1
<script type="text/javascript" src="./der/pfad/zu/der/datei.js"></script>

Jetzt muss der Code nur noch einmal vom Browser abgerufen werden und wird dann beim Besucher zwischengespeichert, wodurch die Seite schneller lädt, als wenn der Code auf jeder Seite direkt eingebunden wäre.

"graziöser Rückzug" von Skripten

Es ist wichtig, dass auch Benutzer mit veralteten Browsern, die bestimmte Javascriptfunktionen nicht unterstützen, oder Besucher, die Javascript deaktiviert haben alle Inhalte der Seite alle ansehen können.

Dies muss (oder kann) dann zwar nicht so komfortabel sein, sollte aber möglich sein. Ein Vorteil ist dann zum Beispiel, dass die Seite auch von Suchmaschinen komplett durchforstet werden kann.

Um dies zu erreichen empfiehlt es sich Skripte zu schreiben, die sich graziös zurückziehen (englisch graceful fallback), d.h. die Seiten werden so geschrieben, dass sie ohne Javascript problemlos funktionieren. Das Skript verändert die Seite dann danach erst.

JavaScript deaktiviert, was nun?

Statt graceful fallback kann man auch <noscript> zur Hand nehmen und darin den Inhalt ohne Javascript aufbereiten oder den Benutzer drauf hinweisen, dass er etwas verpasst.

Der Inhalt des <noscript> Tags ist nur für Benutzer mit deaktiviertem Javascript sichtbar.

 
HTML
1
2
3
4
5
6
7
<noscript>
    Hier sollten alternative Methoden angegeben werden, um 
    Inhalte, die sonst nur per JS zu sehen sind anzuzeigen.
    
    Nur wenn dies wirklich nicht Möglich ist, sollte eine Meldung
    erscheinen, dass man Javascript aktivieren soll.
</noscript>

TODO: ecmascript Einbindung, gute Fallbacklösungen falls javascript nicht an oder zu alte Version(Stichwort: barrierefreie Inhalte erst durch javascript entferenen, dadruch maximale Sicherheit)

Event-Handler

Javascript kann auch über einen Event-Handler jedem Element zugewiesen werden.

 
HTML
1
2
3
4
<body onload="machEtwas();"></body>
<div onclick="machEtwas();"></div>
<input onchange="machEtwas();"></div>
<form onsubmit="machEtwas();"></div>

Bessere Praxis: Event Handler in einem Skript hinzufügen

Bei einem Link kann auch Javascript direkt als Link-Ziel verwendet werden. Das geschieht über das "javascript"-Protokoll.

 
HTML
1
<a href="javascript:machEtwas();">

Die Einbindung von Javascript direkt im href-Attributs eines Links ist allgemein eine schlechte Idee, da der Link dann nur noch mit aktiviertem Javascript funktioniert. Desweiteren funktioniert der Link dann nicht mehr mit der mittleren Maustaste.

Besser ist die Angabe eines gültigen href-Attributs und die Verwendung des onclick-Handlers um JavaScript beim Klick auszuführen. Die normale Aktion, nämlich das Aufrufen des Links, kann über return false verhindert werden.

 
HTML
1
<a href="linkziel.html" onclick="machEtwas(); return false;">

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "JavaScript in HTML einbinden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "JavaScript in HTML einbinden" hier bearbeiten.