JavaScript ist eine dynamische und leistungsstarke Programmiersprache, die zur Verbesserung von Websites verwendet werden kann. Die Flexibilität von JavaScript ermöglicht die Integration in HTML (die Auszeichnungssprache des Webs). In diesem Blogbeitrag erfahren Sie, wie Sie JavaScript in HTML integrieren können, indem Sie die Funktionen der einzelnen Teile erklären. Er enthält auch Beispiele als Referenz.
Fangen wir an!
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.
<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).
<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 JavaScript-Funktionen 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.
<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>Event-Handler
Javascript kann auch über einen Event-Handler jedem Element zugewiesen werden:
<body onload="machEtwas();"></body>
<div onclick="machEtwas();"></div>
<input onchange="machEtwas();" />
<form onsubmit="machEtwas();"></form>Bessere Praxis: Event Handler in einem Skript hinzufügen.
Einbinden in Links: Protokoll „javascript“
Bei einem Link kann auch Javascript direkt als Link-Ziel verwendet werden. Das geschieht über das „javascript“-Protokoll innerhalb eines Link-Ziels:
<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:
<a href="linkziel.html" onclick="machEtwas(); return false;">
- Das RGB-Farbsystem - 26. Januar 2022
- Logodesign: Gestaltungsgrundlagen - 28. Dezember 2021
- Was ist Kerning bzw. Unterschneidung? - 28. Dezember 2021
