JavaScript - Grundlagen - Einbindung
1. Die Parallelen von CSS zu JavaScript
... sind bei den Einbindungsmöglichkeiten nahezu identisch. Denn auch hier gibt es (fast) dieselben Varianten wie bei CSS. Deshalb werde ich mich bei der Reihenfolge der Möglichkeiten an der aus dem entsprechenden CSS-Abschnitt orientieren. Auf die Unterschiede weise ich euch natürlich explizit hin.
2. Innerhalb eines HTML-Elements
Hier können so genannte Event-Handler platziert werden. Das sind Routinen, die auf bestimmte Aktionen des Benutzers reagieren, wie zum Beispiel mit der Maus darauf klicken. Dabei können Funktionen oder Methoden aufgerufen werden. Ich bringe hier nur ein kleines Beispiel, die Details dazu kommen später.
<img src="button.gif" onclick="alert('Hallo');">
3. Innerhalb eines HTML-Dokuments
Hier wird der JavaScript-Code analog zum <style type="text/css">innerhalb des dafür vorgesehenen
<script>-Tags eingebunden. Allerdings solltet ihr nicht mehr die alte Schreibweise
benutzen
<script language="javascript">
//...Hier kommt der Code ...
</script>
sondern die neue, weil sonst eurer HTML-Validator rummosern könnte.
<script type="text/javascript">
//...Hier kommt der Code ...
</script>
Für die Hardcore-Programmierer gibt es noch eine dritte Variante (bitte auf die Reihenfolge achten und an den Validator denken). Die ist aber ehrlich gesagt überflüssig wie ein Kropf(f).
<script type="text/javascript" language="javascript">
//...Hier kommt der Code ...
</script>
Ein Hinweis
Bei HTML5 ist language="javascript" mittlerweile obsolet. Und auch auf type="text/javascript" kann verzichtet werden. Die Details
findet ihr hier.
Oben, unten oder wo?
Im Gegensatz zu CSS, wo man den Code normalerweise im head-Bereich einbinden sollte, gibt es bei JavaScript keinerlei
Beschränkungen. Man kann die Code-Abschnitte hinhauen, wo es einem in den Kram passt. Und leider wird das auch sehr häufig so gemacht.
Allerdings leidet die Übersichtlichkeit darunter. Mein genereller Tipp. Wenn ihr JavaScript-Code direkt in eine Seite einbindet, so
macht das bitte erst mal komplett im head-Bereich. Andere Möglichkeiten sollten ihr erst dann nutzen, wenn ihr über
das entsprechende Knowhow verfügt.
4. In einer externen Datei
Funktioniert genau so wie bei den CSS-Dateien, nur die Syntax ist ein klein wenig anders. Wenn man mit relativen Pfaden innerhalb der JavaScript-Datei arbeitet, so wird der relativ zur jeweiligen HTML-Seite gesetzt. Das ist leider anders als bei CSS.
<script src="menue.js" type="text/javascript"></script>
Wichtig
Früher hat man das genau so wie bei CSS-Einbindungen in den <head>-Bereich gesetzt. Mittlerweile geht man in bestimmten
Fällen einen anderen Weg und platziert das <script>-Tag direkt unterhalb des schließenden </body>-Tags.
Dazu aber später mehr.
5. Wann was
Anfänger sollten zuerst Event-Handler auf jeden Fall in das jeweilige HTML-Tag packen. Und die entsprechenden
Funktionen in den head-Bereich des jeweiligen Dokuments einbetten. Oder, wenn sie externe Dateien nutzen, den Verweis darin
ablegen. Ach, macht es einfach so, wie ich es in den Tutorials vorgebe. Den Fortgeschrittenen unter euch rate ich, sich direkt mal mit
dem DOM-Scripting zu beschäftigen, dann wisst ihr selber, wohin euer Code gehört.
Das grundsätzliche Problem
... liegt darin, dass der Anwender bereits irgendwo draufklicken kann, auch wenn die Seite noch nicht vollständig geladen ist! Da könnte es dann schon mal passieren, dass man auf ein HTML-Element zugreifen möchte, auch wenn das bis dato noch gar nicht vorhanden ist. Dann haut uns der Browser eine Fehlermeldung um die Ohren und nichts funktioniert mehr.
Zu diesem Problem gibt es mehrere Lösungsmöglichkeiten. Man baut den JavaScript-Code grundsätzlich am Ende einer Seite ein (ob nun direkt
oder als Verlinkung) oder man setzt die Event-Handler in ein window.onload. Oder man macht beides, damit man auf der sicheren
Seite ist. Die Details dazu kommen später bei den Tutorials.